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

fix style color

Browse Source
This commit is contained in:
larssand
2026-08-30 15:10:00 +02:00
parent 5366043979
commit fdc99e64bb
2 changed files with 79 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.js
View File

@@ -368,7 +368,7 @@ const TRANSLATIONS = {
"nav.guide_sub": "Dokumentation och uppstart", "nav.guide_sub": "Dokumentation och uppstart",
"ui.language": "Språk", "ui.language": "Språk",
"ui.theme": "Tema", "ui.theme": "Tema",
"ui.theme_dark": "Mörk", "ui.theme_dark": "RaceCore",
"ui.theme_nord": "Nord", "ui.theme_nord": "Nord",
"ui.theme_light": "Ljus", "ui.theme_light": "Ljus",
"brand.title": "RC RaceCore", "brand.title": "RC RaceCore",
@@ -1612,7 +1612,7 @@ const TRANSLATIONS = {
"nav.guide_sub": "Documentation and setup", "nav.guide_sub": "Documentation and setup",
"ui.language": "Language", "ui.language": "Language",
"ui.theme": "Theme", "ui.theme": "Theme",
"ui.theme_dark": "Dark", "ui.theme_dark": "RaceCore",
"ui.theme_nord": "Nord", "ui.theme_nord": "Nord",
"ui.theme_light": "Light", "ui.theme_light": "Light",
"brand.title": "RC RaceCore", "brand.title": "RC RaceCore",

134
src/styles.css
View File

@@ -1,25 +1,25 @@
:root { :root {
--bg: #07090e; --bg: #090f1c;
--bg-soft: #0f1420; --bg-soft: #101a2e;
--panel: #131a28; --panel: #141f34;
--panel-2: #0c1220; --panel-2: #0c1527;
--line: #273149; --line: #2a3a58;
--text: #f3f7ff; --text: #f7f8fb;
--muted: #98a7c8; --muted: #9aa9c4;
--accent: #e10600; --accent: #d21f22;
--accent-2: #ff3b30; --accent-2: #0ea5e9;
--ok: #26c281; --ok: #26c281;
--warn: #f5a623; --warn: #f5a623;
--success: var(--ok); --success: var(--ok);
--danger: var(--accent-2); --danger: #ef4444;
--surface-soft: rgba(255, 255, 255, 0.02); --surface-soft: rgba(255, 255, 255, 0.02);
--surface-card: rgba(255, 255, 255, 0.03); --surface-card: rgba(255, 255, 255, 0.03);
--surface-elevated: rgba(255, 255, 255, 0.025); --surface-elevated: rgba(255, 255, 255, 0.025);
--field-bg: #0f1522; --field-bg: #101a2b;
--field-text: var(--text); --field-text: var(--text);
--table-head-bg: rgba(255, 255, 255, 0.03); --table-head-bg: rgba(255, 255, 255, 0.03);
--table-hover-bg: rgba(255, 255, 255, 0.02); --table-hover-bg: rgba(255, 255, 255, 0.02);
--danger-soft: rgba(225, 6, 0, 0.08); --danger-soft: rgba(239, 68, 68, 0.1);
--danger-text: #ffd0d0; --danger-text: #ffd0d0;
--shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
} }
@@ -36,6 +36,7 @@ body[data-theme="nord"] {
--accent-2: #88c0d0; --accent-2: #88c0d0;
--ok: #79c9a4; --ok: #79c9a4;
--warn: #f0c674; --warn: #f0c674;
--danger: #bf616a;
--surface-soft: rgba(255, 255, 255, 0.025); --surface-soft: rgba(255, 255, 255, 0.025);
--surface-card: rgba(255, 255, 255, 0.04); --surface-card: rgba(255, 255, 255, 0.04);
--surface-elevated: rgba(255, 255, 255, 0.03); --surface-elevated: rgba(255, 255, 255, 0.03);
@@ -49,25 +50,26 @@ body[data-theme="nord"] {
} }
body[data-theme="light"] { body[data-theme="light"] {
--bg: #eef2f8; --bg: #f2f3f5;
--bg-soft: #f7f9fc; --bg-soft: #fcfbf8;
--panel: #ffffff; --panel: #ffffff;
--panel-2: #ecf1f7; --panel-2: #f3f4f6;
--line: #cfd8e6; --line: #d7dae0;
--text: #152033; --text: #292b31;
--muted: #5f708d; --muted: #69707d;
--accent: #d62828; --accent: #d21f22;
--accent-2: #ef4444; --accent-2: #0e91c8;
--ok: #1f9d67; --ok: #1f9d67;
--warn: #c98914; --warn: #c98914;
--danger: #c62828;
--surface-soft: rgba(20, 32, 51, 0.03); --surface-soft: rgba(20, 32, 51, 0.03);
--surface-card: rgba(20, 32, 51, 0.05); --surface-card: rgba(20, 32, 51, 0.05);
--surface-elevated: rgba(20, 32, 51, 0.04); --surface-elevated: rgba(20, 32, 51, 0.04);
--field-bg: #ffffff; --field-bg: #ffffff;
--field-text: #152033; --field-text: #292b31;
--table-head-bg: rgba(20, 32, 51, 0.05); --table-head-bg: rgba(20, 32, 51, 0.05);
--table-hover-bg: rgba(20, 32, 51, 0.03); --table-hover-bg: rgba(20, 32, 51, 0.03);
--danger-soft: rgba(214, 40, 40, 0.08); --danger-soft: rgba(198, 40, 40, 0.08);
--danger-text: #8e1b1b; --danger-text: #8e1b1b;
--shadow: 0 10px 28px rgba(27, 45, 78, 0.12); --shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
} }
@@ -96,7 +98,7 @@ body {
.sidebar { .sidebar {
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
background: background:
linear-gradient(180deg, rgba(225, 6, 0, 0.1), transparent 25%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 25%),
repeating-linear-gradient( repeating-linear-gradient(
-32deg, -32deg,
rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 0,
@@ -132,8 +134,13 @@ body {
place-items: center; place-items: center;
font-family: Orbitron, sans-serif; font-family: Orbitron, sans-serif;
font-weight: 800; font-weight: 800;
background: linear-gradient(135deg, #ff574f 0%, var(--accent) 55%, #8b0000 100%); background: linear-gradient(
box-shadow: 0 8px 20px rgba(225, 6, 0, 0.5); 135deg,
color-mix(in srgb, var(--accent) 72%, white 28%) 0%,
var(--accent) 55%,
color-mix(in srgb, var(--accent) 62%, black 38%) 100%
);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 46%, transparent);
} }
.brand h1 { .brand h1 {
@@ -183,13 +190,17 @@ body {
} }
.nav-item:hover { .nav-item:hover {
border-color: #405076; border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
transform: translateX(3px); transform: translateX(3px);
} }
.nav-item.active { .nav-item.active {
border-color: rgba(255, 88, 79, 0.55); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background: linear-gradient(90deg, rgba(225, 6, 0, 0.3), rgba(225, 6, 0, 0.1)); background: linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 30%, transparent),
color-mix(in srgb, var(--accent) 10%, transparent)
);
} }
.sidebar-footer { .sidebar-footer {
@@ -249,15 +260,15 @@ body {
} }
.badge-online { .badge-online {
color: #b8ffd6; color: color-mix(in srgb, var(--success) 58%, white 42%);
border-color: rgba(38, 194, 129, 0.7); border-color: color-mix(in srgb, var(--success) 70%, transparent);
background: rgba(38, 194, 129, 0.18); background: color-mix(in srgb, var(--success) 18%, transparent);
} }
.badge-offline { .badge-offline {
color: #ffd2cf; color: color-mix(in srgb, var(--danger) 38%, white 62%);
border-color: rgba(225, 6, 0, 0.7); border-color: color-mix(in srgb, var(--danger) 70%, transparent);
background: rgba(225, 6, 0, 0.15); background: color-mix(in srgb, var(--danger) 15%, transparent);
} }
.badge.success { .badge.success {
@@ -1520,13 +1531,22 @@ body {
} }
.btn-primary { .btn-primary {
border-color: #b11714; border-color: color-mix(in srgb, var(--accent) 72%, black 28%);
background: linear-gradient(180deg, #f20d07 0%, #d30702 52%, #8e0603 100%); background: linear-gradient(
180deg,
color-mix(in srgb, var(--accent) 78%, white 22%) 0%,
var(--accent) 52%,
color-mix(in srgb, var(--accent) 64%, black 36%) 100%
);
} }
.btn-danger { .btn-danger {
border-color: #843137; border-color: color-mix(in srgb, var(--danger) 62%, black 38%);
background: linear-gradient(180deg, #8f222a, #66181e); background: linear-gradient(
180deg,
color-mix(in srgb, var(--danger) 72%, black 28%),
color-mix(in srgb, var(--danger) 52%, black 48%)
);
} }
.btn-mini { .btn-mini {
@@ -1592,8 +1612,8 @@ body {
} }
.btn.is-active { .btn.is-active {
border-color: #d30702; border-color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(242, 13, 7, 0.25); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
} }
.race-wizard-steps, .race-wizard-steps,
@@ -1636,14 +1656,14 @@ body {
} }
.wizard-step-active { .wizard-step-active {
border-color: rgba(225, 6, 0, 0.55); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background: rgba(225, 6, 0, 0.08); background: color-mix(in srgb, var(--accent) 8%, transparent);
} }
.wizard-step-complete span, .wizard-step-complete span,
.wizard-step-active span { .wizard-step-active span {
border-color: #d30702; border-color: var(--accent);
background: rgba(225, 6, 0, 0.16); background: color-mix(in srgb, var(--accent) 16%, transparent);
} }
.manage-step-card p { .manage-step-card p {
@@ -1663,14 +1683,14 @@ body {
} }
.manage-step-card-link:hover { .manage-step-card-link:hover {
border-color: rgba(225, 6, 0, 0.32); border-color: color-mix(in srgb, var(--accent) 32%, transparent);
transform: translateY(-1px); transform: translateY(-1px);
} }
.manage-step-card-link:focus-visible { .manage-step-card-link:focus-visible {
outline: none; outline: none;
border-color: rgba(225, 6, 0, 0.52); border-color: color-mix(in srgb, var(--accent) 52%, transparent);
box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
} }
.status-chip { .status-chip {
@@ -1789,8 +1809,8 @@ body {
.race-format-context-card { .race-format-context-card {
grid-column: span 2; grid-column: span 2;
border-color: rgba(225, 6, 0, 0.22); border-color: color-mix(in srgb, var(--accent) 22%, transparent);
background: rgba(225, 6, 0, 0.06); background: color-mix(in srgb, var(--accent) 6%, transparent);
} }
.race-preset-actions-card-compact .actions-inline { .race-preset-actions-card-compact .actions-inline {
@@ -1928,8 +1948,8 @@ select {
input:focus, input:focus,
select:focus { select:focus {
outline: none; outline: none;
border-color: #6578a4; border-color: color-mix(in srgb, var(--accent-2) 62%, var(--line));
box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
} }
.log-box { .log-box {
@@ -2270,7 +2290,7 @@ select:focus {
} }
.data-table tr.judge-selected-row td { .data-table tr.judge-selected-row td {
background: rgba(225, 6, 0, 0.08); background: color-mix(in srgb, var(--accent) 8%, transparent);
} }
.grid-editor-toolbar { .grid-editor-toolbar {
@@ -2306,8 +2326,8 @@ select:focus {
} }
.drag-item-over { .drag-item-over {
border-color: rgba(225, 6, 0, 0.8); border-color: color-mix(in srgb, var(--accent) 80%, transparent);
background: rgba(225, 6, 0, 0.12); background: color-mix(in srgb, var(--accent) 12%, transparent);
} }
.logo-preview { .logo-preview {
@@ -3198,7 +3218,7 @@ select:focus {
} }
.overlay-prediction-late { .overlay-prediction-late {
background: linear-gradient(90deg, #ffd0d0, #e10600); background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 24%, white), var(--danger));
animation: overlayPredictionLatePulse 1.1s ease-in-out infinite; animation: overlayPredictionLatePulse 1.1s ease-in-out infinite;
} }
@@ -3308,8 +3328,8 @@ select:focus {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 16px;
background: background:
linear-gradient(180deg, rgba(225, 6, 0, 0.08), transparent 20%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 20%),
linear-gradient(180deg, #131a28 0%, #101724 100%); linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
} }