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

164
PlanTempus.Application/wwwroot/css/auth.css
View file

@ -3,6 +3,8 @@
*
* Login, Signup, Password Reset etc.
* Split-screen SaaS layout pattern
*
* Reuses: swp-btn, swp-plan-card, swp-plan-badge (components.css)
*/
/* ===========================================
@ -124,46 +126,13 @@ swp-selected-plan-header {
}
/* ===========================================
PLAN CARD (Selected Plan)
PLAN CONTENT (Auth-specific layout)
Plan card/badge base styles in components.css
=========================================== */
swp-plan-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--spacing-10);
transition: all var(--transition-normal);
}
swp-plan-card.selected {
border-color: var(--color-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
}
swp-plan-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-pill);
width: fit-content;
margin-bottom: var(--spacing-4);
}
swp-plan-badge.selected {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
swp-plan-badge i {
font-size: 14px;
}
swp-plan-name {
display: block;
font-size: var(--font-size-2xl);
@ -589,52 +558,7 @@ swp-form-checkbox a:hover {
text-decoration: underline;
}
/* ===========================================
BUTTONS
=========================================== */
swp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--border-radius);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
}
swp-btn.primary {
background: var(--color-teal);
color: white;
border-color: var(--color-teal);
}
swp-btn.primary:hover {
background: #00796b;
border-color: #00796b;
}
swp-btn.primary:active {
transform: translateY(1px);
}
swp-btn.full-width {
width: 100%;
}
swp-btn.lg {
padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-lg);
}
swp-btn i {
font-size: 18px;
}
/* Button base styles in components.css */
/* ===========================================
AUTH FOOTER
@ -692,21 +616,7 @@ swp-social-buttons {
gap: var(--spacing-3);
}
swp-btn.social {
background: var(--color-background);
color: var(--color-text);
border-color: var(--color-border);
}
swp-btn.social:hover {
background: var(--color-background-hover);
border-color: var(--color-text-muted);
}
swp-btn.social img {
width: 20px;
height: 20px;
}
/* Social button styles in components.css */
/* ===========================================
FORM MESSAGES
@ -819,72 +729,12 @@ swp-pricing-grid swp-plan-card.popular {
transform: scale(1.02);
}
swp-pricing-grid 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-teal) 15%, transparent);
color: var(--color-teal);
}
swp-plan-badge.enterprise {
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-plan-badge.free {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
/* Plan badge/button styles in components.css */
swp-pricing-grid swp-plan-action {
margin-top: var(--spacing-6);
}
/* Button styles for pricing */
.swp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--border-radius);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
}
.swp-btn.primary {
background: var(--color-teal);
color: white;
border-color: var(--color-teal);
}
.swp-btn.primary:hover {
background: #00796b;
border-color: #00796b;
}
.swp-btn.outline {
background: transparent;
color: var(--color-purple);
border-color: var(--color-purple);
}
.swp-btn.outline:hover {
background: color-mix(in srgb, var(--color-purple) 10%, transparent);
}
.swp-btn.full-width {
width: 100%;
}
swp-pricing-footer {
margin-top: var(--spacing-12);
text-align: center;