:root { --bg: #11161d; --panel: #171e27; --line: #232d3a; --ink: #e8eef6; --dim: #8b9bb0; --accent: #5bb0ff; --hot: #ffd166; --good: #6fcf97; --again: #eb5757; --safe: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--ink); /* Charis/DejaVu are in the stack for the IPA only: system-ui covers Dutch completely but has gaps in the phonetic block (ɣ, ə, ː), and a fallback chosen by the browser per-glyph is how /ɣə.ˈvɑ.lə(n)/ ends up rendering in three different faces at once. */ font: 17px/1.65 system-ui, "Charis SIL", "DejaVu Sans", sans-serif; display: flex; flex-direction: column; } button { font-family: inherit; } /* The `hidden` attribute is only display:none in the UA sheet, so ANY id rule * setting display beats it — #endcard{display:flex} left the teacher's greeting * sitting under subtitle 1. Make hidden mean hidden, everywhere. */ [hidden] { display: none !important; } /* ---------- home : the front door ---------- */ /* One class on flips the whole app: home shows the hero and the three * series cards and NOTHING else; a series shows everything else and no hero. * The banner does not follow you in — inside a series the top of the screen * belongs to the counter. */ body.home #top, body.home #tabs, body.home main, body.home #playpause, body.home #follow { display: none; } body:not(.home) #home { display: none; } /* Herhalen is a third mode, a screen of its own reached from the front door — * not a tab inside an episode. It keeps the masthead's ⌂ but has no episode * picker and no Lezen/Kijken tabs, and it borrows the stage ONLY once a card is * playing (hasvideo), so you land on the deck, not on a black box. */ body.review #tabs, body.review #episodes { display: none; } body.review:not(.hasvideo) #stage, body.review:not(.hasvideo) #speedbar { display: none; } #home { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* The full photograph, uncropped: sky, sign and canal. The band-crop was for a * header the reader had to share — here the hero IS the screen. */ #home img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #series { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px calc(24px + var(--safe)); } /* Each card borrows the marquee: dark panel, one neon colour per series. */ .serie { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; text-align: left; cursor: pointer; padding: 15px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); } .serie b { font-size: 20px; letter-spacing: .4px; } .serie span { grid-column: 1; color: var(--dim); font-size: 13px; } .serie i { grid-row: 1 / span 2; font-style: normal; font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .serie[data-series="news"] b { color: var(--accent); } .serie[data-series="classic"] b { color: var(--hot); } .serie[data-series="song"] b { color: var(--good); } .serie[data-series="news"]:not(:disabled) { border-color: #2c4a68; box-shadow: 0 0 22px rgba(91, 176, 255, .10); } .serie[data-series="classic"]:not(:disabled) { border-color: #5c4a24; box-shadow: 0 0 22px rgba(255, 209, 102, .09); } .serie[data-series="song"]:not(:disabled) { border-color: #2c5240; box-shadow: 0 0 22px rgba(111, 207, 151, .09); } /* An empty series: the sign is up but the lamps are off. */ .serie:disabled { opacity: .5; cursor: default; } /* The deck's own door. NOT a serie card: the front door was reading it as one * more thing to watch. A labelled divider opens a separate zone — your own * practice, not content — and the button drops the neon marquee for a flat, * icon-led tool: dashed purple edge, no glow, a smaller name. It should look * like the thing you reach for AFTER watching, not another thing to watch. */ #deck-door { padding: 4px 16px calc(24px + var(--safe)); } .deck-sep { display: flex; align-items: center; gap: 12px; margin: 2px 2px 14px; color: var(--dim); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } .deck-sep::before, .deck-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--line), transparent); } .deckbtn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 12px 16px; border-radius: 14px; color: var(--ink); background: color-mix(in srgb, #c79bff 8%, var(--panel)); border: 1px dashed color-mix(in srgb, #c79bff 55%, var(--line)); } .deckbtn:active { transform: translateY(1px); } .deck-ic { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 10px rgba(199, 155, 255, .5)); } .deck-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .deckbtn b { font-size: 16px; letter-spacing: .4px; color: #c79bff; } .deck-sub { color: var(--dim); font-size: 12px; } #deckcount { color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---------- header / player ---------- */ #top { position: sticky; top: 0; z-index: 5; background: var(--bg); } .bar { display: flex; gap: 8px; padding: 8px 10px; } #homebtn { flex: none; width: 44px; border-radius: 9px; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 18px; line-height: 1; } #homebtn:hover { border-color: var(--accent); } #episodes { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 9px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 15px; text-overflow: ellipsis; /* headlines are longer than the bar */ } #stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } #stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* speed — on the player, not two taps deep in YouTube's settings menu */ #speedbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; } .slab { font-size: 13px; line-height: 1; opacity: .75; } #speed, #jump input { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; } #speed::-webkit-slider-runnable-track, #jump input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); } #speed::-moz-range-track, #jump input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); } /* A 16px dot would be a 16px TARGET. This is a control you nudge mid-sentence * with a thumb, so the handle is finger-sized even though the track is hairline. */ #speed::-webkit-slider-thumb, #jump input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; } #speed::-moz-range-thumb, #jump input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; } #speedval { min-width: 38px; text-align: right; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; } #unit { padding: 4px 9px; border-radius: 8px; cursor: pointer; font-size: 12px; background: var(--panel); color: var(--dim); border: 1px solid var(--line); } #unit.on { background: #223145; color: var(--accent); border-color: var(--accent); } /* ---------- tabs ---------- */ #tabs { display: flex; gap: 6px; padding: 8px 10px; background: var(--bg); position: sticky; top: 0; z-index: 4; border-bottom: 1px solid var(--line); } .tab { flex: 1; padding: 9px 0; border-radius: 9px; cursor: pointer; background: var(--panel); color: var(--dim); border: 1px solid var(--line); font-size: 16px; font-weight: 600; } .tab.on { background: var(--accent); color: #07121f; border-color: var(--accent); } #duedot { font-size: 12px; font-variant-numeric: tabular-nums; } #duedot.on { color: var(--hot); } .tab.on #duedot.on { color: #7a4a00; } /* ---------- views ---------- */ main { flex: 1; overflow: hidden; display: flex; } .view { display: none; flex: 1; min-width: 0; overflow-y: auto; padding: 10px 10px calc(90px + var(--safe)); } .view.on { display: block; } .hint { color: var(--dim); font-size: 13px; margin: 2px 4px 10px; } /* the ▶ that starts a line — small, at the left of the subtitle it plays */ .play { flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--line); font-size: 12px; line-height: 1; padding: 0; } .play:hover { background: #223145; border-color: var(--accent); } /* ---------- Lezen : one subtitle, words on demand ---------- */ /* The pager is the header's FIRST row now — `04/12` at the very top of the * screen, where the banner used to be. setView() hides it outside Lezen. */ /* Inside #read (the .view supplies the horizontal padding). */ #pager { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; } #pager button { width: 54px; height: 40px; border-radius: 10px; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 24px; line-height: 1; } #pager button:disabled { opacity: .3; cursor: default; } #pos { flex: 1; text-align: center; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; } /* The scrubber toggleJump() drops under the pager (see app.js). display:flex * so the input's flex:1 shared with #speed applies here too. */ #jump { display: flex; margin: 6px 0; padding: 0 4px; } /* Not an error — the line is fine, the audio under it is not ours to promise. */ #pos .noaudio { color: var(--hot); opacity: .85; cursor: help; } /* The timestamp is the door to retiming (see renderReader); the dotted * underline is the only hint it is more button than label. */ #pos #postime { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } #pos #postime.on { color: var(--hot); } #subcard { display: flex; align-items: flex-start; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px; } #subcard .play { margin-top: 4px; } /* 21px, not the Cantonese app's 27px: that size was set for CJK, where a subtitle is ~20 dense glyphs. The same sentence in Dutch is ~90 characters and has to wrap and stay readable on a phone. */ /* Sentence mode joins segments that trail off, so the longest unit here is * longer than any single subtitle — the type steps down to keep the word view on * screen instead of pushing it past the bottom. Set in renderReader(). */ #subtext { flex: 1; font-size: 21px; line-height: 1.65; } #subtext.long { font-size: 18px; line-height: 1.55; } #subtext.xlong { font-size: 16px; line-height: 1.45; } /* Each word is a tap target; the gap between them is the division itself. */ .tok { display: inline-block; padding: 0 3px; margin: 0 1px; border-radius: 6px; cursor: pointer; border-bottom: 2px solid var(--line); } .tok:hover { background: #223145; } .tok.known { border-bottom-color: var(--good); } .tok.open { background: #2a2418; border-bottom-color: var(--hot); } .punc { color: var(--dim); } #subtrans:not(:empty) { color: var(--dim); font-size: 14px; margin: 9px 4px 0; cursor: pointer; border-radius: 7px; padding: 3px 6px; } /* Covered: same box, same height, no answer in it — so revealing does not shove * the word view down the page. */ #subtrans.covered { color: #4a5a70; background: var(--panel); border: 1px dashed var(--line); font-style: italic; } #subwords:not(:empty) { margin-top: 10px; } /* The live subtitle — what the video is saying right now while it plays free * under Lezen (paintLive in app.js). Dimmer than the studied line above it: * it is a ticker, not the text. Tap = take the reader there. */ #livesub { margin: 8px 4px 0; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); font-size: 14px; line-height: 1.5; cursor: pointer; } #livesub[hidden] { display: none; } #livesub:hover { border-color: var(--accent); } #livesub .lt { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 6px; } /* the opened word — under the subtitle it came from */ .wrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--hot); cursor: pointer; } .wmain { flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .wmain .w { font-size: 21px; } .wmain .ipa { color: var(--accent); font-size: 13px; } .wmain .en { color: var(--dim); font-size: 13px; flex: 1; min-width: 8em; } .wmain .lem { color: var(--hot); font-size: 12px; } .add { flex: none; padding: 7px 10px; border-radius: 9px; cursor: pointer; background: transparent; color: var(--dim); border: 1px solid var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; } .add.on { background: #1d3327; color: var(--good); border-color: var(--good); } /* ---------- Leraar : the last stop in Lezen ---------- */ #endcard { display: flex; flex-direction: column; min-height: 60vh; } #endhead { color: var(--dim); font-size: 13px; margin: 2px 4px 10px; } #chat { flex: 1; overflow-y: auto; padding-bottom: 8px; } .msg { max-width: 84%; padding: 9px 12px; border-radius: 13px; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; } .msg.bot { background: var(--panel); border-bottom-left-radius: 4px; } .msg.me { background: #24415e; margin-left: auto; border-bottom-right-radius: 4px; } .msg.wait { color: var(--dim); font-style: italic; } /* His turn: 🔊 to the left of what he said, so replaying is a thumb-move and * not a hunt. The row is only built when he can actually be spoken. */ .botrow { display: flex; align-items: flex-start; gap: 7px; } .replay { flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 13px; line-height: 1; padding: 0; } .replay:hover { border-color: var(--accent); } /* Covered: heard, not yet read. Dashed = there is something behind this. */ .msg.bot.covered { color: #4a5a70; font-style: italic; cursor: pointer; background: transparent; border: 1px dashed var(--line); } #say { display: flex; gap: 7px; padding-top: 8px; align-items: center; } #mic { flex: none; width: 42px; height: 42px; border-radius: 11px; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 17px; line-height: 1; padding: 0; } #mic.on { background: #3d1f28; border-color: var(--hot); animation: pulse 1.1s infinite; } @keyframes pulse { 50% { opacity: .45; } } #msg { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 11px; font-size: 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); } #send { padding: 0 17px; border-radius: 11px; border: 0; cursor: pointer; background: var(--accent); color: #07121f; font-weight: 700; } /* ---------- Kijken : the tracking list ---------- */ .sub { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: var(--panel); border: 1px solid transparent; transition: background .12s, border-color .12s; } .sub:hover { border-color: var(--line); } .sub.now { background: #1d2b3d; border-color: var(--accent); } .sbody { flex: 1; min-width: 0; cursor: pointer; } .sub .t { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } .sub .x { font-size: 18px; } .sub .ipa { color: var(--dim); font-size: 12px; margin-top: 2px; display: none; } .sub.now .ipa { display: block; } /* ---------- Herhalen : laid out like Anki ---------- */ #revcounts { display: flex; justify-content: center; gap: 26px; margin: 6px 0 14px; } .ct { text-align: center; } .ct span { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .ct label { font-size: 11px; color: var(--dim); } .ct.new span { color: var(--accent); } .ct.lrn span { color: var(--again); } .ct.rev span { color: var(--good); } #revstart { width: 100%; padding: 11px; border-radius: 10px; cursor: pointer; border: 0; font-size: 15px; font-weight: 700; margin-bottom: 14px; background: var(--accent); color: #07121f; } #revstart:disabled { background: var(--panel); color: var(--dim); border: 1px solid var(--line); cursor: default; } #revnext:not(:empty) { text-align: center; color: var(--dim); font-size: 12px; margin: -8px 0 12px; } /* The card fills the view and the answer bar sits at its bottom, as in Anki — * always reachable without scrolling. That needs a real height to divide up: * min-height:70vh measured the WHOLE window, so under the video the bar landed * below the fold. Make the view a flex column and let the card take what's left. */ #revise.on { display: flex; flex-direction: column; padding-bottom: 10px; } #revcard { flex: 1; min-height: 0; display: flex; flex-direction: column; } #revremain { text-align: center; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; } #revfront { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; text-align: center; } /* 34px against the Cantonese app's 46px, and wrapping allowed: a card front there is two or three characters wide, where Dutch hands it `televisieprogramma`. */ #revword { font-size: 34px; line-height: 1.25; overflow-wrap: anywhere; } #revback hr { border: 0; border-top: 1px solid var(--line); margin: 16px auto; width: 70%; } #revipa { color: var(--accent); font-size: 17px; } #revlem:not(:empty) { color: var(--hot); font-size: 14px; margin-top: 2px; } #reven { color: var(--dim); font-size: 15px; margin-bottom: 12px; } #revex { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 17px; text-align: left; } #revex b { color: var(--hot); } #revbar { padding-top: 10px; } #revplay { width: 100%; padding: 9px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--line); font-size: 13px; margin-bottom: 8px; } #revshow { width: 100%; padding: 12px; border-radius: 10px; cursor: pointer; border: 0; background: var(--accent); color: #07121f; font-size: 15px; font-weight: 700; } #revgrades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .grade { padding: 7px 2px 6px; border-radius: 10px; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); display: grid; gap: 1px; } .grade .gi { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; } .grade .gl { font-size: 13px; font-weight: 600; } .grade .gk { font-size: 9px; color: var(--dim); opacity: .6; } .grade.again { border-color: var(--again); } .grade.again .gl { color: var(--again); } .grade.good { border-color: var(--good); } .grade.good .gl { color: var(--good); } .grade.easy { border-color: var(--accent); } .grade.easy .gl { color: var(--accent); } .dcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: var(--panel); border: 1px solid transparent; cursor: pointer; } .dcard.due { border-color: var(--hot); } .dcard .when { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } /* Prune button — same shape and toggle behaviour as .add in Lezen, so the one * gesture that removes a word looks like the one that added it. */ .del { flex: none; min-width: 30px; padding: 6px 9px; border-radius: 8px; cursor: pointer; background: transparent; color: var(--dim); border: 1px solid var(--line); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; } .del.on { background: #3a2323; color: var(--hot); border-color: var(--hot); } .dcard.gone { opacity: .45; } .dcard.gone .wmain .w { text-decoration: line-through; } /* ---------- follow toggle (Kijken only) ---------- */ #follow { position: fixed; right: 14px; bottom: calc(16px + var(--safe)); z-index: 6; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; background: var(--panel); color: var(--dim); border: 1px solid var(--line); font-size: 17px; font-weight: 700; } #follow.on { background: var(--accent); color: #07121f; border-color: var(--accent); } /* Kijken plays straight through, so its pause lives out here next to Volg — * within thumb reach, and not inside the embed under the subtitles you're * reading. */ #playpause { position: fixed; right: 14px; bottom: calc(74px + var(--safe)); z-index: 6; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 17px; } /* ---------- add-to-home-screen hint (installHint in app.js) ---------- */ /* Left of the floating buttons' column and above the safe area: it must not * cover Volg/pause, and the iOS toolbar must not cover it. */ #a2hs { position: fixed; left: 10px; right: 74px; bottom: calc(16px + var(--safe)); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--accent); font-size: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); } #a2hs > span { flex: 1; } #a2hs button { border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; background: var(--accent); color: #07121f; font-weight: 700; } #a2hs #a2hsx { background: none; color: var(--dim); font-size: 16px; padding: 2px 6px; } @media (min-width: 820px) { body { max-width: 820px; margin: 0 auto; } } /* build stamp on the front door — small and out of the way; tells you which deploy you are running so a change you expect can be confirmed. */ #appver { text-align: center; font-size: 11px; opacity: .45; margin: 14px 0 4px; letter-spacing: .03em; font-variant-numeric: tabular-nums; } /* --- in-app editing (✎) -------------------------------------------------- The ✎ button matches the stuk/zin pill next to it; lit when editing is on. The timing editor and gloss field only appear while body.editing is set. */ #editmode { padding: 4px 9px; border-radius: 8px; cursor: pointer; font-size: 12px; background: var(--panel); color: var(--dim); border: 1px solid var(--line); } #editmode.on { background: #223145; color: var(--hot); border-color: var(--hot); } #timeedit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 4px 0; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px dashed color-mix(in srgb, var(--hot) 45%, var(--line)); font-size: 12px; color: var(--dim); } #timeedit[hidden] { display: none; } #timeedit .tlab { color: var(--hot); font-weight: 600; letter-spacing: .03em; } #timeedit .tgrp { display: inline-flex; align-items: center; gap: 4px; } #timeedit .tk { color: var(--dim); } #timeedit .tv { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; } #timeedit button { min-width: 26px; padding: 3px 7px; border-radius: 7px; cursor: pointer; background: #1c2836; color: var(--ink); border: 1px solid var(--line); font-size: 12px; } #timeedit button:hover:not(:disabled) { border-color: var(--hot); } #timeedit #treset { color: var(--dim); } #timeedit button:disabled { opacity: .4; cursor: default; } /* ⦿ nu — set an edge to the live playback position. The retime that works: play the clip, stop on the beat, tap. Tinted hot so it reads as the primary move, not one of the ± nudges beside it. */ #timeedit .ednow { flex-basis: 100%; margin: 0 0 2px; color: var(--dim); line-height: 1.4; } #timeedit .ednow b { color: var(--hot); } #timeedit .tnow { background: color-mix(in srgb, var(--hot) 22%, #1c2836); font-weight: 600; border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); } #timeedit .tnow:hover:not(:disabled) { background: color-mix(in srgb, var(--hot) 40%, #1c2836); } /* In edit mode each line of the open word — woord / uitspraak / vertaling — becomes a field. */ .efld { margin-top: 2px; padding: 5px 8px; border-radius: 8px; background: var(--bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--hot) 55%, var(--line)); } .efld:focus { outline: none; border-color: var(--hot); } .efw { font-size: 18px; min-width: 6em; } .efipa { font-size: 14px; color: var(--accent); min-width: 8em; } .efen { font-size: 15px; flex: 1; min-width: 10em; } /* Subtitle-level actions, under the audio nudge, inside #timeedit. */ #timeedit .edacts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--hot) 25%, var(--line)); } #timeedit .edhint { flex-basis: 100%; margin-top: 2px; color: var(--hot); font-size: 12px; line-height: 1.4; } #timeedit .edbtn { min-width: 0; } #timeedit .edbtn.danger { color: var(--hot); } #timeedit .edbtn.danger:hover:not(:disabled) { background: #3a1c22; border-color: var(--hot); } #timeedit .edbtn.ghost { color: var(--dim); } #timeedit .edbtn.on { background: color-mix(in srgb, var(--hot) 22%, #1c2836); border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); } /* The ⌨ typing panel — hertyp rewrites the subtitle, voeg-zin-in types a missing one in after it. */ #timeedit .edtype { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--hot) 25%, var(--line)); } #timeedit .edtype textarea { flex-basis: 100%; padding: 7px 9px; border-radius: 8px; resize: vertical; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; font-family: inherit; border: 1px solid color-mix(in srgb, var(--hot) 55%, var(--line)); } #timeedit .edtype textarea:focus { outline: none; border-color: var(--hot); } #timeedit .edtyperow { display: flex; gap: 6px; } /* Resegmentation handles inside the open word: split BETWEEN letters, weld two adjacent words at the seam. Small hit targets that read as gaps. */ .etok { background: #2a2418; border-bottom-color: var(--hot); } .etok .ech { padding: 0 1px; } .split, .seam { display: inline-block; cursor: pointer; position: relative; } .split { width: 8px; } .split::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; transform: translateX(-50%); background: var(--hot); opacity: .35; border-radius: 2px; } .split:hover::before { opacity: 1; } .seam { width: 12px; } .seam::before { content: "＋"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--accent); font-size: 11px; opacity: .35; } .seam:hover::before { opacity: 1; }