/* Posuvníky jasu HUD — výchozí odpovídají commitu 6236ad2; JS přepisuje přes applyHudBrightness() */ :root { --hud-gold-bright: 0.407; --hud-src-bright: 0.448; --hud-dt-src-bright: 1.10; --hud-paid-bright: 0.75; /* placené API: vyšší jas → červená je viditelná (0.407 by ji pohltil) */ --hud-gold-depth: 1; /* hloubka 3D efektu zlatých nápisů (1 = úroveň notových klíčů) */ --hud-gold-backdrop: 0; /* plynulé ztmavení pozadí za nápisy (0 = vypnuto, 1 = max) */ --hud-former-mul: 0.9; /* jas „bývalého" (malého) BPM jako násobek --hud-gold-bright — jen o málo méně než velké */ } /* Notové klíče za skrytým menu — jako zlaté samolepky na monitoru */ .clef { position: fixed; top: 50%; transform: translate(-50%,-50%); font-size: 33vh; line-height: 1; z-index: 4; pointer-events: none; color: #9a7820; font-family: 'Segoe UI Symbol','Noto Music','Bravura',serif; opacity: 0; transition: opacity 0.45s ease; filter: brightness(var(--hud-gold-bright)); /* sjednoceno: stejný posuvník jasu jako ostatní zlaté */ text-shadow: calc(-4px * var(--hud-gold-depth)) calc(-5px * var(--hud-gold-depth)) 0 rgba(255,252,210,0.99), calc( 5px * var(--hud-gold-depth)) calc( 6px * var(--hud-gold-depth)) 0 rgba(15,4,0,0.99), calc( 2px * var(--hud-gold-depth)) calc(10px * var(--hud-gold-depth)) 24px rgba(0,0,0,0.94), calc(-4px * var(--hud-gold-depth)) calc(-7px * var(--hud-gold-depth)) 22px rgba(255,218,65,0.72), 0 0 90px rgba(155,100,5,0.52), 0 0 6px rgba(255,248,175,0.58), 0 0 calc(10px + 32px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)), 0 0 calc( 3px + 12px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)); } .clef.show { opacity: 1; } /* Tučný podkres klíče — 20 % tmavší varianta stejného znaku, drobně posunutá za hlavní vrstvu */ .clef::before { content: ''; /* přebito per-ID pravidly níže */ position: absolute; top: 3px; left: 2px; font-weight: bold; color: #7b601a; /* #9a7820 × 0.80 — o 20 % tmavší než hlavní zlatá */ font-family: 'Segoe UI Symbol','Noto Music','Bravura',serif; font-size: inherit; line-height: inherit; z-index: -1; /* za textem, v rámci stacking-contextu vytvořeného filter: brightness */ pointer-events: none; } #clefLeft::before { content: '𝄞'; } #clefRight::before { content: '𝄢'; } .clef-left { left: 155px; transform: translate(-50%,-50%) rotate(-3deg); } .clef-right { right: 185px; left: auto; transform: translate(50%,-50%) rotate(2deg); } /* ZMRAZENI OBRAZU: vyrazny modry nadech notovych klicu (indikator znehybneneho snimku) */ .clef.clef-freeze { color: #43a6ff; filter: brightness(1.05); text-shadow: -4px -5px 0 rgba(220,240,255,0.99), 5px 6px 0 rgba(0,6,20,0.99), 2px 10px 24px rgba(0,0,0,0.94), -4px -7px 22px rgba(90,170,255,0.80), 0 0 92px rgba(20,90,210,0.62), 0 0 6px rgba(190,225,255,0.62); } .clef.clef-freeze::before { color: #1f63c8; } /* MOBIL/DOTYK + ZMRAZENI: notove klice se vrstvi POD strom (jako soucast zmrazeneho pozadi), aby byl zastaveny strom na uzkem displeji cely viditelny NAD nimi. Platno (#canvas-wrap) je pruhledne (clearRect) -> klice se nad cernym body-pozadim prosvitaji v prazdnych mistech a strom je prekryva. Trida `clef-under` na ji pridava JS jen pri zmrazeni; media query ji uplatni jen na hrubem (dotykovem) pointeru -> DESKTOP / jemny pointer = NEDOTCENO (plna verze bit-identicka). Stacking v korenovem kontextu: cerne body-pozadi < .clef (z 1) < #canvas-wrap (z 3) < zlate HUD napisy (z 4, zustavaji nad zmrazenou scenou). */ @media (pointer: coarse) { body.clef-under #canvas-wrap { z-index: 3; } body.clef-under .clef { z-index: 1; } } /* BPM nápis — stejné 3D podmínky jako notové klíče (hloubka × var + ztmavení pozadí) */ #bpmGold { text-shadow: calc(-4px * var(--hud-gold-depth)) calc(-5px * var(--hud-gold-depth)) 0 rgba(255,252,210,0.99), calc( 5px * var(--hud-gold-depth)) calc( 6px * var(--hud-gold-depth)) 0 rgba(15,4,0,0.99), calc( 2px * var(--hud-gold-depth)) calc(10px * var(--hud-gold-depth)) 24px rgba(0,0,0,0.94), calc(-4px * var(--hud-gold-depth)) calc(-7px * var(--hud-gold-depth)) 22px rgba(255,218,65,0.72), 0 0 90px rgba(155,100,5,0.52), 0 0 6px rgba(255,248,175,0.58), 0 0 calc(10px + 32px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)), 0 0 calc( 3px + 12px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)); } /* Čas + datum — skromnější 3D, ale stejné páky (hloubka + ztmavení pozadí) */ #dateTimeGold, #webAddrGold { text-shadow: calc(-1.5px * var(--hud-gold-depth)) calc(-2px * var(--hud-gold-depth)) 0 rgba(255,252,200,0.99), calc( 2px * var(--hud-gold-depth)) calc(2.5px * var(--hud-gold-depth)) 0 rgba(15,4,0,0.99), calc(0.5px * var(--hud-gold-depth)) calc(4.5px * var(--hud-gold-depth)) 10px rgba(0,0,0,0.92), calc(-1.5px * var(--hud-gold-depth)) calc(-3px * var(--hud-gold-depth)) 9px rgba(255,215,65,0.75), 0 0 35px rgba(155,100,5,0.53), 0 0 2.5px rgba(255,245,165,0.59), 0 0 calc(10px + 32px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)), 0 0 calc( 3px + 12px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)); } /* Zlaté BPM nad houslovým klíčem (vlevo) — přesunuto z pravé strany */ #bpmGold { position: fixed; left: 155px; top: 16%; transform: translate(-50%,-50%); text-align: center; color: #9a7820; font-family: 'Courier New', monospace; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; z-index: 4; filter: brightness(var(--hud-gold-bright)); } #bpmLbl { display: block; font-size: 3vh; opacity: 0.85; line-height: 1; transition: font-size 0.5s ease; } #bpmNum { display: block; font-size: 12.96vh; font-weight: bold; line-height: 1; transition: font-size 0.5s ease; } /* Bývalé stabilní BPM (paměť): menší a tmavší než aktuální velké zlaté. Jas přes filter (0.5× původní zlaté), velikost čísla zmenšena na ~55 %. */ #bpmGold.former { filter: brightness(calc(var(--hud-gold-bright) * var(--hud-former-mul))); } #bpmGold.former #bpmNum { font-size: 7vh; } #bpmGold.former #bpmLbl { font-size: 2.2vh; } /* Zlatý čas + datum pod basovým klíčem (vpravo) — volitelné, výchozí ON */ #dateTimeGold { position: fixed; right: 185px; bottom: 12vh; transform: translateX(50%); text-align: center; color: #9a7820; font-family: 'Courier New', monospace; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; z-index: 4; filter: brightness(var(--hud-gold-bright)); } /* Zvětšený ladící HUD (hover): čas/datum se kreslí NAD HUDem (je mimo stacking context #canvas-wrap), proto se ztlumí přímo — na 20 % (= „přepsání s 20% průhledností"). !important přebíjí inline opacity z JS fade logiky; přechod 0.6s už prvek má. */ body.hud-zoom #dateTimeGold { opacity: 0.2 !important; } #dtDate { display: block; font-size: 4.5vh; font-weight: bold; line-height: 1.2; } #dtTime { display: block; font-size: 4.5vh; font-weight: bold; line-height: 1.2; } #dtSrc { display: block; font-size: 2.2vh; line-height: 1.5; opacity: 0.7; filter: brightness(var(--hud-dt-src-bright)); } /* Webová adresa aplikace — malý zlatý nápis v levém dolním rohu (na očích přihlížejícím). Jako čas+datum, ale ~2× menší (4.5vh → 2.25vh); malé odsazení od levého kraje okna. Viditelnost řídí JS (opacity) — ukáže se jen při skrytém levém menu. */ #webAddrGold { position: fixed; left: 16px; bottom: 10px; text-align: left; color: #9a7820; font-family: 'Courier New', monospace; font-size: 2.25vh; font-weight: bold; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; z-index: 4; filter: brightness(var(--hud-gold-bright)); } body.hud-zoom #webAddrGold { opacity: 0.2 !important; } /* Detekovaný akord — zrcadlově naproti zlatému BPM (pravý horní roh, top:16%). Velikost jako MALÉ (bývalé) BPM (7vh), ale JAS jako VELKÉ BPM (bez --hud-former-mul). Blok vertikálně centruje obsah (1–N akordů vždy na střed bloku). Podkres stejným znakem ZÁMĚRNĚ NEMÁ (malý nápis — viz pravidlo o podkresu výše). Cross-fade řídí JS. */ #chordGold { position: fixed; right: 155px; top: 16%; transform: translate(50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #9a7820; font-family: 'Courier New', monospace; font-weight: bold; line-height: 1.05; opacity: 0; pointer-events: none; z-index: 4; filter: brightness(var(--hud-gold-bright)); text-shadow: calc(-1.5px * var(--hud-gold-depth)) calc(-2px * var(--hud-gold-depth)) 0 rgba(255,252,200,0.99), calc( 2px * var(--hud-gold-depth)) calc(2.5px * var(--hud-gold-depth)) 0 rgba(15,4,0,0.99), calc(0.5px * var(--hud-gold-depth)) calc(4.5px * var(--hud-gold-depth)) 10px rgba(0,0,0,0.92), calc(-1.5px * var(--hud-gold-depth)) calc(-3px * var(--hud-gold-depth)) 9px rgba(255,215,65,0.75), 0 0 35px rgba(155,100,5,0.53), 0 0 2.5px rgba(255,245,165,0.59), 0 0 calc(10px + 32px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)), 0 0 calc( 3px + 12px * var(--hud-gold-backdrop)) rgba(0,0,0,var(--hud-gold-backdrop)); } #chordName { display: block; font-size: 7vh; white-space: nowrap; } /* Zlatý podkres (první vrstva) — tímž písmem, o 1 % větším, o 20 % tmavším. Technika: ::before { content: attr(data-text) } — data-text sync přes MutationObserver v JS. POUZE velké stabilní BPM (#bpmNum). Podkres stejným znakem prohlubuje 3D reliéf jen na velkých glyfech; u menších zlatých nápisů (popisek „BPM", čas/datum, bývalé malé BPM) ruší, proto je tam vynechán. 3D reliéf u malých nápisů drží dál jen text-shadow + (u klíčů) .clef::before. */ #bpmNum { position: relative; } #bpmNum::before { content: attr(data-text); position: absolute; top: 0; left: 0; right: 0; text-align: inherit; font-size: 101%; font-weight: bold; /* tučný podkres — jako u notových klíčů (prohloubení reliéfu) */ font-family: inherit; color: #7b601a; /* sjednoceno s podkresem klíče (#9a7820 × 0.80) */ line-height: inherit; /* posun za hlavní vrstvu škálovaný hloubkou 3D (jako top:3px/left:2px u klíčů) */ transform: translate(calc(1.6px * var(--hud-gold-depth)), calc(2.6px * var(--hud-gold-depth))); z-index: -1; /* pravý podkres: za textem (jako .clef::before) */ pointer-events: none; white-space: nowrap; } /* Bývalé (malé) BPM: podkres pryč — malý glyf, reliéf stejným znakem by rušil */ #bpmGold.former #bpmNum::before { content: none; } /* Plovoucí lišta: jednorázový fit-záběr + přepínač jazyka CZ/EN */ #langBar { position: fixed; z-index: 12; pointer-events: none; display: flex; align-items: center; gap: 0.55vh; transition: opacity 0.4s ease; } #langBar > * { pointer-events: auto; } #langBar.side-right { flex-direction: row; } /* fit vlevo od CZ/EN (směrem ke středu) */ #langBar.side-left { flex-direction: row-reverse; } #fitFrameBtn { cursor: pointer; user-select: none; flex-shrink: 0; width: 1.5em; height: 1.5em; padding: 0; border: none; border-radius: 50%; font-size: 3.2vh; transform: scale(0.75); transform-origin: center center; /* vizuál 75 %, layout box beze změny → střed na místě */ transition: filter 0.14s ease, box-shadow 0.14s ease; } /* Bez zvuku, myš mimo kruh lentilky */ #fitFrameBtn.lentilka-idle { background: radial-gradient(circle at 34% 30%, #2a4a72 0%, #1a3058 42%, #0f1a38 78%, #081018 100%); box-shadow: inset 2px 2px 5px rgba(100,140,200,0.22), inset -3px -4px 8px rgba(0,0,0,0.58), 0 3px 7px rgba(0,0,0,0.52), 0 1px 0 rgba(120,160,220,0.08); filter: none; } /* Myš přímo nad kruhem lentilky — svítivější zelená */ #fitFrameBtn.lentilka-over { background: radial-gradient(circle at 34% 30%, #6ee878 0%, #38b848 42%, #1e7830 78%, #0e4018 100%); box-shadow: inset 2px 2px 6px rgba(190,255,200,0.48), inset -2px -3px 6px rgba(0,0,0,0.38), 0 4px 9px rgba(0,0,0,0.40), 0 0 18px rgba(80,220,100,0.42); filter: brightness(1.48) saturate(1.14); } /* audio-pulse: barva z JS (updateFitFrameBtnLook) */ #langSel { cursor: pointer; user-select: none; color: #9a7820; font-family: 'Courier New', monospace; text-shadow: -1px -1px 0 rgba(255,235,130,0.44), 1px 1px 0 rgba(55,25,0,0.41), 0px 2px 3px rgba(0,0,0,0.36); } /* Neaktivní 0.4; aktivní (.lon) = 2× jas (0.8), bez tučného svitu */ #langSel span[data-lang] { padding: 0 2px; opacity: 0.4; transition: opacity 0.3s ease, color 0.3s ease; } #langSel span[data-lang].lon { opacity: 0.8; color: #a88830; font-weight: normal; text-shadow: 0 0 5px rgba(145,95,5,0.14); } #langSel .lsep { opacity: 0.35; } /* Menu zobrazené: pozici nastavuje JS u #langBar */ #langBar.shown { right: auto; top: 25px; bottom: auto; font-size: 3vh; } #langBar.shown #langSel { font-size: 3vh; } /* Menu zatažené: pod houslovým klíčem */ #langBar.tucked { left: 155px; bottom: 12vh; transform: translateX(-50%); font-size: 3vh; filter: brightness(var(--hud-gold-bright)); text-shadow: -2px -3px 0 rgba(255,252,200,0.99), 3px 3px 0 rgba(15,4,0,0.99), 1px 6px 12px rgba(0,0,0,0.90), -2px -4px 14px rgba(255,215,65,0.72), 0 0 40px rgba(155,100,5,0.48), 0 0 4px rgba(255,245,165,0.55); } #langBar.tucked #langSel { font-size: 3vh; }