/* 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.1.1 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; } /* ------------------------------------------------------------- ylätunniste */ .ls-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ls-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ls-line); } .ls-head__in { display: flex; align-items: center; justify-content: space-between; 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__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: 7px 11px; border-radius: 7px; color: var(--ls-dim); text-decoration: none; font-size: 0.92rem; } .ls-nav__list a:hover, .ls-nav__list .current-menu-item > a { background: var(--ls-bg-2); color: var(--ls-fg); } /* ------------------------------------------------------------------ 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-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 { 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 { max-width: none; } body.ls-has-multiview .ls-mv, body.ls-has-live .ls-live, body.ls-has-tv .ls-tv { width: 100%; max-width: none; } 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; 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; } .ls-foot__note { margin: 0; color: var(--ls-dim); font-size: 0.82rem; max-width: var(--ls-wrap-text); } /* ---------------------------------------------------------------- mobiili */ @media (max-width: 720px) { :root { --ls-gap: 12px; } .ls-head__in { flex-wrap: wrap; padding: 8px 12px; } /* * Valikko vierii vaakasuunnassa, mutta vieritys on rajattava