From 1262a4a63fb4d6716b5b38441df7921beb0a2746 Mon Sep 17 00:00:00 2001 From: zwitschi Date: Thu, 13 Nov 2025 22:30:58 +0100 Subject: [PATCH] Refactor CSS styles and introduce theme variables - Removed redundant CSS rules and consolidated styles across dashboard, forms, imports, projects, and scenarios. - Introduced new color variables in theme-default.css for better maintainability and consistency. - Updated existing styles to utilize new color variables, enhancing the overall design. - Improved responsiveness and layout of various components, including tables and cards. - Ensured consistent styling for buttons, links, and headers across the application. --- static/css/dashboard.css | 72 +------ static/css/forms.css | 9 + static/css/imports.css | 30 +-- static/css/main.css | 380 ++++++++++++++++++++++++++++------- static/css/projects.css | 256 +---------------------- static/css/scenarios.css | 308 +++------------------------- static/css/theme-default.css | 72 +++++++ templates/base.html | 1 + 8 files changed, 453 insertions(+), 675 deletions(-) create mode 100644 static/css/theme-default.css diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 6671c1b..aa8c2d3 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -2,17 +2,6 @@ --dashboard-gap: 1.5rem; } -.dashboard-header { - align-items: center; -} - -.header-actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; - justify-content: flex-end; -} - .dashboard-metrics { display: grid; gap: var(--dashboard-gap); @@ -20,36 +9,6 @@ margin-bottom: 2rem; } -.metric-card { - background: var(--card); - border-radius: var(--radius); - padding: 1.5rem; - box-shadow: var(--shadow); - border: 1px solid var(--color-border); - display: flex; - flex-direction: column; - gap: 0.35rem; -} - -.metric-card h2 { - margin: 0; - font-size: 1rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.metric-value { - font-size: 2rem; - font-weight: 700; - margin: 0; -} - -.metric-caption { - color: var(--color-text-subtle); - font-size: 0.85rem; -} - .dashboard-grid { display: grid; gap: var(--dashboard-gap); @@ -67,16 +26,6 @@ gap: var(--dashboard-gap); } -.table-link { - color: var(--brand-2); - text-decoration: none; -} - -.table-link:hover, -.table-link:focus { - text-decoration: underline; -} - .timeline { list-style: none; margin: 0; @@ -107,7 +56,9 @@ padding: 0.75rem; border-radius: var(--radius-sm); background: rgba(209, 75, 75, 0.16); + background: color-mix(in srgb, var(--color-danger) 16%, transparent); border: 1px solid rgba(209, 75, 75, 0.3); + border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent); } .links-list a { @@ -128,23 +79,4 @@ .grid-sidebar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } - - .header-actions { - justify-content: flex-start; - } -} - -@media (max-width: 640px) { - .metric-card { - padding: 1.25rem; - } - - .metric-value { - font-size: 1.75rem; - } - - .header-actions { - flex-direction: column; - align-items: stretch; - } } diff --git a/static/css/forms.css b/static/css/forms.css index 33c571e..7fd67ab 100644 --- a/static/css/forms.css +++ b/static/css/forms.css @@ -19,6 +19,7 @@ .form-group label { font-weight: 600; color: var(--text); + color: var(--color-text-primary); } .form-group input, @@ -28,7 +29,9 @@ border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(8, 12, 19, 0.78); + background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent); color: var(--text); + color: var(--color-text-primary); transition: border-color 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; } @@ -42,6 +45,7 @@ .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--brand-2); + outline: 2px solid var(--color-brand-bright); outline-offset: 1px; } @@ -56,7 +60,9 @@ .form-group--error select, .form-group--error textarea { border-color: rgba(209, 75, 75, 0.6); + border-color: color-mix(in srgb, var(--color-danger) 60%, transparent); box-shadow: 0 0 0 1px rgba(209, 75, 75, 0.3); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 30%, transparent); } .field-help { @@ -69,6 +75,7 @@ margin: 0; font-size: 0.85rem; color: var(--danger); + color: var(--color-danger); } .form-actions { @@ -82,6 +89,7 @@ border: 1px solid var(--color-border); border-radius: var(--radius); background: rgba(21, 27, 35, 0.85); + background: var(--color-surface-overlay); box-shadow: var(--shadow); padding: 1.5rem; display: flex; @@ -93,6 +101,7 @@ font-weight: 700; padding: 0 0.5rem; color: var(--text); + color: var(--color-text-primary); } @media (max-width: 640px) { diff --git a/static/css/imports.css b/static/css/imports.css index 0f3a281..86d424a 100644 --- a/static/css/imports.css +++ b/static/css/imports.css @@ -1,7 +1,8 @@ .import-upload { - background-color: var(--surface-color); - border: 1px dashed var(--border-color); - border-radius: var(--radius-md); + background-color: rgba(21, 27, 35, 0.85); + background-color: var(--color-surface-overlay); + border: 1px dashed var(--color-border); + border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; } @@ -11,7 +12,7 @@ } .import-upload__dropzone { - border: 2px dashed var(--border-color); + border: 2px dashed var(--color-border); border-radius: var(--radius-sm); padding: 2rem; text-align: center; @@ -19,8 +20,10 @@ } .import-upload__dropzone.dragover { - border-color: var(--primary-color); - background-color: rgba(0, 123, 255, 0.05); + border-color: #f6c648; + border-color: var(--color-brand-bright); + background-color: rgba(241, 178, 26, 0.08); + background-color: var(--color-highlight); } .import-upload__actions { @@ -43,9 +46,9 @@ align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; - border-radius: var(--radius-md); - color: #fff; - box-shadow: var(--shadow-lg); + border-radius: var(--radius); + color: var(--color-text-invert); + box-shadow: var(--shadow); z-index: 1000; } @@ -54,15 +57,18 @@ } .toast--success { - background-color: #198754; + background-color: var(--success); + background-color: var(--color-success); } .toast--error { - background-color: #dc3545; + background-color: var(--danger); + background-color: var(--color-danger); } .toast--info { - background-color: #0d6efd; + background-color: var(--info); + background-color: var(--color-info); } .toast__close { diff --git a/static/css/main.css b/static/css/main.css index 0fdb23f..1834e47 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,43 +1,12 @@ :root { - --bg: #0b0f14; - --bg-2: #0f141b; - --card: #151b23; - --text: #e6edf3; - --muted: #a9b4c0; - --brand: #f1b21a; - --brand-2: #f6c648; - --brand-3: #f9d475; - --accent: #2ba58f; - --danger: #d14b4b; - --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); + /* Radii & layout */ --radius: 14px; --radius-sm: 10px; + --panel-radius: var(--radius); + --table-radius: var(--radius-sm); --container: 1180px; - --muted: var(--muted); - --color-text-subtle: rgba(169, 180, 192, 0.6); - --color-text-invert: #ffffff; - --color-text-dark: #0f172a; - --color-text-strong: #111827; - --color-border: rgba(255, 255, 255, 0.08); - --card-border: rgba(255, 255, 255, 0.08); - --color-border-strong: rgba(255, 255, 255, 0.12); - --color-highlight: rgba(241, 178, 26, 0.08); - --color-panel-shadow: rgba(0, 0, 0, 0.25); - --color-panel-shadow-deep: rgba(0, 0, 0, 0.35); - --color-surface-alt: rgba(21, 27, 35, 0.7); - --btn-primary-bg: var(--brand-2); - --btn-primary-color: var(--color-text-dark); - --btn-primary-hover: var(--brand-3); - --btn-secondary-bg: rgba(21, 27, 35, 0.85); - --btn-secondary-hover: rgba(21, 27, 35, 0.95); - --btn-secondary-border: var(--color-border-strong); - --btn-secondary-color: var(--text); - --btn-danger-bg: var(--danger); - --btn-danger-color: #ffffff; - --btn-danger-hover: #e56a6a; - --btn-link-color: var(--brand-2); - --btn-link-hover: var(--brand-3); - --btn-ghost-color: var(--muted); + + /* Spacing & typography */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; @@ -45,18 +14,13 @@ --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; + --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; - --panel-radius: var(--radius); - --table-radius: var(--radius-sm); -} - -* { - box-sizing: border-box; } html, @@ -73,6 +37,13 @@ body { line-height: 1.45; } +.header-actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + justify-content: flex-end; +} + h1, h2, h3, @@ -180,6 +151,36 @@ a { color: var(--text); } +.metric-card { + background: var(--color-surface-overlay); + border-radius: var(--radius); + padding: 1.5rem; + box-shadow: var(--shadow); + border: 1px solid var(--color-border); + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.metric-card h2 { + margin: 0; + font-size: 1rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.metric-value { + font-size: 2rem; + font-weight: 700; + margin: 0; +} + +.metric-caption { + color: var(--color-text-subtle); + font-size: 0.85rem; +} + .metrics-table { width: 100%; border-collapse: collapse; @@ -197,7 +198,7 @@ a { .metrics-table th { font-weight: 600; - color: var(--text); + color: var(--color-text-dark); } .metrics-table tr:last-child td, @@ -208,23 +209,30 @@ a { .definition-list { margin: 0; display: grid; - gap: 0.75rem; + gap: 1.25rem 2rem; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .definition-list div { display: grid; - grid-template-columns: 140px 1fr; + grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1fr); gap: 0.5rem; align-items: baseline; } .definition-list dt { - color: var(--muted); + margin: 0; font-weight: 600; + color: var(--color-text-muted); + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.08em; } .definition-list dd { margin: 0; + font-size: 1rem; + color: var(--color-text-primary); } .scenario-card { @@ -254,6 +262,13 @@ a { } .scenario-meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.25rem; +} + +.scenario-card .scenario-meta { + display: block; text-align: right; } @@ -299,6 +314,201 @@ a { color: var(--muted); } +.quick-link-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.quick-link-list li a { + font-weight: 600; + color: var(--brand-2); + text-decoration: none; +} + +.quick-link-list li a:hover, +.quick-link-list li a:focus { + text-decoration: underline; +} + +.quick-link-list p { + margin: 0.25rem 0 0; + color: var(--color-text-subtle); + font-size: 0.9rem; +} + +.scenario-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.scenario-item { + background: rgba(21, 27, 35, 0.85); + background: color-mix(in srgb, var(--color-surface-default) 85%, transparent); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.scenario-item__body { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.scenario-item__header { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; + justify-content: space-between; +} + +.scenario-item__header h3 { + margin: 0; + font-size: 1.1rem; +} + +.scenario-item__header a { + color: inherit; + text-decoration: none; +} + +.scenario-item__header a:hover, +.scenario-item__header a:focus { + text-decoration: underline; +} + +.scenario-item__meta { + display: grid; + gap: 0.75rem; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); +} + +.scenario-item__meta dt { + margin: 0; + font-size: 0.75rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.scenario-item__meta dd { + margin: 0; + font-size: 0.95rem; +} + +.scenario-item__actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.scenario-item__actions .btn--link { + padding: 0; +} + +.status-pill { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.35rem 0.85rem; + border-radius: 999px; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.status-pill--draft { + background: rgba(59, 130, 246, 0.15); + color: #93c5fd; + background: color-mix(in srgb, var(--color-info) 18%, transparent); + color: color-mix(in srgb, var(--color-info) 70%, white); +} + +.status-pill--active { + background: rgba(34, 197, 94, 0.18); + color: #86efac; + background: color-mix(in srgb, var(--color-success) 18%, transparent); + color: color-mix(in srgb, var(--color-success) 70%, white); +} + +.status-pill--archived { + background: rgba(148, 163, 184, 0.24); + color: #cbd5f5; + background: color-mix(in srgb, var(--color-text-muted) 24%, transparent); + color: color-mix(in srgb, var(--color-text-muted) 60%, white); +} + +.empty-state { + color: var(--color-text-muted); + font-style: italic; +} + +.table { + width: 100%; + border-collapse: collapse; + border-radius: var(--table-radius); + overflow: hidden; + box-shadow: var(--shadow); +} + +.table th, +.table td { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--color-border); + background: rgba(21, 27, 35, 0.85); + background: color-mix(in srgb, var(--color-surface-default) 85%, transparent); +} + +.table tbody tr:hover { + background: rgba(241, 178, 26, 0.12); + background: var(--color-highlight); +} + +.table-link { + color: var(--brand-2); + text-decoration: none; + margin-left: 0.5rem; +} + +.table-link:hover, +.table-link:focus { + text-decoration: underline; +} + +.table-responsive { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border-radius: var(--table-radius); + margin: 0; +} + +.table-responsive .table { + min-width: 640px; +} + +.table-responsive::-webkit-scrollbar { + height: 6px; +} + +.table-responsive::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + background: color-mix(in srgb, var(--color-text-invert) 20%, transparent); + border-radius: 999px; +} + .page-actions .button { text-decoration: none; background: transparent; @@ -559,7 +769,7 @@ a.sidebar-brand:focus { .dashboard-header { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; @@ -959,23 +1169,6 @@ a.sidebar-brand:focus { background-color: var(--btn-secondary-hover); } -.btn--danger, -.btn.danger, -.btn.btn-danger { - background-color: var(--btn-danger-bg); - border-color: transparent; - color: var(--btn-danger-color); -} - -.btn--danger:hover, -.btn--danger:focus, -.btn.danger:hover, -.btn.danger:focus, -.btn.btn-danger:hover, -.btn.btn-danger:focus { - background-color: var(--btn-danger-hover); -} - .btn--link, .btn.btn-link, .btn.link { @@ -999,17 +1192,14 @@ a.sidebar-brand:focus { text-decoration: underline; } -.btn--ghost, -.btn.btn-ghost { +.btn--ghost { background: transparent; border: 1px solid transparent; color: var(--btn-ghost-color); } .btn--ghost:hover, -.btn--ghost:focus, -.btn.btn-ghost:hover, -.btn.btn-ghost:focus { +.btn--ghost:focus { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } @@ -1224,10 +1414,62 @@ footer a:focus { transition: opacity 0.25s ease; } +@media (min-width: 720px) { + .table-responsive .table { + min-width: 100%; + } +} + +@media (max-width: 640px) { + .table th, + .table td { + padding: 0.55rem 0.65rem; + font-size: 0.9rem; + white-space: nowrap; + } + + .table tbody tr { + border-radius: var(--radius-sm); + } + + .metric-card { + padding: 1.25rem; + } + + .metric-value { + font-size: 1.75rem; + } + + .header-actions { + flex-direction: column; + align-items: stretch; + } +} + +@media (min-width: 960px) { + .header-actions { + justify-content: flex-start; + } + + .scenario-item { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .scenario-item__body { + max-width: 70%; + } +} + @media (max-width: 1024px) { .app-sidebar { width: 240px; } + + .header-actions { + justify-content: flex-start; + } } @media (max-width: 900px) { diff --git a/static/css/projects.css b/static/css/projects.css index 52c838d..c9cb895 100644 --- a/static/css/projects.css +++ b/static/css/projects.css @@ -1,16 +1,3 @@ -:root { - --card-bg: rgba(21, 27, 35, 0.8); - --card-border: rgba(255, 255, 255, 0.08); - --hover-highlight: rgba(241, 178, 26, 0.12); -} - -.header-actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; - justify-content: flex-end; -} - .projects-grid { display: grid; gap: 1.5rem; @@ -19,8 +6,8 @@ } .project-card { - background: var(--card-bg); - border: 1px solid var(--card-border); + background: var(--color-surface-overlay); + border: 1px solid var(--color-border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 1.5rem; @@ -33,7 +20,7 @@ .project-card:hover, .project-card:focus-within { transform: translateY(-2px); - box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35); + box-shadow: 0 22px 45px var(--color-panel-shadow-deep); } .project-card__header { @@ -85,7 +72,7 @@ .project-card__meta dt { font-size: 0.75rem; text-transform: uppercase; - color: var(--muted); + color: var(--color-text-muted); letter-spacing: 0.08em; } @@ -120,39 +107,9 @@ margin-bottom: 2rem; } -.metric-card { - background: var(--card-bg); - border-radius: var(--radius); - padding: 1.5rem; - box-shadow: var(--shadow); - border: 1px solid var(--card-border); - display: flex; - flex-direction: column; - gap: 0.35rem; -} - -.metric-card h2 { - margin: 0; - font-size: 1rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.metric-value { - font-size: 2rem; - font-weight: 700; - margin: 0; -} - -.metric-caption { - color: var(--color-text-subtle); - font-size: 0.85rem; -} - .project-form { - background: var(--card-bg); - border: 1px solid var(--card-border); + background: var(--color-surface-overlay); + border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; @@ -161,28 +118,9 @@ gap: 1.5rem; } -.definition-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1.25rem 2rem; -} - -.definition-list dt { - font-weight: 600; - color: var(--muted); - margin-bottom: 0.2rem; - text-transform: uppercase; - font-size: 0.75rem; -} - -.definition-list dd { - margin: 0; - font-size: 1rem; -} - .card { - background: var(--card-bg); - border: 1px solid var(--card-border); + background: var(--color-surface-overlay); + border: 1px solid var(--color-border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 1.5rem; @@ -200,32 +138,6 @@ gap: 1rem; } -.quick-link-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.quick-link-list li a { - font-weight: 600; - color: var(--brand-2); - text-decoration: none; -} - -.quick-link-list li a:hover, -.quick-link-list li a:focus { - text-decoration: underline; -} - -.quick-link-list p { - margin: 0.25rem 0 0; - color: var(--color-text-subtle); - font-size: 0.9rem; -} - .project-scenarios-card { display: flex; flex-direction: column; @@ -243,109 +155,6 @@ margin: 0; } -.scenario-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item { - background: rgba(21, 27, 35, 0.85); - border: 1px solid var(--card-border); - border-radius: var(--radius); - padding: 1.25rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item__body { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item__header { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.75rem; - justify-content: space-between; -} - -.scenario-item__header h3 { - margin: 0; - font-size: 1.1rem; -} - -.scenario-item__header a { - color: inherit; - text-decoration: none; -} - -.scenario-item__header a:hover, -.scenario-item__header a:focus { - text-decoration: underline; -} - -.status-pill { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.25rem 0.75rem; - border-radius: 999px; - font-size: 0.75rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.status-pill--draft { - background: rgba(59, 130, 246, 0.15); - color: #93c5fd; -} - -.status-pill--active { - background: rgba(34, 197, 94, 0.18); - color: #86efac; -} - -.status-pill--archived { - background: rgba(148, 163, 184, 0.24); - color: #cbd5f5; -} - -.scenario-item__meta { - display: grid; - gap: 0.75rem; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); -} - -.scenario-item__meta dt { - margin: 0; - font-size: 0.75rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.scenario-item__meta dd { - margin: 0; - font-size: 0.95rem; -} - -.scenario-item__actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; -} - -.scenario-item__actions .btn--link { - padding: 0; -} - .card-header { display: flex; align-items: center; @@ -362,41 +171,6 @@ gap: 1.5rem; } -.table-responsive { - overflow-x: auto; - border-radius: var(--table-radius); -} - -.table { - width: 100%; - border-collapse: collapse; - border-radius: var(--table-radius); - overflow: hidden; - box-shadow: var(--shadow); -} - -.table th, -.table td { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--card-border); - background: rgba(21, 27, 35, 0.85); -} - -.table tbody tr:hover { - background: var(--hover-highlight); -} - -.table-link { - color: var(--brand-2); - text-decoration: none; - margin-left: 0.5rem; -} - -.table-link:hover, -.table-link:focus { - text-decoration: underline; -} - .text-right { text-align: right; } @@ -406,18 +180,4 @@ grid-template-columns: 1.1fr 1.9fr; align-items: start; } - - .header-actions { - justify-content: flex-start; - } - - .scenario-item { - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .scenario-item__body { - max-width: 70%; - } } diff --git a/static/css/scenarios.css b/static/css/scenarios.css index a2c5637..e286409 100644 --- a/static/css/scenarios.css +++ b/static/css/scenarios.css @@ -1,35 +1,3 @@ -.scenario-meta { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 1.25rem; -} - -.table { - width: 100%; - border-collapse: collapse; - border-radius: var(--table-radius); - overflow: hidden; - box-shadow: var(--shadow); -} - -.table th, -.table td { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--color-border); - background: rgba(21, 27, 35, 0.85); -} - -.table tbody tr:hover { - background: rgba(43, 165, 143, 0.12); -} - -.header-actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; - justify-content: flex-end; -} - .scenario-metrics { display: grid; gap: 1.5rem; @@ -37,36 +5,6 @@ margin-bottom: 2rem; } -.metric-card { - background: rgba(21, 27, 35, 0.85); - border-radius: var(--radius); - padding: 1.5rem; - box-shadow: var(--shadow); - border: 1px solid var(--color-border); - display: flex; - flex-direction: column; - gap: 0.35rem; -} - -.metric-card h2 { - margin: 0; - font-size: 1rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.metric-value { - font-size: 2rem; - font-weight: 700; - margin: 0; -} - -.metric-caption { - color: var(--color-text-subtle); - font-size: 0.85rem; -} - .scenario-filters { display: grid; gap: 0.75rem; @@ -93,11 +31,13 @@ border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: rgba(8, 12, 19, 0.75); - color: var(--text); + background: color-mix(in srgb, var(--color-bg-elevated) 75%, transparent); + color: var(--color-text-primary); } .scenario-form { background: rgba(21, 27, 35, 0.85); + background: var(--color-surface-overlay); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); @@ -106,9 +46,11 @@ flex-direction: column; gap: 1.5rem; } + .scenario-form .card { background: rgba(21, 27, 35, 0.9); - border: 1px solid var(--card-border); + background: color-mix(in srgb, var(--color-surface-default) 90%, transparent); + border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; display: flex; @@ -120,64 +62,11 @@ margin: 0; } -.table-responsive { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - border-radius: var(--table-radius); - margin: 0; -} - -.table-responsive .table { - min-width: 640px; -} - -.table-responsive::-webkit-scrollbar { - height: 6px; -} - -.table-responsive::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); - border-radius: 999px; -} - -@media (min-width: 720px) { - .scenario-filters { - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - align-items: end; - } - - .scenario-filters .filter-actions { - justify-content: flex-end; - } - - .table-responsive .table { - min-width: 100%; - } -} - -@media (max-width: 640px) { - .breadcrumb { - flex-wrap: wrap; - gap: 0.35rem; - } - - .table th, - .table td { - padding: 0.55rem 0.65rem; - font-size: 0.9rem; - white-space: nowrap; - } - - .table tbody tr { - border-radius: var(--radius-sm); - } -} - .scenario-layout { display: grid; gap: 1.5rem; } + .scenario-column { display: grid; gap: 1.5rem; @@ -189,70 +78,6 @@ gap: 1rem; } -.quick-link-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.quick-link-list li a { - font-weight: 600; - color: var(--brand-2); - text-decoration: none; -} - -.quick-link-list li a:hover, -.quick-link-list li a:focus { - text-decoration: underline; -} - -.quick-link-list p { - margin: 0.25rem 0 0; - color: var(--color-text-subtle); - font-size: 0.9rem; -} - -.status-pill { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.35rem 0.85rem; - border-radius: 999px; - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.status-pill--draft { - background: rgba(59, 130, 246, 0.15); - color: #93c5fd; -} - -.status-pill--active { - background: rgba(34, 197, 94, 0.18); - color: #86efac; -} - -.status-pill--archived { - background: rgba(148, 163, 184, 0.24); - color: #cbd5f5; -} - -@media (min-width: 960px) { - .scenario-layout { - grid-template-columns: 1.1fr 1.9fr; - align-items: start; - } -} - -.empty-state { - color: var(--muted); - font-style: italic; -} - .scenario-portfolio { display: flex; flex-direction: column; @@ -266,95 +91,6 @@ gap: 1rem; } -.scenario-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item { - background: rgba(21, 27, 35, 0.85); - border: 1px solid var(--card-border); - border-radius: var(--radius); - padding: 1.25rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item__body { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.scenario-item__header { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.75rem; - justify-content: space-between; -} - -.scenario-item__header h3 { - margin: 0; - font-size: 1.1rem; -} - -.scenario-item__header a { - color: inherit; - text-decoration: none; -} - -.scenario-item__header a:hover, -.scenario-item__header a:focus { - text-decoration: underline; -} - -.scenario-item__meta { - display: grid; - gap: 0.75rem; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); -} - -.scenario-item__meta dt { - margin: 0; - font-size: 0.75rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.scenario-item__meta dd { - margin: 0; - font-size: 0.95rem; -} - -.scenario-item__actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; -} - -.scenario-item__actions .btn--link { - padding: 0; -} - -@media (min-width: 960px) { - .scenario-item { - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .scenario-item__body { - max-width: 70%; - } -} - .scenario-context-card { display: flex; flex-direction: column; @@ -383,14 +119,34 @@ font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; - color: var(--muted); + color: var(--color-text-muted); +} + +.scenario-layout .table tbody tr:hover, +.scenario-portfolio .table tbody tr:hover { + background: rgba(43, 165, 143, 0.12); + background: color-mix(in srgb, var(--color-accent) 18%, transparent); +} + +@media (min-width: 720px) { + .scenario-filters { + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + align-items: end; + } + + .scenario-filters .filter-actions { + justify-content: flex-end; + } +} + +@media (max-width: 640px) { + .breadcrumb { + flex-wrap: wrap; + gap: 0.35rem; + } } @media (min-width: 960px) { - .header-actions { - justify-content: flex-start; - } - .scenario-layout { grid-template-columns: 1.1fr 1.9fr; align-items: start; diff --git a/static/css/theme-default.css b/static/css/theme-default.css new file mode 100644 index 0000000..66ce055 --- /dev/null +++ b/static/css/theme-default.css @@ -0,0 +1,72 @@ +:root { + /* Neutral surfaces */ + --color-bg-base: #0b0f14; + --color-bg-elevated: #0f141b; + --color-surface-default: #151b23; + --color-surface-overlay: rgba(21, 27, 35, 0.7); + + --color-border-subtle: rgba(255, 255, 255, 0.08); + --color-border-card: rgba(255, 255, 255, 0.08); + --color-border-strong: rgba(255, 255, 255, 0.12); + --color-highlight: rgba(241, 178, 26, 0.08); + + /* Text */ + --color-text-primary: #e6edf3; + --color-text-muted: #a9b4c0; + --color-text-subtle: rgba(169, 180, 192, 0.6); + --color-text-invert: #ffffff; + --color-text-dark: #0f172a; + --color-text-strong: #111827; + + /* Brand & accent */ + --color-brand-base: #f1b21a; + --color-brand-bright: #f6c648; + --color-brand-soft: #f9d475; + --color-accent: #2ba58f; + + /* Semantic states */ + --color-success: #0c864d; + --color-info: #0b3d88; + --color-warning: #f59e0b; + --color-danger: #7a1721; + + /* Shadows & depth */ + --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); + --color-panel-shadow: rgba(0, 0, 0, 0.25); + --color-panel-shadow-deep: rgba(0, 0, 0, 0.35); + + /* Buttons */ + --btn-primary-bg: var(--color-brand-bright); + --btn-primary-color: var(--color-text-dark); + --btn-primary-hover: var(--color-brand-soft); + + --btn-secondary-bg: rgba(21, 27, 35, 0.85); + --btn-secondary-hover: rgba(21, 27, 35, 0.95); + --btn-secondary-border: var(--color-border-strong); + --btn-secondary-color: var(--color-text-primary); + + --btn-danger-bg: var(--color-danger); + --btn-danger-color: var(--color-text-invert); + --btn-danger-hover: #a21d2b; + + --btn-link-color: var(--color-brand-bright); + --btn-link-hover: var(--color-brand-soft); + --btn-ghost-color: var(--color-text-muted); + + /* Legacy aliases */ + --bg: var(--color-bg-base); + --bg-2: var(--color-bg-elevated); + --card: var(--color-surface-default); + --text: var(--color-text-primary); + --muted: var(--color-text-muted); + --brand: var(--color-brand-base); + --brand-2: var(--color-brand-bright); + --brand-3: var(--color-brand-soft); + --accent: var(--color-accent); + --success: var(--color-success); + --danger: var(--color-danger); + --info: var(--color-info); + --color-border: var(--color-border-subtle); + --card-border: var(--color-border-card); + --color-surface-alt: var(--color-surface-overlay); +} diff --git a/templates/base.html b/templates/base.html index 3108982..15e313d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,6 +4,7 @@ {% block title %}CalMiner{% endblock %} +