/* * Livesuomi – Nyt livenä -näkymä * * Tarkoituksella matala spesifisyys ja omat muuttujat, jotta teema voi * ylikirjoittaa ilman !importantia. */ .ls-live { --ls-accent: #0f4c5c; --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-live { --ls-bg: #ffffff; --ls-card: #f7f8f9; --ls-card-hover: #eef1f2; --ls-text: #1b1f22; --ls-muted: #697076; --ls-border: #e2e6e8; } /* ---------------------------------------------------------------- otsikko */ .ls-live__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ls-live__title { margin: 0; font-size: 1.5rem; line-height: 1.2; } .ls-live__meta { color: var(--ls-muted); font-size: 0.875rem; } /* ---------------------------------------------------------------- välilehdet */ .ls-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--ls-border); } .ls-tab { appearance: none; border: 0; background: transparent; color: var(--ls-muted); font: inherit; font-size: 0.9375rem; padding: 9px 14px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .ls-tab:hover { color: var(--ls-text); } .ls-tab:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: -2px; border-radius: 4px 4px 0 0; } .ls-tab.is-active { color: var(--ls-text); font-weight: 600; border-bottom-color: var(--ls-accent); } /* Tyhjä lähde jää näkyviin himmennettynä — testivaiheessa on olennaista nähdä että lähde on olemassa mutta tyhjä, ei että välilehti katosi. */ .ls-tab.is-empty { opacity: 0.45; } .ls-tab__count { font-size: 0.8125rem; font-weight: 400; padding: 1px 7px; border-radius: 999px; background: var(--ls-card); color: var(--ls-muted); min-width: 1.5em; text-align: center; } .ls-tab.is-active .ls-tab__count { background: var(--ls-accent); color: #fff; } /* ---------------------------------------------------------------- testitila */ .ls-debug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; margin-bottom: 20px; background: var(--ls-card); border-radius: var(--ls-radius); font-size: 0.8125rem; color: var(--ls-muted); } .ls-debug__label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; margin-right: 4px; } .ls-debug__item { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 9px; border-radius: 6px; background: var(--ls-bg); border-left: 3px solid var(--ls-muted); } .ls-debug__item strong { font-weight: 600; color: var(--ls-text); } .ls-debug__item--ok { border-left-color: #1a7f37; } .ls-debug__item--error { border-left-color: #d63638; } .ls-debug__item--skipped { border-left-color: #996800; } .ls-debug__item--none { border-left-color: var(--ls-border); } /* ---------------------------------------------------------------- lohko */ .ls-block { margin: 0 0 28px; } .ls-block[hidden] { display: none; } .ls-block__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-muted); } .ls-block__count { font-weight: 400; letter-spacing: 0; opacity: 0.75; } .ls-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ls-muted); flex: none; } .ls-dot--twitch { background: #9146ff; } .ls-dot--kick { background: #53fc18; } .ls-dot--youtube { background: #ff0033; } .ls-dot--tv { background: var(--ls-accent); } /* ---------------------------------------------------------------- kortit */ .ls-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ls-card { margin: 0; padding: 0; } .ls-card__link { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--ls-card); border-radius: var(--ls-radius); text-decoration: none; color: inherit; transition: background-color 0.15s; height: 100%; box-sizing: border-box; } a.ls-card__link:hover, a.ls-card__link:focus-visible { background: var(--ls-card-hover); text-decoration: none; } .ls-card__thumb { flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ls-border); display: block; } .ls-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* TV-kanavien logot eivät ole 16:9 kuvakaappauksia */ .ls-card__thumb--logo { width: 56px; aspect-ratio: 1; background: transparent; } .ls-card__thumb--logo img { object-fit: contain; } .ls-card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ls-card__channel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ls-card__title { color: var(--ls-muted); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ls-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 0.8125rem; color: var(--ls-muted); } .ls-card__viewers { color: var(--ls-live); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .ls-card__viewers::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-live); } .ls-card__cat, .ls-card__since { white-space: nowrap; } /* Uusi video ei ole live — se erottuu rauhallisemmalla merkinnällä, jottei punainen live-piste menetä merkitystään. */ .ls-card__badge { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 4px; background: var(--ls-accent); color: #fff; white-space: nowrap; } .ls-card--video .ls-card__thumb { opacity: 0.92; } .ls-empty { color: var(--ls-muted); padding: 24px 0; } /* ---------------------------------------------------------------- mobiili */ @media (max-width: 480px) { .ls-cards { grid-template-columns: 1fr; } .ls-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ls-tabs::-webkit-scrollbar { display: none; } .ls-tab { white-space: nowrap; flex: none; } .ls-card__thumb { width: 76px; } } /* Podcast-jakso: ei katsojalukua, mutta kesto on olennainen tieto. */ .ls-card__dur { font-variant-numeric: tabular-nums; opacity: 0.85; } .ls-card--podcast .ls-card__thumb img { aspect-ratio: 1 / 1; object-fit: cover; }