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

Reorganizes and optimizes shared CSS components

Browse source 
Consolidates UI components into a centralized components.css file
Removes duplicate styles across multiple CSS files
Adds utility classes in a new utilities.css file
Reduces overall CSS complexity and improves maintainability

Removes quick-stats.css and redistributes its styles
Updates layout and stylesheet references accordingly
This commit is contained in:
Janus C. H. Knudsen 2026-01-13 00:09:46 +01:00
parent 15579acba8
commit 2e6207bb0b
33 changed files with 971 additions and 796 deletions
Download patch file Download diff file Expand all files Collapse all files

55
PlanTempus.Application/wwwroot/css/employees.css
View file

@ -3,7 +3,8 @@
*
* Employees-specific styling only.
* Reuses: swp-stat-card (stats.css), swp-stats-row (stats.css), swp-tab-bar (tabs.css),
* swp-btn (cash.css), swp-status-badge (cash.css), swp-row-toggle (cash.css),
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label (components.css),
* swp-row-toggle (cash.css),
* swp-sticky-header, swp-header-content (page.css),
* swp-toggle-slider, swp-checkbox-list (controls.css)
*
@ -57,8 +58,8 @@ swp-users-progress-bar {
swp-employee-table-card {
display: block;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
overflow: hidden;
}
@ -195,33 +196,7 @@ swp-table-actions {
justify-content: flex-end;
}
swp-icon-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
swp-icon-btn:hover {
background: var(--color-background-alt);
color: var(--color-text);
}
swp-icon-btn.danger:hover {
background: color-mix(in srgb, var(--color-red) 10%, transparent);
color: var(--color-red);
}
swp-icon-btn i {
font-size: 18px;
}
/* Icon button styles in components.css */
/* ===========================================
PERMISSIONS MATRIX
@ -452,7 +427,7 @@ swp-edit-row {
}
swp-edit-label {
font-size: var(--font-size-sm);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
}
@ -477,16 +452,7 @@ swp-edit-value:focus {
border-color: var(--color-teal);
}
/* Section label in cards */
swp-section-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-6);
padding-bottom: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
}
/* swp-section-label is now in components.css */
/* ===========================================
VIEW CONTAINERS (List/Detail swap)
@ -532,12 +498,7 @@ swp-detail-grid > div {
gap: var(--spacing-8);
}
swp-detail-grid swp-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--card-padding);
}
/* swp-card base styles in components.css */
@media (max-width: 900px) {
swp-detail-grid {