AGGrid-Portal / src /styles /grid.css
Bhanushray's picture
Upload 42 files
a435638 verified
/* ─────────────────────────────────────────────────────────────────────────
AG-Finance Portal – Grid CSS
───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Force Inter everywhere */
body, * {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
/* ── AG-Grid must fill its wrapper div ────────────────────────────────── */
.ag-theme-alpine,
.ag-theme-alpine-dark {
height: 100% !important;
width: 100% !important;
--ag-font-family: 'Inter', 'Segoe UI', sans-serif;
--ag-font-size: 12.5px;
--ag-row-height: 34px;
--ag-header-height: 38px;
--ag-border-radius: 0;
line-height: normal;
}
/* ── LIGHT THEME ──────────────────────────────────────────────────────── */
.ag-theme-alpine {
--ag-background-color: #ffffff;
--ag-header-background-color: #f8fafc;
--ag-row-hover-color: #eff6ff;
--ag-selected-row-background-color: #dbeafe;
--ag-range-selection-border-color: #3b82f6;
--ag-header-foreground-color: #374151;
--ag-foreground-color: #1e293b;
--ag-border-color: #e2e8f0;
--ag-secondary-border-color: #f1f5f9;
--ag-alpine-active-color: #3b82f6;
--ag-input-focus-border-color: #3b82f6;
--ag-checkbox-unchecked-color: #94a3b8;
--ag-checkbox-checked-color: #3b82f6;
}
/* ── DARK THEME ───────────────────────────────────────────────────────── */
.ag-theme-alpine-dark {
--ag-background-color: #0f1624;
--ag-header-background-color: #141d2e;
--ag-row-hover-color: #192540;
--ag-selected-row-background-color: #1e2e50;
--ag-range-selection-border-color: #3b82f6;
--ag-header-foreground-color: #8899bb;
--ag-foreground-color: #c8d6ef;
--ag-border-color: #1e2843;
--ag-secondary-border-color: #192030;
--ag-alpine-active-color: #3b82f6;
--ag-input-focus-border-color: #3b82f6;
--ag-odd-row-background-color: #111828;
--ag-control-panel-background-color: #141d2e;
--ag-subheader-background-color: #141d2e;
--ag-disabled-foreground-color: #3a4a6a;
}
/* ── Alternating row stripe ───────────────────────────────────────────── */
.ag-theme-alpine .ag-row.row-stripe {
background-color: rgba(241, 245, 249, 0.5) !important;
}
.ag-theme-alpine-dark .ag-row.row-stripe {
background-color: rgba(16, 24, 40, 0.6) !important;
}
/* ── Header ──────────────────────────────────────────────────────────── */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine-dark .ag-header-cell {
font-weight: 600 !important;
font-size: 11.5px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ag-theme-alpine .ag-header-cell:hover,
.ag-theme-alpine-dark .ag-header-cell:hover {
background: rgba(59,130,246,0.07) !important;
}
/* ── Frozen / pinned column accent ────────────────────────────────────── */
.ag-theme-alpine .ag-pinned-left-header,
.ag-theme-alpine-dark .ag-pinned-left-header {
border-right: 2px solid rgba(59,130,246,0.4) !important;
}
.ag-theme-alpine .ag-pinned-left-cols-container,
.ag-theme-alpine-dark .ag-pinned-left-cols-container {
border-right: 2px solid rgba(59,130,246,0.3) !important;
}
/* ── Cell focus ring ──────────────────────────────────────────────────── */
.ag-theme-alpine .ag-cell-focus,
.ag-theme-alpine-dark .ag-cell-focus {
border: 2px solid #3b82f6 !important;
}
/* Value change flash */
.ag-theme-alpine .ag-cell-data-changed,
.ag-theme-alpine-dark .ag-cell-data-changed {
background-color: rgba(251,191,36,0.28) !important;
}
/* ── Status bar ────────────────────────────────────────────────────────── */
.ag-theme-alpine .ag-status-bar,
.ag-theme-alpine-dark .ag-status-bar {
font-size: 11px !important;
min-height: 26px !important;
padding: 0 10px !important;
}
/* ── Scrollbars inside grid ────────────────────────────────────────────── */
.ag-body-viewport::-webkit-scrollbar { width: 7px; height: 7px; }
.ag-body-viewport::-webkit-scrollbar-track { background: transparent; }
.ag-theme-alpine .ag-body-viewport::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar-thumb { background: #253048; border-radius: 4px; }
/* ── No scrollbar helper ────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* ── Snowflake badge pulse animation ──────────────────────────────────────── */
@keyframes pulse {
from { opacity: 0.4; transform: scale(0.85); }
to { opacity: 1; transform: scale(1.15); }
}