65 lines
2.7 KiB
HTML
65 lines
2.7 KiB
HTML
{# Partials: Shared head for stats pages (Chart.js + unified styles) #}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
/* Utilities */
|
|
.text-muted{color:var(--text-muted)}
|
|
|
|
/* Cards and basic blocks */
|
|
.card{
|
|
background:var(--surface);
|
|
border-radius:var(--r-3);
|
|
padding:var(--space-4);
|
|
border:1px solid var(--border-subtle);
|
|
box-shadow:var(--shadow-1);
|
|
transition:transform var(--transition-1), box-shadow var(--transition-1);
|
|
}
|
|
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
|
|
.card h3{margin:0 0 8px 0;font-size:16px;color:var(--text-muted);letter-spacing:.2px}
|
|
.kpi{font-size:clamp(22px,4vw,32px);font-weight:700;line-height:1.2}
|
|
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0;padding:4px 0}
|
|
.toolbar label{color:var(--text-muted)}
|
|
.toolbar select{background:var(--surface);color:var(--text);border:1px solid var(--border-subtle);border-radius:var(--r-2);padding:6px 10px}
|
|
|
|
/* Grids used across stats pages */
|
|
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin:16px 0}
|
|
.charts{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
|
|
.tables{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
|
.grid{display:grid;grid-template-columns:1fr;gap:24px;margin:16px 0}
|
|
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
|
|
|
@media (max-width: 1280px){
|
|
.stats-grid{grid-template-columns:repeat(3,1fr)}
|
|
}
|
|
/* Responsive */
|
|
@media (max-width: 960px){
|
|
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
|
.tables{grid-template-columns:1fr}
|
|
.grid-2{grid-template-columns:1fr}
|
|
}
|
|
@media (max-width: 560px){
|
|
.toolbar{flex-direction:column;align-items:flex-start;gap:8px}
|
|
}
|
|
|
|
/* Tables */
|
|
table{width:100%;border-collapse:collapse}
|
|
thead th{font-weight:600;text-align:left;border-bottom:1px solid var(--border-subtle);padding:8px 6px;color:var(--text-muted)}
|
|
tbody td{border-bottom:1px solid var(--border-subtle);padding:8px 6px}
|
|
tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
|
|
tbody tr:hover{background:rgba(255,255,255,0.04)}
|
|
</style>
|
|
|
|
<script>
|
|
// Harmonize Chart.js defaults with theme tokens
|
|
if (window.Chart) {
|
|
try {
|
|
const cs = getComputedStyle(document.documentElement);
|
|
const text = cs.getPropertyValue('--text') || '#c4d7e0';
|
|
const font = cs.getPropertyValue('--font-sans') || 'system-ui, sans-serif';
|
|
Chart.defaults.color = String(text).trim();
|
|
Chart.defaults.font.family = String(font).trim();
|
|
Chart.defaults.plugins.legend.labels.boxWidth = 12;
|
|
} catch (e) {
|
|
// no-op
|
|
}
|
|
}
|
|
</script>
|