/* Theme Name: Livesuomi Theme URI: https://livesuomi.fi Author: Livesuomi Description: Kevyt teema Livesuomi Core -pluginille. Täysleveys on lähtökohta eikä poikkeus: sivupohjissa ei ole leveysrajoitinta lainkaan, joten live-ruudukko, TV-opas ja multiview saavat koko näytön. Nimi vaihtuu pluginin mukana kun palvelun nimi lukitaan. Version: 0.5.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: livesuomi-theme Tags: full-width, dark, entertainment */ /* ========================================================================== TÄYSLEVEYS Tämä on teeman ainoa oikea syy olla olemassa, joten se kirjoitetaan auki. Täysleveyttä yritetään tavallisesti tehdä näin: width: 100vw; margin-left: calc(50% - 50vw); Se on väärin, ja virhe on hienovarainen: 100vw sisältää pystyvierityspalkin leveyden, jota elementin oma 100% ei sisällä. Työpöydällä, jossa vierityspalkki vie tilaa, sivusta tulee noin 15 pikseliä liian leveä ja selaimeen ilmestyy vaakavieritys. Sen jälkeen lisätään overflow-x: hidden, joka piilottaa oireen mutta rikkoo position: sticky -elementit. Tässä teemassa ongelmaa ei ratkaista, koska sitä ei synnytetä: sivupohjassa ei ole leveysrajoitinta josta pitäisi paeta. Lohkoelementti täyttää vanhempansa ilman mitään sääntöä, joten kun ketjussa html → body → .ls-main → .ls-bleed ei ole yhtään max-widthiä eikä vaakapaddingia, leveys on täsmälleen 100 % ja vierityspalkki pysyy sen ulkopuolella. Rajaus tehdään siis toisin päin: .ls-wrap kaventaa siellä missä kapeus on oikein (leipäteksti), eikä mikään levennä. ========================================================================== */ :root { --ls-bg: #0d1116; --ls-bg-2: #141a21; --ls-fg: #e8edf2; --ls-dim: #93a1b0; --ls-line: #242c35; --ls-accent: #3d8bff; --ls-gap: 16px; --ls-head-h: 56px; --ls-wrap: 1240px; --ls-wrap-text: 720px; } /* * Vaalea teema on määritelty mutta EI kytketty prefers-color-schemeen. * * Syy on rehellisyys eikä mieltymys: pluginin lohkot (live-näkymä, TV-opas, * multiview) ovat toistaiseksi kiinteän tummia. Jos teema vaihtuisi * vaaleaksi selaimen asetuksen mukaan, sivusta tulisi vaalea kehys tummien * laatikoiden ympärille — puolivalmis vaalea tila on huonompi kuin ei * vaaleaa tilaa lainkaan. * * Vaalean saa käyttöön asettamalla , ja * automaattinen vaihto kytketään päälle siinä vaiheessa kun lohkot * käyttävät samoja muuttujia. Silloin tästä poistetaan vain tämä kommentti * ja lisätään mediakysely takaisin. */ :root[data-theme="light"] { --ls-bg: #ffffff; --ls-bg-2: #f4f6f9; --ls-fg: #12171d; --ls-dim: #5a6774; --ls-line: #e0e5ec; } *, *::before, *::after { box-sizing: border-box; } /* * scrollbar-gutter: stable oli tässä ensin, jottei sivu hypi vaakasuunnassa * lyhyen ja pitkän sivun välillä. Se poistettiin, koska hinta oli väärä: * alustoilla joilla vierityspalkki on päällekkäinen (macOS oletuksena, * kosketuslaitteet) varaus jättää pysyvän parinkymmenen pikselin kuolleen * kaistan oikeaan reunaan — juuri siihen reunaan johon ruudukon pitäisi * yltää. Hyppy on pieni haitta harvoin, kuollut kaista pieni haitta aina. */ html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; } body { background: var(--ls-bg); color: var(--ls-fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; } img, video, iframe, svg { max-width: 100%; } a { color: var(--ls-accent); } .ls-skip { position: absolute; left: -9999px; } .ls-skip:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--ls-accent); color: #fff; border-radius: 6px; } /* * Ruudunlukijalle, ei silmälle. * * clip-path ja 1px-koko eivätkä display:none — piilotettu elementti on * yhä olemassa hakukoneelle ja ruudunlukijalle, ja juuri siksi sivun * otsikko piilotetaan näin eikä poisteta. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Näppäimistöllä siirryttäessä ohituslinkin on näyttävä. */ .ls-skip.screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; } /* ------------------------------------------------------------- ylätunniste */ .ls-head { position: sticky; top: 0; /* Kapean näytön valikkopaneeli sijoitetaan tähän nähden. */ --ls-head-anchor: 1; z-index: 40; background: color-mix(in srgb, var(--ls-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ls-line); } /* * Kolme saraketta, ja keskimmäinen on TODELLA keskellä. * * Flex + space-between keskittäisi valikon siihen tilaan joka jää * tunnuksen jälkeen, eli valikko siirtyisi oikealle aina kun sivuston * nimi pitenee. Ruudukossa laidat ovat yhtä leveät (1fr kummallakin), * joten keskisarake osuu sivun keskelle nimen pituudesta riippumatta. */ .ls-head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--ls-head-h); /* Tunnisteessa on vaakapadding, mutta se on tunnisteen sisällä eikä runkoelementissä — muuten se vuotaisi täysleveään sisältöön. */ padding: 0 clamp(12px, 2vw, 24px); } .ls-brand { grid-column: 1; min-width: 0; } .ls-nav { grid-column: 2; } .ls-navtoggle { grid-column: 3; justify-self: end; } .ls-brand__text { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ls-fg); text-decoration: none; } .ls-nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .ls-nav__list a { display: block; padding: 8px 13px; border-radius: 7px; color: var(--ls-dim); text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; transition: color 0.15s, background-color 0.15s; } .ls-nav__list a:hover { background: var(--ls-bg-2); color: var(--ls-fg); } .ls-nav__list a:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; } /* * Valittu sivu erottuu kolmella tavalla samaan aikaan: väri, paino ja * alleviivaus. Yksi keino ei riitä — pelkkä taustaväri oli lähes sama * kuin hover, eli sivulla olija ei nähnyt missä on. Alleviivaus toimii * myös silloin kun väriero ei erotu (kirkas valo, heikko näyttö). */ .ls-nav__list .current-menu-item > a, .ls-nav__list .current_page_item > a, .ls-nav__list .current-menu-parent > a, .ls-nav__list .current-menu-ancestor > a, .ls-nav__list .current_page_parent > a { color: var(--ls-fg); font-weight: 700; background: color-mix(in srgb, var(--ls-accent) 16%, transparent); box-shadow: inset 0 -2px 0 0 var(--ls-accent); } /* ------------------------------------------------------- hampurilaisnappi */ /* * Nappi on olemassa vain kapealla näytöllä. Leveällä se on pois, koska * valikko mahtuu kokonaan näkyviin eikä piilottamiseen ole syytä. */ .ls-navtoggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ls-line); border-radius: 8px; background: var(--ls-bg-2); color: var(--ls-fg); cursor: pointer; } .ls-navtoggle:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; } /* Kolme viivaa yhdellä elementillä: ei kuvaa eikä ikonikirjastoa. */ .ls-navtoggle__bars, .ls-navtoggle__bars::before, .ls-navtoggle__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.18s, opacity 0.18s; } .ls-navtoggle__bars { position: relative; } .ls-navtoggle__bars::before, .ls-navtoggle__bars::after { content: ""; position: absolute; left: 0; } .ls-navtoggle__bars::before { top: -6px; } .ls-navtoggle__bars::after { top: 6px; } /* Auki: viivoista risti. */ .ls-head.is-navopen .ls-navtoggle__bars { background: transparent; } .ls-head.is-navopen .ls-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); } .ls-head.is-navopen .ls-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------------------ runko */ .ls-main { display: block; width: 100%; min-height: 60vh; } /* Kavennus. Tämä on ainoa paikka jossa leveyttä rajataan. */ .ls-wrap { width: 100%; max-width: var(--ls-wrap); margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(12px, 2vw, 24px); } .ls-wrap--tight { padding-bottom: 0; } .ls-page__body { max-width: var(--ls-wrap-text); } .ls-page__title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.6em; } /* Täysleveä sivupohja: ei max-widthiä, ei vaakapaddingia. */ .ls-bleed { width: 100%; } .ls-bleed__body { width: 100%; padding: clamp(12px, 2vw, 20px) clamp(10px, 1.6vw, 20px); } /* * Sovellusnäkymä. Sisältö saa koko jäljellä olevan korkeuden, jolloin * multiview-ruudukko voi täyttää näytön eikä jää nauhaksi sivun yläreunaan. */ body.ls-app .ls-main { min-height: calc(100vh - var(--ls-head-h)); min-height: calc(100dvh - var(--ls-head-h)); display: flex; flex-direction: column; } body.ls-app .ls-appview { flex: 1; display: flex; flex-direction: column; width: 100%; padding: 0; } body.ls-app .ls-appview > * { flex: 1; min-height: 0; } body.ls-app .ls-foot { margin-top: 0; } /* * Pluginin lohkot ovat oletuksena täysleveitä täysleveillä sivuilla. * Plugin ei tiedä teemasta mitään, joten yhteys tehdään täällä. */ body.ls-full .ls-bleed__body > .ls-live, body.ls-full .ls-bleed__body > .ls-tv, body.ls-full .ls-bleed__body > .ls-films, body.ls-full .ls-bleed__body > .ls-pod, body.ls-full .ls-bleed__body > .ls-favs, body.ls-full .ls-bleed__body > .ls-mv, body.ls-app .ls-appview > .ls-mv { width: 100%; max-width: none; } /* * Ja sama riippumatta siitä mikä sivupohja on valittu. * * functions.php lisää runkoon luokan sen mukaan mitä shortcodeja sivulla * on. Se luokka oli aiemmin pelkkä merkintä johon ei liittynyt yhtään * sääntöä, joten oletussivupohjalla multiview jäi 1240 pikselin palstaan * ja leipätekstin 720 pikselin rajaan — eli juuri siihen kapeaan otteeseen * jonka poistamiseksi koko teema tehtiin. Sivupohjan valinta parantaa * tulosta yhä (ei sivun otsikkoa, täysi korkeus), mutta se ei saa olla * ehto sille että lohko ylipäätään on oikean levyinen. */ body.ls-has-multiview .ls-wrap, body.ls-has-live .ls-wrap, body.ls-has-tv .ls-wrap, body.ls-has-leffat .ls-wrap, body.ls-has-podcastit .ls-wrap, body.ls-has-suosikit .ls-wrap { max-width: none; padding-left: clamp(10px, 1.6vw, 20px); padding-right: clamp(10px, 1.6vw, 20px); } body.ls-has-multiview .ls-page__body, body.ls-has-live .ls-page__body, body.ls-has-tv .ls-page__body, body.ls-has-leffat .ls-page__body, body.ls-has-podcastit .ls-page__body, body.ls-has-suosikit .ls-page__body { max-width: none; } body.ls-has-multiview .ls-mv, body.ls-has-live .ls-live, body.ls-has-tv .ls-tv, body.ls-has-leffat .ls-films, body.ls-has-podcastit .ls-pod, body.ls-has-suosikit .ls-favs { width: 100%; max-width: none; } /* * MONINÄYTTÖ SAA KOKO KORKEUDEN MYÖS TAVALLISELLA SIVUPOHJALLA. * * Sovellusnäkymä teki tämän jo, mutta se on sivupohjan valinta — ja jos * valinta unohtuu, lohko jää lyhyeksi eikä mikään kerro miksi. Mitattuna * ero oli 1832 × 807 -ikkunassa 977 × 549 vastaan 1137 × 639: sama sivu, * sama ikkuna, pelkkä sivupohja erotti ne. * * Moninäyttö on koko sivun kokoinen asia tai se ei ole mitään, joten * sivupohjan ei kuulu olla ehto. Nämä säännöt tekevät tavallisesta * sivusta saman kuin sovellusnäkymä silloin kun sivulla on moninäyttö: * pystysuunta reunasta reunaan, ei ylimääräisiä marginaaleja. */ body.ls-has-multiview .ls-main { /* * KORKEUS eikä min-height, ja se on olennainen ero. * * min-height ei tee ketjusta määrättyä: jälkeläisen height: 100 % * ratkeaa silloin automaattiseksi, ja moninäyttö putoaa omaan * varakorkeuteensa. Mitattuna ero oli 693 vastaan 751 pikseliä samassa * ikkunassa — pelkästään tästä sanasta. */ height: calc(100vh - var(--ls-head-h)); height: calc(100dvh - var(--ls-head-h)); display: flex; flex-direction: column; } body.ls-has-multiview .ls-main > .ls-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; /* Pystysuunnan täyte pois: se on suoraan pois videon korkeudesta. */ padding-top: 0; padding-bottom: 0; } body.ls-has-multiview .ls-page { flex: 1; display: flex; flex-direction: column; min-height: 0; } body.ls-has-multiview .ls-page__body { flex: 1; min-height: 0; } /* * Sivun otsikko pois moninäyttösivulta. * * Otsikko vie noin 60 pikseliä korkeutta, ja se on suoraan pois videosta. * "Moninäyttö" navipalkin aktiivisena kohtana kertoo saman asian ilman * että se maksaa mitään. */ body.ls-has-multiview .ls-page__title { display: none; } /* Alatunniste ei työnnä lohkoa lyhyemmäksi. */ body.ls-has-multiview .ls-foot { margin-top: 0; } body.ls-app .ls-mv { padding: clamp(8px, 1.2vw, 16px); } /* ---------------------------------------------------------------- listaus */ .ls-list { display: grid; gap: var(--ls-gap); } .ls-item { padding-bottom: var(--ls-gap); border-bottom: 1px solid var(--ls-line); } .ls-item__title { margin: 0 0 0.3em; font-size: 1.15rem; } .ls-item__title a { color: var(--ls-fg); text-decoration: none; } .ls-item__title a:hover { color: var(--ls-accent); } .ls-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--ls-accent); color: #fff; text-decoration: none; font-weight: 600; } /* ------------------------------------------------------------------ ikonit */ /* * Ikonit tulevat pluginin spritestä. Teema päättää vain koon ja värin — * currentColor tarkoittaa, että ikoni seuraa ympäröivän tekstin väriä eikä * sitä tarvitse teemata erikseen. */ .ls-icon { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: none; color: var(--ls-dim); } .ls-card__cat, .ls-tv__cat { display: inline-flex; align-items: center; gap: 5px; } /* -------------------------------------------------------------- mainokset */ /* * Tyhjä paikka varaa korkeuden mutta ei piirrä mitään. Näin mainoksen * lisääminen myöhemmin ei siirrä mitään, eikä käyttäjä näe tyhjää * harmaata laatikkoa joka näyttäisi rikkinäiseltä. */ .ls-ad { width: 100%; max-width: var(--ls-wrap); margin: clamp(16px, 3vw, 28px) auto; min-height: var(--ls-ad-h, 250px); display: flex; align-items: center; justify-content: center; } .ls-ad.is-empty { min-height: 0; margin: 0; } /* Kehitysaikainen näkyvyys: ?ls-ads=1 näyttää varaukset paikoillaan. */ body.ls-show-ads .ls-ad.is-empty { min-height: var(--ls-ad-h, 250px); margin: clamp(16px, 3vw, 28px) auto; border: 1px dashed var(--ls-line); border-radius: 8px; color: var(--ls-dim); font-size: 0.8rem; } body.ls-show-ads .ls-ad.is-empty::after { content: "mainospaikka: " attr(data-slot); } /* ------------------------------------------------------------ alatunniste */ .ls-foot { margin-top: clamp(32px, 6vw, 64px); border-top: 1px solid var(--ls-line); background: var(--ls-bg-2); } .ls-foot__in { max-width: var(--ls-wrap); margin: 0 auto; padding: clamp(20px, 3vw, 32px) clamp(12px, 2vw, 24px); } .ls-foot__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 12px; padding: 0; list-style: none; } .ls-foot__list a { color: var(--ls-dim); text-decoration: none; font-size: 0.9rem; } /* * Pitkä virke kapealla näytöllä: rivittyy aina, ei koskaan leikkaudu. * max-width on luettavuutta varten leveällä näytöllä, min() pitää sen * poissa tieltä kapealla. * * KESKITYS VAATII KAKSI ASIAA, JA TÄSSÄ OLI VAIN TOINEN. * * text-align keskittää rivit laatikon sisällä. Mutta laatikko itse on * max-widthin takia kapeampi kuin alatunniste, ja ilman automaattista * sivumarginaalia se jää kiinni vasempaan reunaan — jolloin teksti on * keskitetty kapeassa laatikossa joka on itse vasemmalla, eikä mikään * näytä keskitetyltä. Molemmat tarvitaan. */ .ls-foot__note { margin: 0 auto; color: var(--ls-dim); font-size: 0.82rem; line-height: 1.5; max-width: min(100%, var(--ls-wrap-text)); text-align: center; overflow-wrap: anywhere; hyphens: auto; } /* ---------------------------------------------------------------- mobiili */ @media (max-width: 720px) { :root { --ls-gap: 12px; } /* * Kapealla näytöllä valikko on napin takana. * * Aiemmin se oli vaakasuunnassa vierivä nauha, joka vei ylätunnisteesta * oman rivinsä — puhelimessa se on pois siltä mitä sivulla katsotaan. * Nyt ylätunniste on yksi rivi: tunnus ja nappi. */ .ls-head__in { grid-template-columns: 1fr auto; padding: 8px 12px; } .ls-navtoggle { display: inline-flex; grid-column: 2; } /* * Valikko putoaa tunnisteen alle omaksi paneelikseen. position: absolute * eikä ruudukon rivi: paneeli ei saa työntää sivun sisältöä alaspäin * avautuessaan, koska silloin koko näkymä hyppäisi. */ .ls-nav { grid-column: 1 / -1; position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 8px 12px 12px; background: var(--ls-bg); border-bottom: 1px solid var(--ls-line); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); } .ls-head.is-navopen .ls-nav { display: block; } /* * Ilman JS:ää nappi ei tee mitään, joten valikkoa ei saa piilottaa sen * taakse. .ls-has-js tulee skriptistä: jos se puuttuu, valikko näkyy. */ html:not(.ls-has-js) .ls-nav { display: block; position: static; box-shadow: none; padding: 0 0 8px; } html:not(.ls-has-js) .ls-navtoggle { display: none; } .ls-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 2px; } .ls-nav__list a { padding: 11px 12px; font-size: 1rem; } /* Pystylistassa alleviivaus ei erotu, joten merkki siirtyy reunaan. */ .ls-nav__list .current-menu-item > a, .ls-nav__list .current_page_item > a { box-shadow: inset 3px 0 0 0 var(--ls-accent); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }