split obs overlay i vänster/höger

Race-namn, logga och klocka till vänster, förarstats-tabellen
för sig till höger. Samma inställningar (rows/showClock/
showFastest/showLaps/showResult/showBest/showGap) styr
fortfarande innehållet, bara positioneringen är ändrad
This commit is contained in:
larssand
2026-09-07 17:56:26 +02:00
parent 1376169cb0
commit 6e91f921c2
2 changed files with 30 additions and 15 deletions

View File

@@ -315,6 +315,7 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
return ` return `
<section class="overlay-obs-tower"> <section class="overlay-obs-tower">
<div class="overlay-obs-tower-left">
<div class="overlay-obs-tower-head"> <div class="overlay-obs-tower-head">
<div class="overlay-obs-tower-brand"> <div class="overlay-obs-tower-brand">
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""} ${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
@@ -331,6 +332,7 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""} ${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""} ${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
</div> </div>
</div>
<section class="overlay-obs-tower-standings"> <section class="overlay-obs-tower-standings">
${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`} ${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`}
</section> </section>

View File

@@ -3659,15 +3659,23 @@ select:focus {
align-items: start; align-items: start;
} }
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout, .overlay-shell-obs-layout-leaderboard .overlay-obs-layout {
.overlay-shell-obs-layout-leaderboard .overlay-obs-tower {
max-width: 430px; max-width: 430px;
margin-left: auto; margin-left: auto;
} }
.overlay-obs-tower { .overlay-obs-tower {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.overlay-obs-tower-left {
display: grid; display: grid;
gap: 6px; gap: 6px;
max-width: 320px;
min-width: 0;
} }
.overlay-obs-tower-head, .overlay-obs-tower-head,
@@ -3679,6 +3687,11 @@ select:focus {
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.overlay-obs-tower-standings {
max-width: 340px;
min-width: 0;
}
.overlay-obs-tower-head { .overlay-obs-tower-head {
display: flex; display: flex;
align-items: center; align-items: center;