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

134
src/styles.css
View File

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