stats page first implementation

This commit is contained in:
JakeBreath
2026-08-05 13:54:26 -05:00
parent 7af1b67143
commit 6325c67790
7 changed files with 670 additions and 4 deletions
+46
View File
@@ -3686,3 +3686,49 @@ a.deletelink {
.link-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
.inline { display: inline; }
.pack-card-rating { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.75rem; }
/* Server stats page */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.stats-grid .card { min-width: 0; }
.stats-grid h2 { margin-bottom: 0.6rem; }
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table td { padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--md-sys-color-outline-variant, #45475a); vertical-align: top; }
.stat-table td:first-child { color: var(--md-sys-color-on-surface-variant, #a6adc8); width: 45%; }
.stat-table tr:last-child td { border-bottom: none; }
.stat-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85em; }
.stat-muted { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.8rem; }
.stat-bar-label { margin: 0.5rem 0 0.2rem; font-size: 0.85rem; }
.stat-bar-caption { margin: 0.15rem 0 0.5rem; color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.75rem; }
.bar-track { height: 8px; border-radius: 999px; background: var(--md-sys-color-surface-variant, #45475a); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--ctp-mocha-green); }
.bar-fill-swap { background: var(--ctp-mocha-peach); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.stat-tile {
background: var(--md-sys-color-surface-variant, #45475a);
border-radius: 10px; padding: 0.6rem 0.5rem; text-align: center;
display: flex; flex-direction: column; gap: 0.15rem;
}
.stat-tile-value { font-size: 1.15rem; font-weight: 700; }
.stat-tile-label { font-size: 0.68rem; color: var(--md-sys-color-on-surface-variant, #a6adc8); }
.stat-subhead { margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
.stat-line { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.8rem; margin: 0.25rem 0; }
.stat-chip {
display: inline-block; background: var(--md-sys-color-surface-variant, #45475a);
border-radius: 12px; padding: 2px 8px; margin: 2px 2px 2px 0; font-size: 0.75rem;
}
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--md-sys-color-outline-variant, #45475a); font-size: 0.85rem; }
.stat-list li:last-child { border-bottom: none; }
.stat-excerpt { margin: 0.15rem 0 0; color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.78rem; }
.stat-up { color: var(--ctp-mocha-green); font-weight: 700; }
.stat-down { color: var(--ctp-mocha-red); font-weight: 700; }
/* Stats toolbar (auto-refresh header) */
.stats-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }
.stats-updated { color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.8rem; }
.stats-error { color: var(--ctp-mocha-red); font-size: 0.8rem; }