OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Replace hard-coded screen count with sparkline and update KPI rendering for improved visualization

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-06 07:22:38 -04:00
parent 974e048f76
commit 96677fdd77
2 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
theme/assets/css/main.css
View File

@@ -11192,23 +11192,25 @@ p:last-child { margin-bottom: 0; }
font-size: 11px;
color: rgba(255,255,255,0.35);
}
.rsl-screens {
/* Sparkline replaces the hard-coded screen count in the header */
.rsl-sparkline {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
gap: 3px;
height: 32px;
}
.rsl-screens__val {
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
.rsl-spark__bar {
width: 5px;
background: rgba(255,255,255,0.25);
border-radius: 2px 2px 0 0;
min-height: 4px;
animation: rsl-spark-idle 3.5s ease-in-out infinite;
}
.rsl-screens__lbl {
font-size: 10px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
.rsl-spark__bar:nth-child(odd) { animation-delay: 0.2s; }
.rsl-spark__bar:nth-child(even) { animation-delay: 0.7s; }
@keyframes rsl-spark-idle {
0%,100% { opacity: 0.9; }
50% { opacity: 0.45; }
}
.rsl-kpis {
display: flex;
@@ -11219,30 +11221,43 @@ p:last-child { margin-bottom: 0; }
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 10px;
padding: 10px 8px 8px;
display: flex;
flex-direction: column;
gap: 3px;
gap: 6px;
align-items: center;
}
.rsl-kpi--primary {
background: rgba(var(--color-primary-rgb),0.1);
border-color: rgba(var(--color-primary-rgb),0.3);
}
.rsl-kpi__val {
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
/* Mini bar chart inside each KPI tile */
.rsl-kpi__bars {
display: flex;
align-items: flex-end;
gap: 3px;
width: 100%;
height: 28px;
}
.rsl-kpi--primary .rsl-kpi__val {
color: var(--color-primary);
animation: rsl-kpi-tick 6s ease-in-out infinite;
.rsl-kpi__bar {
flex: 1;
background: rgba(255,255,255,0.22);
border-radius: 2px 2px 0 0;
min-height: 4px;
transform-origin: bottom;
animation: rsl-bar-idle 4s ease-in-out infinite;
}
@keyframes rsl-kpi-tick {
0%,40% { opacity: 1; }
50% { opacity: 0.3; }
60%,100%{ opacity: 1; }
.rsl-kpi--primary .rsl-kpi__bar {
background: var(--color-primary);
}
.rsl-kpi__bar:nth-child(1) { animation-delay: 0s; }
.rsl-kpi__bar:nth-child(2) { animation-delay: 0.15s; }
.rsl-kpi__bar:nth-child(3) { animation-delay: 0.3s; }
.rsl-kpi__bar:nth-child(4) { animation-delay: 0.45s; }
.rsl-kpi__bar:nth-child(5) { animation-delay: 0.6s; }
@keyframes rsl-bar-idle {
0%,100% { opacity: 1; }
45%,55% { opacity: 0.6; }
}
.rsl-kpi__lbl {
font-size: 9px;
@@ -11290,17 +11305,7 @@ p:last-child { margin-bottom: 0; }
0%,100% { filter: brightness(1); }
50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); }
}
.rsl-tier__rate {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.5);
min-width: 28px;
text-align: right;
flex-shrink: 0;
}
.rsl-tier--active .rsl-tier__rate {
color: #f59e0b;
}
/* .rsl-tier__rate removed — no specific margin percentages displayed */
.rsl-next {
display: flex;
flex-direction: column;