Various CSS work

This commit is contained in:
Janus C. H. Knudsen 2026-01-12 22:10:57 +01:00
parent ef174af0e1
commit 15579acba8
52 changed files with 8001 additions and 944 deletions

View file

@ -2,36 +2,9 @@
* Cash Register - Page Styling
*
* Filter bar, stats, table, forms, and difference box
* Reuses: swp-sticky-header, swp-header-content (page.css)
*/
/* ===========================================
STICKY HEADER CONTAINER
=========================================== */
swp-cash-sticky-header {
display: block;
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--color-surface);
overflow: visible;
}
/* Override tab-bar sticky when inside sticky header */
swp-cash-sticky-header swp-tab-bar {
position: static;
top: auto;
}
/* ===========================================
KASSE HEADER (Stats above tabs)
=========================================== */
swp-cash-header {
display: block;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-10) var(--spacing-12);
}
/* ===========================================
FILTER BAR
=========================================== */
@ -375,16 +348,40 @@ swp-status-badge::before {
background: currentColor;
}
swp-status-badge.approved {
/* Status variants */
swp-status-badge.approved,
swp-status-badge.active {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-status-badge.draft {
swp-status-badge.draft,
swp-status-badge.invited {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: #b45309;
}
/* Role variants */
swp-status-badge.owner {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
swp-status-badge.admin {
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-status-badge.leader {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
swp-status-badge.employee {
background: var(--color-background-alt);
color: var(--color-text-secondary);
}
/* ===========================================
TWO-COLUMN GRID (Detail View)
=========================================== */