Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-10 20:39:17 +01:00
parent 54b057886c
commit 7fc1ae0650
204 changed files with 4345 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

258
PlanTempus.Application/wwwroot/css/stats.css Normal file
View file

@ -0,0 +1,258 @@
/**
* Stats - Statistics Components
*
* Stat bars, cards, values og trends
*/
/* ===========================================
STATS CONTAINER (Grid/Bar/Row)
=========================================== */
swp-stats-bar,
swp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-4);
margin-bottom: var(--spacing-5);
}
swp-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
margin-bottom: var(--spacing-5);
}
/* ===========================================
STAT CARD
=========================================== */
swp-stat-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border-radius: var(--border-radius-lg);
padding: var(--spacing-4) var(--spacing-5);
border: 1px solid var(--color-border);
}
swp-stat-box {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
padding: var(--spacing-4);
background: var(--color-surface);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
}
/* ===========================================
STAT VALUE
=========================================== */
swp-stat-value {
display: block;
font-size: 22px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--color-text);
line-height: var(--line-height-tight);
}
/* Larger variant for emphasis */
swp-stat-card swp-stat-value,
swp-stat-box swp-stat-value {
font-size: 22px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--color-text);
}
/* ===========================================
STAT LABEL
=========================================== */
swp-stat-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--spacing-1);
}
swp-stat-box swp-stat-label {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
/* ===========================================
STAT SUBTITLE
=========================================== */
swp-stat-subtitle {
display: block;
font-size: 11px;
color: var(--color-text-muted);
margin-top: var(--spacing-1);
}
/* ===========================================
STAT TREND / CHANGE
=========================================== */
swp-stat-trend,
swp-stat-change {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-xs);
margin-top: var(--spacing-2);
}
swp-stat-trend i,
swp-stat-change i {
font-size: 14px;
}
/* Trend Up (positive) */
swp-stat-trend.up,
swp-stat-change.positive {
color: var(--color-green);
}
/* Trend Down (negative) */
swp-stat-trend.down,
swp-stat-change.negative {
color: var(--color-red);
}
/* Neutral trend */
swp-stat-trend.neutral {
color: var(--color-text-secondary);
}
/* ===========================================
COLOR MODIFIERS
=========================================== */
/* Highlight (Primary/Teal) */
swp-stat-card.highlight swp-stat-value,
swp-stat-box.highlight swp-stat-value,
swp-stat-card.teal swp-stat-value {
color: var(--color-teal);
}
/* Success (Green) */
swp-stat-card.success swp-stat-value {
color: var(--color-green);
}
/* Warning (Amber) */
swp-stat-card.warning swp-stat-value,
swp-stat-card.amber swp-stat-value {
color: var(--color-amber);
}
/* Danger (Red) */
swp-stat-card.danger swp-stat-value,
swp-stat-card.negative swp-stat-value,
swp-stat-card.red swp-stat-value {
color: var(--color-red);
}
/* Purple */
swp-stat-card.purple swp-stat-value {
color: var(--color-purple);
}
/* ===========================================
HIGHLIGHT CARD (Filled Background)
=========================================== */
swp-stat-card.highlight.filled {
background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
color: white;
border-color: transparent;
}
swp-stat-card.highlight.filled swp-stat-value {
color: white;
}
swp-stat-card.highlight.filled swp-stat-label {
color: rgba(255, 255, 255, 0.8);
}
swp-stat-card.highlight.filled swp-stat-change {
color: rgba(255, 255, 255, 0.9);
}
/* ===========================================
QUICK STATS (Compact Variant)
=========================================== */
swp-quick-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-3);
}
swp-quick-stat {
display: flex;
flex-direction: column;
text-align: center;
padding: var(--spacing-3);
background: var(--color-background);
border-radius: var(--border-radius);
}
swp-quick-stat swp-stat-value {
font-size: 18px;
}
swp-quick-stat swp-stat-label {
font-size: 11px;
margin-top: var(--spacing-1);
}
/* ===========================================
STAT ITEM (Inline Variant)
=========================================== */
swp-stat-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-background);
border-radius: var(--border-radius);
}
swp-stat-item swp-stat-value {
font-size: 16px;
font-weight: 600;
}
swp-stat-item swp-stat-value.mono {
font-family: var(--font-mono);
}
swp-stat-item swp-stat-label {
font-size: 11px;
margin-top: 0;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 1200px) {
swp-stats-bar,
swp-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
swp-stats-bar,
swp-stats-grid,
swp-stats-row {
grid-template-columns: 1fr;
}
swp-quick-stats {
grid-template-columns: repeat(2, 1fr);
}
}