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

KPI cards: brighter colors - value #fff w800, change #22c55e/#ef4444, ticker #666

Browse Source
This commit is contained in:
neo committed 2026-06-21 18:16:55 +05:00
1 parent d6e8167d26
commit f9dc52e6dc
1 file changed
+7 -6
Download Patch File Download Diff File Expand all files Collapse all files
dashboard-mockup.html
+7 -6
View File
@@ -120,6 +120,7 @@ body {
transition: all 0.2s var(--ease); transition: all 0.2s var(--ease);
opacity: 0; transform: translateY(8px); opacity: 0; transform: translateY(8px);
cursor: default; cursor: default;
color: #d4d4d4;
} }
.kpi.visible { opacity: 1; transform: translateY(0); } .kpi.visible { opacity: 1; transform: translateY(0); }
.kpi:hover { .kpi:hover {
@@ -133,14 +134,14 @@ body {
} }
.kpi-ticker { .kpi-ticker {
font-family: var(--mono); font-size: 10px; font-weight: 600; font-family: var(--mono); font-size: 10px; font-weight: 600;
color: #555; letter-spacing: 0.03em; color: #666; letter-spacing: 0.03em;
} }
.kpi-change { .kpi-change {
font-family: var(--mono); font-size: 12px; font-weight: 700; font-family: var(--mono); font-size: 12px; font-weight: 700;
display: flex; align-items: center; gap: 3px; display: flex; align-items: center; gap: 3px;
} }
.kpi-change.up { color: #16a34a; } .kpi-change.up { color: #22c55e; }
.kpi-change.down { color: #e21d1d; } .kpi-change.down { color: #ef4444; }
.kpi-change.neutral { color: #3b82f6; } .kpi-change.neutral { color: #3b82f6; }
.kpi-trend { display: flex; align-items: center; gap: 6px; } .kpi-trend { display: flex; align-items: center; gap: 6px; }
.kpi-trend-line { .kpi-trend-line {
@@ -148,12 +149,12 @@ body {
} }
.kpi-value { .kpi-value {
font-family: var(--mono); font-family: var(--mono);
font-size: 28px; font-weight: 700; font-size: 28px; font-weight: 800;
letter-spacing: -0.5px; line-height: 1.1; letter-spacing: -0.5px; line-height: 1.1;
color: #f4f4f4; color: #ffffff;
} }
.kpi-desc { .kpi-desc {
font-size: 10px; color: #4a4a4a; font-size: 10px; color: #555;
} }
/* Arrow SVG inline */ /* Arrow SVG inline */