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

Refactor CSS using nested selectors and media queries

Browse source 
Improves CSS organization by adopting PostCSS nesting syntax
Enhances responsiveness with refined media query implementations
Reduces code repetition and improves maintainability of stylesheets

Modernizes CSS structure across multiple component stylesheets
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 16:31:28 +01:00
parent 29f9c79764
commit 5e2cab9bd5
6 changed files with 1539 additions and 1608 deletions
Download patch file Download diff file Expand all files Collapse all files

140
PlanTempus.Application/wwwroot/css/account.css
View file

@ -29,11 +29,11 @@ swp-account-section-title {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-text); color: var(--color-text);
}
swp-account-section-title i { & i {
font-size: 22px; font-size: 22px;
color: var(--color-teal); color: var(--color-teal);
}
} }
/* =========================================== /* ===========================================
@ -43,10 +43,8 @@ swp-plan-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: var(--card-gap); gap: var(--card-gap);
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
swp-plan-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@ -60,10 +58,8 @@ swp-billing-grid {
display: grid; display: grid;
grid-template-columns: 380px 1fr; grid-template-columns: 380px 1fr;
gap: var(--card-gap); gap: var(--card-gap);
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
swp-billing-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@ -79,6 +75,10 @@ swp-payment-card {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: var(--card-padding); padding: var(--card-padding);
@media (max-width: 768px) {
padding: var(--spacing-5);
}
} }
swp-payment-method { swp-payment-method {
@ -100,11 +100,11 @@ swp-payment-icon {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
}
swp-payment-icon i { & i {
font-size: 24px; font-size: 24px;
color: var(--color-blue); color: var(--color-blue);
}
} }
swp-payment-info { swp-payment-info {
@ -133,10 +133,10 @@ swp-payment-detail {
align-items: center; align-items: center;
padding: var(--spacing-4) 0; padding: var(--spacing-4) 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
swp-payment-detail:last-of-type { &:last-of-type {
border-bottom: none; border-bottom: none;
}
} }
swp-payment-label { swp-payment-label {
@ -148,10 +148,10 @@ swp-payment-value {
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-text); color: var(--color-text);
}
swp-payment-value.highlight { &.highlight {
color: var(--color-teal); color: var(--color-teal);
}
} }
/* =========================================== /* ===========================================
@ -185,6 +185,10 @@ swp-invoices-title {
swp-invoice-table { swp-invoice-table {
display: grid; display: grid;
grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px; grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px;
@media (max-width: 768px) {
grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
}
} }
swp-invoice-table-header { swp-invoice-table-header {
@ -192,12 +196,26 @@ swp-invoice-table-header {
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
background: var(--color-background-alt); background: var(--color-background-alt);
swp-invoice-cell {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
}
} }
swp-invoice-table-body { swp-invoice-table-body {
display: grid; display: grid;
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
swp-invoice-row:hover {
background: var(--color-background-hover);
}
} }
swp-invoice-row { swp-invoice-row {
@ -207,50 +225,45 @@ swp-invoice-row {
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
transition: background var(--transition-fast); transition: background var(--transition-fast);
}
swp-invoice-table-body swp-invoice-row:hover { &:last-child {
background: var(--color-background-hover);
}
swp-invoice-row:last-child {
border-bottom: none; border-bottom: none;
}
} }
swp-invoice-cell { swp-invoice-cell {
padding: var(--spacing-4) var(--spacing-4); padding: var(--spacing-4) var(--spacing-4);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text); color: var(--color-text);
}
swp-invoice-cell:first-child { &:first-child {
padding-left: var(--card-padding); padding-left: var(--card-padding);
} }
swp-invoice-cell:last-child { &:last-child {
padding-right: var(--card-padding); padding-right: var(--card-padding);
} }
/* Header cells */ &.mono {
swp-invoice-table-header swp-invoice-cell {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
}
/* Invoice number mono font */
swp-invoice-cell.mono {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
}
@media (max-width: 768px) {
padding: var(--spacing-3) var(--spacing-3);
&:first-child {
padding-left: var(--spacing-5);
}
&:last-child {
padding-right: var(--spacing-5);
}
}
} }
/* =========================================== /* ===========================================
INVOICE STATUS BADGES INVOICE STATUS BADGES
Parent pattern with color variants + CSS nesting
=========================================== */ =========================================== */
swp-invoice-status { swp-invoice-status {
display: inline-flex; display: inline-flex;
@ -264,21 +277,21 @@ swp-invoice-status {
& i { & i {
font-size: 14px; font-size: 14px;
} }
}
swp-invoice-status.paid { &.paid {
background: var(--bg-green-strong); background: var(--bg-green-strong);
color: var(--color-green); color: var(--color-green);
} }
swp-invoice-status.pending { &.pending {
background: var(--bg-amber-strong); background: var(--bg-amber-strong);
color: var(--color-amber); color: var(--color-amber);
} }
swp-invoice-status.overdue { &.overdue {
background: var(--bg-red-strong); background: var(--bg-red-strong);
color: var(--color-red); color: var(--color-red);
}
} }
/* =========================================== /* ===========================================
@ -297,39 +310,14 @@ swp-download-btn {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: all var(--transition-fast); transition: all var(--transition-fast);
}
swp-download-btn:hover { & i {
background: var(--bg-teal-medium);
}
swp-download-btn i {
font-size: 14px; font-size: 14px;
}
&:hover {
background: var(--bg-teal-medium);
}
} }
/* Button styles in components.css */ /* Button styles in components.css */
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 768px) {
swp-invoice-table {
grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
}
swp-invoice-cell {
padding: var(--spacing-3) var(--spacing-3);
}
swp-invoice-cell:first-child {
padding-left: var(--spacing-5);
}
swp-invoice-cell:last-child {
padding-right: var(--spacing-5);
}
swp-payment-card {
padding: var(--spacing-5);
}
}

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

@ -14,6 +14,15 @@ swp-auth-layout {
display: grid; display: grid;
grid-template-columns: 45fr 55fr; grid-template-columns: 45fr 55fr;
min-height: 100vh; min-height: 100vh;
@media (max-width: 1024px) {
grid-template-columns: 40fr 60fr;
}
@media (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
} }
/* =========================================== /* ===========================================
@ -28,10 +37,9 @@ swp-auth-branding {
color: white; color: white;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
}
/* Decorative background pattern */ /* Decorative background pattern */
swp-auth-branding::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -50%; top: -50%;
@ -40,9 +48,9 @@ swp-auth-branding::before {
height: 100%; height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none; pointer-events: none;
} }
swp-auth-branding::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -30%; bottom: -30%;
@ -51,6 +59,21 @@ swp-auth-branding::after {
height: 80%; height: 80%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
pointer-events: none; pointer-events: none;
}
@media (max-width: 1024px) {
padding: var(--spacing-16);
}
@media (max-width: 768px) {
padding: var(--spacing-10) var(--spacing-6);
text-align: center;
align-items: center;
}
@media (max-width: 480px) {
padding: var(--spacing-8) var(--spacing-5);
}
} }
swp-auth-logo { swp-auth-logo {
@ -60,16 +83,21 @@ swp-auth-logo {
margin-bottom: var(--spacing-16); margin-bottom: var(--spacing-16);
position: relative; position: relative;
z-index: 1; z-index: 1;
}
swp-auth-logo i { & i {
font-size: 32px; font-size: 32px;
} }
swp-auth-logo span { & span {
font-size: var(--font-size-2xl); font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
letter-spacing: -0.5px; letter-spacing: -0.5px;
}
@media (max-width: 768px) {
margin-bottom: var(--spacing-6);
justify-content: center;
}
} }
swp-auth-tagline { swp-auth-tagline {
@ -81,6 +109,15 @@ swp-auth-tagline {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 400px; max-width: 400px;
@media (max-width: 1024px) {
font-size: var(--font-size-2xl);
}
@media (max-width: 768px) {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-4);
}
} }
swp-auth-subtitle { swp-auth-subtitle {
@ -92,6 +129,10 @@ swp-auth-subtitle {
z-index: 1; z-index: 1;
max-width: 380px; max-width: 380px;
line-height: var(--line-height-relaxed); line-height: var(--line-height-relaxed);
@media (max-width: 768px) {
display: none;
}
} }
/* =========================================== /* ===========================================
@ -104,15 +145,31 @@ swp-auth-plan-panel {
padding: var(--spacing-24); padding: var(--spacing-24);
background: var(--color-background); background: var(--color-background);
position: relative; position: relative;
}
swp-auth-plan-panel swp-auth-logo { swp-auth-logo {
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--spacing-12); margin-bottom: var(--spacing-12);
}
swp-auth-plan-panel swp-auth-logo i { & i {
color: var(--color-teal); color: var(--color-teal);
}
@media (max-width: 768px) {
display: none;
}
}
@media (max-width: 1024px) {
padding: var(--spacing-16);
}
@media (max-width: 768px) {
padding: var(--spacing-6);
}
@media (max-width: 480px) {
padding: var(--spacing-5);
}
} }
swp-selected-plan-header { swp-selected-plan-header {
@ -123,6 +180,10 @@ swp-selected-plan-header {
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-bottom: var(--spacing-5); margin-bottom: var(--spacing-5);
@media (max-width: 768px) {
text-align: center;
}
} }
/* =========================================== /* ===========================================
@ -161,11 +222,15 @@ swp-plan-price-amount {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-text); color: var(--color-text);
line-height: 1; line-height: 1;
}
swp-plan-price-amount.contact { &.contact {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
color: var(--color-purple); color: var(--color-purple);
}
@media (max-width: 768px) {
font-size: 28px;
}
} }
swp-plan-price-period { swp-plan-price-period {
@ -185,12 +250,12 @@ swp-plan-feature {
gap: var(--spacing-3); gap: var(--spacing-3);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text); color: var(--color-text);
}
swp-plan-feature i { & i {
font-size: 18px; font-size: 18px;
color: var(--color-green); color: var(--color-green);
flex-shrink: 0; flex-shrink: 0;
}
} }
/* =========================================== /* ===========================================
@ -199,9 +264,8 @@ swp-plan-feature i {
swp-change-plan-link { swp-change-plan-link {
display: block; display: block;
margin-top: var(--spacing-6); margin-top: var(--spacing-6);
}
swp-change-plan-link a { & a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--spacing-2); gap: var(--spacing-2);
@ -209,14 +273,19 @@ swp-change-plan-link a {
color: var(--color-text-secondary); color: var(--color-text-secondary);
text-decoration: none; text-decoration: none;
transition: color var(--transition-fast); transition: color var(--transition-fast);
}
swp-change-plan-link a:hover { &:hover {
color: var(--color-teal); color: var(--color-teal);
} }
}
swp-change-plan-link i { & i {
font-size: 16px; font-size: 16px;
}
@media (max-width: 480px) {
text-align: center;
}
} }
/* =========================================== /* ===========================================
@ -228,6 +297,17 @@ swp-auth-features {
gap: var(--spacing-5); gap: var(--spacing-5);
position: relative; position: relative;
z-index: 1; z-index: 1;
@media (max-width: 768px) {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-4);
}
@media (max-width: 480px) {
display: none;
}
} }
swp-auth-feature { swp-auth-feature {
@ -235,11 +315,15 @@ swp-auth-feature {
align-items: center; align-items: center;
gap: var(--spacing-3); gap: var(--spacing-3);
font-size: var(--font-size-base); font-size: var(--font-size-base);
}
swp-auth-feature i { & i {
font-size: 20px; font-size: 20px;
opacity: 0.9; opacity: 0.9;
}
@media (max-width: 768px) {
font-size: var(--font-size-sm);
}
} }
/* =========================================== /* ===========================================
@ -252,11 +336,23 @@ swp-auth-form-panel {
align-items: center; align-items: center;
padding: var(--spacing-24); padding: var(--spacing-24);
background: var(--color-surface); background: var(--color-surface);
@media (max-width: 768px) {
padding: var(--spacing-10) var(--spacing-6);
}
@media (max-width: 480px) {
padding: var(--spacing-8) var(--spacing-5);
}
} }
swp-auth-form-container { swp-auth-form-container {
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
@media (max-width: 768px) {
max-width: 100%;
}
} }
swp-auth-header { swp-auth-header {
@ -309,10 +405,10 @@ swp-user-verified {
justify-content: center; justify-content: center;
color: var(--color-green); color: var(--color-green);
flex-shrink: 0; flex-shrink: 0;
}
swp-user-verified i { & i {
font-size: 22px; font-size: 22px;
}
} }
/* =========================================== /* ===========================================
@ -325,21 +421,16 @@ swp-auth-form {
gap: var(--spacing-5); gap: var(--spacing-5);
} }
swp-form-input select option { swp-form-input {
select option {
padding: var(--spacing-2); padding: var(--spacing-2);
} }
swp-form-label .optional { &.has-icon input {
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
}
/* Input with icon */
swp-form-input.has-icon input {
padding-right: 44px; padding-right: 44px;
} }
swp-form-input .input-icon { .input-icon {
position: absolute; position: absolute;
right: var(--spacing-3); right: var(--spacing-3);
top: 50%; top: 50%;
@ -349,15 +440,23 @@ swp-form-input .input-icon {
padding: var(--spacing-2); padding: var(--spacing-2);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
transition: color var(--transition-fast); transition: color var(--transition-fast);
}
swp-form-input .input-icon:hover { &:hover {
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
swp-form-input .input-icon i { & i {
font-size: 20px; font-size: 20px;
display: block; display: block;
}
}
}
swp-form-label {
.optional {
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
}
} }
/* =========================================== /* ===========================================
@ -383,38 +482,38 @@ swp-strength-fill {
width: 0%; width: 0%;
border-radius: 2px; border-radius: 2px;
transition: width var(--transition-normal), background var(--transition-normal); transition: width var(--transition-normal), background var(--transition-normal);
}
swp-strength-fill.weak { &.weak {
width: 25%; width: 25%;
background: var(--color-red); background: var(--color-red);
} }
swp-strength-fill.fair { &.fair {
width: 50%; width: 50%;
background: var(--color-amber); background: var(--color-amber);
} }
swp-strength-fill.good { &.good {
width: 75%; width: 75%;
background: var(--color-blue); background: var(--color-blue);
} }
swp-strength-fill.strong { &.strong {
width: 100%; width: 100%;
background: var(--color-green); background: var(--color-green);
}
} }
swp-strength-text { swp-strength-text {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--color-text-muted); color: var(--color-text-muted);
min-width: 50px; min-width: 50px;
}
swp-strength-text.weak { color: var(--color-red); } &.weak { color: var(--color-red); }
swp-strength-text.fair { color: var(--color-amber); } &.fair { color: var(--color-amber); }
swp-strength-text.good { color: var(--color-blue); } &.good { color: var(--color-blue); }
swp-strength-text.strong { color: var(--color-green); } &.strong { color: var(--color-green); }
}
/* =========================================== /* ===========================================
CHECKBOX CHECKBOX
@ -424,9 +523,8 @@ swp-form-checkbox {
align-items: flex-start; align-items: flex-start;
gap: var(--spacing-3); gap: var(--spacing-3);
cursor: pointer; cursor: pointer;
}
swp-form-checkbox input[type="checkbox"] { input[type="checkbox"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 0; margin: 0;
@ -434,21 +532,22 @@ swp-form-checkbox input[type="checkbox"] {
accent-color: var(--color-teal); accent-color: var(--color-teal);
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; margin-top: 2px;
} }
swp-form-checkbox span { & span {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
} }
swp-form-checkbox a { & a {
color: var(--color-teal); color: var(--color-teal);
text-decoration: none; text-decoration: none;
}
swp-form-checkbox a:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
}
} }
/* Button base styles in components.css */ /* Button base styles in components.css */
@ -465,16 +564,16 @@ swp-auth-footer {
swp-auth-footer-text { swp-auth-footer-text {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-auth-footer-text a { & a {
color: var(--color-teal); color: var(--color-teal);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-decoration: none; text-decoration: none;
}
swp-auth-footer-text a:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
}
} }
/* =========================================== /* ===========================================
@ -485,19 +584,19 @@ swp-auth-divider {
align-items: center; align-items: center;
gap: var(--spacing-4); gap: var(--spacing-4);
margin: var(--spacing-6) 0; margin: var(--spacing-6) 0;
}
swp-auth-divider::before, &::before,
swp-auth-divider::after { &::after {
content: ''; content: '';
flex: 1; flex: 1;
height: 1px; height: 1px;
background: var(--color-border); background: var(--color-border);
} }
swp-auth-divider span { & span {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-muted); color: var(--color-text-muted);
}
} }
/* =========================================== /* ===========================================
@ -514,7 +613,6 @@ swp-social-buttons {
/* =========================================== /* ===========================================
FORM MESSAGES FORM MESSAGES
=========================================== */ =========================================== */
/* Parent pattern with color variants - using CSS nesting */
swp-form-error, swp-form-error,
swp-form-success { swp-form-success {
display: flex; display: flex;
@ -560,15 +658,15 @@ swp-pricing-header {
align-items: center; align-items: center;
text-align: center; text-align: center;
margin-bottom: var(--spacing-16); margin-bottom: var(--spacing-16);
}
swp-pricing-header swp-auth-logo { swp-auth-logo {
margin-bottom: var(--spacing-10); margin-bottom: var(--spacing-10);
color: var(--color-text); color: var(--color-text);
}
swp-pricing-header swp-auth-logo i { & i {
color: var(--color-teal); color: var(--color-teal);
}
}
} }
swp-pricing-title { swp-pricing-title {
@ -592,38 +690,43 @@ swp-pricing-grid {
max-width: 1100px; max-width: 1100px;
width: 100%; width: 100%;
align-items: stretch; align-items: stretch;
}
/* Plan cards in pricing grid */ swp-plan-card {
swp-pricing-grid swp-plan-card {
padding: var(--spacing-8); padding: var(--spacing-8);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
}
swp-pricing-grid swp-plan-features { &.popular {
flex: 1;
}
swp-pricing-grid swp-plan-action {
margin-top: auto;
padding-top: var(--spacing-6);
}
swp-pricing-grid swp-plan-card.popular {
border-color: var(--color-teal); border-color: var(--color-teal);
box-shadow: var(--shadow-focus-ring); box-shadow: var(--shadow-focus-ring);
transform: scale(1.02); transform: scale(1.02);
@media (max-width: 1024px) {
transform: none;
order: -1;
}
}
}
swp-plan-features {
flex: 1;
}
swp-plan-action {
margin-top: auto;
padding-top: var(--spacing-6);
}
@media (max-width: 1024px) {
grid-template-columns: 1fr;
max-width: 400px;
}
} }
/* Plan badge/button styles in components.css */ /* Plan badge/button styles in components.css */
swp-pricing-grid swp-plan-action {
margin-top: var(--spacing-6);
}
swp-pricing-footer { swp-pricing-footer {
margin-top: var(--spacing-12); margin-top: var(--spacing-12);
text-align: center; text-align: center;
@ -632,16 +735,16 @@ swp-pricing-footer {
swp-pricing-footer-text { swp-pricing-footer-text {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-pricing-footer-text a { & a {
color: var(--color-teal); color: var(--color-teal);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-decoration: none; text-decoration: none;
}
swp-pricing-footer-text a:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
}
} }
/* =========================================== /* ===========================================
@ -661,15 +764,15 @@ swp-order-line {
justify-content: space-between; justify-content: space-between;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text); color: var(--color-text);
}
swp-order-line.discount { &.discount {
color: var(--color-green); color: var(--color-green);
} }
swp-order-line.total { &.total {
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base); font-size: var(--font-size-base);
}
} }
swp-order-divider { swp-order-divider {
@ -694,10 +797,10 @@ swp-payment-secure {
border-radius: var(--border-radius); border-radius: var(--border-radius);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-green); color: var(--color-green);
}
swp-payment-secure i { & i {
font-size: 16px; font-size: 16px;
}
} }
swp-payment-processing { swp-payment-processing {
@ -745,10 +848,10 @@ swp-success-icon {
background: var(--bg-green-strong); background: var(--bg-green-strong);
border-radius: 50%; border-radius: 50%;
color: var(--color-green); color: var(--color-green);
}
swp-success-icon i { & i {
font-size: 32px; font-size: 32px;
}
} }
swp-success-title { swp-success-title {
@ -763,120 +866,10 @@ swp-success-text {
} }
/* =========================================== /* ===========================================
RESPONSIVE DESIGN RESPONSIVE - Plan Card (shared)
=========================================== */ =========================================== */
@media (max-width: 1024px) {
swp-auth-layout {
grid-template-columns: 40fr 60fr;
}
swp-auth-branding {
padding: var(--spacing-16);
}
swp-auth-plan-panel {
padding: var(--spacing-16);
}
swp-auth-tagline {
font-size: var(--font-size-2xl);
}
swp-pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
swp-pricing-grid swp-plan-card.popular {
transform: none;
order: -1;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
swp-auth-layout {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
swp-auth-branding {
padding: var(--spacing-10) var(--spacing-6);
text-align: center;
align-items: center;
}
swp-auth-plan-panel {
padding: var(--spacing-6);
}
swp-auth-plan-panel swp-auth-logo {
display: none;
}
swp-selected-plan-header {
text-align: center;
}
swp-plan-card { swp-plan-card {
padding: var(--spacing-5); padding: var(--spacing-5);
} }
swp-plan-price-amount {
font-size: 28px;
}
swp-auth-logo {
margin-bottom: var(--spacing-6);
justify-content: center;
}
swp-auth-tagline {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-4);
}
swp-auth-subtitle {
display: none;
}
swp-auth-features {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-4);
}
swp-auth-feature {
font-size: var(--font-size-sm);
}
swp-auth-form-panel {
padding: var(--spacing-10) var(--spacing-6);
}
swp-auth-form-container {
max-width: 100%;
}
}
@media (max-width: 480px) {
swp-auth-branding {
padding: var(--spacing-8) var(--spacing-5);
}
swp-auth-plan-panel {
padding: var(--spacing-5);
}
swp-auth-form-panel {
padding: var(--spacing-8) var(--spacing-5);
}
swp-auth-features {
display: none;
}
swp-change-plan-link {
text-align: center;
}
} }

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

@ -19,6 +19,20 @@ swp-filter-bar {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
margin-bottom: var(--spacing-10); margin-bottom: var(--spacing-10);
flex-wrap: wrap; flex-wrap: wrap;
input, select {
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-md);
font-family: var(--font-family);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
&:focus {
outline: none;
border-color: var(--color-teal);
}
}
} }
swp-filter-group { swp-filter-group {
@ -33,22 +47,6 @@ swp-filter-label {
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
swp-filter-bar input,
swp-filter-bar select {
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-md);
font-family: var(--font-family);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
swp-filter-bar input:focus,
swp-filter-bar select:focus {
outline: none;
border-color: var(--color-teal);
}
swp-filter-spacer { swp-filter-spacer {
flex: 1; flex: 1;
} }
@ -62,47 +60,47 @@ swp-cash-stats {
gap: var(--spacing-8); gap: var(--spacing-8);
max-width: var(--page-max-width); max-width: var(--page-max-width);
margin: 0 auto; margin: 0 auto;
}
swp-cash-stats:not(.active) { &:not(.active) {
display: none; display: none;
}
} }
swp-cash-stat { swp-cash-stat {
background: var(--color-background-alt); background: var(--color-background-alt);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--spacing-6) var(--spacing-8); padding: var(--spacing-6) var(--spacing-8);
}
swp-cash-stat-value { swp-cash-stat-value {
display: block; display: block;
font-size: var(--font-size-2xl); font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-family: var(--font-mono); font-family: var(--font-mono);
color: var(--color-text); color: var(--color-text);
} }
swp-cash-stat-label { swp-cash-stat-label {
display: block; display: block;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-top: var(--spacing-2); margin-top: var(--spacing-2);
} }
swp-cash-stat.highlight swp-cash-stat-value { &.highlight swp-cash-stat-value {
color: var(--color-teal); color: var(--color-teal);
} }
swp-cash-stat.warning swp-cash-stat-value { &.warning swp-cash-stat-value {
color: var(--color-amber); color: var(--color-amber);
} }
swp-cash-stat.negative swp-cash-stat-value { &.negative swp-cash-stat-value {
color: var(--color-red); color: var(--color-red);
} }
swp-cash-stat.user swp-cash-stat-value { &.user swp-cash-stat-value {
color: var(--color-blue); color: var(--color-blue);
}
} }
/* =========================================== /* ===========================================
@ -134,20 +132,41 @@ swp-cash-table {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden; overflow: hidden;
}
swp-cash-table-header, input[type="checkbox"] {
swp-cash-table-body { width: 16px;
height: 16px;
accent-color: var(--color-teal);
cursor: pointer;
}
swp-cash-table-header {
display: grid; display: grid;
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
}
swp-cash-table-header {
background: var(--color-background-alt); background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
padding: var(--spacing-6) var(--spacing-10); padding: var(--spacing-6) var(--spacing-10);
align-items: center; align-items: center;
}
swp-cash-table-body {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
swp-cash-table-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-7) var(--spacing-10);
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
}
} }
swp-cash-table-row { swp-cash-table-row {
@ -155,6 +174,27 @@ swp-cash-table-row {
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
align-items: center; align-items: center;
padding: var(--spacing-7) var(--spacing-10);
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background var(--transition-fast);
&:last-child {
border-bottom: none;
}
&:hover {
background: var(--color-background-hover);
}
&.draft-row {
background: var(--bg-amber-subtle);
cursor: pointer;
&:hover {
background: var(--bg-amber-medium);
}
}
} }
swp-cash-th { swp-cash-th {
@ -163,90 +203,71 @@ swp-cash-th {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-cash-th.right { &.right {
text-align: right; text-align: right;
} }
swp-cash-th.checkbox, &.checkbox {
swp-cash-td.checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
swp-cash-table input[type="checkbox"] { &:nth-child(9) {
width: 16px; text-align: center;
height: 16px; }
accent-color: var(--color-teal);
cursor: pointer;
}
swp-cash-table-row {
padding: var(--spacing-7) var(--spacing-10);
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background var(--transition-fast);
}
swp-cash-table-row:last-child {
border-bottom: none;
}
swp-cash-table-row:hover {
background: var(--color-background-hover);
}
/* Draft row - clickable to go to Kasseafstemning */
swp-cash-table-row.draft-row {
background: var(--bg-amber-subtle);
cursor: pointer;
}
swp-cash-table-row.draft-row:hover {
background: var(--bg-amber-medium);
} }
swp-cash-td { swp-cash-td {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--color-text);
}
swp-cash-td.right { &.right {
text-align: right; text-align: right;
} }
swp-cash-td.mono { &.mono {
font-family: var(--font-mono); font-family: var(--font-mono);
} }
swp-cash-td.muted { &.muted {
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
swp-cash-td.negative { &.negative {
color: var(--color-red); color: var(--color-red);
} }
swp-cash-td.positive { &.positive {
color: var(--color-green); color: var(--color-green);
} }
swp-cash-td.id { &.id {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-family: var(--font-mono); font-family: var(--font-mono);
}
&.checkbox {
display: flex;
align-items: center;
justify-content: center;
}
&:nth-child(9) {
text-align: center;
}
} }
swp-period-cell { swp-period-cell {
display: block; display: block;
}
swp-period-cell .dates { .dates {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
} }
/* =========================================== /* ===========================================
@ -262,72 +283,50 @@ swp-row-toggle {
color: var(--color-text-secondary); color: var(--color-text-secondary);
cursor: pointer; cursor: pointer;
transition: all var(--transition-fast); transition: all var(--transition-fast);
}
swp-row-toggle:hover { &:hover {
background: var(--color-background-alt); background: var(--color-background-alt);
color: var(--color-text); color: var(--color-text);
} }
swp-row-toggle i { i {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
transition: transform var(--transition-fast); transition: transform var(--transition-fast);
}
} }
/* Row detail - hidden by default */
swp-cash-row-detail { swp-cash-row-detail {
grid-column: 1 / -1; grid-column: 1 / -1;
display: none; display: none;
overflow: hidden; overflow: hidden;
background: var(--color-background-alt); background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
swp-cash-row-detail.expanded { &.expanded {
display: block; display: block;
} }
swp-row-detail-content { swp-row-detail-content {
display: block; display: block;
padding: var(--spacing-8) var(--spacing-10); padding: var(--spacing-8) var(--spacing-10);
} }
swp-row-detail-actions { swp-row-detail-actions {
display: flex; display: flex;
gap: var(--spacing-4); gap: var(--spacing-4);
justify-content: flex-end; justify-content: flex-end;
}
} }
/* Legacy support */
swp-row-arrow { swp-row-arrow {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-row-arrow i { i {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
} }
swp-cash-table-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-7) var(--spacing-10);
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
}
/* Status badge styles in components.css */
/* Center status column */
swp-cash-th:nth-child(9),
swp-cash-td:nth-child(9) {
text-align: center;
} }
/* =========================================== /* ===========================================
@ -339,12 +338,6 @@ swp-cash-grid {
gap: var(--spacing-12); gap: var(--spacing-12);
} }
@media (max-width: 900px) {
swp-cash-grid {
grid-template-columns: 1fr;
}
}
swp-cash-column { swp-cash-column {
display: grid; display: grid;
gap: var(--spacing-10); gap: var(--spacing-10);
@ -354,25 +347,24 @@ swp-cash-column {
/* =========================================== /* ===========================================
DATA TABLE (Dagens Tal) DATA TABLE (Dagens Tal)
=========================================== */ =========================================== */
swp-data-header { swp-data-header {
display: grid; display: grid;
grid-template-columns: 1fr 100px 140px; grid-template-columns: 1fr 100px 140px;
gap: var(--spacing-6); gap: var(--spacing-6);
padding: var(--spacing-5) 0; padding: var(--spacing-5) 0;
border-bottom: 2px solid var(--color-border); border-bottom: 2px solid var(--color-border);
}
swp-data-header span { span {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-data-header span:not(:first-child) { &:not(:first-child) {
text-align: right; text-align: right;
}
}
} }
swp-data-row { swp-data-row {
@ -382,10 +374,10 @@ swp-data-row {
padding: var(--spacing-7) 0; padding: var(--spacing-7) 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
align-items: center; align-items: center;
}
swp-data-row:last-child { &:last-child {
border-bottom: none; border-bottom: none;
}
} }
swp-data-label { swp-data-label {
@ -400,7 +392,8 @@ swp-data-system {
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
swp-data-input input { swp-data-input {
input {
width: 100%; width: 100%;
padding: var(--spacing-4) var(--spacing-5); padding: var(--spacing-4) var(--spacing-5);
font-size: var(--font-size-base); font-size: var(--font-size-base);
@ -409,17 +402,18 @@ swp-data-input input {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-surface); background: var(--color-surface);
}
swp-data-input input:focus { &:focus {
outline: none; outline: none;
border-color: var(--color-teal); border-color: var(--color-teal);
} }
swp-data-input input::placeholder { &::placeholder {
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
}
}
} }
swp-data-value { swp-data-value {
@ -427,10 +421,10 @@ swp-data-value {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--color-text);
}
swp-data-value.muted { &.muted {
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
} }
swp-table-note { swp-table-note {
@ -452,43 +446,46 @@ swp-calc-row {
align-items: center; align-items: center;
padding: var(--spacing-7) 0; padding: var(--spacing-7) 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
swp-calc-row:last-of-type { &:last-of-type {
border-bottom: none; border-bottom: none;
} }
swp-calc-row.input-row { &.input-row {
background: var(--color-background-alt); background: var(--color-background-alt);
margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5)); margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
padding: var(--spacing-8) var(--spacing-5); padding: var(--spacing-8) var(--spacing-5);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
} }
swp-calc-label span { swp-calc-label {
span {
display: block; display: block;
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--color-text);
} }
swp-calc-label small { small {
display: block; display: block;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-top: var(--spacing-1); margin-top: var(--spacing-1);
}
} }
swp-calc-value { swp-calc-value {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--color-text);
}
swp-calc-value.muted { &.muted {
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
} }
swp-calc-input input { swp-calc-input {
input {
width: 140px; width: 140px;
padding: var(--spacing-6) var(--spacing-7); padding: var(--spacing-6) var(--spacing-7);
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
@ -497,11 +494,12 @@ swp-calc-input input {
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-surface); background: var(--color-surface);
}
swp-calc-input input:focus { &:focus {
outline: none; outline: none;
border-color: var(--color-teal); border-color: var(--color-teal);
}
}
} }
/* =========================================== /* ===========================================
@ -514,50 +512,50 @@ swp-difference-box {
padding: var(--spacing-10); padding: var(--spacing-10);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--color-background-alt); background: var(--color-background-alt);
}
swp-difference-box.positive { &.positive {
background: var(--bg-green-medium); background: var(--bg-green-medium);
}
swp-difference-box.negative { swp-difference-value {
color: var(--color-green);
}
}
&.negative {
background: var(--bg-red-medium); background: var(--bg-red-medium);
}
swp-difference-box.neutral { swp-difference-value {
color: var(--color-red);
}
}
&.neutral {
background: var(--bg-teal-medium); background: var(--bg-teal-medium);
}
swp-difference-label { swp-difference-value {
color: var(--color-teal);
}
}
swp-difference-label {
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-text); color: var(--color-text);
}
swp-difference-label small { small {
display: block; display: block;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-top: var(--spacing-2); margin-top: var(--spacing-2);
} }
}
swp-difference-value { swp-difference-value {
font-size: var(--font-size-2xl); font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-family: var(--font-mono); font-family: var(--font-mono);
} }
swp-difference-box.positive swp-difference-value {
color: var(--color-green);
}
swp-difference-box.negative swp-difference-value {
color: var(--color-red);
}
swp-difference-box.neutral swp-difference-value {
color: var(--color-teal);
} }
/* =========================================== /* ===========================================
@ -568,9 +566,8 @@ swp-period-display {
padding: var(--spacing-8); padding: var(--spacing-8);
background: var(--color-background-alt); background: var(--color-background-alt);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
}
swp-period-label { swp-period-label {
display: block; display: block;
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
@ -578,20 +575,21 @@ swp-period-label {
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-bottom: var(--spacing-4); margin-bottom: var(--spacing-4);
} }
swp-period-value { swp-period-value {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-5); gap: var(--spacing-5);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-text); color: var(--color-text);
}
swp-period-value .arrow { .arrow {
color: var(--color-teal); color: var(--color-teal);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
}
}
} }
/* =========================================== /* ===========================================
@ -605,10 +603,10 @@ swp-form-grid {
swp-form-field { swp-form-field {
display: block; display: block;
}
swp-form-field.full-width { &.full-width {
grid-column: 1 / -1; grid-column: 1 / -1;
}
} }
swp-form-label { swp-form-label {
@ -619,14 +617,14 @@ swp-form-label {
margin-bottom: var(--spacing-3); margin-bottom: var(--spacing-3);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.3px; letter-spacing: 0.3px;
}
swp-form-label .required { .required {
color: var(--color-red); color: var(--color-red);
}
} }
swp-form-input input, swp-form-input {
swp-form-input select { input, select {
width: 100%; width: 100%;
padding: var(--spacing-5) var(--spacing-6); padding: var(--spacing-5) var(--spacing-6);
font-size: var(--font-size-base); font-size: var(--font-size-base);
@ -635,12 +633,12 @@ swp-form-input select {
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-surface); background: var(--color-surface);
transition: border-color var(--transition-fast); transition: border-color var(--transition-fast);
}
swp-form-input input:focus, &:focus {
swp-form-input select:focus {
outline: none; outline: none;
border-color: var(--color-teal); border-color: var(--color-teal);
}
}
} }
swp-auto-id { swp-auto-id {
@ -655,7 +653,8 @@ swp-auto-id {
/* =========================================== /* ===========================================
NOTE FIELD NOTE FIELD
=========================================== */ =========================================== */
swp-note-field textarea { swp-note-field {
textarea {
width: 100%; width: 100%;
min-height: 80px; min-height: 80px;
padding: var(--spacing-6); padding: var(--spacing-6);
@ -664,11 +663,12 @@ swp-note-field textarea {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
resize: vertical; resize: vertical;
}
swp-note-field textarea:focus { &:focus {
outline: none; outline: none;
border-color: var(--color-teal); border-color: var(--color-teal);
}
}
} }
swp-note-hint { swp-note-hint {
@ -701,32 +701,28 @@ swp-checkbox-field {
background: var(--color-background-alt); background: var(--color-background-alt);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
grid-column: 1 / -1; grid-column: 1 / -1;
}
swp-checkbox-field input[type="checkbox"] { input[type="checkbox"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-top: var(--spacing-1); margin-top: var(--spacing-1);
accent-color: var(--color-teal); accent-color: var(--color-teal);
cursor: pointer; cursor: pointer;
} }
swp-checkbox-field label { label {
font-size: var(--font-size-md); font-size: var(--font-size-md);
color: var(--color-text); color: var(--color-text);
cursor: pointer; cursor: pointer;
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
}
} }
/* Card footer base styles in components.css */
swp-actions-right { swp-actions-right {
display: flex; display: flex;
gap: var(--spacing-5); gap: var(--spacing-5);
} }
/* Button styles in components.css */
/* =========================================== /* ===========================================
SYSTEM NOTE SYSTEM NOTE
=========================================== */ =========================================== */
@ -747,18 +743,22 @@ swp-system-note {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
/* Table columns defined on parent - subgrid inherits */
swp-cash-table { swp-cash-table {
grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px; grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
} }
/* Hide some columns on smaller screens */ swp-cash-th, swp-cash-td {
swp-cash-th:nth-child(3), &:nth-child(3),
swp-cash-td:nth-child(3), &:nth-child(6) {
swp-cash-th:nth-child(6),
swp-cash-td:nth-child(6) {
display: none; display: none;
} }
}
}
@media (max-width: 900px) {
swp-cash-grid {
grid-template-columns: 1fr;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {

356
PlanTempus.Application/wwwroot/css/components.css
View file

@ -1,4 +1,4 @@
g/** /**
* UI Components - Shared reusable components * UI Components - Shared reusable components
* *
* This file contains all shared UI components used across the application. * This file contains all shared UI components used across the application.
@ -21,13 +21,20 @@ g/**
/* =========================================== /* ===========================================
BASE PATTERNS - Grid + Subgrid Tables BASE PATTERNS - Grid + Subgrid Tables
=========================================== */ =========================================== */
/* Base table structure - use with feature-specific column definitions */
swp-table-header-base { swp-table-header-base {
display: grid; display: grid;
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
background: var(--color-background-alt); background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
swp-table-cell-base {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
} }
swp-table-body-base { swp-table-body-base {
@ -43,23 +50,14 @@ swp-table-row-base {
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
transition: background var(--transition-fast); transition: background var(--transition-fast);
}
swp-table-row-base:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
swp-table-row-base:hover { &:hover {
background: var(--color-background-hover); background: var(--color-background-hover);
} }
/* Header cells base styling */
swp-table-header-base swp-table-cell-base {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
} }
/* =========================================== /* ===========================================
@ -79,10 +77,10 @@ swp-list-item-base {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
cursor: pointer; cursor: pointer;
transition: background var(--transition-fast); transition: background var(--transition-fast);
}
swp-list-item-base:hover { &:hover {
background: var(--color-background-hover); background: var(--color-background-hover);
}
} }
/* =========================================== /* ===========================================
@ -122,106 +120,106 @@ swp-btn {
& i { & i {
font-size: 18px; font-size: 18px;
} }
}
/* Primary button */ /* Primary button */
swp-btn.primary { &.primary {
background: var(--color-teal); background: var(--color-teal);
color: white; color: white;
border-color: var(--color-teal); border-color: var(--color-teal);
}
swp-btn.primary:hover { &:hover {
background: #00796b; background: #00796b;
border-color: #00796b; border-color: #00796b;
} }
swp-btn.primary:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
swp-btn.primary:disabled { &:disabled {
background: var(--color-border); background: var(--color-border);
border-color: var(--color-border); border-color: var(--color-border);
cursor: not-allowed; cursor: not-allowed;
} }
}
/* Secondary button */ /* Secondary button */
swp-btn.secondary { &.secondary {
background: var(--color-surface); background: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
color: var(--color-text); color: var(--color-text);
}
swp-btn.secondary:hover { &:hover {
background: var(--color-background-hover); background: var(--color-background-hover);
} }
}
/* Ghost button */ /* Ghost button */
swp-btn.ghost { &.ghost {
background: transparent; background: transparent;
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
swp-btn.ghost:hover { &:hover {
color: var(--color-text); color: var(--color-text);
} }
}
/* Outline button */ /* Outline button */
swp-btn.outline { &.outline {
background: transparent; background: transparent;
border: 1px solid var(--color-teal); border: 1px solid var(--color-teal);
color: var(--color-teal); color: var(--color-teal);
}
swp-btn.outline:hover { &:hover {
background: var(--bg-teal-medium); background: var(--bg-teal-medium);
} }
swp-btn.outline.purple { &.purple {
border-color: var(--color-purple); border-color: var(--color-purple);
color: var(--color-purple); color: var(--color-purple);
}
swp-btn.outline.purple:hover { &:hover {
background: var(--bg-purple-medium); background: var(--bg-purple-medium);
} }
}
}
/* Social button */ /* Social button */
swp-btn.social { &.social {
background: var(--color-background); background: var(--color-background);
color: var(--color-text); color: var(--color-text);
border-color: var(--color-border); border-color: var(--color-border);
}
swp-btn.social:hover { &:hover {
background: var(--color-background-hover); background: var(--color-background-hover);
border-color: var(--color-text-muted); border-color: var(--color-text-muted);
} }
swp-btn.social img { & img {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
}
/* Size variants */ /* Size variants */
swp-btn.sm { &.sm {
padding: var(--spacing-2) var(--spacing-3); padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
}
swp-btn.sm i { & i {
font-size: 14px; font-size: 14px;
} }
}
swp-btn.lg { &.lg {
padding: var(--spacing-4) var(--spacing-8); padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
} }
/* Full width */ /* Full width */
swp-btn.full-width { &.full-width {
width: 100%; width: 100%;
}
} }
/* =========================================== /* ===========================================
@ -235,100 +233,78 @@ swp-status-badge {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
}
swp-status-badge::before { &::before {
content: ''; content: '';
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
background: currentColor; background: currentColor;
} }
/* Status variants */ /* Status variants - green */
swp-status-badge.approved, &.approved,
swp-status-badge.active { &.active,
&.valid,
&.confirmed {
background: var(--bg-green-strong); background: var(--bg-green-strong);
color: var(--color-green); color: var(--color-green);
} }
swp-status-badge.draft, /* Status variants - amber */
swp-status-badge.invited { &.draft,
&.invited,
&.expiring,
&.warning,
&.pending {
background: var(--bg-amber-strong); background: var(--bg-amber-strong);
color: #b45309; color: #b45309;
} }
/* Role variants */ /* Use color-amber for pending specifically */
swp-status-badge.owner { &.pending {
color: var(--color-amber);
}
/* Role variants */
&.owner,
&.enrolled,
&.ferie {
background: var(--bg-teal-strong); background: var(--bg-teal-strong);
color: var(--color-teal); color: var(--color-teal);
} }
swp-status-badge.admin { &.admin {
background: var(--bg-purple-strong); background: var(--bg-purple-strong);
color: var(--color-purple); color: var(--color-purple);
} }
swp-status-badge.leader { &.leader,
&.fri,
&.info,
&.inprogress,
&.in-progress {
background: var(--bg-blue-strong); background: var(--bg-blue-strong);
color: var(--color-blue); color: var(--color-blue);
} }
swp-status-badge.employee { &.employee {
background: var(--color-background-alt); background: var(--color-background-alt);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
/* Additional status variants */ /* Danger/red variants */
swp-status-badge.valid { &.sygdom,
background: var(--bg-green-strong); &.danger {
color: var(--color-green);
}
swp-status-badge.expiring,
swp-status-badge.warning {
background: var(--bg-amber-strong);
color: #b45309;
}
swp-status-badge.enrolled,
swp-status-badge.ferie {
background: var(--bg-teal-strong);
color: var(--color-teal);
}
swp-status-badge.fri,
swp-status-badge.info {
background: var(--bg-blue-strong);
color: var(--color-blue);
}
swp-status-badge.sygdom,
swp-status-badge.danger {
background: var(--bg-red-strong); background: var(--bg-red-strong);
color: var(--color-red); color: var(--color-red);
} }
/* Booking/scheduling specific variants */ /* Completed - muted */
swp-status-badge.confirmed { &.completed {
background: var(--bg-green-strong);
color: var(--color-green);
}
swp-status-badge.pending {
background: var(--bg-amber-strong);
color: var(--color-amber);
}
swp-status-badge.inprogress,
swp-status-badge.in-progress {
background: var(--bg-blue-strong);
color: var(--color-blue);
}
swp-status-badge.completed {
background: var(--color-background-hover); background: var(--color-background-hover);
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
} }
/* =========================================== /* ===========================================
@ -342,29 +318,28 @@ swp-plan-card {
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: var(--spacing-10); padding: var(--spacing-10);
transition: all var(--transition-normal); transition: all var(--transition-normal);
}
swp-plan-card.selected, &.selected,
swp-plan-card.current { &.current {
border-color: var(--color-teal); border-color: var(--color-teal);
box-shadow: 0 0 0 3px var(--bg-teal-strong); box-shadow: 0 0 0 3px var(--bg-teal-strong);
}
swp-plan-card.popular { swp-btn.secondary {
border-color: var(--color-amber);
}
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);
}
/* Disabled button for current plan */
swp-plan-card.current swp-btn.secondary {
background: var(--color-background-alt); background: var(--color-background-alt);
color: var(--color-text-secondary); color: var(--color-text-secondary);
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
}
}
&.popular {
border-color: var(--color-amber);
}
&.enterprise {
background: var(--gradient-enterprise);
border-color: var(--color-purple);
}
} }
/* Plan badge */ /* Plan badge */
@ -379,41 +354,41 @@ swp-plan-badge {
letter-spacing: 0.5px; letter-spacing: 0.5px;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
width: fit-content; width: fit-content;
}
swp-plan-badge.current, & i {
swp-plan-badge.selected { font-size: 14px;
}
&.current,
&.selected {
background: var(--bg-teal-strong); background: var(--bg-teal-strong);
color: var(--color-teal); color: var(--color-teal);
} }
swp-plan-badge.popular { &.popular {
background: var(--bg-amber-strong); background: var(--bg-amber-strong);
color: var(--color-amber); color: var(--color-amber);
} }
swp-plan-badge.enterprise { &.enterprise {
background: var(--bg-purple-strong); background: var(--bg-purple-strong);
color: var(--color-purple); color: var(--color-purple);
} }
swp-plan-badge.free { &.free {
background: var(--bg-green-strong); background: var(--bg-green-strong);
color: var(--color-green); color: var(--color-green);
} }
swp-plan-badge i {
font-size: 14px;
} }
/* Plan action */ /* Plan action */
swp-plan-action { swp-plan-action {
margin-top: auto; margin-top: auto;
padding-top: var(--card-padding); padding-top: var(--card-padding);
}
swp-plan-action swp-btn { swp-btn {
width: 100%; width: 100%;
}
} }
/* =========================================== /* ===========================================
@ -428,49 +403,46 @@ swp-avatar {
justify-content: center; justify-content: center;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
flex-shrink: 0; flex-shrink: 0;
} /* Default size (md = 40px) */
/* Default size (md = 40px) */
swp-avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
}
/* Size variants */ /* Size variants */
swp-avatar.size-xs { &.size-xs {
width: 24px; width: 24px;
height: 24px; height: 24px;
font-size: 10px; font-size: 10px;
} }
swp-avatar.size-sm { &.size-sm {
width: 36px; width: 36px;
height: 36px; height: 36px;
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
} }
swp-avatar.size-lg { &.size-lg {
width: 80px; width: 80px;
height: 80px; height: 80px;
font-size: var(--font-size-2xl); font-size: var(--font-size-2xl);
} }
/* Color variants */ /* Color variants */
swp-avatar.purple { &.purple {
background: var(--color-purple); background: var(--color-purple);
} }
swp-avatar.blue { &.blue {
background: var(--color-blue); background: var(--color-blue);
} }
swp-avatar.amber { &.amber {
background: var(--color-amber); background: var(--color-amber);
} }
swp-avatar.teal { &.teal {
background: var(--color-teal); background: var(--color-teal);
}
} }
/* =========================================== /* ===========================================
@ -536,12 +508,12 @@ swp-section-header {
padding-bottom: var(--spacing-4); padding-bottom: var(--spacing-4);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-6); margin-bottom: var(--spacing-6);
}
swp-section-header swp-section-label { swp-section-label {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
}
} }
swp-section-action { swp-section-action {
@ -593,6 +565,7 @@ swp-add-button {
background: var(--bg-teal-subtle); background: var(--bg-teal-subtle);
} }
} }
/* =========================================== /* ===========================================
USER INFO PATTERN (shared across auth, waitlist, employees, drawers) USER INFO PATTERN (shared across auth, waitlist, employees, drawers)
=========================================== */ =========================================== */
@ -657,11 +630,10 @@ swp-form-label {
swp-form-input { swp-form-input {
position: relative; position: relative;
}
swp-form-input input, input,
swp-form-input select, select,
swp-form-input textarea { textarea {
width: 100%; width: 100%;
padding: var(--spacing-3) var(--spacing-4); padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-base); font-size: var(--font-size-base);
@ -671,33 +643,31 @@ swp-form-input textarea {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
swp-form-input input::placeholder, &::placeholder {
swp-form-input textarea::placeholder {
color: var(--color-text-muted); color: var(--color-text-muted);
} }
swp-form-input input:focus, &:focus {
swp-form-input select:focus,
swp-form-input textarea:focus {
outline: none; outline: none;
border-color: var(--color-teal); border-color: var(--color-teal);
box-shadow: var(--shadow-focus-ring); box-shadow: var(--shadow-focus-ring);
} }
}
swp-form-input select { select {
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 12px center; background-position: right 12px center;
padding-right: 40px; padding-right: 40px;
} }
swp-form-input textarea { textarea {
resize: vertical; resize: vertical;
min-height: 80px; min-height: 80px;
}
} }
/* =========================================== /* ===========================================

3
PlanTempus.Application/wwwroot/css/design-tokens.css
View file

@ -91,6 +91,9 @@
--bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent); --bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent);
--bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent); --bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent);
--border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent); --border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent);
/* -------- Gradient Tokens -------- */
--gradient-enterprise: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
} }
/* =========================================== /* ===========================================

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

File diff suppressed because it is too large Load diff