/* ============================================================ Beey Live — ATEM — v6 LUMA KEY (text pro vrstvu nad pásem) ============================================================ FullHD 1920×1080 → HDMI → ATEM downstream keyer (Luma self-key). ČISTĚ BÍLÝ TEXT NA ČERNÉ — žádný box, žádná kontura. Poloprůhledný pás dodává statický RGBA PNG z ATEM media playeru (vyrobíš ho nástrojem band-generator.html); logo a disclaimer jsou zapečené v něm, proto jsou zde vypnuté. Zapojení: USK1 = Linear key (Fill+Key = Media Player 1, Pre-multiplied ON) → pás; DSK1 = Luma self-key (tento vstup, Clip/Gain doladit) → text. Funguje i na základním ATEM Mini. GEOMETRIE JE IDENTICKÁ s beey-atem-blackband.css — text proto sedí do pásu na pixel. Měníš-li rozměry, přegeneruj i PNG pás! ============================================================ */ /* ════════════════════════════════════════════════════════════ ZÁKLADNÍ NASTAVENÍ — všechno ladění probíhá TADY ════════════════════════════════════════════════════════════ */ [class*="subtitlesPage__"] { --tpl-version: "v9"; /* zobrazuje se v testovací režii */ /* — MĚŘÍTKO — jediný ovladač celkové velikosti titulků i boxu. Násobí písmo, řádkování, šířku sloupce, vnitřní okraje, rádius, disclaimer i logo. Odsazení od spodní hrany (--subs-bottom) se záměrně NEškáluje — je to bezpečná zóna obrazu. Doporučené hodnoty, při nichž vše vychází na celé px: 0.75 · 1 · 1.25 · 1.5 · 1.75 · 2 */ --subs-scale: 1; /* — Titulky (základ při měřítku 1) — POZOR: při změně měřítka přegeneruj i PNG pás (band-generator má pole Měřítko) — geometrie obou musí sedět na pixel! — */ --subs-font-size: calc(60px * var(--subs-scale)); /* CEA ≈ 44, BBC ≈ 72 @1080p */ --subs-line-height: calc(84px * var(--subs-scale)); /* PRAVIDLO: ≥ 1,33×font + 4 px */ --subs-lines: 2; /* 2 nebo 3 (BBC: vyhýbat se 3+) */ --subs-width: calc(1320px * var(--subs-scale)); /* řádek ≤ 68 % šířky obrazu */ --subs-bottom: 54px; /* odsazení boxu od spodní hrany */ --subs-text-color: #ffffff; --subs-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --subs-font-weight: 600; /* — „Box" — zde jen černá výplň okna (po klíči zmizí); viditelný poloprůhledný pás dodává PNG z media playeru — */ --subs-band: #000; /* neměnit (luma) */ --subs-radius: 0px; /* — Pozadí (luma: ČERNÁ = po klíči průhledná) — */ --subs-key: #000000; /* neměnit; luma keyer řeže tmavé */ /* — Disclaimer (malý text uvnitř boxu, u jeho spodní hrany) — */ /* Disclaimer je ZAPEČENÝ V PNG PÁSU — zde se jen rezervuje místo. --disclaimer: 1 = PNG pás má pruh disclaimeru (výchozí), 0 = pás bez něj; MUSÍ odpovídat vygenerovanému PNG! Pseudo-element se zde nevykresluje nikdy (viz níže display:none). */ --disclaimer: 1; --disclaimer-text: ""; --disclaimer-font-size: 0px; --disclaimer-color: transparent; --disclaimer-display: none; --disclaimer-zone: calc(var(--subs-guard) + var(--disclaimer) * 28px * var(--subs-scale)); /* — Logo Beey AI (pravý dolní roh, zarovnané na sloupec) — */ --logo-display: none; /* je zapečené v PNG pásu */ --logo-url: url("https://www.beey.io/wp-content/uploads/2025/08/logo-beeyai-300x79.png"); --logo-height: 34px; /* šířka se dopočítá (poměr 300:79) */ /* — Technické (běžně neměnit) — */ --subs-guard: calc(16px * var(--subs-scale)); /* krycí zóny proti fragmentům */ --subs-pad-h: calc(32px * var(--subs-scale)); /* boční přesah okna (BBC) */ } /* --- 0) RESET zásahů Beey, které ohrožují geometrii --- (

segmenty bez třídy → UA margin; transition gridu 1 s; „waiting" tečky v textContent; autoscroll tlačítko s wrapperem; inline styly z nastavení přebíjíme důsledným !important) */ [class*="subtitlesPage__"], [class*="subtitlesPage__"] * { transition: none !important; animation: none !important; } [class*="textContent__"] p { margin: 0 !important; padding: 0 !important; } [class*="textContent__"] [class*="waiting__"] { display: none !important; } [class*="autoscrollButtonWrapper__"], [class*="autoscrollButton__"] { display: none !important; } /* --- 1) Klíčovací pozadí + freeze layoutu --- */ [class*="subtitlesPage__"] { position: relative !important; background: var(--subs-key) !important; grid-template-rows: 0 100dvh 0 !important; cursor: none !important; /* Žádné reakce na myš/dotyk — pojistka na úrovni CSS; v adrese přesto doporučujeme i ?controls=off (jistí se navzájem) */ pointer-events: none !important; } [class*="subtitlesPage__"][class*="showControls__"] { grid-template-rows: 0 100dvh 0 !important; } /* --- 2) Skrýt header a footer --- */ [class*="subtitlesPage__"] > [class*="header__"], [class*="subtitlesPage__"] > [class*="subtitlesFooter__"], [class*="subtitlesHeader__"] { display: none !important; } /* --- 3) Kontejner = tmavý box, centrovaný, s guard zónami --- */ [class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"]) { position: absolute !important; font-size: var(--subs-font-size) !important; line-height: var(--subs-line-height) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; width: var(--subs-width) !important; top: auto !important; bottom: var(--subs-bottom) !important; height: calc(var(--subs-lines) * var(--subs-line-height) + var(--subs-guard) + var(--disclaimer-zone)) !important; padding: 0 !important; background: var(--subs-band) !important; border-radius: var(--subs-radius) !important; overflow: hidden !important; } /* Guard zóny v barvě boxu — kryjí fragmenty cizích řádků */ [class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::before, [class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; background: var(--subs-band) !important; z-index: 5 !important; pointer-events: none !important; } [class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::before { /* Překryv -8px: guard začíná NAD hranicí ořezu kontejneru a je jí oříznut — kryje tak šev sub-pixelové rasterizace při zlomkovém měřítku (DPI/zoom), kde se hrana ořezu a hrana guardu zaokrouhlí na různé device-pixely a škvírou prosvítal oříznutý inkoust. */ top: -8px !important; height: calc(var(--subs-guard) + 8px) !important; } [class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::after { bottom: -8px !important; /* překryv — viz ::before */ height: calc(var(--disclaimer-zone) + 8px) !important; } /* --- 4) Text — roll-up vlevo (BBC live konvence), bez kontury --- */ [class*="subtitlesPage__"] [class*="textContent__"] { box-sizing: border-box !important; height: 100% !important; padding: var(--subs-guard) var(--subs-pad-h) var(--disclaimer-zone) var(--subs-pad-h) !important; margin: 0 !important; /* v6 — ZRUŠENÍ SCROLLU (definitivní řešení bílých fragmentů): Beey autoscrolluje JS animací (+12 px/25 ms). Během dojezdu je horní řádek říznutý MIMO hranici řádku a jeho fragment se objeví těsně pod guard zónou — žádná statická maska to nekryje. overflow: clip činí element nescrollovatelným (zápisy do scrollTop prohlížeč ignoruje → autoscroll Beey = neškodný no-op) a flex kotvení drží poslední řádky u dna BEZ scrollu. Horní řez tak padne VŽDY přesně na hranici řádku. Vizuálně: text při zalomení poskočí o řádek (žádné plynulé rolování). */ display: flex !important; flex-direction: column !important; justify-content: flex-end !important; overflow: clip !important; /* v8 — DEFINITIVNÍ ořez inkoustu: clip-path řeže obsah přímo na hranici textového okna (uvnitř guard zón). Na rozdíl od dvojice „ořez kontejneru + krycí guard" jde o JEDINOU rasterizovanou hranu — při zlomkovém měřítku (DPI, zoom, náhled) se nemá s čím rozejít, takže skrytý řádek nemůže prosvítat ani 1 device-pixelem. (Empiricky ověřeno bisekcí v Chromiu při DPR 1.617.) */ clip-path: inset(var(--subs-guard) 0 var(--disclaimer-zone) 0) !important; font-size: var(--subs-font-size) !important; line-height: var(--subs-line-height) !important; text-align: left !important; color: var(--subs-text-color) !important; font-family: var(--subs-font-family) !important; font-weight: var(--subs-font-weight) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } /* Odstavce se ve flex sloupci NESMÍ smršťovat (jinak by se řádky při přetečení stlačily přes sebe) */ [class*="subtitlesPage__"] [class*="textContent__"] > * { flex: 0 0 auto !important; } /* Pojistka proti vnitřním elementům Beey */ [class*="subtitlesPage__"] [class*="textContent__"] * { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; } /* --- 5) Alert panel: na výstupu čistý klíč --- */ [class*="alertPanel__"] { background: var(--subs-key) !important; } [class*="alertPanel__"] [class*="alert__"] { opacity: 0 !important; } /* --- 6) Skrýt scrollbar --- */ [class*="textContent__"]::-webkit-scrollbar { display: none !important; } /* --- 7) Disclaimer — uvnitř boxu, u jeho spodní hrany --- Sedí v disclaimer zóně (rozšířený spodní guard), centrovaný, bez vlastního pozadí — box je jeho pozadím. */ [class*="subtitlesPage__"]::after { content: var(--disclaimer-text) !important; display: var(--disclaimer-display) !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: calc(var(--subs-bottom) + 9px) !important; margin-left: auto !important; margin-right: auto !important; width: fit-content !important; max-width: calc(var(--subs-width) - 2 * var(--subs-pad-h)) !important; font-family: var(--subs-font-family) !important; font-size: var(--disclaimer-font-size) !important; line-height: 1.2 !important; font-weight: 400 !important; color: var(--disclaimer-color) !important; text-align: center !important; z-index: 10 !important; pointer-events: none !important; } /* --- 8) Logo Beey AI — vlevo NAD boxem --- Zarovnané na levou hranu sloupce; sedí na klíčované ploše → po klíči leží přímo na videu. */ [class*="subtitlesPage__"]::before { content: "" !important; display: var(--logo-display) !important; position: absolute !important; left: calc((100% - var(--subs-width)) / 2) !important; bottom: calc(var(--subs-bottom) + var(--subs-lines) * var(--subs-line-height) + var(--subs-guard) + var(--disclaimer-zone) + 10px) !important; height: var(--logo-height) !important; width: calc(var(--logo-height) * 300 / 79) !important; background: var(--logo-url) no-repeat left center / contain !important; z-index: 10 !important; pointer-events: none !important; }