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

62
PlanTempus.Application/wwwroot/css/design-tokens.css
View file

@ -46,6 +46,53 @@
--color-unavailable: rgba(0, 0, 0, 0.02);
}
/* ===========================================
COLOR OVERLAYS - Semantic Overlay System
=========================================== */
:root {
/* -------- Overlay Percentages -------- */
--overlay-subtle: 5%;
--overlay-medium: 10%;
--overlay-strong: 15%;
--overlay-border: 30%;
/* -------- Teal Overlays -------- */
--bg-teal-subtle: color-mix(in srgb, var(--color-teal) var(--overlay-subtle), transparent);
--bg-teal-medium: color-mix(in srgb, var(--color-teal) var(--overlay-medium), transparent);
--bg-teal-strong: color-mix(in srgb, var(--color-teal) var(--overlay-strong), transparent);
--border-teal: color-mix(in srgb, var(--color-teal) var(--overlay-border), transparent);
/* -------- Green Overlays -------- */
--bg-green-subtle: color-mix(in srgb, var(--color-green) var(--overlay-subtle), transparent);
--bg-green-medium: color-mix(in srgb, var(--color-green) var(--overlay-medium), transparent);
--bg-green-strong: color-mix(in srgb, var(--color-green) var(--overlay-strong), transparent);
--border-green: color-mix(in srgb, var(--color-green) var(--overlay-border), transparent);
/* -------- Amber Overlays -------- */
--bg-amber-subtle: color-mix(in srgb, var(--color-amber) var(--overlay-subtle), transparent);
--bg-amber-medium: color-mix(in srgb, var(--color-amber) var(--overlay-medium), transparent);
--bg-amber-strong: color-mix(in srgb, var(--color-amber) var(--overlay-strong), transparent);
--border-amber: color-mix(in srgb, var(--color-amber) var(--overlay-border), transparent);
/* -------- Red Overlays -------- */
--bg-red-subtle: color-mix(in srgb, var(--color-red) var(--overlay-subtle), transparent);
--bg-red-medium: color-mix(in srgb, var(--color-red) var(--overlay-medium), transparent);
--bg-red-strong: color-mix(in srgb, var(--color-red) var(--overlay-strong), transparent);
--border-red: color-mix(in srgb, var(--color-red) var(--overlay-border), transparent);
/* -------- Blue Overlays -------- */
--bg-blue-subtle: color-mix(in srgb, var(--color-blue) var(--overlay-subtle), transparent);
--bg-blue-medium: color-mix(in srgb, var(--color-blue) var(--overlay-medium), transparent);
--bg-blue-strong: color-mix(in srgb, var(--color-blue) var(--overlay-strong), transparent);
--border-blue: color-mix(in srgb, var(--color-blue) var(--overlay-border), transparent);
/* -------- Purple Overlays -------- */
--bg-purple-subtle: color-mix(in srgb, var(--color-purple) var(--overlay-subtle), transparent);
--bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent);
--bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent);
--border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent);
}
/* ===========================================
COLOR PALETTE - Dark Mode (System)
=========================================== */
@ -238,6 +285,11 @@
--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-drawer: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-dragging: 0 4px 12px rgba(0, 0, 0, 0.15);
/* Focus ring shadows */
--shadow-focus-teal: 0 0 0 3px var(--bg-teal-strong);
--shadow-focus-blue: 0 0 0 3px var(--bg-blue-strong);
--shadow-focus-red: 0 0 0 3px var(--bg-red-strong);
}
/* ===========================================
@ -309,9 +361,9 @@
/* ===========================================
UTILITY CLASSES - Status Badges
=========================================== */
.status-confirmed { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
.status-pending { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber); }
.status-inprogress { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
.status-error { background: color-mix(in srgb, var(--color-red) 15%, transparent); color: var(--color-red); }
.status-active { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
.status-confirmed { background: var(--bg-green-strong); color: var(--color-green); }
.status-pending { background: var(--bg-amber-strong); color: var(--color-amber); }
.status-inprogress { background: var(--bg-blue-strong); color: var(--color-blue); }
.status-error { background: var(--bg-red-strong); color: var(--color-red); }
.status-active { background: var(--bg-green-strong); color: var(--color-green); }
.status-inactive { background: var(--color-background); color: var(--color-text-muted); }