better dashboard

This commit is contained in:
KingKDot
2026-05-31 15:53:50 -05:00
parent b31901e62a
commit a8b8b6369a
4 changed files with 465 additions and 51 deletions
+149 -10
View File
@@ -4378,9 +4378,10 @@ body.sb-ready #top-nav {
}
.dashboard-stats-shell {
--dashboard-stats-height: 142px;
display: flex;
flex-direction: column;
gap: 10px;
gap: 8px;
}
.dashboard-stats-bar {
@@ -4405,6 +4406,46 @@ body.sb-ready #top-nav {
color: #38bdf8;
}
.dashboard-version-text {
display: inline-flex;
align-items: center;
min-height: 22px;
border-left: 1px solid rgba(100, 116, 139, 0.42);
padding-left: 10px;
color: #64748b;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.dashboard-version-text .server-version-number {
color: #22c55e;
margin-left: 4px;
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.dashboard-version-text .server-version-number-warning {
color: #fbbf24;
margin-left: 4px;
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.dashboard-version-text .server-version-number-mismatch {
color: #f87171;
margin-left: 4px;
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.dashboard-stats-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dashboard-stats-toggle {
display: inline-flex;
align-items: center;
@@ -4432,10 +4473,41 @@ body.sb-ready #top-nav {
align-items: stretch;
}
.dashboard-stats-shell.is-collapsed .dashboard-stats-content {
.dashboard-stats-shell.is-collapsed .dashboard-stats-content,
.dashboard-stats-shell.is-collapsed .dashboard-stats-resizer {
display: none;
}
.dashboard-stats-shell.is-resizing {
user-select: none;
}
.dashboard-stats-resizer {
display: flex;
align-items: center;
justify-content: center;
height: 14px;
border-radius: 8px;
cursor: ns-resize;
touch-action: none;
color: #64748b;
}
.dashboard-stats-resizer span {
width: 92px;
height: 4px;
border-radius: 999px;
background: rgba(71, 85, 105, 0.78);
transition: background 140ms ease, width 140ms ease;
}
.dashboard-stats-resizer:hover span,
.dashboard-stats-resizer:focus-visible span,
.dashboard-stats-shell.is-resizing .dashboard-stats-resizer span {
width: 132px;
background: rgba(56, 189, 248, 0.78);
}
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-health-card {
@@ -4446,6 +4518,7 @@ body.sb-ready #top-nav {
background: rgba(15, 23, 42, 0.72);
box-shadow: none;
overflow: hidden;
cursor: grab;
}
.dashboard-stat-card::before,
@@ -4454,11 +4527,24 @@ body.sb-ready #top-nav {
display: none;
}
.dashboard-stat-card:active,
.dashboard-chart-card:active,
.dashboard-health-card:active {
cursor: grabbing;
}
.dashboard-stat-card.is-dragging,
.dashboard-chart-card.is-dragging,
.dashboard-health-card.is-dragging {
opacity: 0.52;
border-color: rgba(56, 189, 248, 0.62);
}
.dashboard-stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 142px;
height: var(--dashboard-stats-height);
padding: 14px;
}
@@ -4466,6 +4552,15 @@ body.sb-ready #top-nav {
border-color: rgba(34, 211, 238, 0.22);
}
.dashboard-stat-card--online .dashboard-stat-value {
color: #f8fafc;
text-shadow: none;
}
.dashboard-stat-card--online .dashboard-stat-subline span:last-child {
color: #86efac;
}
.dashboard-stat-card--sessions {
border-color: rgba(129, 140, 248, 0.24);
}
@@ -4489,7 +4584,7 @@ body.sb-ready #top-nav {
.dashboard-stat-value {
margin-top: 10px;
color: #f8fafc;
font-size: 2.4rem;
font-size: clamp(1.8rem, calc(var(--dashboard-stats-height) / 3.2), 3.8rem);
line-height: 1;
font-weight: 800;
font-variant-numeric: tabular-nums;
@@ -4508,7 +4603,7 @@ body.sb-ready #top-nav {
.dashboard-chart-card,
.dashboard-health-card {
min-height: 142px;
height: var(--dashboard-stats-height);
padding: 12px 14px 10px;
}
@@ -4549,12 +4644,13 @@ body.sb-ready #top-nav {
.dashboard-chart-wrap {
position: relative;
z-index: 1;
height: 88px;
height: max(56px, calc(var(--dashboard-stats-height) - 54px));
min-width: 0;
}
.dashboard-chart-wrap--donut {
height: 92px;
height: max(54px, calc(var(--dashboard-stats-height) - 62px));
padding-bottom: 8px;
}
.dashboard-health-list {
@@ -4562,6 +4658,9 @@ body.sb-ready #top-nav {
z-index: 1;
display: grid;
gap: 7px;
align-content: start;
max-height: calc(var(--dashboard-stats-height) - 52px);
overflow: hidden;
}
.dashboard-health-row {
@@ -4576,6 +4675,16 @@ body.sb-ready #top-nav {
padding: 5px 8px;
color: #9db1cc;
font-size: 0.78rem;
cursor: grab;
}
.dashboard-health-row.is-hidden {
display: none;
}
.dashboard-health-row.is-dragging {
opacity: 0.5;
border-color: rgba(56, 189, 248, 0.58);
}
.dashboard-health-row strong {
@@ -4584,6 +4693,26 @@ body.sb-ready #top-nav {
font-variant-numeric: tabular-nums;
}
.dashboard-stats-shell.is-compact .dashboard-chart-kicker {
display: none;
}
.dashboard-stats-shell.is-compact .dashboard-chart-head {
margin-bottom: 5px;
}
.dashboard-stats-shell.is-compact .dashboard-chart-pill {
max-width: 7rem;
}
.dashboard-stats-shell.is-tiny .dashboard-stat-subline {
display: none;
}
.dashboard-stats-shell.is-tiny .dashboard-chart-pill {
display: none;
}
.dashboard-live-dot {
width: 8px;
height: 8px;
@@ -4593,8 +4722,8 @@ body.sb-ready #top-nav {
}
.dashboard-live-dot.is-live {
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12), 0 0 16px rgba(52, 211, 153, 0.34);
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.13), 0 0 16px rgba(34, 197, 94, 0.36);
}
.dashboard-live-dot.is-warn {
@@ -4644,8 +4773,18 @@ body.sb-ready #top-nav {
}
.dashboard-stat-value {
font-size: 2rem;
font-size: clamp(1.65rem, calc(var(--dashboard-stats-height) / 3.4), 3rem);
}
.dashboard-stats-bar {
align-items: flex-start;
}
.dashboard-stats-controls {
flex-wrap: wrap;
justify-content: flex-end;
}
}
.dashboard-menu-panel,