From 506d81a1ed26c8879a3c1316d91f05a25c3a3256 Mon Sep 17 00:00:00 2001 From: larssand Date: Sun, 15 Mar 2026 15:08:59 +0100 Subject: [PATCH] mycket mindre header och klockblock --- src/app.js | 59 ++++------------- src/styles.css | 176 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 130 insertions(+), 105 deletions(-) diff --git a/src/app.js b/src/app.js index 22206c2..c2c0571 100644 --- a/src/app.js +++ b/src/app.js @@ -4394,8 +4394,10 @@ function renderOverlay() { const rotatingPanels = buildOverlayPanels(active, recent); const activePanel = rotatingPanels.length ? rotatingPanels[overlayRotationIndex % rotatingPanels.length] : null; + const denseOverlay = overlayViewMode === "leaderboard" || overlayViewMode === "tv"; + dom.view.innerHTML = ` -
+
${ active ? ` @@ -4406,7 +4408,7 @@ function renderOverlay() {

${escapeHtml(getEventName(active.eventId))}

${escapeHtml(getSessionTypeLabel(active.type))} - ${escapeHtml(getStartModeLabel(active.startMode))} + ${overlayViewMode !== "tv" ? `${escapeHtml(getStartModeLabel(active.startMode))}` : ""} ${escapeHtml(modeLabel)}

${escapeHtml(active.name)}

@@ -4494,30 +4496,16 @@ function renderOverlay() { : overlayViewMode === "tv" ? `
-
-
-
+
+
+
${t("overlay.fastest_lap")} ${formatLap(fastestRow?.bestLapMs)}
${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")}
+
${t("table.laps")}: ${topRow?.laps || 0} | ${t("timing.total_passings")}: ${result?.passings.length || 0}
-
-
- ${t("table.laps")} - ${topRow?.laps || 0} - ${escapeHtml(topRow?.displayName || topRow?.driverName || "-")} -
-
- ${t("timing.total_passings")} - ${result?.passings.length || 0} - ${sessionTiming?.untimed ? t("timing.elapsed") : t("timing.remaining")} -
-
-
-
-

${t("overlay.leaderboard_live")}

-
+
${renderOverlayLeaderboard(leaderboard)}
@@ -4525,35 +4513,16 @@ function renderOverlay() { ` : `
-
-
-
+
+
+
${t("overlay.fastest_lap")} ${formatLap(fastestRow?.bestLapMs)}
${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")}
+
${t("table.laps")}: ${topRow?.laps || 0} | ${t("timing.total_passings")}: ${result?.passings.length || 0}
-
-
- ${t("overlay.fastest_lap")} - ${formatLap(fastestRow?.bestLapMs)} - ${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")} -
-
- ${t("table.laps")} - ${topRow?.laps || 0} - ${escapeHtml(topRow?.displayName || topRow?.driverName || "-")} -
-
- ${t("timing.total_passings")} - ${result?.passings.length || 0} - ${sessionTiming?.untimed ? t("timing.elapsed") : t("timing.remaining")} -
-
-
-
-

${t("overlay.leaderboard_live")}

-
+
${renderOverlayLeaderboard(leaderboard)}
diff --git a/src/styles.css b/src/styles.css index 5e889db..b7526c6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -780,7 +780,7 @@ select:focus { .overlay-shell { min-height: 100vh; - padding: 24px; + padding: 14px; background: radial-gradient(circle at 15% 0%, rgba(225, 6, 0, 0.18), transparent 30%), radial-gradient(circle at 100% 80%, rgba(37, 59, 103, 0.22), transparent 30%), @@ -790,15 +790,15 @@ select:focus { .overlay-header { display: flex; justify-content: space-between; - gap: 16px; + gap: 10px; align-items: center; - margin-bottom: 14px; + margin-bottom: 8px; } .overlay-header-main { display: flex; align-items: center; - gap: 14px; + gap: 10px; min-width: 0; } @@ -809,42 +809,42 @@ select:focus { .overlay-kicker-row { display: flex; align-items: center; - gap: 8px; + gap: 6px; flex-wrap: wrap; - margin-bottom: 4px; + margin-bottom: 2px; } .overlay-header h1 { margin: 0; font-family: Orbitron, sans-serif; - font-size: clamp(1.35rem, 2.4vw, 2.3rem); - line-height: 1.05; + font-size: clamp(1.05rem, 1.7vw, 1.6rem); + line-height: 1.02; } .overlay-kicker { margin: 0; color: var(--muted); text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.72rem; + letter-spacing: 0.08em; + font-size: 0.62rem; } .overlay-header-sub { - margin: 6px 0 0; + margin: 3px 0 0; color: var(--muted); - font-size: 0.9rem; + font-size: 0.74rem; } .overlay-meta { text-align: right; display: grid; justify-items: end; - gap: 6px; + gap: 4px; } .overlay-clock { font-family: Orbitron, sans-serif; - font-size: clamp(1.8rem, 3vw, 3rem); + font-size: clamp(1.35rem, 2.3vw, 2.2rem); font-weight: 800; } @@ -856,13 +856,13 @@ select:focus { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; - font-size: 0.74rem; + font-size: 0.62rem; } .overlay-board { display: grid; - grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.7fr); - gap: 18px; + grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.55fr); + gap: 12px; } .overlay-board-tv { @@ -870,8 +870,8 @@ select:focus { } .overlay-shell-tv .overlay-header { - margin-bottom: 10px; - opacity: 0.7; + margin-bottom: 6px; + opacity: 0.78; } .overlay-shell-tv .overlay-header:hover { @@ -913,13 +913,13 @@ select:focus { .overlay-team-layout { display: grid; - gap: 18px; + gap: 12px; } .overlay-team-podium { border: 1px solid var(--line); - border-radius: 18px; - padding: 16px; + border-radius: 14px; + padding: 10px; background: rgba(7, 12, 20, 0.82); box-shadow: var(--shadow); } @@ -927,21 +927,21 @@ select:focus { .overlay-team-podium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; + gap: 10px; } .overlay-team-card { border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - padding: 16px; + border-radius: 12px; + padding: 10px 12px; background: rgba(255, 255, 255, 0.03); display: grid; - gap: 10px; + gap: 6px; } .overlay-team-card strong { font-family: Orbitron, sans-serif; - font-size: clamp(1.2rem, 2vw, 1.9rem); + font-size: clamp(0.95rem, 1.5vw, 1.25rem); } .overlay-team-card p, @@ -958,24 +958,24 @@ select:focus { .overlay-side-card, .overlay-empty { border: 1px solid var(--line); - border-radius: 16px; + border-radius: 12px; background: rgba(7, 12, 20, 0.82); box-shadow: var(--shadow); } .overlay-table-wrap { - padding: 8px 12px 12px; + padding: 6px 8px 8px; } .overlay-display-wrap { display: grid; - gap: 16px; + gap: 8px; } .overlay-fastest-banner, .overlay-leaderboard-card { border: 1px solid var(--line); - border-radius: 18px; + border-radius: 12px; background: rgba(7, 12, 20, 0.9); box-shadow: var(--shadow); } @@ -984,8 +984,8 @@ select:focus { display: flex; justify-content: space-between; align-items: end; - gap: 16px; - padding: 18px 20px; + gap: 12px; + padding: 10px 12px; background: linear-gradient(135deg, rgba(225, 6, 0, 0.18), rgba(225, 6, 0, 0.04)), rgba(7, 12, 20, 0.92); @@ -1000,25 +1000,77 @@ select:focus { .overlay-fastest-banner strong { display: block; - margin-top: 6px; + margin-top: 2px; font-family: Orbitron, sans-serif; - font-size: clamp(2rem, 4vw, 3.2rem); + font-size: clamp(1.25rem, 2.3vw, 1.9rem); } .overlay-leaderboard-card { - padding: 14px; + padding: 8px; } .overlay-leaderboard-card-tv { - min-height: calc(100vh - 260px); + min-height: calc(100vh - 152px); +} + +.overlay-shell-dense .overlay-logo { + width: 44px; + height: 44px; +} + +.overlay-fastest-banner-dense { + align-items: center; +} + +.overlay-fastest-banner-copy { + min-width: 0; +} + +.overlay-fastest-driver { + font-size: 0.9rem; + text-align: right; +} + +.overlay-fastest-meta { + color: var(--muted); + font-size: 0.66rem; + 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.88rem, 1.15vw, 1.02rem); + line-height: 1.05; +} + +.overlay-race-pos .pos-pill { + min-width: 32px; + height: 32px; + font-size: 0.9rem; +} + +.overlay-shell-dense .pill { + padding: 4px 8px; + font-size: 0.62rem; +} + +.overlay-shell-dense .btn.overlay-fullscreen-btn { + padding: 8px 10px; + font-size: 0.72rem; } .overlay-section-head { display: flex; align-items: center; justify-content: space-between; - gap: 10px; - margin-bottom: 12px; + gap: 8px; + margin-bottom: 6px; } .overlay-section-head h3 { @@ -1053,26 +1105,27 @@ select:focus { .overlay-side { display: grid; - gap: 16px; + gap: 10px; } .overlay-side-card { - padding: 14px; + padding: 10px; } .overlay-rotating-card { - min-height: 320px; + min-height: 240px; } .overlay-side-card h3 { - margin: 0 0 10px; + margin: 0 0 6px; + font-size: 0.95rem; } .overlay-passing { display: flex; justify-content: space-between; - gap: 10px; - padding: 8px 0; + gap: 8px; + padding: 5px 0; border-bottom: 1px solid var(--line); } @@ -1082,17 +1135,17 @@ select:focus { .overlay-race-list { display: grid; - gap: 10px; + gap: 6px; } .overlay-race-row { display: grid; - grid-template-columns: 72px minmax(220px, 1.4fr) repeat(3, minmax(140px, 0.8fr)) minmax(150px, 0.9fr); - gap: 12px; + grid-template-columns: 48px minmax(200px, 1.55fr) repeat(3, minmax(102px, 0.7fr)) minmax(110px, 0.72fr); + gap: 8px; align-items: center; - padding: 14px 16px; + padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 16px; + border-radius: 10px; background: rgba(255, 255, 255, 0.03); } @@ -1108,39 +1161,40 @@ select:focus { } .overlay-race-driver strong { - font-size: clamp(1.2rem, 2vw, 1.7rem); + font-size: clamp(0.98rem, 1.35vw, 1.18rem); + line-height: 1.05; } .overlay-race-driver span, .overlay-race-metric label, .overlay-race-best label { color: var(--muted); - font-size: 0.78rem; + font-size: 0.62rem; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.06em; } .overlay-prediction { - margin-top: 10px; + margin-top: 4px; } .overlay-prediction-meta { display: flex; justify-content: space-between; - gap: 10px; - margin-bottom: 6px; + gap: 8px; + margin-bottom: 3px; } .overlay-prediction-meta label, .overlay-prediction-meta span { color: var(--muted); - font-size: 0.72rem; + font-size: 0.58rem; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.06em; } .overlay-prediction-track { - height: 4px; + height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); @@ -1334,7 +1388,9 @@ select:focus { } .overlay-race-row { - grid-template-columns: 56px 1fr; + grid-template-columns: 42px 1fr; + gap: 6px; + padding: 8px; } .overlay-speaker {