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

34
PlanTempus.Application/wwwroot/css/bookings.css
View file

@ -2,6 +2,7 @@
* Bookings - Booking List & Items
*
* Styling for booking components on dashboard
* Reuses: swp-list-base, swp-list-item-base (components.css)
*/
/* ===========================================
@ -39,7 +40,7 @@ swp-booking-item.completed swp-booking-indicator {
}
swp-booking-item.inprogress {
background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));
background: var(--bg-teal-medium);
}
/* ===========================================
@ -118,33 +119,8 @@ swp-booking-employee span {
/* ===========================================
BOOKING STATUS
=========================================== */
swp-booking-status {
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}
swp-booking-status.confirmed {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-booking-status.pending {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
swp-booking-status.inprogress,
swp-booking-status.in-progress {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
swp-booking-status.completed {
background: var(--color-background-hover);
color: var(--color-text-secondary);
}
/* Status badge - now unified in components.css as swp-status-badge */
/* Use: <swp-status-badge class="confirmed|pending|inprogress|completed"> */
/* ===========================================
CURRENT TIME INDICATOR
@ -154,7 +130,7 @@ swp-current-time {
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-4) var(--spacing-6);
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
background: var(--bg-teal-medium);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-4);
}