Reorganizes and optimizes shared CSS components

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

View file

@ -3,6 +3,8 @@
*
* For logged-in users to manage their subscription plan,
* payment method, and view invoice history.
*
* Reuses: swp-btn, swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
*/
/* ===========================================
@ -49,46 +51,7 @@ swp-plan-grid {
}
}
/* Plan card current state (extends auth.css) */
swp-plan-card.current {
border-color: var(--color-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
}
swp-plan-badge.current {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
/* Disabled button for current plan */
swp-plan-card.current swp-btn.secondary {
background: var(--color-background-alt);
color: var(--color-text-secondary);
cursor: default;
pointer-events: none;
}
/* Enterprise plan styling */
swp-plan-card.enterprise {
background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
border-color: var(--color-purple);
}
swp-plan-badge.popular {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
/* Plan action buttons */
swp-plan-action {
margin-top: auto;
padding-top: var(--card-padding);
}
swp-plan-action swp-btn {
width: 100%;
justify-content: center;
}
/* Plan card/badge/action styles in components.css */
/* ===========================================
BILLING GRID (2 columns)
@ -343,37 +306,7 @@ swp-download-btn i {
font-size: 14px;
}
/* ===========================================
BUTTONS (account-specific)
=========================================== */
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.outline {
background: transparent;
border: 1px solid var(--color-teal);
color: var(--color-teal);
}
swp-btn.outline:hover {
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
}
swp-btn.sm {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-xs);
}
swp-btn.sm i {
font-size: 14px;
}
/* Button styles in components.css */
/* ===========================================
RESPONSIVE