/** * Videoväli ampsu vormil — viis olekut. * * Kujundus tuleb teemast ja `haldus.css`-ist (`--lg-*` muutujad, `.lg-nupp`, * `.lg-teade`): videoväli ei ole omaette keskkond, ta on ühe kaardi keha. * Mõõdud on kinnitatud kavandist kavandid/video-kaart.html. */ .lg-video { display: flex; flex-direction: column; gap: 12px; } /* ══════════════════════════════════════════════════════════════════════════════ `[hidden]` PEAB VÕITMA IGA `display` REEGLI Brauseri oma stiilis on `[hidden] { display: none }` spetsiifilisusega (0,1,0) — täpselt sama, mis meie klassireeglil. Võrdse kaalu juures otsustab järjekord, ja `.lg-video__eden { display: flex }` tuleb hiljem ehk võidab: edenemise plokk EI KADUNUD kunagi ära. MÕÕDETUD omaniku ekraanil 11.08.2026: mängija all seisis „Laeb üles" tühja ribaga (see on ploki algseis, mida PHP `hidden`-iga peitis) ja teisel korral „Kodeerib 65%" — kuigi video oli valmis ja mängija oli kohal. Kaks olekut korraga lahti, täpselt see, mille vastu JS-i `seiaks()` üheks kohaks tehtud oli. JS tegi oma töö õigesti; CSS ei lasknud tal mõjuda. ÜKS REEGEL, MITTE `:not([hidden])` IGA PLOKI JUURES: `.lg-video [hidden]` on (0,2,0) ja võidab iga klassireegli sõltumata järjekorrast. Nii ei saa see viga korduda ka siis, kui keegi lisab uuele plokile `display`-reegli. ══════════════════════════════════════════════════════════════════════════════ */ .lg-video [hidden] { display: none; } /* ── KUKUTAMISE ALA ELAB `haldus.css`-IS ────────────────────────────────────── Klass on `.lg-kukk` ja tema CSS on `koolitused/assets/css/haldus.css`-is — siin ei ole temast enam ridagi. Nii oli kavatsus algusest peale („sama kuju, mis materjalidel"), aga kaks koopiat läksid vaikselt lahku: video kast oli 1,5 px ääris / 10 px raadius / 22 px polster / taust #fdfcfa, materjalide oma 1 px / 8 px / 0 / #faf8f2. Kolm pisierinevust, kõrgused 100,99 ja 98,08 — piisavalt lähedal, et keegi ei märganud, ja piisavalt kaugel, et nad ei seisnud kunagi ühel joonel. SÕLTUVUS ON JUBA OLEMAS ja ühesuunaline: see fail on `wp_enqueue_style`-s `lg-haldus`-est sõltuvaks kuulutatud (inc/vali.php), ja videovälja kasutab ainult ampsu haldusvorm, kus `haldus.css` on niikuinii laetud. Erinevus jääb ainult SISUSSE: materjalidel tüübiloend ja MB-piir, videol AEG — MB-piiri me ei kuva, sest baidid ei liigu läbi meie serveri ja piir, mida me ei täida, on vale info (päris video oli 435 MB ja läks läbi). */ /* Kaardi keha on `gap: 12px` flex-veerg — kaitse-rea oma ülemine vahe tuleks sellele otsa (24 px kokku). Vahe tuleb ühest kohast. */ .lg-video .lg-kaitse { margin-top: 0; } /* ── EDENEMINE JA KODEERIMINE ──────────────────────────────────────────────── ÜKS PLOKK, KAKS OLEKUT. Kaks eri plokki tähendaks kahte riba, mis esimese muudatuse peale lahku lähevad. */ .lg-video__eden { display: flex; flex-direction: column; gap: 9px; } .lg-video__eden-rida { display: flex; align-items: baseline; gap: 8px; font-size: 0.86rem; color: var(--lg-ink); } .lg-video__eden-rida b { font-weight: 700; } /* KAKS ARVU, MITTE PROTSENT ÜKSI: 435 MB failil seisab protsent minuti jooksul samal numbril ja loeks kinnijooksmisena; megabaidid liiguvad nähtavalt ja ütlevad ühtlasi, kui suur fail on. `tabular-nums`, muidu number hüpleb. */ .lg-video__eden-arv { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--lg-ink-muted); } .lg-video__riba { height: 8px; border-radius: 99px; background: #ece4d5; overflow: hidden; } .lg-video__riba i { display: block; height: 100%; background: var(--lg-gold); border-radius: 99px; transition: width .2s linear; } /* KODEERIMISE RIBA ON TRIIBULINE JA LIIKUV. Bunny `encodeProgress` hüppab suurte sammudega ja seisab vahepeal minuteid — ühtlane riba loeks siis kinnijooksmisena. Triip ütleb „töö käib", ka kui number ei muutu. */ .lg-video[data-seis="kodeerib"] .lg-video__riba i { background: repeating-linear-gradient(115deg, var(--lg-gold), var(--lg-gold) 9px, #f5cf86 9px, #f5cf86 18px); background-size: 200% 100%; animation: lg-video-triip 1.1s linear infinite; } @keyframes lg-video-triip { to { background-position: 25.46px 0; } } /* Kes on animatsioonid maha keeranud, ei taha ka liikuvat triipu. Triip ise jääb — ta kannab infot („töö käib"), liikumine on ainult rõhutus. */ @media (prefers-reduced-motion: reduce) { .lg-video[data-seis="kodeerib"] .lg-video__riba i { animation: none; } .lg-video__riba i { transition: none; } } .lg-video__eden-abi { font-size: 0.78rem; line-height: 1.5; color: var(--lg-ink-muted); } .lg-video__eden-abi b { color: var(--lg-ink-soft); } /* ── VALMIS ────────────────────────────────────────────────────────────────── 16:9 raam hoiab kõrguse paigas ilma arvutamata. PISIPILTI EI OLE ja seda ei teeselda: mõõdetud 11.08.2026, CDN-i otselingid (thumbnail.jpg, preview.webp, playlist.m3u8) annavad 403 ka lubatud viitajaga, sest `AllowDirectPlay: false` ja otselink nõuab OMA allkirja. Ühtlane tume taust, mitte pildi kohatäide — kohatäide lubaks pilti, mis kunagi ei tule. */ .lg-video__raam { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #04192c; } .lg-video__raam iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Sama põhjus mis .lg-amps-leht__video.lg-mangib: mängiva video all ei tohi tume raam paista. */ .lg-video__raam.lg-mangib { background: transparent; } /* ── VALMIS: VIDEO ON RIDA, MITTE PLAKAT ───────────────────────────────────── Kinnitatud kavand 13.08.2026, kavandid/video-valmis-prototuup.html. MÕÕDETUD ENNE: kaart 594,63 px, sellest 402,75 px 16:9 must ristkülik. Video oli lehe KÕIGE KÕRGEM kaart (Sisu 389,45 · Materjalid 170,09 · Pealkiri 104,08) ja tema sisu oli üks fakt: video on olemas. Pisipilti seal ei olnud ega tule — Bunny CDN annab thumbnail.jpg-le 403 ka lubatud viitajaga —, seega suur must kast ei näita mitte kunagi rohkem kui väike must kast. Rida on sama kuju, mis materjalide failirida: sama kaart, sama vorm, sama küsimus („mis fail siin on ja kuidas ma ta ära vahetan"). */ .lg-video__olemas { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 1px solid var(--lg-line); border-radius: var(--lg-radius); background: #fff; } /* EELVAADE ON 16:9 NUPP, mitte plakat. Sama diagonaalne toon, mis suurel kattel — komponent ei muutu, ainult mõõt. 96x54 hoiab 16:9 täpselt. */ .lg-video__eelvaade { position: relative; flex: none; width: 96px; height: 54px; padding: 0; border: 0; border-radius: 7px; background: linear-gradient(160deg, #24344b 0%, #0f1b2b 100%); cursor: pointer; overflow: hidden; } .lg-video__eelvaade::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background .14s; } .lg-video__eelvaade:hover::after { background: rgba(255, 255, 255, .08); } /* Teema baasreegel `button:focus { outline: none }` võtaks rõnga ära. */ .lg-video__eelvaade:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 2px; } .lg-video__mangi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lg-gold); color: var(--lg-ink); } .lg-video__mangi svg { width: 12px; height: 12px; margin-left: 1px; } /* NIMI ON PEATEKST, mitte valge kiri musta kasti peal. Enne oli ta katte alltekstis 0,84 rem valgena läbipaistvusega 0,8 — kõige tähtsam fakt (kas üles läks õige fail?) kõige raskemini loetavas kohas. Ja päris andmetes on ta 57 märki, mis sinna ei mahtunud niikuinii. */ .lg-video__kirjeldus { flex: 1 1 auto; min-width: 0; } .lg-video__nimi { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; color: var(--lg-ink); } /* MÕÕDUD ÜHEL REAL JA TUHMILT. Enne oli kestus KAKS KORDA — katte alltekstis ja faktide reas, 22,17 px vahega — ja rasvane kiri oli kõigil kolmel arvul, mis tähendab, et esile ei tõusnud ükski. */ .lg-video__mood { display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.78rem; color: var(--lg-ink-muted); } /* GUID JÄÄB, AGA REA LÕPPU. Ta on veaotsingu number, mitte õpetaja oma: enne võttis ta jalarea vasakust servast 220 px ja seisis „Eemalda video" vastas, nagu oleks ta samaväärne tegu. Täispikk kuju on `title`-is. */ .lg-video__guid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; } .lg-video__teod { flex: none; display: flex; gap: 8px; } /* MÄNGIJA TULEB KLÕPSUST, nagu tulevad ka tema 2 423 kB varasid (variant B, kavandid/video-kate.html). Sama põhjendus, üks samm edasi: ka 402,75 px ruumi ei võeta enne, kui keegi seda päriselt küsib. `[data-lahti]` ON JUUREL, mitte raamil: sama lipp ütleb ka nupu sildi („Vaata" / „Peida") ja `aria-expanded` väärtuse, ja kolm kohta ühe oleku kohta läheksid lahku. */ .lg-video__olemas + .lg-video__raam { margin-top: 10px; } .lg-video[data-lahti="ei"] .lg-video__raam { display: none; } @media (max-width: 620px) { /* Kitsal ekraanil läheb tegude paar omaette reale: eelvaade 96 px, nimi ja kaks nuppu ei mahu 335 px reale kõrvuti. */ .lg-video__olemas { flex-wrap: wrap; row-gap: 10px; } .lg-video__kirjeldus { flex-basis: calc(100% - 108px); } .lg-video__teod { width: 100%; } .lg-video__teod .lg-nupp { flex: 1; } } /* ── TÕRGE ─────────────────────────────────────────────────────────────────── PUNANE JA TEGEVUSEGA. „Kodeerimine ebaõnnestus" ilma nupuga jätaks õpetaja ummikusse: fail on üleval, aga midagi teha ei saa. Kaks nuppu, sest kaks päris soovi on erinevad — proovi uut faili või lase see amps videota. */ .lg-video__torge { border: 1px solid #f0d6d6; background: #fdf7f7; border-radius: 10px; padding: 14px 16px; } .lg-video__torge-pea { margin: 0 0 6px; font-size: 0.9rem; font-weight: 700; color: #a33f3f; } .lg-video__torge-tekst { margin: 0 0 11px; font-size: 0.82rem; line-height: 1.55; color: var(--lg-ink-soft); } .lg-video__torge .lg-nupp + .lg-nupp { margin-left: 7px; } /* ── VIMEO PÄRAND ──────────────────────────────────────────────────────────── KOLLANE, MITTE PUNANE: video mängib, midagi ei ole katki. Punane ütleks „paranda kohe", kollane ütleb „see on ajutine" — ja see ongi täpselt seis. Plokk kaob koodist ära, kui viimane Vimeo video on ümber laetud. */ .lg-video__parand { border-left: 3px solid var(--lg-gold); background: var(--lg-cream); border-radius: 6px; padding: 11px 14px; } .lg-video__parand-pea { margin: 0 0 4px; font-size: 0.86rem; font-weight: 700; color: var(--lg-ink); } .lg-video__parand-tekst { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--lg-ink-soft); } /* ── SIHTTEEGI LÜLITI (tasuta näidis → avalik teek) ───────────────────────── Kavand reisihispaania-tasuta-video-prototuup.html (omanik 07.09.2026, 3 vooru). Plokk seisab kukutaja kohal; sees-olek on kuldne, sest see on otsus, mis teeb video avalikuks. Lüliti enda paigutusreegel on haldus.css-is (`.lg-video__sihtteek > label.lg-lyliti`). */ .lg-video__sihtteek { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 14px; background: var(--lg-sand); border: 1px solid var(--lg-line); border-radius: var(--lg-radius); } .lg-video__sihtteek .lg-lyliti { margin: 0; } .lg-video__sihtteek-jutt { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--lg-ink-soft); } .lg-video__sihtteek--sees { background: #fff8e6; border-color: var(--lg-gold); } .lg-video__sihtteek--keelatud { opacity: .6; } .lg-video__sihtteek [data-lg-sihtteek-lisa] .lg-vali { margin: 10px 0 0; } .lg-kukk--avalik { border-color: var(--lg-gold); background: #fffdf5; } .lg-video__avalik { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--lg-gold); color: var(--lg-ink); font-size: 0.72rem; font-weight: 700; vertical-align: 2px; } /* ── VIDEOKATE ──────────────────────────────────────────────────────────────── KAHES VAATES ÜKS KOMPONENT: õppija ampsu leht ja õpetaja muutmisvorm. Kate on mängija ASEMEL, mitte tema peal (omaniku kinnitatud kavand kavandid/video-kate.html, variant B): `