4036 lines
81 KiB
CSS
4036 lines
81 KiB
CSS
:root {
|
|
--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: #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: #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(239, 68, 68, 0.1);
|
|
--danger-text: #ffd0d0;
|
|
--shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
body[data-theme="nord"] {
|
|
--bg: #0b1220;
|
|
--bg-soft: #131d31;
|
|
--panel: #182235;
|
|
--panel-2: #10192b;
|
|
--line: #31425f;
|
|
--text: #edf3ff;
|
|
--muted: #a7b8d8;
|
|
--accent: #5e81ac;
|
|
--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);
|
|
--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);
|
|
}
|
|
|
|
body[data-theme="light"] {
|
|
--bg: #f2f3f5;
|
|
--bg-soft: #fcfbf8;
|
|
--panel: #ffffff;
|
|
--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: #292b31;
|
|
--table-head-bg: rgba(20, 32, 51, 0.05);
|
|
--table-hover-bg: rgba(20, 32, 51, 0.03);
|
|
--danger-soft: rgba(198, 40, 40, 0.08);
|
|
--danger-text: #8e1b1b;
|
|
--shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Barlow, "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
|
|
radial-gradient(circle at 100% 80%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%),
|
|
linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #000 10%) 0%, var(--bg-soft) 55%, var(--bg) 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 25%),
|
|
repeating-linear-gradient(
|
|
-32deg,
|
|
rgba(255, 255, 255, 0.02) 0,
|
|
rgba(255, 255, 255, 0.02) 6px,
|
|
transparent 6px,
|
|
transparent 18px
|
|
),
|
|
var(--panel-2);
|
|
padding: 20px 16px;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.brand-mark {
|
|
overflow: hidden;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-family: Orbitron, sans-serif;
|
|
font-weight: 800;
|
|
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 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1.05rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.brand p {
|
|
margin: 4px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.nav {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding-top: 6px;
|
|
align-content: start;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-group-label {
|
|
margin: 9px 4px 1px;
|
|
color: var(--muted);
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-group-label:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.nav-item {
|
|
border: 1px solid var(--line);
|
|
background: var(--surface-soft);
|
|
color: var(--text);
|
|
border-radius: 10px;
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.nav-item.active {
|
|
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)
|
|
);
|
|
}
|
|
|
|
.app-version {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.app-version[hidden] { display: none; }
|
|
|
|
.sidebar-footer {
|
|
position: static;
|
|
margin-top: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.open-practice-quickstart {
|
|
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
|
background:
|
|
linear-gradient(115deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%),
|
|
var(--panel);
|
|
}
|
|
|
|
.open-practice-quickstart-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
|
|
gap: 18px;
|
|
align-items: end;
|
|
}
|
|
|
|
.open-practice-benefits {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.open-practice-benefits span {
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 6px 10px;
|
|
color: var(--muted);
|
|
background: var(--surface-soft);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.open-practice-quickstart-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.open-practice-quickstart-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
border-radius: 999px;
|
|
padding: 5px 10px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.badge-online {
|
|
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: 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 {
|
|
color: color-mix(in srgb, #47d98a 70%, var(--text) 30%);
|
|
border-color: color-mix(in srgb, #47d98a 55%, var(--line) 45%);
|
|
background: color-mix(in srgb, #47d98a 14%, transparent);
|
|
}
|
|
|
|
.content {
|
|
padding: 20px 24px 26px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
padding-bottom: 14px;
|
|
}
|
|
|
|
.topbar h2 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.topbar p {
|
|
margin: 6px 0 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chip {
|
|
margin: 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 8px 12px;
|
|
font-weight: 600;
|
|
background: var(--surface-soft);
|
|
}
|
|
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.lang-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.lang-select {
|
|
width: 70px;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.theme-wrap {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.theme-select {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.view {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.stat-card {
|
|
background:
|
|
linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
|
|
linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.stat-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.stat-card h3 {
|
|
margin: 6px 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.training-hero {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
border: 1px solid color-mix(in srgb, var(--line) 65%, var(--accent) 35%);
|
|
border-radius: 18px;
|
|
background:
|
|
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%),
|
|
linear-gradient(135deg, var(--panel), var(--panel-2));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-hero h3 {
|
|
margin: 5px 0 4px;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1.8rem, 4vw, 3.2rem);
|
|
}
|
|
|
|
.training-hero p {
|
|
max-width: 720px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-kicker {
|
|
color: color-mix(in srgb, var(--accent) 65%, var(--text) 35%);
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.training-driver-select {
|
|
display: grid;
|
|
min-width: min(320px, 100%);
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.training-hero-controls {
|
|
display: grid;
|
|
justify-items: end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.training-hero-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.training-live-card {
|
|
margin-top: 14px;
|
|
padding: 16px 18px;
|
|
border: 1px solid color-mix(in srgb, var(--success) 52%, var(--line) 48%);
|
|
border-radius: 16px;
|
|
background:
|
|
linear-gradient(110deg, color-mix(in srgb, var(--success) 12%, transparent), transparent 48%),
|
|
var(--panel);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-live-head {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.training-live-head h3,
|
|
.training-live-card > p {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-live-card > p {
|
|
color: var(--muted);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.training-live-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
margin: 14px 0 10px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.training-live-stats > div {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.training-live-stats > div:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.training-live-stats span {
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.training-live-stats strong {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.training-stats {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-motivation-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-credit-card,
|
|
.training-missions-card {
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-credit-card {
|
|
background:
|
|
radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--success) 22%, transparent), transparent 42%),
|
|
linear-gradient(140deg, color-mix(in srgb, var(--success) 10%, var(--panel) 90%), var(--panel));
|
|
}
|
|
|
|
.training-credit-card h3,
|
|
.training-missions-card h3 {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-credit-card > p,
|
|
.training-missions-card > p {
|
|
margin: 8px 0 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-credit-card ul {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 14px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.training-credit-card li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
|
|
.training-credit-card li > span {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, var(--success) 22%, var(--panel-2) 78%);
|
|
color: color-mix(in srgb, var(--success) 62%, var(--text) 38%);
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.training-missions-card {
|
|
background: var(--panel);
|
|
}
|
|
|
|
.training-missions {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.training-mission {
|
|
display: flex;
|
|
min-width: 0;
|
|
gap: 9px;
|
|
padding: 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.training-mission > div {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.training-mission strong,
|
|
.training-mission small {
|
|
display: block;
|
|
}
|
|
|
|
.training-mission small {
|
|
margin: 3px 0 8px;
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.training-mission-check {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 9px;
|
|
background: color-mix(in srgb, var(--accent) 18%, var(--panel-2) 82%);
|
|
color: color-mix(in srgb, var(--accent) 58%, var(--text) 42%);
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.training-mission.is-complete {
|
|
border-color: color-mix(in srgb, var(--success) 48%, var(--line) 52%);
|
|
}
|
|
|
|
.training-mission.is-complete .training-mission-check {
|
|
background: color-mix(in srgb, var(--success) 22%, var(--panel-2) 78%);
|
|
color: color-mix(in srgb, var(--success) 62%, var(--text) 38%);
|
|
}
|
|
|
|
.training-mission .training-progress {
|
|
height: 4px;
|
|
}
|
|
|
|
.training-club-goal-panel .panel-header h3 {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-club-goal {
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(130deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
|
|
var(--surface-elevated);
|
|
}
|
|
|
|
.training-club-goal.is-reached {
|
|
border-color: color-mix(in srgb, var(--success) 55%, var(--line) 45%);
|
|
}
|
|
|
|
.training-club-goal-head {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.training-club-goal-head h3 {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-club-goal-head > strong {
|
|
font-family: Orbitron, sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.training-club-goal > p {
|
|
margin: 9px 0 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-club-goal .actions {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.training-club-goal-editor {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.training-club-goal-editor > summary {
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.training-club-goal-form {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
|
|
align-items: end;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.training-development-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-development-card {
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background:
|
|
linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
|
|
var(--panel);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-development-card .training-section-title {
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.training-development-card .training-section-title h3,
|
|
.training-progress-panel .panel-header h3 {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-development-card > p {
|
|
margin: 12px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.training-trend-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.training-trend-metrics > div {
|
|
display: grid;
|
|
gap: 5px;
|
|
padding: 13px;
|
|
}
|
|
|
|
.training-trend-metrics > div + div {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.training-trend-metrics span,
|
|
.training-achievement small,
|
|
.training-progress-entry small {
|
|
color: var(--muted);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.training-achievements {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.training-achievement {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 9px;
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 11px;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.training-achievement.is-next {
|
|
opacity: 0.68;
|
|
}
|
|
|
|
.training-achievement-mark,
|
|
.training-progress-initial {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--accent) 18%, var(--panel-2) 82%);
|
|
color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.training-achievement.is-unlocked .training-achievement-mark {
|
|
background: color-mix(in srgb, var(--success) 20%, var(--panel-2) 80%);
|
|
color: color-mix(in srgb, var(--success) 62%, var(--text) 38%);
|
|
}
|
|
|
|
.training-achievement strong,
|
|
.training-achievement small,
|
|
.training-progress-entry strong,
|
|
.training-progress-entry small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.training-progress-feed {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 9px;
|
|
}
|
|
|
|
.training-progress-entry.training-club-driver {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 11px;
|
|
padding: 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
text-align: left;
|
|
}
|
|
|
|
.training-insight-grid,
|
|
.training-focus-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-secondary {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.training-disclosure {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--panel) 94%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-disclosure > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 14px 16px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.training-disclosure > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.training-disclosure > summary > span:first-child {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.training-disclosure > summary small {
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.training-disclosure-arrow {
|
|
color: var(--muted);
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1.15rem;
|
|
transition: transform 160ms ease, color 160ms ease;
|
|
}
|
|
|
|
.training-disclosure[open] .training-disclosure-arrow {
|
|
color: var(--accent);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.training-disclosure-body {
|
|
padding: 16px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.training-simple-section {
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 13px;
|
|
background: color-mix(in srgb, var(--panel-2) 72%, transparent);
|
|
}
|
|
|
|
.training-simple-section h3 {
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.training-simple-head,
|
|
.training-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.training-simple-head h3,
|
|
.training-section-title h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.training-share-compact {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.training-share-compact p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-share-compact .training-share-url {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.training-section-title {
|
|
margin: 18px 0 8px;
|
|
}
|
|
|
|
.training-milestone-card,
|
|
.training-insights {
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: var(--panel);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.training-milestone-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
gap: 8px 18px;
|
|
padding: 18px;
|
|
background:
|
|
linear-gradient(115deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%),
|
|
var(--panel);
|
|
}
|
|
|
|
.training-milestone-card h3,
|
|
.training-milestone-card p {
|
|
margin: 5px 0 0;
|
|
}
|
|
|
|
.training-milestone-card p,
|
|
.training-insights span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-milestone-card > strong {
|
|
font-family: Orbitron, sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.training-milestone-card .training-progress {
|
|
grid-column: 1 / -1;
|
|
margin: 6px 0 0;
|
|
}
|
|
|
|
.training-insights {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.training-insights > div {
|
|
display: grid;
|
|
gap: 5px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.training-insights > div:nth-child(odd) {
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.training-insights > div:nth-last-child(-n + 2) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.training-insights span {
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.training-insights strong {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.training-history-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.training-history-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.training-history-table th,
|
|
.training-history-table td {
|
|
padding: 11px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.training-history-table th {
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.training-pace-heatmap {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.training-pace-cell {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 4px 8px;
|
|
min-height: 106px;
|
|
padding: 12px;
|
|
border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
|
|
border-radius: 12px;
|
|
background:
|
|
linear-gradient(145deg, color-mix(in srgb, var(--success) var(--pace-heat), transparent), transparent 72%),
|
|
var(--surface-elevated);
|
|
}
|
|
|
|
.training-pace-cell > span,
|
|
.training-pace-cell > strong {
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.training-pace-cell > b {
|
|
grid-column: 1 / -1;
|
|
font: 700 1.12rem Orbitron, sans-serif;
|
|
}
|
|
|
|
.training-pace-cell > small {
|
|
grid-column: 1 / -1;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-pace-cell > em {
|
|
grid-column: 1 / -1;
|
|
width: fit-content;
|
|
padding: 3px 7px;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
|
|
border-radius: 999px;
|
|
color: color-mix(in srgb, var(--accent) 58%, var(--text));
|
|
font-size: 0.68rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.training-extra-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
|
|
gap: 12px;
|
|
margin: 12px 0 18px;
|
|
}
|
|
|
|
.training-extra-grid .training-simple-section {
|
|
min-width: 0;
|
|
}
|
|
|
|
.training-marker-form {
|
|
grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr) auto;
|
|
align-items: end;
|
|
}
|
|
|
|
.training-marker-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.training-marker-list {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-marker-entry {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.training-marker-entry div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.training-marker-entry span,
|
|
.training-marker-entry strong,
|
|
.training-marker-entry small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.training-marker-entry span,
|
|
.training-marker-entry small {
|
|
color: var(--muted);
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.training-marker-entry > b {
|
|
font-size: 0.76rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.training-marker-entry > b.is-positive {
|
|
color: var(--success);
|
|
}
|
|
|
|
.training-marker-entry > b.is-negative {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.training-weekdays {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.training-weekdays article {
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.training-weekdays span,
|
|
.training-weekdays small {
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.training-weekdays strong {
|
|
font-family: Orbitron, sans-serif;
|
|
}
|
|
|
|
.training-stint-table {
|
|
min-width: 1040px;
|
|
}
|
|
|
|
.training-stint-table tr.is-muted {
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.training-stint-all {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.training-stint-all > summary {
|
|
width: fit-content;
|
|
cursor: pointer;
|
|
color: color-mix(in srgb, var(--accent) 62%, var(--text));
|
|
font-weight: 700;
|
|
}
|
|
|
|
.training-stint-all > .training-history-wrap {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.training-method-note {
|
|
margin: 14px 0 0;
|
|
}
|
|
|
|
.training-club-table tr.is-selected td {
|
|
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
}
|
|
|
|
.training-club-driver {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.training-club-driver:hover {
|
|
color: color-mix(in srgb, var(--accent) 65%, var(--text) 35%);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.training-share-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
|
|
align-items: end;
|
|
gap: 16px;
|
|
}
|
|
|
|
.training-share-body p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-share-url {
|
|
display: grid;
|
|
grid-column: 2;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.training-share-body > .actions {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.training-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.training-plan .panel-body > h3 {
|
|
margin: 8px 0;
|
|
font-family: Orbitron, sans-serif;
|
|
}
|
|
|
|
.training-plan .panel-body > p {
|
|
color: var(--muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.training-blocks {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.training-blocks div {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 14px;
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--surface-elevated) 88%, var(--accent) 12%);
|
|
}
|
|
|
|
.training-blocks strong {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.training-blocks span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-goal-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.training-presets {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.training-goals {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.training-goal {
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.training-goal.reached {
|
|
border-color: color-mix(in srgb, #47d98a 60%, var(--line) 40%);
|
|
}
|
|
|
|
.training-goal.claimed {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.training-goal-head {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.training-goal h4 {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.training-goal-head > strong {
|
|
white-space: nowrap;
|
|
font-family: Orbitron, sans-serif;
|
|
}
|
|
|
|
.training-goal p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.training-progress {
|
|
height: 6px;
|
|
margin: 14px 0;
|
|
overflow: hidden;
|
|
border-radius: 99px;
|
|
background: color-mix(in srgb, var(--line) 75%, transparent);
|
|
}
|
|
|
|
.training-progress span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, var(--accent), #ffcc4d);
|
|
}
|
|
|
|
.training-empty {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.panel-row {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.panel {
|
|
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-header {
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.panel-header-with-pill {
|
|
gap: 10px;
|
|
}
|
|
|
|
.panel-header h3 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.settings-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.decoder-settings-form {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.decoder-layout-picker,
|
|
.decoder-connection-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.decoder-layout-picker .hint,
|
|
.decoder-connection-card .hint,
|
|
.decoder-role-header p {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.decoder-layout-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.decoder-layout-button {
|
|
min-height: 44px;
|
|
text-align: left;
|
|
}
|
|
|
|
.decoder-layout-button.is-active {
|
|
border-color: var(--accent-2);
|
|
background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, var(--panel)), var(--panel-2));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent);
|
|
}
|
|
|
|
.decoder-role-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.decoder-role-card {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
transition: border-color 160ms ease, opacity 160ms ease;
|
|
}
|
|
|
|
.decoder-role-card-main {
|
|
border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
|
|
}
|
|
|
|
.decoder-role-card.is-disabled {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.decoder-role-card.is-disabled .decoder-role-body {
|
|
opacity: 0.52;
|
|
}
|
|
|
|
.decoder-role-header {
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.decoder-role-header > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.decoder-role-header p {
|
|
min-height: 2.5em;
|
|
color: var(--muted);
|
|
font-size: 0.84rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.decoder-role-badge {
|
|
padding: 3px 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.decoder-role-badge.is-required {
|
|
border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
|
|
color: var(--ok);
|
|
}
|
|
|
|
.decoder-role-toggle {
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
background: var(--surface-soft);
|
|
}
|
|
|
|
.decoder-role-body,
|
|
.decoder-role-body > label {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.decoder-pit-fields {
|
|
gap: 10px;
|
|
}
|
|
|
|
.decoder-connection-card {
|
|
grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr) minmax(170px, 0.55fr) auto;
|
|
align-items: end;
|
|
}
|
|
|
|
.decoder-connection-card > label {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.decoder-reconnect-toggle {
|
|
min-height: 40px;
|
|
align-self: end;
|
|
}
|
|
|
|
.decoder-settings-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.settings-grid-toggles .toggle {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.settings-audio-wide {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.csv-import-guide {
|
|
margin-top: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.csv-import-guide > summary {
|
|
padding: 11px 13px;
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.csv-import-guide[open] > summary {
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--accent-2) 8%, transparent);
|
|
}
|
|
|
|
.csv-import-guide-body {
|
|
padding: 12px 13px 14px;
|
|
}
|
|
|
|
.csv-import-guide-body p {
|
|
margin: 0 0 8px;
|
|
color: var(--muted);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.csv-import-guide-body p strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.csv-import-example-label {
|
|
display: block;
|
|
margin: 12px 0 6px;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.csv-import-guide pre {
|
|
margin: 0;
|
|
padding: 11px 12px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
background: var(--field-bg);
|
|
color: var(--field-text);
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
border: 1px solid color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, white 12%) 0%, var(--panel-2) 100%);
|
|
color: var(--text);
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
padding: 9px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: color-mix(in srgb, var(--line) 45%, var(--accent) 55%);
|
|
}
|
|
|
|
.btn-primary {
|
|
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: 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 {
|
|
padding: 3px 8px;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-grid > label {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-content: start;
|
|
}
|
|
|
|
.form-grid > label > small {
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.span-5 {
|
|
grid-column: span 5;
|
|
}
|
|
|
|
.field-card {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-content: start;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.field-card-checkbox {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.field-label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field-hint {
|
|
color: var(--muted);
|
|
font-size: 0.84rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.cols-5 {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.btn.is-active {
|
|
border-color: var(--accent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
|
|
}
|
|
|
|
.race-wizard-steps,
|
|
.manage-step-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-step,
|
|
.manage-step-card {
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.manage-step-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-step span {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.wizard-step strong,
|
|
.manage-step-card strong {
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.wizard-step-active {
|
|
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: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 16%, transparent);
|
|
}
|
|
|
|
.manage-step-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.manage-step-meta {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.manage-step-card-link {
|
|
cursor: pointer;
|
|
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.manage-step-card-link:hover {
|
|
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.manage-step-card-link:focus-visible {
|
|
outline: none;
|
|
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 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 72px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.status-chip-complete {
|
|
background: rgba(46, 204, 113, 0.12);
|
|
border-color: rgba(46, 204, 113, 0.35);
|
|
color: #9ef0bf;
|
|
}
|
|
|
|
.status-chip-pending {
|
|
background: rgba(136, 149, 178, 0.12);
|
|
border-color: rgba(136, 149, 178, 0.28);
|
|
color: #c9d3e8;
|
|
}
|
|
|
|
.status-chip-attention {
|
|
background: rgba(245, 166, 35, 0.12);
|
|
border-color: rgba(245, 166, 35, 0.34);
|
|
color: #ffd391;
|
|
}
|
|
|
|
.manage-step-card-complete {
|
|
border-color: rgba(46, 204, 113, 0.22);
|
|
}
|
|
|
|
.manage-step-card-attention {
|
|
border-color: rgba(245, 166, 35, 0.28);
|
|
}
|
|
|
|
.race-wizard-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-summary-item-wide {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.race-stage-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.race-setup-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.75fr) minmax(250px, 0.9fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.race-setup-main,
|
|
.race-format-sections,
|
|
.race-summary-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.race-setup-modebar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.race-setup-toggle {
|
|
gap: 8px;
|
|
}
|
|
|
|
.race-format-section,
|
|
.race-summary-card,
|
|
.race-actions-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-elevated);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.race-format-section .panel-header,
|
|
.race-summary-card .panel-header,
|
|
.race-actions-panel .panel-header {
|
|
background: var(--surface-soft);
|
|
}
|
|
|
|
.race-format-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.race-preset-actions-card,
|
|
.race-format-note-card,
|
|
.race-format-context-card {
|
|
align-content: start;
|
|
}
|
|
|
|
.race-format-context-card {
|
|
grid-column: span 2;
|
|
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 {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.race-format-save-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.race-summary-item {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.race-summary-item span {
|
|
color: var(--muted);
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.race-summary-item strong {
|
|
font-size: 0.92rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.race-summary-card {
|
|
position: sticky;
|
|
top: 16px;
|
|
}
|
|
|
|
.race-summary-card .panel-body {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.race-summary-warnings {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid rgba(245, 166, 35, 0.34);
|
|
border-radius: 12px;
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.race-summary-warnings strong {
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.race-summary-warnings ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.summary-warning-link {
|
|
display: inline;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #ffd391;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.summary-warning-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.panel-header-inline {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.guide-overview-grid,
|
|
.guide-section-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.guide-overview-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
}
|
|
|
|
.guide-overview-card {
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-card);
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.guide-overview-card strong {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.guide-overview-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.guide-list {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.guide-list li {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
width: 100%;
|
|
background: var(--field-bg);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
color: var(--field-text);
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus {
|
|
outline: none;
|
|
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 {
|
|
margin: 10px 0 0;
|
|
min-height: 120px;
|
|
max-height: 260px;
|
|
overflow: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--panel-2) 94%, black 6%);
|
|
color: var(--text);
|
|
white-space: pre-wrap;
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.data-table thead {
|
|
background: var(--table-head-bg);
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 9px 8px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.data-table tr.passing-invalid td {
|
|
background: var(--danger-soft);
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.data-table th {
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.55px;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
background: var(--table-hover-bg);
|
|
}
|
|
|
|
.simple-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.simple-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.assignment-group {
|
|
background: var(--surface-soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.assignment-group h4 {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.assignment-group ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.assignment-group li {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.actions-inline {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-error {
|
|
grid-column: 1 / -1;
|
|
margin: 0;
|
|
color: color-mix(in srgb, var(--accent) 62%, white 38%);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.quick-add-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dashboard-workflow {
|
|
background:
|
|
linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
|
|
var(--panel);
|
|
}
|
|
|
|
.dashboard-workflow-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.dashboard-workflow-card {
|
|
min-height: 190px;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: 12px;
|
|
padding: 15px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.dashboard-workflow-card-primary {
|
|
border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
|
|
background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--surface-card)), var(--surface-card));
|
|
}
|
|
|
|
.dashboard-workflow-card p {
|
|
margin: 7px 0 0;
|
|
color: var(--muted);
|
|
line-height: 1.4;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.workflow-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 9px;
|
|
font-family: Orbitron, sans-serif;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
|
|
background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
|
|
}
|
|
|
|
.dashboard-live-stack {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.dashboard-live-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-live-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 14px 16px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.dashboard-live-card span,
|
|
.dashboard-live-card small {
|
|
display: block;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.dashboard-live-card strong {
|
|
display: block;
|
|
margin: 8px 0 4px;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.timing-top-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.timing-compact-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
background: var(--surface-card);
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.timing-compact-card-wide {
|
|
min-width: 0;
|
|
}
|
|
|
|
.timing-compact-label {
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.timing-session-summary {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.timing-session-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timing-session-head strong {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.timing-session-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.timing-session-stat {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.timing-session-stat span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.timing-session-stat strong {
|
|
display: block;
|
|
margin-top: 6px;
|
|
font-family: Orbitron, sans-serif;
|
|
}
|
|
|
|
.quick-add-spacer {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 42px;
|
|
}
|
|
|
|
.check-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.check-card {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.check-card input {
|
|
width: auto;
|
|
}
|
|
|
|
.team-card,
|
|
.team-standings-block {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.team-create-form {
|
|
align-items: center;
|
|
}
|
|
|
|
.team-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
padding: 14px 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.team-standings-block {
|
|
padding: 14px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.team-standings-block h4 {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.team-log-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.team-log-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.team-log-card h5 {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.table-primary {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.table-subnote {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.table-subnote-warn {
|
|
color: #ffb7a9;
|
|
}
|
|
|
|
.data-table tr.leaderboard-invalid td {
|
|
background: rgba(225, 106, 0, 0.06);
|
|
}
|
|
|
|
.data-table tr.judge-selected-row td {
|
|
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
}
|
|
|
|
.grid-editor-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.drag-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.drag-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
cursor: grab;
|
|
}
|
|
|
|
.drag-item:hover {
|
|
border-color: #60739b;
|
|
}
|
|
|
|
.drag-item-active {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.drag-item-over {
|
|
border-color: color-mix(in srgb, var(--accent) 80%, transparent);
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
|
|
.logo-preview {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.logo-preview img,
|
|
.overlay-logo {
|
|
max-width: 180px;
|
|
max-height: 90px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.overlay-logo {
|
|
display: block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.position-grid h4,
|
|
.final-card h4 {
|
|
margin: 0;
|
|
}
|
|
|
|
.position-grid-list,
|
|
.matrix-slots {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.position-grid-list {
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
|
|
.position-grid-item,
|
|
.matrix-slot,
|
|
.matrix-session-row,
|
|
.final-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.position-grid-item,
|
|
.matrix-slot,
|
|
.matrix-session-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.final-matrix {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.final-card {
|
|
padding: 12px;
|
|
}
|
|
|
|
.final-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.matrix-slot {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.matrix-slot-reserved {
|
|
border-color: rgba(245, 166, 35, 0.6);
|
|
background: rgba(245, 166, 35, 0.12);
|
|
}
|
|
|
|
.matrix-session-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.matrix-session-row {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.overlay-mode .sidebar,
|
|
.overlay-mode .topbar {
|
|
display: none;
|
|
}
|
|
|
|
.overlay-mode .app-shell {
|
|
display: block;
|
|
}
|
|
|
|
.overlay-mode .content {
|
|
padding: 0;
|
|
}
|
|
|
|
.overlay-shell {
|
|
min-height: 100vh;
|
|
padding: 10px;
|
|
background:
|
|
radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
|
|
radial-gradient(circle at 100% 80%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%),
|
|
linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #000 10%) 0%, var(--bg-soft) 55%, var(--bg) 100%);
|
|
}
|
|
|
|
.overlay-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.overlay-header-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-header .overlay-logo {
|
|
width: 88px;
|
|
height: 88px;
|
|
max-width: 88px;
|
|
max-height: 88px;
|
|
object-fit: contain;
|
|
flex: 0 0 88px;
|
|
}
|
|
|
|
.overlay-header-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-kicker-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.overlay-header h1 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.92rem, 1.35vw, 1.25rem);
|
|
line-height: 1.02;
|
|
}
|
|
|
|
.overlay-kicker {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.56rem;
|
|
}
|
|
|
|
.overlay-header-sub {
|
|
margin: 1px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.66rem;
|
|
}
|
|
|
|
.overlay-meta {
|
|
text-align: right;
|
|
display: grid;
|
|
justify-items: end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.overlay-clock {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1.12rem, 1.9vw, 1.7rem);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.overlay-fullscreen-btn {
|
|
align-self: start;
|
|
}
|
|
|
|
.overlay-status {
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.56rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.overlay-board {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.98fr) minmax(156px, 0.27fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.overlay-board-tv {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-shell-tv .overlay-header {
|
|
margin-bottom: 6px;
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.overlay-shell-tv .overlay-header:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay-shell-public {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.overlay-shell-obs .overlay-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.overlay-obs-layout {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.overlay-obs-config {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.overlay-obs-config .panel-header-inline {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.overlay-obs-config .panel-header-inline span {
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.overlay-obs-main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.overlay-obs-brandline,
|
|
.overlay-obs-feature,
|
|
.overlay-obs-standings,
|
|
.overlay-obs-clockblock {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-obs-brandline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.overlay-obs-logo {
|
|
width: 56px;
|
|
height: 56px;
|
|
max-width: 56px;
|
|
max-height: 56px;
|
|
}
|
|
|
|
.overlay-obs-brandline h2 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1rem, 1.65vw, 1.45rem);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.overlay-obs-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px 8px;
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.58rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.overlay-obs-clockblock {
|
|
min-width: 190px;
|
|
padding: 8px 12px;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: end;
|
|
}
|
|
|
|
.overlay-obs-clockblock strong {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1.4rem, 2.2vw, 2.15rem);
|
|
line-height: 1;
|
|
}
|
|
|
|
.overlay-obs-clockblock span {
|
|
color: var(--muted);
|
|
font-size: 0.62rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.overlay-obs-content {
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.42fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.overlay-obs-feature,
|
|
.overlay-obs-standings {
|
|
padding: 8px;
|
|
}
|
|
|
|
.overlay-fastest-banner-obs {
|
|
min-height: 112px;
|
|
}
|
|
|
|
.overlay-obs-gridhint {
|
|
display: grid;
|
|
gap: 2px;
|
|
margin-top: 8px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.overlay-obs-gridhint strong {
|
|
color: var(--text);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.overlay-obs-standings {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.overlay-obs-row {
|
|
display: grid;
|
|
grid-template-columns: 26px minmax(150px, 1.5fr) repeat(4, minmax(66px, 0.44fr));
|
|
gap: 5px;
|
|
align-items: center;
|
|
padding: 5px 6px;
|
|
border: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
|
|
border-radius: 8px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.overlay-obs-row-leader {
|
|
border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
|
|
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
|
|
}
|
|
|
|
.overlay-obs-driver strong,
|
|
.overlay-obs-metric strong {
|
|
display: block;
|
|
}
|
|
|
|
.overlay-obs-driver strong {
|
|
font-size: clamp(0.76rem, 0.95vw, 0.9rem);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.overlay-obs-driver span,
|
|
.overlay-obs-metric label {
|
|
color: var(--muted);
|
|
font-size: 0.54rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.overlay-shell-obs-layout-grid .overlay-header,
|
|
.overlay-shell-obs-layout-lowerthird .overlay-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.overlay-obs-feature-gridonly {
|
|
padding: 10px;
|
|
}
|
|
|
|
.overlay-obs-lowerthird {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-content: end;
|
|
min-height: calc(100vh - 32px);
|
|
}
|
|
|
|
.overlay-obs-lowerthird-head,
|
|
.overlay-obs-lowerthird-rows {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--panel) 92%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-obs-lowerthird-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.overlay-obs-lowerthird-head h2 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1rem, 1.6vw, 1.4rem);
|
|
}
|
|
|
|
.overlay-obs-lowerthird-clock {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1.1rem, 1.8vw, 1.6rem);
|
|
}
|
|
|
|
.overlay-obs-lowerthird-rows {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.overlay-obs-lowerthird-row {
|
|
display: grid;
|
|
grid-template-columns: 24px minmax(180px, 1fr) repeat(3, auto);
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.overlay-obs-lowerthird-row strong {
|
|
font-size: 0.92rem;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.overlay-obs-lowerthird-row span {
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.overlay-shell-obs-theme-transparent {
|
|
background: transparent;
|
|
}
|
|
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-brandline,
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-feature,
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-standings,
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-clockblock,
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-lowerthird-head,
|
|
.overlay-shell-obs-theme-transparent .overlay-obs-lowerthird-rows {
|
|
background: color-mix(in srgb, var(--panel) 72%, transparent);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.overlay-shell-obs-theme-chroma {
|
|
background: #00ff00;
|
|
}
|
|
|
|
.overlay-shell-obs-theme-chroma .overlay-header,
|
|
.overlay-shell-obs-theme-chroma .overlay-kicker,
|
|
.overlay-shell-obs-theme-chroma .overlay-header-sub,
|
|
.overlay-shell-obs-theme-chroma .overlay-status {
|
|
color: #101010;
|
|
}
|
|
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-brandline,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-feature,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-standings,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-clockblock,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-head,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-rows,
|
|
.overlay-shell-obs-theme-chroma .overlay-fastest-banner-obs {
|
|
background: rgba(9, 10, 18, 0.92);
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-row,
|
|
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-row {
|
|
background: rgba(20, 22, 33, 0.94);
|
|
}
|
|
|
|
.overlay-shell-obs-theme-chroma .overlay-fullscreen-btn {
|
|
background: rgba(20, 22, 33, 0.9);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.overlay-obs-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-obs-row {
|
|
grid-template-columns: 24px minmax(120px, 1.3fr) repeat(4, minmax(60px, 0.44fr));
|
|
}
|
|
}
|
|
|
|
.overlay-speaker {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.overlay-speaker-main {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 28px;
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-speaker-label {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 1rem;
|
|
color: var(--muted);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.overlay-speaker-main h2 {
|
|
margin: 12px 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(2.8rem, 6vw, 5rem);
|
|
}
|
|
|
|
.overlay-speaker-side,
|
|
.overlay-results {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.overlay-team-layout {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.overlay-team-podium {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-team-podium-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.overlay-team-card {
|
|
border: 1px solid color-mix(in srgb, var(--line) 82%, white 18%);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
background: var(--surface-card);
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.overlay-team-card strong {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.95rem, 1.5vw, 1.25rem);
|
|
}
|
|
|
|
.overlay-team-card p,
|
|
.overlay-team-card small {
|
|
margin: 0;
|
|
}
|
|
|
|
.overlay-team-card-1 {
|
|
border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
|
|
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
|
|
}
|
|
|
|
.overlay-table-wrap,
|
|
.overlay-side-card,
|
|
.overlay-empty {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-table-wrap {
|
|
padding: 3px 5px 5px;
|
|
}
|
|
|
|
.overlay-display-wrap {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.overlay-fastest-banner,
|
|
.overlay-leaderboard-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-fastest-banner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
background:
|
|
linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),
|
|
color-mix(in srgb, var(--panel) 92%, transparent);
|
|
}
|
|
|
|
.overlay-fastest-banner span,
|
|
.overlay-fastest-driver {
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.overlay-fastest-banner strong {
|
|
display: block;
|
|
margin-top: 1px;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.94rem, 1.45vw, 1.26rem);
|
|
}
|
|
|
|
.overlay-leaderboard-card {
|
|
padding: 4px;
|
|
}
|
|
|
|
.overlay-leaderboard-card-tv {
|
|
min-height: calc(100vh - 118px);
|
|
}
|
|
|
|
.overlay-shell-dense .overlay-logo {
|
|
width: 56px;
|
|
height: 56px;
|
|
max-width: 56px;
|
|
max-height: 56px;
|
|
flex-basis: 56px;
|
|
}
|
|
|
|
.overlay-fastest-banner-dense {
|
|
align-items: center;
|
|
}
|
|
|
|
.overlay-fastest-banner-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-fastest-driver {
|
|
font-size: 0.68rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.overlay-fastest-meta {
|
|
color: var(--muted);
|
|
font-size: 0.52rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overlay-leaderboard-card-dense .overlay-section-head {
|
|
display: none;
|
|
}
|
|
|
|
.overlay-race-metric strong,
|
|
.overlay-race-best strong {
|
|
font-size: clamp(0.72rem, 0.88vw, 0.84rem);
|
|
line-height: 1.02;
|
|
}
|
|
|
|
.overlay-race-pos .pos-pill {
|
|
min-width: 20px;
|
|
height: 20px;
|
|
font-size: 0.62rem;
|
|
}
|
|
|
|
.overlay-shell-dense .pill {
|
|
padding: 3px 6px;
|
|
font-size: 0.54rem;
|
|
}
|
|
|
|
.overlay-shell-dense .btn.overlay-fullscreen-btn {
|
|
padding: 6px 8px;
|
|
font-size: 0.66rem;
|
|
}
|
|
|
|
.overlay-section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.overlay-section-head h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.overlay-stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.overlay-stat-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 85%, white 15%), var(--surface-soft));
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.overlay-stat-card span,
|
|
.overlay-stat-card small {
|
|
display: block;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.overlay-stat-card strong {
|
|
display: block;
|
|
margin: 8px 0 4px;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(1.4rem, 2vw, 2.1rem);
|
|
}
|
|
|
|
.overlay-side {
|
|
display: grid;
|
|
gap: 4px;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.overlay-side-card {
|
|
padding: 5px;
|
|
}
|
|
|
|
.overlay-rotating-card {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.overlay-side-card h3 {
|
|
margin: 0 0 2px;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.overlay-passing {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
padding: 2px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.overlay-passing:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.overlay-side-card .overlay-passing strong {
|
|
font-size: 0.66rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.overlay-side-card .overlay-passing span {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 0.58rem;
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overlay-side-card .pill {
|
|
padding: 3px 7px;
|
|
font-size: 0.54rem;
|
|
}
|
|
|
|
.overlay-race-list {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.overlay-race-row {
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(148px, 1.42fr) repeat(6, minmax(62px, 0.38fr));
|
|
gap: 4px;
|
|
align-items: center;
|
|
padding: 4px 5px;
|
|
border: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
|
|
border-radius: 8px;
|
|
background: var(--surface-card);
|
|
}
|
|
|
|
.overlay-race-row-leader {
|
|
border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
|
|
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
|
|
}
|
|
|
|
.overlay-race-row-invalid {
|
|
border-color: rgba(245, 166, 35, 0.4);
|
|
box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.overlay-race-driver strong,
|
|
.overlay-race-metric strong,
|
|
.overlay-race-best strong {
|
|
display: block;
|
|
}
|
|
|
|
.overlay-race-driver strong {
|
|
font-size: clamp(0.75rem, 0.92vw, 0.88rem);
|
|
line-height: 1.02;
|
|
}
|
|
|
|
.overlay-race-driver span,
|
|
.overlay-race-metric label,
|
|
.overlay-race-best label {
|
|
color: var(--muted);
|
|
font-size: 0.46rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.overlay-invalid-note {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: color-mix(in srgb, var(--warn) 75%, white 25%);
|
|
font-size: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.overlay-race-driver .overlay-decoder-meta {
|
|
color: color-mix(in srgb, var(--accent-2) 55%, var(--text) 45%);
|
|
display: block;
|
|
margin-top: 1px;
|
|
font-size: 0.44rem;
|
|
}
|
|
|
|
.form-grid-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.overlay-prediction {
|
|
margin-top: 1px;
|
|
max-width: 122px;
|
|
}
|
|
|
|
.overlay-prediction-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
margin-bottom: 1px;
|
|
max-width: 122px;
|
|
}
|
|
|
|
.overlay-prediction-meta label,
|
|
.overlay-prediction-meta span {
|
|
color: var(--muted);
|
|
font-size: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.overlay-prediction-track {
|
|
height: 2px;
|
|
max-width: 122px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--line) 58%, white 42%);
|
|
}
|
|
|
|
.overlay-prediction-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.overlay-prediction-good {
|
|
background: linear-gradient(90deg, #b7ffd4, #26c281);
|
|
}
|
|
|
|
.overlay-prediction-warn {
|
|
background: linear-gradient(90deg, #ffe69a, #f5a623);
|
|
}
|
|
|
|
.overlay-prediction-late {
|
|
background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 24%, white), var(--danger));
|
|
animation: overlayPredictionLatePulse 1.1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes overlayPredictionLatePulse {
|
|
0%, 100% { opacity: 0.55; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.overlay-race-metric strong,
|
|
.overlay-race-best strong {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.88rem, 1.2vw, 1.08rem);
|
|
}
|
|
|
|
.overlay-empty {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: calc(100vh - 48px);
|
|
text-align: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.pill {
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
padding: 3px 8px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.pill-green {
|
|
border-color: rgba(38, 194, 129, 0.6);
|
|
color: #b7ffd4;
|
|
}
|
|
|
|
.pos-pill {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 22px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.pos-1 {
|
|
background: linear-gradient(180deg, #ffd95a, #d3a80e);
|
|
color: #1a1400;
|
|
border-color: #ffd95a;
|
|
}
|
|
|
|
.pos-2 {
|
|
background: linear-gradient(180deg, #dce4ef, #99a7b9);
|
|
color: #0f141b;
|
|
border-color: #dce4ef;
|
|
}
|
|
|
|
.pos-3 {
|
|
background: linear-gradient(180deg, #d19562, #8c5d34);
|
|
color: #1a0f05;
|
|
border-color: #d19562;
|
|
}
|
|
|
|
.best {
|
|
color: color-mix(in srgb, var(--accent-2) 50%, white 50%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.error {
|
|
color: color-mix(in srgb, var(--accent) 56%, white 44%);
|
|
min-height: 18px;
|
|
}
|
|
|
|
.finish-banner {
|
|
margin-top: 10px;
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
|
|
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
color: color-mix(in srgb, var(--accent) 45%, white 55%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: color-mix(in srgb, var(--bg) 78%, transparent);
|
|
backdrop-filter: blur(6px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
z-index: 40;
|
|
}
|
|
|
|
.modal-card {
|
|
width: min(760px, 100%);
|
|
max-height: 88vh;
|
|
overflow: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background:
|
|
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);
|
|
}
|
|
|
|
.hint {
|
|
margin: 10px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.mt-16 {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.cols-4,
|
|
.cols-5 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.panel-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-workflow-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.training-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-insight-grid,
|
|
.training-focus-grid,
|
|
.training-motivation-grid,
|
|
.training-development-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-missions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-club-goal-form {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.decoder-role-grid,
|
|
.decoder-connection-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.decoder-role-header p {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.app-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
position: static;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.cols-3,
|
|
.cols-4,
|
|
.cols-5 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.settings-audio-wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.decoder-layout-options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.decoder-settings-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-workflow-grid,
|
|
.open-practice-quickstart-body,
|
|
.open-practice-quickstart-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-workflow-card {
|
|
min-height: 0;
|
|
}
|
|
|
|
.race-setup-modebar,
|
|
.race-format-save-row,
|
|
.race-wizard-footer {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.topbar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.training-hero {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
padding: 18px;
|
|
}
|
|
|
|
.training-driver-select {
|
|
min-width: 0;
|
|
}
|
|
|
|
.training-hero-controls {
|
|
justify-items: stretch;
|
|
}
|
|
|
|
.training-hero-actions {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.training-hero-actions .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.training-club-goal-head {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.training-club-goal-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-live-head {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.training-live-stats {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.training-live-stats > div {
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.training-live-stats > div:nth-child(2n) {
|
|
border-right: 0;
|
|
}
|
|
|
|
.training-live-stats > div:nth-last-child(-n + 2) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.training-blocks {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-trend-metrics,
|
|
.training-achievements {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-trend-metrics > div + div {
|
|
border-top: 1px solid var(--line);
|
|
border-left: 0;
|
|
}
|
|
|
|
.training-goals {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-milestone-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-milestone-card .training-progress {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.training-insights {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-insights > div,
|
|
.training-insights > div:nth-child(odd),
|
|
.training-insights > div:nth-last-child(-n + 2) {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.training-insights > div:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.training-share-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-share-url,
|
|
.training-share-body > .actions {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.field-card-checkbox {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.overlay-board {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.timing-top-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-stats-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-race-row {
|
|
grid-template-columns: 42px 1fr;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.overlay-speaker {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-team-podium-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overlay-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overlay-header-main {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.modal-overlay {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
.overlay-shell-obs-layout-leaderboard {
|
|
align-items: start;
|
|
}
|
|
|
|
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout {
|
|
max-width: 430px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.overlay-obs-tower {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.overlay-obs-tower-left {
|
|
flex: 0 1 320px;
|
|
display: grid;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-obs-tower-head,
|
|
.overlay-obs-tower-meta,
|
|
.overlay-obs-tower-standings {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.overlay-obs-tower-standings {
|
|
flex: 0 1 340px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-obs-tower-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.overlay-obs-tower-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-obs-tower-brand h2 {
|
|
margin: 0;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.88rem, 1.1vw, 1.05rem);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.overlay-obs-tower-clock {
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: clamp(0.98rem, 1.2vw, 1.15rem);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overlay-obs-tower-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px 8px;
|
|
padding: 6px 10px;
|
|
color: var(--muted);
|
|
font-size: 0.58rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.overlay-obs-tower-standings {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.overlay-obs-tower-row {
|
|
display: grid;
|
|
grid-template-columns: 24px minmax(72px, 1fr) minmax(0, auto);
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 5px 6px;
|
|
border-radius: 8px;
|
|
background: var(--surface-card);
|
|
border: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
|
|
}
|
|
|
|
.overlay-obs-tower-driver {
|
|
min-width: 0;
|
|
}
|
|
|
|
.overlay-obs-tower-driver strong {
|
|
display: block;
|
|
font-size: 0.78rem;
|
|
line-height: 1.05;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.overlay-obs-tower-driver span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 0.52rem;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.overlay-obs-tower-trail {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 6px;
|
|
justify-content: flex-end;
|
|
font-family: Orbitron, sans-serif;
|
|
font-size: 0.66rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overlay-obs-tower-trail span {
|
|
display: inline-block;
|
|
}
|
|
|
|
.align-end {
|
|
align-self: end;
|
|
}
|
|
|
|
/* Race audio controls and start-light state are visual only; timing remains in the session controller. */
|
|
.race-start-lights {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
margin-top: 10px;
|
|
}
|
|
.race-start-lights span {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, var(--text-muted) 25%, transparent);
|
|
border: 1px solid var(--border);
|
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
|
|
}
|
|
.race-start-lights span.is-on {
|
|
background: #f22828;
|
|
border-color: #ff7777;
|
|
box-shadow: 0 0 14px rgba(242, 40, 40, 0.85);
|
|
}
|
|
.race-start-lights strong { margin-left: 5px; font: 600 0.72rem "Orbitron", sans-serif; color: var(--text-muted); }
|
|
.race-control-cues { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
|
|
.audio-event-table td:first-child { min-width: 230px; text-transform: capitalize; }
|
|
.audio-event-table td:first-child small { display: block; color: var(--text-muted); font-weight: 400; text-transform: none; }
|
|
.audio-event-table th:not(:first-child), .audio-event-table td:not(:first-child) { width: 90px; text-align: center; }
|
|
.audio-event-table input[type="checkbox"] { width: 18px; height: 18px; }
|
|
@media (max-width: 760px) {
|
|
.audio-event-table td:first-child { min-width: 170px; }
|
|
.race-control-cues .btn { flex: 1 1 140px; }
|
|
}
|
|
|
|
.brand-mark.has-logo {
|
|
padding: 3px;
|
|
background: var(--surface-card);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.brand-mark.has-logo > span {
|
|
display: none;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.training-extra-grid,
|
|
.training-marker-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.training-marker-form .btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.training-pace-heatmap {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.training-marker-entry {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.training-marker-entry > b {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
/* Race Day keeps the operator focused on session safety and the next heats. */
|
|
.race-day-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 22px 24px;
|
|
border: 1px solid var(--line);
|
|
border-left: 5px solid var(--danger);
|
|
border-radius: 18px;
|
|
background: linear-gradient(110deg, color-mix(in srgb, var(--danger) 15%, var(--surface-card)), var(--surface-card) 54%);
|
|
}
|
|
|
|
.race-day-hero.is-ready {
|
|
border-left-color: var(--success);
|
|
background: linear-gradient(110deg, color-mix(in srgb, var(--success) 13%, var(--surface-card)), var(--surface-card) 54%);
|
|
}
|
|
|
|
.race-day-hero h2,
|
|
.race-day-hero p { margin: 0; }
|
|
.race-day-hero h2 { margin-top: 4px; font-family: Orbitron, sans-serif; }
|
|
.race-day-hero p { margin-top: 5px; color: var(--muted); }
|
|
.race-day-kicker { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
|
|
.race-day-clock { text-align: right; }
|
|
.race-day-clock strong { display: block; font: 700 clamp(1.8rem, 4vw, 3.4rem)/1 Orbitron, sans-serif; }
|
|
.race-day-clock span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
|
|
|
|
.race-day-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr); gap: 16px; margin-top: 16px; }
|
|
.race-day-main { display: grid; gap: 16px; min-width: 0; }
|
|
.race-day-side { min-width: 0; }
|
|
.race-day-control-panel .panel-header { align-items: flex-start; }
|
|
.race-day-actions,
|
|
.race-day-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.race-day-actions .btn { min-width: 126px; }
|
|
.race-day-shortcuts { margin-top: 14px; }
|
|
|
|
.race-day-checks { display: grid; gap: 7px; }
|
|
.race-day-check { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-card); }
|
|
.race-day-check > span { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
|
|
.race-day-check.is-ok > span { background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 65%, transparent); }
|
|
.race-day-check.is-warning > span { background: #e6a93c; }
|
|
.race-day-check.is-error > span { background: var(--danger); box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 65%, transparent); }
|
|
.race-day-check strong,
|
|
.race-day-check small { display: block; }
|
|
.race-day-check-action { margin-top: 6px; min-height: 40px; white-space: normal; text-align: left; }
|
|
.race-day-check strong { font-size: 0.78rem; }
|
|
.race-day-check small { margin-top: 1px; color: var(--muted); font-size: 0.68rem; }
|
|
|
|
.race-day-lap-window { display: grid; gap: 8px; margin: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); }
|
|
.race-day-lap-window > strong { font-size: 0.82rem; }
|
|
.race-day-lap-window > p { margin: 0; font-size: 0.7rem; }
|
|
.race-day-lap-window > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.race-day-lap-window label { display: grid; gap: 4px; color: var(--muted); font-size: 0.68rem; font-weight: 700; }
|
|
.race-day-lap-window input { width: 100%; }
|
|
.race-day-lap-window .btn { justify-self: start; }
|
|
|
|
.race-day-grid-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
|
|
.race-day-grid-list article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-card); }
|
|
.race-day-grid-list article > span { grid-row: 1 / 3; font: 700 1rem Orbitron, sans-serif; color: var(--accent); }
|
|
.race-day-grid-list strong,
|
|
.race-day-grid-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.race-day-grid-list small { color: var(--muted); }
|
|
|
|
.race-day-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
|
|
.race-day-queue-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); }
|
|
.race-day-queue-card > span:first-child { grid-column: 1 / -1; color: var(--muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
.race-day-queue-card > strong,
|
|
.race-day-queue-card > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.race-day-queue-card > small { color: var(--muted); }
|
|
.race-day-queue-card .btn { justify-self: end; }
|
|
.race-day-queue-card.is-empty { opacity: 0.58; }
|
|
|
|
.backup-manager { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-card); }
|
|
.backup-manager-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
.backup-manager-header p { margin: 4px 0 0; }
|
|
.backup-list { display: grid; gap: 6px; margin: 12px 0; }
|
|
.backup-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 74px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
|
|
.backup-row strong,
|
|
.backup-row small { display: block; }
|
|
.backup-row small { overflow: hidden; color: var(--muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
|
|
.backup-row > span { color: var(--muted); font-size: 0.72rem; text-align: right; }
|
|
|
|
@media (max-width: 980px) {
|
|
.race-day-layout { grid-template-columns: 1fr; }
|
|
.race-day-queue { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.race-day-hero,
|
|
.backup-manager-header { align-items: stretch; flex-direction: column; }
|
|
.race-day-clock { text-align: left; }
|
|
.race-day-actions .btn { flex: 1 1 120px; }
|
|
.backup-row { grid-template-columns: 1fr auto; }
|
|
.backup-row > span:first-of-type { display: none; }
|
|
}
|
|
|
|
.training-profile-qr-list { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; margin: 0.8rem 0; }
|
|
.training-profile-qr { display: grid; justify-items: start; gap: 0.45rem; max-width: 220px; }
|
|
.training-profile-qr img { width: min(220px, 70vw); aspect-ratio: 1; padding: 0.5rem; border-radius: 12px; background: #fff; }
|
|
.training-profile-qr small { color: var(--muted); overflow-wrap: anywhere; }
|
|
.training-profile-qr-hint { display: block; color: var(--muted); margin-bottom: 0.8rem; }
|
|
|
|
.session-replay-controls { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(4, auto) minmax(110px, auto); gap: 8px; align-items: end; }
|
|
.session-replay-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 0.72rem; }
|
|
.session-replay-progress { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 12px; align-items: center; margin: 14px 0 10px; }
|
|
.session-replay-progress progress { width: 100%; height: 10px; accent-color: var(--accent); }
|
|
.session-replay-latest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-card); }
|
|
.session-replay-latest span,
|
|
.session-replay-latest small { color: var(--muted); }
|
|
.session-replay-panel .table-wrap { max-height: 390px; }
|
|
|
|
@media (max-width: 980px) {
|
|
.session-replay-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.session-replay-controls > select { grid-column: 1 / -1; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.session-replay-controls { grid-template-columns: 1fr 1fr; }
|
|
.session-replay-progress { grid-template-columns: 1fr auto; }
|
|
.session-replay-progress progress { grid-column: 1 / -1; }
|
|
}
|
|
|
|
.training-share-sections {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px 14px;
|
|
margin: 12px 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.training-share-sections legend { padding: 0 6px; font-weight: 700; }
|
|
.training-share-sections .hint { grid-column: 1 / -1; margin: 0 0 4px; }
|
|
.training-share-sections label { display: flex; align-items: center; gap: 8px; }
|
|
|
|
.list-sort-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-height: 36px;
|
|
padding: 3px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.list-sort-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.list-sort-arrow { opacity: 0.65; white-space: nowrap; }
|
|
[aria-sort="ascending"] .list-sort-button,
|
|
[aria-sort="descending"] .list-sort-button,
|
|
.list-sort-button[aria-pressed="true"] { color: var(--accent); }
|
|
.list-sort-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px 12px;
|
|
color: var(--muted);
|
|
font-size: 0.7rem;
|
|
}
|
|
.overlay-shell-obs .list-sort-toolbar { display: none; }
|
|
@media print { .list-sort-toolbar, .list-sort-arrow { display: none; } }
|