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

126
PlanTempus.Application/wwwroot/css/cash.css
View file

@ -3,6 +3,7 @@
*
* Filter bar, stats, table, forms, and difference box
* Reuses: swp-sticky-header, swp-header-content (page.css)
* Reuses: swp-btn, swp-status-badge, swp-card-footer (components.css)
*/
/* ===========================================
@ -321,67 +322,14 @@ swp-cash-table-footer {
color: var(--color-text-secondary);
}
/* ===========================================
STATUS BADGE
=========================================== */
/* Status badge styles in components.css */
/* Center status column */
swp-cash-th:nth-child(9),
swp-cash-td:nth-child(9) {
text-align: center;
}
swp-status-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-2) var(--spacing-5);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-pill);
}
swp-status-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
}
/* 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.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)
=========================================== */
@ -774,78 +722,14 @@ swp-checkbox-field label {
line-height: var(--line-height-normal);
}
/* ===========================================
CARD FOOTER (Actions)
=========================================== */
swp-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-8) var(--spacing-10);
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
margin: var(--spacing-10) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
/* Card footer base styles in components.css */
swp-actions-right {
display: flex;
gap: var(--spacing-5);
}
/* ===========================================
BUTTONS
=========================================== */
swp-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-5) var(--spacing-8);
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
swp-btn i {
font-size: var(--font-size-lg);
}
swp-btn.primary {
background: var(--color-teal);
color: white;
}
swp-btn.primary:hover {
opacity: 0.9;
}
swp-btn.primary:disabled {
background: var(--color-border);
cursor: not-allowed;
}
swp-btn.secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
swp-btn.secondary:hover {
background: var(--color-background-hover);
}
swp-btn.ghost {
background: transparent;
color: var(--color-text-secondary);
}
swp-btn.ghost:hover {
color: var(--color-text);
}
/* Button styles in components.css */
/* ===========================================
SYSTEM NOTE