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

CSS optimization

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 00:47:06 +01:00
parent e739ce2ac7
commit 29f9c79764
22 changed files with 1175 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

121
PlanTempus.Application/wwwroot/css/stats.css
View file

@ -95,6 +95,7 @@ swp-stat-subtitle {
/* ===========================================
STAT TREND / CHANGE
Parent pattern with direction/color variants + CSS nesting
=========================================== */
swp-stat-trend,
swp-stat-change {
@ -103,83 +104,77 @@ swp-stat-change {
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);
& i {
font-size: 14px;
}
&.up,
&.positive {
color: var(--color-green);
}
&.down,
&.negative {
color: var(--color-red);
}
&.neutral {
color: var(--color-text-secondary);
}
}
/* ===========================================
COLOR MODIFIERS
Using CSS nesting for cleaner color variants
=========================================== */
/* 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);
swp-stat-card,
swp-stat-box {
&.highlight swp-stat-value,
&.teal swp-stat-value {
color: var(--color-teal);
}
&.success swp-stat-value {
color: var(--color-green);
}
&.warning swp-stat-value,
&.amber swp-stat-value {
color: var(--color-amber);
}
&.danger swp-stat-value,
&.negative swp-stat-value,
&.red swp-stat-value {
color: var(--color-red);
}
&.purple swp-stat-value {
color: var(--color-purple);
}
}
/* ===========================================
HIGHLIGHT CARD (Filled Background)
Using CSS nesting for child selectors
=========================================== */
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);
& swp-stat-value {
color: white;
}
& swp-stat-label {
color: rgba(255, 255, 255, 0.8);
}
& swp-stat-change {
color: rgba(255, 255, 255, 0.9);
}
}
/* ===========================================