/* * Livesuomi – TV-opas * * Samat muuttujat ja sama matala spesifisyys kuin live-näkymässä, jotta * teema voi ylikirjoittaa ilman !importantia. */ .ls-tv { --ls-accent: #0f4c5c; /* Linkkiväri tekstille. --ls-accent on tumma petroli, joka toimii napin taustana mutta ei tummalla taustalla olevana tekstinä. */ --ls-accent-text: #6bb6c8; --ls-live: #e23744; --ls-bg: #14181b; --ls-card: #1c2126; --ls-card-hover: #242b31; --ls-text: #eef1f2; --ls-muted: #9aa3aa; --ls-border: #2a3238; --ls-radius: 10px; color: var(--ls-text); font-size: 15px; line-height: 1.45; } /* * Väripaletti seuraa TEEMAA, ei käyttöjärjestelmää. * * Tämä oli aiemmin @media (prefers-color-scheme: dark), ja se tuotti juuri * sen vian jonka Kim näki: teema on tummasävyinen aina, mutta selaimen * ollessa vaaleassa tilassa tämä lohko latasi vaalean palettinsa. Silloin * --ls-text oli lähes musta ja sivun tausta tumma, eli päivänapit olivat * mustaa mustalla. Vika ei näkynyt kehittäjän koneella lainkaan, koska se * riippui katsojan käyttöjärjestelmän asetuksesta. * * Oletus on siis tumma, sama kuin teemalla. Vaalea kytketään samalla * kytkimellä kuin teemassa (), jolloin kumpikin * vaihtuu yhdessä eikä kumpikaan voi olla eri mieltä. */ :root[data-theme="light"] .ls-tv { --ls-accent-text: #0f4c5c; --ls-bg: #ffffff; --ls-card: #f7f8f9; --ls-card-hover: #eef1f2; --ls-text: #1b1f22; --ls-muted: #697076; --ls-border: #e2e6e8; } /* ------------------------------------------------------------------ pää */ .ls-tv__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ls-tv__title { margin: 0; font-size: 1.5rem; line-height: 1.2; } .ls-tv__meta { margin: 0; color: var(--ls-muted); font-size: 0.875rem; } /* -------------------------------------------------------------- päivät */ .ls-tv__days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; } /* * Valitsematon päivä oli aiemmin pelkkä läpinäkyvä laatikko, jonka ainoa * erottuva osa oli ohut reunaviiva. Tummalla taustalla siitä tuli musta * laatikko mustalla — nappi jota ei näe on nappi jota ei paineta. Nyt * jokaisella napilla on oma taustansa, ja ero valittuun tehdään värillä * eikä sillä että toinen on olemassa ja toinen ei. */ .ls-tv__day { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; background: var(--ls-card); border: 1px solid var(--ls-border); border-radius: 8px; text-decoration: none; color: var(--ls-text); min-width: 78px; transition: border-color 0.15s, background-color 0.15s; } .ls-tv__day:hover { background: var(--ls-card-hover); border-color: var(--ls-muted); } .ls-tv__day:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; } .ls-tv__day.is-on { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; } .ls-tv__dayname { font-weight: 600; font-size: 0.875rem; } .ls-tv__daydate { font-size: 0.75rem; color: var(--ls-muted); font-variant-numeric: tabular-nums; } .ls-tv__day.is-on .ls-tv__daydate { color: rgba(255, 255, 255, 0.82); } /* ------------------------------------------------------------- kanavat */ .ls-tv__channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } .ls-tv__channel { border: 1px solid var(--ls-border); border-radius: var(--ls-radius); overflow: hidden; background: var(--ls-bg); min-width: 0; } .ls-tv__chhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ls-card); border-bottom: 1px solid var(--ls-border); position: sticky; top: 0; } .ls-tv__chlogo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; border-radius: 6px; background: #fff; } .ls-tv__chname { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-tv__chcount { flex: 0 0 auto; font-size: 0.75rem; color: var(--ls-muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ls-border); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ ohjelmat */ .ls-tv__list { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; } .ls-tv__item { display: flex; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ls-border); } .ls-tv__item:last-child { border-bottom: 0; } .ls-tv__item.is-now { background: var(--ls-card); box-shadow: inset 3px 0 0 var(--ls-live); } .ls-tv__time { flex: 0 0 auto; width: 42px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.875rem; color: var(--ls-muted); padding-top: 1px; } .ls-tv__item.is-now .ls-tv__time { color: var(--ls-live); } .ls-tv__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ls-tv__name { font-weight: 600; font-size: 0.9375rem; } .ls-tv__sub { font-weight: 400; color: var(--ls-muted); } .ls-tv__sub::before { content: " — "; } .ls-tv__descwrap { display: block; } .ls-tv__desc { color: var(--ls-muted); font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Avattuna rajaus poistuu kokonaan. */ .ls-tv__descwrap.is-open .ls-tv__desc { -webkit-line-clamp: none; line-clamp: none; display: block; overflow: visible; } .ls-tv__more { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 0; border: 0; background: none; color: var(--ls-accent-text, #6bb6c8); font: inherit; font-size: 0.75rem; cursor: pointer; } .ls-tv__more[hidden] { display: none; } .ls-tv__more:hover .ls-tv__morelabel { text-decoration: underline; } /* Kolmio CSS:llä: ei ikonia ladattavaksi yhtä nuolta varten. */ .ls-tv__arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.15s; } .ls-tv__descwrap.is-open .ls-tv__arrow { transform: rotate(180deg); } .ls-tv__facts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.75rem; color: var(--ls-muted); margin-top: 1px; } .ls-tv__badge { color: #fff; background: var(--ls-live); padding: 1px 7px; border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; } .ls-tv__cat, .ls-tv__ep, .ls-tv__year { padding: 1px 7px; border-radius: 4px; background: var(--ls-card-hover); } .ls-tv__len { font-variant-numeric: tabular-nums; } .ls-tv__empty { color: var(--ls-muted); padding: 20px 0; } /* ------------------------------------------------------------ mobiili */ @media (max-width: 640px) { .ls-tv__channels { grid-template-columns: 1fr; } .ls-tv__list { max-height: 420px; } .ls-tv__day { min-width: 0; flex: 1 1 auto; } } /* * Katkaisuvaroitus. Hiljainen katkaisu oli tämän näkymän ensimmäinen vika: * rivimäärän raja pudotti kokonaisia kanavia, eikä mikään kertonut siitä. */ .ls-tv__warn { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--ls-live); background: var(--ls-card); border-radius: 4px; font-size: 0.875rem; }