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:
@@ -315,21 +315,23 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
|
||||
|
||||
return `
|
||||
<section class="overlay-obs-tower">
|
||||
<div class="overlay-obs-tower-head">
|
||||
<div class="overlay-obs-tower-brand">
|
||||
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
|
||||
<div>
|
||||
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
|
||||
<h2>${escapeHtml(active.name)}</h2>
|
||||
<div class="overlay-obs-tower-left">
|
||||
<div class="overlay-obs-tower-head">
|
||||
<div class="overlay-obs-tower-brand">
|
||||
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
|
||||
<div>
|
||||
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
|
||||
<h2>${escapeHtml(active.name)}</h2>
|
||||
</div>
|
||||
</div>
|
||||
${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
|
||||
</div>
|
||||
<div class="overlay-obs-tower-meta">
|
||||
<span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
|
||||
<span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
|
||||
${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
|
||||
${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
|
||||
</div>
|
||||
${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
|
||||
</div>
|
||||
<div class="overlay-obs-tower-meta">
|
||||
<span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
|
||||
<span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
|
||||
${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
|
||||
${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
|
||||
</div>
|
||||
<section class="overlay-obs-tower-standings">
|
||||
${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`}
|
||||
|
||||
@@ -3659,15 +3659,23 @@ select:focus {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout,
|
||||
.overlay-shell-obs-layout-leaderboard .overlay-obs-tower {
|
||||
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout {
|
||||
max-width: 430px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.overlay-obs-tower {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.overlay-obs-tower-left {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-width: 320px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overlay-obs-tower-head,
|
||||
@@ -3679,6 +3687,11 @@ select:focus {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.overlay-obs-tower-standings {
|
||||
max-width: 340px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overlay-obs-tower-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user