neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Bloomberg-style KPI cards — separate bordered cards with 10px gaps, same width as charts

Browse Source
This commit is contained in:
neo committed 2026-06-21 00:40:42 +05:00
1 parent a78037c4cc
commit bd033f5d36
1 file changed
+26 -21
Download Patch File Download Diff File Expand all files Collapse all files
dashboard-mockup.html
+26 -21
View File
@@ -105,43 +105,48 @@ body {
.tab-btn.active::after { transform: scaleX(1); } .tab-btn.active::after { transform: scaleX(1); }
.tab-label { display: flex; align-items: center; gap: 8px; } .tab-label { display: flex; align-items: center; gap: 8px; }
/* KPI GRID — IBM Carbon style: single border around all */ /* KPI GRID — Bloomberg ticker style */
.kpi-grid { .kpi-grid {
display: grid; grid-template-columns: repeat(6, 1fr); display: grid; grid-template-columns: repeat(6, 1fr);
gap: 1px; padding: 0; max-width: 1280px; margin: 0 auto; gap: 10px; padding: 0;
background: var(--border); border: 1px solid var(--border); max-width: 1280px; margin: 0 auto;
border-radius: 4px; overflow: hidden;
} }
.kpi { .kpi {
background: var(--surface); background: #121212;
padding: 20px 24px; border: 1px solid #2a2a2a;
border-radius: 6px;
padding: 14px 16px;
position: relative; position: relative;
transition: background 0.15s; transition: all 0.2s var(--ease);
opacity: 0; transform: translateY(8px); opacity: 0; transform: translateY(8px);
} }
.kpi.visible { opacity: 1; transform: translateY(0); } .kpi.visible { opacity: 1; transform: translateY(0); }
.kpi:hover { background: var(--surface-hover); } .kpi:hover {
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } border-color: #3a3a3a;
background: #181818;
transform: translateY(-1px);
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-name { .kpi-name {
font-size: 11px; font-weight: 600; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-secondary); color: #71717a;
} }
.kpi-badge { .kpi-badge {
font-family: var(--mono); font-size: 10px; font-weight: 500; font-family: var(--mono); font-size: 10px; font-weight: 600;
padding: 2px 6px; border-radius: 0; padding: 2px 6px; border-radius: 3px;
text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 2px;
} }
.kpi-badge.up { color: var(--green); background: var(--green-dim); } .kpi-badge.up { color: #22c55e; background: rgba(34,197,94,0.1); }
.kpi-badge.down { color: var(--red); background: var(--red-dim); } .kpi-badge.down { color: #ef4444; background: rgba(239,68,68,0.1); }
.kpi-badge.neutral { color: var(--accent); background: rgba(15,111,255,0.1); } .kpi-badge.neutral { color: #3b82f6; background: rgba(59,130,246,0.1); }
.kpi-value { .kpi-value {
font-family: var(--mono); font-family: var(--mono);
font-size: 24px; font-weight: 600; font-size: 22px; font-weight: 700;
letter-spacing: -0.5px; line-height: 1.1; letter-spacing: -0.5px; line-height: 1.1;
color: var(--text-primary); margin-bottom: 8px; color: #f4f4f4; margin-bottom: 4px;
} }
.kpi-context { font-size: 11px; color: var(--text-tertiary); } .kpi-context { font-size: 10px; color: #52525b; }
/* CHARTS WRAPPER */ /* CHARTS WRAPPER */
.charts-wrap { .charts-wrap {