Public/Live_RC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tema

Browse Source
This commit is contained in:
larssand
2026-03-20 17:06:19 +01:00
parent ee8db954bc
commit eea545923c
1 changed files with 54 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/styles.css
View File

@@ -10,6 +10,15 @@
--accent-2: #ff3b30; --accent-2: #ff3b30;
--ok: #26c281; --ok: #26c281;
--warn: #f5a623; --warn: #f5a623;
--surface-soft: rgba(255, 255, 255, 0.02);
--surface-card: rgba(255, 255, 255, 0.03);
--surface-elevated: rgba(255, 255, 255, 0.025);
--field-bg: #0f1522;
--field-text: var(--text);
--table-head-bg: rgba(255, 255, 255, 0.03);
--table-hover-bg: rgba(255, 255, 255, 0.02);
--danger-soft: rgba(225, 6, 0, 0.08);
--danger-text: #ffd0d0;
--shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
} }
@@ -25,6 +34,15 @@ body[data-theme="nord"] {
--accent-2: #88c0d0; --accent-2: #88c0d0;
--ok: #79c9a4; --ok: #79c9a4;
--warn: #f0c674; --warn: #f0c674;
--surface-soft: rgba(255, 255, 255, 0.025);
--surface-card: rgba(255, 255, 255, 0.04);
--surface-elevated: rgba(255, 255, 255, 0.03);
--field-bg: #132033;
--field-text: var(--text);
--table-head-bg: rgba(255, 255, 255, 0.04);
--table-hover-bg: rgba(255, 255, 255, 0.03);
--danger-soft: rgba(191, 97, 106, 0.14);
--danger-text: #ffd8db;
--shadow: 0 12px 32px rgba(4, 10, 18, 0.42); --shadow: 0 12px 32px rgba(4, 10, 18, 0.42);
} }
@@ -40,6 +58,15 @@ body[data-theme="light"] {
--accent-2: #ef4444; --accent-2: #ef4444;
--ok: #1f9d67; --ok: #1f9d67;
--warn: #c98914; --warn: #c98914;
--surface-soft: rgba(20, 32, 51, 0.03);
--surface-card: rgba(20, 32, 51, 0.05);
--surface-elevated: rgba(20, 32, 51, 0.04);
--field-bg: #ffffff;
--field-text: #152033;
--table-head-bg: rgba(20, 32, 51, 0.05);
--table-hover-bg: rgba(20, 32, 51, 0.03);
--danger-soft: rgba(214, 40, 40, 0.08);
--danger-text: #8e1b1b;
--shadow: 0 10px 28px rgba(27, 45, 78, 0.12); --shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
} }
@@ -124,7 +151,7 @@ body {
.nav-item { .nav-item {
border: 1px solid var(--line); border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.02); background: var(--surface-soft);
color: var(--text); color: var(--text);
border-radius: 10px; border-radius: 10px;
padding: 10px 12px; padding: 10px 12px;
@@ -202,7 +229,7 @@ body {
border-radius: 999px; border-radius: 999px;
padding: 8px 12px; padding: 8px 12px;
font-weight: 600; font-weight: 600;
background: rgba(255, 255, 255, 0.02); background: var(--surface-soft);
} }
.topbar-right { .topbar-right {
@@ -248,8 +275,8 @@ body {
.stat-card { .stat-card {
background: background:
linear-gradient(170deg, rgba(225, 6, 0, 0.12), transparent 40%), linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
linear-gradient(180deg, #151d2d 0%, #121927 100%); linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
@@ -275,7 +302,7 @@ body {
} }
.panel { .panel {
background: linear-gradient(180deg, #131a28 0%, #101724 100%); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
@@ -319,8 +346,8 @@ body {
} }
.btn { .btn {
border: 1px solid #425273; border: 1px solid color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
background: linear-gradient(180deg, #1a2334 0%, #141c2b 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, white 12%) 0%, var(--panel-2) 100%);
color: var(--text); color: var(--text);
border-radius: 10px; border-radius: 10px;
font-weight: 700; font-weight: 700;
@@ -329,7 +356,7 @@ body {
} }
.btn:hover { .btn:hover {
border-color: #60739b; border-color: color-mix(in srgb, var(--line) 45%, var(--accent) 55%);
} }
.btn-primary { .btn-primary {
@@ -359,7 +386,7 @@ body {
padding: 12px; padding: 12px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.025); background: var(--surface-elevated);
} }
.field-card-checkbox { .field-card-checkbox {
@@ -405,7 +432,7 @@ body {
padding: 10px; padding: 10px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.025); background: var(--surface-elevated);
display: grid; display: grid;
gap: 5px; gap: 5px;
} }
@@ -564,14 +591,14 @@ body {
.race-actions-panel { .race-actions-panel {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.025); background: var(--surface-elevated);
overflow: hidden; overflow: hidden;
} }
.race-format-section .panel-header, .race-format-section .panel-header,
.race-summary-card .panel-header, .race-summary-card .panel-header,
.race-actions-panel .panel-header { .race-actions-panel .panel-header {
background: rgba(255, 255, 255, 0.02); background: var(--surface-soft);
} }
.race-format-grid { .race-format-grid {
@@ -605,7 +632,7 @@ body {
padding: 10px 12px; padding: 10px 12px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.03); background: var(--surface-card);
} }
.race-summary-item span { .race-summary-item span {
@@ -686,7 +713,7 @@ body {
padding: 14px; padding: 14px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03); background: var(--surface-card);
display: grid; display: grid;
gap: 8px; gap: 8px;
} }
@@ -715,10 +742,10 @@ body {
input, input,
select { select {
width: 100%; width: 100%;
background: #0f1522; background: var(--field-bg);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
color: var(--text); color: var(--field-text);
padding: 9px 10px; padding: 9px 10px;
} }
@@ -737,8 +764,8 @@ select:focus {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
background: #0b1019; background: color-mix(in srgb, var(--panel-2) 94%, black 6%);
color: #c8d6f5; color: var(--text);
white-space: pre-wrap; white-space: pre-wrap;
font-family: "SFMono-Regular", Consolas, monospace; font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.82rem; font-size: 0.82rem;
@@ -750,7 +777,7 @@ select:focus {
} }
.data-table thead { .data-table thead {
background: rgba(255, 255, 255, 0.03); background: var(--table-head-bg);
} }
.data-table th, .data-table th,
@@ -762,19 +789,19 @@ select:focus {
} }
.data-table tr.passing-invalid td { .data-table tr.passing-invalid td {
background: rgba(225, 6, 0, 0.08); background: var(--danger-soft);
color: #ffd0d0; color: var(--danger-text);
} }
.data-table th { .data-table th {
color: #bdc8e3; color: var(--muted);
font-size: 0.82rem; font-size: 0.82rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.55px; letter-spacing: 0.55px;
} }
.data-table tbody tr:hover { .data-table tbody tr:hover {
background: rgba(255, 255, 255, 0.02); background: var(--table-hover-bg);
} }
.simple-list { .simple-list {
@@ -792,7 +819,7 @@ select:focus {
} }
.assignment-group { .assignment-group {
background: rgba(255, 255, 255, 0.02); background: var(--surface-soft);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 12px;
padding: 10px; padding: 10px;
@@ -821,7 +848,7 @@ select:focus {
.form-error { .form-error {
grid-column: 1 / -1; grid-column: 1 / -1;
margin: 0; margin: 0;
color: #ff9b9b; color: color-mix(in srgb, var(--accent) 62%, white 38%);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -844,7 +871,7 @@ select:focus {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
padding: 14px 16px; padding: 14px 16px;
background: rgba(255, 255, 255, 0.03); background: var(--surface-card);
} }
.dashboard-live-card span, .dashboard-live-card span,
@@ -870,7 +897,7 @@ select:focus {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.03); background: var(--surface-card);
display: grid; display: grid;
gap: 10px; gap: 10px;
} }