Player: omeji sirino na 900px in centriraj, odstrani folx.live oznako iz kota

This commit is contained in:
Sebastjan 2026-07-07 09:34:49 +00:00
parent 675d8789b1
commit 200345a050

View File

@ -34,14 +34,14 @@
.badge-live { display: inline-flex; align-items: center; gap: 8px; background: var(--akzent); color: #fff; padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .badge-live { display: inline-flex; align-items: center; gap: 8px; background: var(--akzent); color: #fff; padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.badge-live .d { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: fx-pulse 1s infinite; } .badge-live .d { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: fx-pulse 1s infinite; }
.uhr { font-family: var(--font-mono); font-size: 13px; color: #B8B8B8; letter-spacing: 0.06em; } .uhr { font-family: var(--font-mono); font-size: 13px; color: #B8B8B8; letter-spacing: 0.06em; }
main.stage-wrap { width: min(1240px, 100%); margin: 0 auto; padding: clamp(16px,3vw,40px) clamp(12px,2.5vw,24px) 0; flex: 1; width:100%; } main.stage-wrap { width: min(1240px, 100%); margin: 0 auto; padding: clamp(16px,3vw,40px) clamp(12px,2.5vw,24px) 0; flex: 1; }
.player-col { width: min(900px, 100%); margin: 0 auto; }
.player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: #0A0A0A; } .player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: #0A0A0A; }
.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; } .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; }
.stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; } .stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; }
.scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; } .scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; }
.bug-live { position: absolute; top: 18px; left: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(10,10,10,0.78); color: #fff; padding: 7px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } .bug-live { position: absolute; top: 18px; left: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(10,10,10,0.78); color: #fff; padding: 7px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.bug-live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: fx-pulse 1s infinite; } .bug-live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: fx-pulse 1s infinite; }
.bug-right { position: absolute; top: 18px; right: 18px; z-index: 10; background: rgba(10,10,10,0.78); color: #D0D0D0; padding: 7px 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; } .msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
.msg.hidden { display:none; } .msg.hidden { display:none; }
.spinner { width:38px; height:38px; border:3px solid rgba(255,255,255,0.25); border-top-color:var(--akzent); border-radius:50%; animation: spin 0.9s linear infinite; } .spinner { width:38px; height:38px; border:3px solid rgba(255,255,255,0.25); border-top-color:var(--akzent); border-radius:50%; animation: spin 0.9s linear infinite; }
@ -77,6 +77,7 @@
</header> </header>
<main class="stage-wrap"> <main class="stage-wrap">
<div class="player-col">
<div class="player-frame" id="playerFrame"> <div class="player-frame" id="playerFrame">
<img class="stage-poster" id="poster" src="/assets/stage_folx_v2.png" alt="" /> <img class="stage-poster" id="poster" src="/assets/stage_folx_v2.png" alt="" />
<div class="scrim"></div> <div class="scrim"></div>
@ -84,7 +85,6 @@
controlsList="nodownload nofullscreen noremoteplayback noplaybackrate"></video> controlsList="nodownload nofullscreen noremoteplayback noplaybackrate"></video>
<div class="bug-live"><span class="d"></span> Live</div> <div class="bug-live"><span class="d"></span> Live</div>
<div class="bug-right">folx.live</div>
<div class="msg" id="msg"><div class="spinner"></div><div>Stream wird geladen…</div></div> <div class="msg" id="msg"><div class="spinner"></div><div>Stream wird geladen…</div></div>
@ -109,6 +109,7 @@
<button class="ic" id="btnFs" title="Vollbild" aria-label="Vollbild">⛶</button> <button class="ic" id="btnFs" title="Vollbild" aria-label="Vollbild">⛶</button>
</div> </div>
</div> </div>
</div>
</main> </main>
<footer class="bot"> <footer class="bot">