:root{ --bg:#0f1115; --panel:#171a21; --panel2:#1d212b; --line:#272c38; --ink:#e8eaf0; --muted:#98a2b8; --accent:#5b8cff; --accent2:#7c5cff; --green:#39c07a; --amber:#e6b53a; --red:#ff6b6b; --chip:#222836; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:14px} button{font-family:inherit;cursor:pointer} a{color:var(--accent);text-decoration:none} .hidden{display:none !important} /* THE WORKSPACE SCROLLS; THE PAGE DOES NOT. * * `.main` already carried `overflow:auto`, but the shell had no height — so the * BODY scrolled and `.main` never did. That is why `position: sticky` on the * video did nothing: a sticky element sticks inside its nearest scroll * container, and `.main`'s scroll position was permanently zero while the whole * page moved underneath it. The player scrolled away with everything else. * * Giving the shell the viewport's height makes `.main` the real scrollport, and * the sticky player then behaves the way it was written to. The sidebar stops * scrolling away as a free consequence. */ html,body{height:100%} .app{display:grid;grid-template-columns:232px 1fr;height:100vh;min-height:100vh; overflow:hidden;transition:grid-template-columns .16s ease} /* CLOSED IS 0px. A 56px rail is still a panel: it keeps a border, a * background and a column, and it was reported as "half closed". Shut, the * sidebar is display:none and its grid column is gone, so the workspace gets * the whole width. The control that reopens it therefore cannot live inside * it — `#navReopen` is fixed, sits outside the grid, and costs the workspace * nothing. */ .app.nav-collapsed{grid-template-columns:0 1fr} /* NOT `display:none`: that takes the sidebar out of the grid flow, and the * workspace then lands in column ONE — which is the 0px one. It stays a * grid item and becomes nothing: no width, no padding, no border, no * background, and its content is not rendered. */ .app.nav-collapsed .sidebar{width:0;min-width:0;padding:0;border:0; background:none;overflow:hidden;visibility:hidden} #navReopen{position:fixed;left:0;top:14px;z-index:60;width:20px;height:46px; border:1px solid var(--line);border-left:0;border-radius:0 9px 9px 0; background:#12141a;color:var(--muted);cursor:pointer;font-size:13px; line-height:1;padding:0;display:flex;align-items:center;justify-content:center} #navReopen:hover{color:var(--ink);background:#1b1f28} .sidebar{background:#12141a;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:6px; height:100vh;overflow-y:auto;overflow-x:hidden} /* Collapsing the navigation. The centre workspace is what the user came for, * and on a 9:16 film with a repair list beside it every pixel of width counts. */ .navtoggle{position:absolute;left:0;top:0;width:100%;border:0;background:transparent; color:var(--muted);font-size:13px;padding:6px 8px;text-align:left;display:none} .sidebar .navtoggle{display:block;position:static;margin:-6px 0 2px;border-radius:8px} .sidebar .navtoggle:hover{background:#1b1f28;color:var(--ink)} /* NO PADDING. This rule used to say `padding:16px 6px` and, being LATER in the * file at the same specificity, it beat the `padding:0` fifteen lines above — * so a "closed" sidebar measured 12px wide at every viewport. That is the * residual half-panel the closed state exists to remove, and it was put there * by the previous design, where closed meant a narrow rail of icons rather than * nothing. The rest of this block only hides labels on a rail that no longer * exists; it is harmless and left alone. */ .app.nav-collapsed .sidebar{align-items:center} .app.nav-collapsed .brand small, .app.nav-collapsed .brand div, .app.nav-collapsed .navsec, .app.nav-collapsed .navi span:not(.ic){display:none} .app.nav-collapsed .navi{justify-content:center;padding:9px 6px} .app.nav-collapsed .navtoggle{text-align:center} .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px} .brand b{font-size:15px}.brand small{display:block;color:var(--muted);font-size:11px} /* §3 — the approved mark, on its own, at its own proportions. It used to be the letter «A» in a gradient tile; the tile is gone because the mark IS the gradient and a coloured box behind it hides the interlace. */ .brand .logo{width:auto;height:22px;display:block;border-radius:0;background:none; filter:drop-shadow(0 0 10px rgba(34,211,238,.45))} .navsec{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin:14px 8px 4px} .navi{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:0;background:transparent;color:var(--ink);text-align:left;width:100%;font-size:13px} .navi:hover{background:#1b1f28} .navi.active{background:#232a3a;color:#fff} .navi .ic{width:18px;text-align:center;opacity:.85} .main{padding:22px 26px;height:100vh;overflow-y:auto;overflow-x:hidden;scroll-behavior:auto} .pagehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .pagehead h1{font-size:20px;margin:0} .pagehead p{color:var(--muted);margin:2px 0 0;font-size:13px} .row{display:flex;gap:12px;flex-wrap:wrap} .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px} .btn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:9px 14px;border-radius:9px;font-size:13px} .btn:hover{border-color:#3a4560} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .btn.primary:hover{filter:brightness(1.08)} .btn.ghost{background:transparent} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.sm{padding:6px 10px;font-size:12px;border-radius:8px} /* home */ .home-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px} .prod{padding:26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,#191d27,#141821)} .prod .em{font-size:30px} .prod h2{margin:12px 0 6px;font-size:22px} .prod p{color:var(--muted);margin:0 0 18px;min-height:38px} .recent{margin-top:26px} .recent h3{font-size:14px;color:var(--muted);margin:0 0 8px} .proj{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel)} .proj:hover{border-color:#3a4560;cursor:pointer} .proj small{color:var(--muted)} /* forms */ .field{margin-bottom:14px;max-width:560px} .field label{display:block;font-size:13px;margin-bottom:6px} .field .opt{color:var(--muted);font-weight:400} .drop{border:1.5px dashed #333b4d;border-radius:12px;padding:18px;text-align:center;color:var(--muted);background:#141821} .drop.ok{border-color:var(--green);color:var(--ink)} .drop input{display:none} select,input[type=text]{width:100%;max-width:560px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:9px 10px;border-radius:9px} /* summary tiles */ .tiles{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:96px} .tile b{display:block;font-size:22px} .tile span{color:var(--muted);font-size:12px} .tile.g b{color:var(--green)} .tile.a b{color:var(--amber)} .tile.r b{color:var(--red)} /* filters */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .chip{border:1px solid var(--line);background:var(--chip);color:var(--ink);padding:6px 12px;border-radius:20px;font-size:12px} .chip.active{background:var(--accent);border-color:var(--accent);color:#fff} /* rows */ .split{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start} .listwrap{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden} .vlist{height:62vh;overflow:auto;position:relative} .vrow{position:absolute;left:0;right:0;padding:9px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start} .vrow:hover{background:#1b202b;cursor:pointer} .vrow.sel{background:#232c3f} .vrow .bn{color:var(--muted);font-size:11px;min-width:34px} .vrow .tx{flex:1;min-width:0} .vrow .tx .mn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vrow .tx .src{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vrow .meta{display:flex;gap:6px;align-items:center;flex-shrink:0} .dot{width:9px;height:9px;border-radius:50%} .dot.g{background:var(--green)} .dot.a{background:var(--amber)} .dot.r{background:var(--red)} .cps{font-size:11px;color:var(--muted)} /* editor panel */ .editor{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;position:sticky;top:10px} .editor .ctx{color:var(--muted);font-size:12px;padding:6px 8px;border-left:2px solid var(--line);margin-bottom:6px} .editor .ts{color:var(--muted);font-size:12px;margin-bottom:8px} .editor textarea{width:100%;min-height:70px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px;font-size:14px;resize:vertical} .editor .issue{font-size:12px;padding:6px 8px;border-radius:8px;margin:6px 0;background:#20242e} .editor .issue.r{border-left:3px solid var(--red)} .editor .issue.a{border-left:3px solid var(--amber)} /* Not a defect: dubbing direction and non-actionable measurements. */ .editor .issue.note{border-left:3px solid #3a4152;opacity:.85} .editor .sugg{background:#182234;border:1px solid #26406b;border-radius:8px;padding:9px;margin:8px 0} .editor .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .bulkbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} .toast{position:fixed;bottom:18px;right:18px;background:#20242e;border:1px solid var(--line);padding:11px 15px;border-radius:10px;z-index:50;max-width:360px} .toast.err{border-color:var(--red)} .stepbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px} .step{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;color:var(--muted)} .step.active{background:var(--accent);border-color:var(--accent);color:#fff} .step.done{border-color:var(--green);color:var(--ink)} .banner{background:#2a1d1d;border:1px solid #5a3030;color:#ffd9d9;padding:10px 14px;border-radius:10px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px} .progress{height:8px;background:#222836;border-radius:6px;overflow:hidden;margin:8px 0} .progress i{display:block;height:100%;background:var(--accent);width:0} .muted{color:var(--muted)} .spin{width:16px;height:16px;border:2px solid #2a2f3a;border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:middle} @keyframes sp{to{transform:rotate(360deg)}} /* --- bulk repair centre (Хадмал шалгалт) ------------------------------- */ .repair-centre { margin: 10px 0 14px; } .repair-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .repair-group { border: 1px solid #2a3550; border-radius: 8px; padding: 8px 10px; } .repair-group h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; display: flex; justify-content: space-between; } .repair-group h4 span { background: rgba(255,255,255,.10); border-radius: 8px; padding: 0 7px; } .repair-group.auto { border-color: #2f7a52; } .repair-group.ai { border-color: #2f5fa8; } .repair-group.manual { border-color: #8a6a1f; } /* Deliberately grey, not a warning colour: neither is a defect. */ .repair-group.dubbing, .repair-group.info { border-color: #3a4152; opacity: .82; } .repair-group ul { list-style: none; margin: 0; padding: 0; } .repair-group li { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 1px 0; } .repair-group .linkish { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; text-decoration: underline dotted; font: inherit; } .repair-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 12px; } .repair-counts span { background: rgba(255,255,255,.06); border-radius: 8px; padding: 2px 8px; } .repair-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .repair-note { font-size: 12px; opacity: .85; min-height: 16px; } .proj-identity { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; margin: 2px 0 4px; } .proj-identity b { background: rgba(255,255,255,.10); border-radius: 8px; padding: 1px 8px; } .proj-identity.copy b { background: rgba(217,169,42,.30); } .proj-identity em { opacity: .85; font-style: normal; } .repair-reasons { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: .85; margin-bottom: 6px; } .repair-reasons i { font-style: normal; opacity: .7; } .repair-ai-cats { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 6px; font-size: 12px; } /* --- root cause + its consequences, in ONE card ------------------------- */ .root-causes { margin: 10px 0 12px; } .root-causes ul { list-style: none; margin: 6px 0 0; padding: 0; } .root-cause { border: 1px solid #2a3550; border-left: 3px solid var(--red); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12px; } .root-cause .root { margin-bottom: 4px; } .root-cause .consequences { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; opacity: .82; } .root-cause .consequences li { padding: 1px 0; } /* --- two-subtitle check (Хоёр хадмалыг шалгах) -------------------------- */ .dual-check { margin: 10px 0 12px; } .dual-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 14px; } .dual-list li { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 1px 0; } .dual-list li b { margin-left: auto; } .dual-list li small { flex-basis: 100%; opacity: .7; } .dual-note { font-size: 12px; opacity: .85; min-height: 16px; margin: 4px 0 0; } .dual-note.err { color: #ff9b9b; opacity: 1; } .sel-sm { background: #12131f; color: inherit; border: 1px solid #2a3550; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; max-width: 260px; } /* --- экспортын төлөв (idle → preparing → saving → success/cancel/error) -- */ .export-status:empty { display: none; } .export-status { margin-top: 8px; font-size: 12px; line-height: 1.5; border-left: 3px solid #2a3550; padding: 6px 10px; border-radius: 0 6px 6px 0; background: rgba(255,255,255,.03); word-break: break-all; } .export-status .ok { color: #6fd39a; } .export-status .err { color: #ff8a8a; } .export-status .btn { margin-right: 6px; } /* --- мөр шилжилт ба өгүүлбэрийн хуваарилалт ---------------------------- */ .align-check { margin: 10px 0 12px; } .align-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 12px; } .align-counts span { background: rgba(255,255,255,.06); border-radius: 8px; padding: 2px 8px; } .align-counts .ok { background: rgba(47,122,82,.25); } .align-windows { display: flex; flex-direction: column; gap: 8px; } .align-window { border: 1px solid #2a3550; border-left: 3px solid #3a4152; border-radius: 8px; padding: 8px 10px; font-size: 12px; } /* Colour says what the reviewer may do, not how bad it is. */ .align-window.auto { border-left-color: #2f7a52; } .align-window.review { border-left-color: #d9a92a; } .align-window.manual { border-left-color: #8a6a1f; } /* A window whose last AI attempt failed: retryable on its own, and only it. */ .align-window.failed { border-left-color: #a33; } .align-head { display: flex; gap: 8px; align-items: center; cursor: pointer; flex-wrap: wrap; } .align-head .align-band { margin-left: auto; background: rgba(255,255,255,.10); border-radius: 8px; padding: 1px 8px; } .align-head .align-ai { background: rgba(255,255,255,.06); border-radius: 8px; padding: 1px 8px; font-size: 11px; } .align-head .align-ai.ok { background: rgba(47,122,82,.25); } /* Why THIS window's AI request failed, and whether trying again can help. */ .align-failure details { margin-top: 4px; } .align-failure summary { cursor: pointer; font-size: 11px; opacity: .8; } /* The AI-free repair panel: the path that works with no provider at all. */ .align-manual:empty { display: none; } .manual-box { border: 1px solid #2a3550; border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: rgba(255,255,255,.02); } .manual-ops { display: grid; gap: 4px; margin: 4px 0; } .manual-op { display: flex; gap: 8px; align-items: flex-start; padding: 3px 4px; border-radius: 6px; } .manual-op:hover { background: rgba(255,255,255,.04); } .manual-op.off { opacity: .45; } .manual-op small { display: block; font-size: 11px; } .manual-plan { margin-top: 6px; } .manual-plan tr.chg td { background: rgba(47,122,82,.14); } .ast-steps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; } .ast-steps li { display: flex; gap: 6px; align-items: center; } .align-types { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; } .align-types span { background: rgba(217,169,42,.20); border-radius: 8px; padding: 1px 7px; } .align-reason { margin: 4px 0 6px; opacity: .9; } .align-table { margin-top: 6px; overflow-x: auto; } .align-table > b { font-size: 11px; letter-spacing: .05em; opacity: .7; } .align-table table { border-collapse: collapse; width: 100%; margin-top: 2px; } .align-table th { text-align: left; font-weight: 500; opacity: .6; padding: 2px 6px 2px 0; border-bottom: 1px solid #2a3550; } .align-table td { padding: 2px 6px 2px 0; vertical-align: top; } .align-table td.src { opacity: .75; } .align-table td.new { color: #9fe0b6; } .align-table td.num { white-space: nowrap; opacity: .7; } /* ---- «Хадмал бэлтгэх» wizard (the simple main subtitle screen) ---- Deliberately plain: one step name, three numbers, four buttons. Everything technical is inside .wz-details and nowhere else on this screen. */ .wz-now{max-width:900px;margin-bottom:14px} .wz-eyebrow{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px} .wz-title{margin:6px 0 4px;font-size:24px} .wz-hint{margin:0 0 12px;font-size:13px;line-height:1.6;max-width:680px} .wz-tiles{margin:0 0 8px} .wz-bar{height:6px;background:var(--chip);border-radius:4px;overflow:hidden;margin:0 0 16px;max-width:520px} .wz-bar i{display:block;height:100%;background:var(--accent);border-radius:4px} .wz-actions{margin:0 0 10px} .wz-paid{font-size:12px;margin:0 0 10px} .wz-note{font-size:12px;min-height:16px} .wz-note.err{color:var(--red)} .wz-badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0} .wz-badge{font-size:12px;padding:6px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)} .wz-badge.ok{color:var(--green);border-color:rgba(57,192,122,.4);background:rgba(57,192,122,.08)} .wz-badge.muted{color:var(--muted)} .wz-steps{max-width:900px;padding:6px 0;margin-bottom:14px} .wz-step{display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer} .wz-step+.wz-step{border-top:1px solid var(--line)} .wz-step:hover{background:rgba(91,140,255,.06)} .wz-step.now{background:rgba(91,140,255,.10)} .wz-num{width:25px;height:25px;border-radius:50%;border:1.5px solid #3a4560;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted);flex:none} .wz-step.done .wz-num{border-color:var(--green);color:var(--green)} .wz-step.now .wz-num{border-color:var(--accent);color:var(--accent)} .wz-name{flex:1;min-width:0;font-size:13.5px} .wz-ct{font-size:12px;font-weight:600;color:var(--amber);background:rgba(230,181,58,.12);border-radius:8px;padding:3px 8px} .wz-state{font-size:12px;color:var(--muted);min-width:120px;text-align:right} .wz-step.done .wz-state{color:var(--green)} .wz-details{max-width:900px} .wz-details>summary{cursor:pointer;color:var(--muted);font-size:13px} .wz-details[open]>summary{color:var(--ink);margin-bottom:12px} .wz-dt{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .wz-dth{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px} .wz-dtrow{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:3px 0} .wz-dtrow b{color:var(--ink);text-align:right;word-break:break-all} /* ---- step 1: видео → эх хадмал (local ASR) ---- */ .wz-asr{max-width:900px;margin-bottom:14px} .asr-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;align-items:start} @media (max-width:760px){.asr-grid{grid-template-columns:1fr}} .asr-video video{width:100%;border-radius:10px;background:#000;display:block} .asr-novideo{border:1.5px dashed #333b4d;border-radius:10px;padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px;line-height:2} .asr-controls{display:flex;flex-direction:column;gap:10px;min-width:0} .asr-label{font-size:12px;color:var(--muted)} .asr-controls select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;max-width:260px} .asr-buttons{gap:8px} .asr-progress{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px} .asr-progress .wz-bar{margin:0;max-width:none} .asr-progress-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap} .asr-note{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;line-height:1.5} .asr-note.err{color:var(--red);border-color:rgba(255,107,107,.35)} .asr-tiles{margin:2px 0 0} .asr-tiles .tile{min-width:110px} .asr-review{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .asr-review-head{font-size:12px;color:var(--muted);margin-bottom:8px} .asr-cue{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px} .asr-cue:hover{background:rgba(91,140,255,.08)} .asr-cue-t{font-variant-numeric:tabular-nums;color:var(--accent);min-width:52px} .asr-cue-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .asr-cue-why{font-size:11px;color:var(--amber);background:rgba(230,181,58,.12);border-radius:8px;padding:3px 8px;white-space:nowrap} /* ── structural review: two subtitles, side by side ───────────────────────── */ /* One row per SOURCE cue. Four states, four counters, three buttons — the old screen's dozen detectors and dozen small buttons are still in «Нарийвчилсан засвар», because none of them answered "which line is this and is it in the right place?", which is the only question this screen exists for. */ .st { display: flex; flex-direction: column; gap: 14px; } /* THE FILM TAKES ITS OWN SHAPE — the same instrument the dubbing editor got. * * This was a full-width black box capped at 34vh with the picture centred in * it. On a 9:16 film that is a 207px-wide picture floating in a 1636px black * band: the film is a thumbnail and the band is most of the screen. Measured * on the OCR screen — the screen a subtitle job is actually worked on — it was * 207×367 out of a 1920×1080 window. * * The box now carries the media's REAL ratio in `--st-ar`, set from * videoWidth/videoHeight the moment metadata arrives, and takes its size from * the viewport HEIGHT so the WIDTH follows the picture instead of the column. * No band, and a vertical film is not a second-class citizen here either. */ .st-video { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: var(--st-ar, 16 / 9); height: var(--st-h, clamp(240px, 38vh, 480px)); /* `width: auto` + auto side margins: in a column flex parent an auto margin is what stops `align-items: stretch` from widening the box back to the full column and undoing the aspect ratio. */ width: auto; max-width: 100%; margin: 0 auto; align-self: center; } .st-video video { display: block; width: 100%; height: 100%; object-fit: contain; max-height: none; max-width: none; } /* §25 — THE ONLY LOADING STATE A SEEK GETS, and only while the browser is * genuinely short of data. * * A row click is a seek on a mounted player, so on a buffered or local film * there is nothing to wait for and nothing should be drawn — a spinner that * appears on every click is a spinner that teaches people the app is slow when * it is not. `cue_player.js` puts this class on at `waiting`/`stalled` and takes * it off at `playing`/`seeked`/`canplay`, so it cannot be left behind. * * A corner mark rather than a centred overlay: it must not cover the frame the * user is trying to look at, and it must not move the Mongolian subtitle. Both * players that can hold a preview carry it, from one rule. */ .st-video, .sw-stage, .de-stage { position: relative; } .st-video.cue-busy::after, .sw-stage.cue-busy::after, .de-stage.cue-busy::after { content: ""; position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: #fff; animation: sp .8s linear infinite; pointer-events: none; z-index: 3; } /* A vertical film is taller for the same amount of picture. */ .st-video.st-portrait { --st-h: clamp(300px, 44vh, 520px); } /* An audio-only project has no picture to shape. */ .st-video:has(audio) { aspect-ratio: auto; height: auto; width: 100%; } /* Auto / 9:16 / 16:9 — the workspace shape, for checking a vertical delivery of a landscape film without leaving the screen. «Авто» is the default and means the film's own ratio, which is what the `--st-ar` above computes. */ .st-stagebar { display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; } .st-aspect { display: inline-flex; gap: 0; border: 1px solid var(--line, #262a36); border-radius: 9px; overflow: hidden; } .st-aspect button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; padding: 5px 11px; } .st-aspect button.on { background: var(--accent, #4c7dff); color: #fff; } /* ══ THE FIXED SUBTITLE WORKSPACE ═════════════════════════════════════════ * * One screen, and it does not move. The shell already gave `.main` the * viewport's height, but every subtitle screen was a tall column inside it, so * `.main` scrolled — and from a chair that IS the page scrolling: the player * left the top of the window, the counters and filters went with it, and the * work moved under the cursor. `position: sticky` on the film was a patch over * that, and it never fixed the rest. * * So the screen is a grid the size of the workspace, and NOTHING in it scrolls * except the two lists: * * portrait landscape * ┌──────┬───────┐ ┌──────────────┬────────┐ * │ │ side │ │ │ side │ * │media ├───────┤ │ media │ │ * │ │ band │ ├──────────────┴────────┤ * │ ├───────┤ │ band │ * │ │ list ↕│ ├───────────────────────┤ * └──────┴───────┘ │ list ↕ │ * └───────────────────────┘ * * `minmax(0, 1fr)` on the list row and `min-height: 0` on every ancestor of a * scrollport are the whole trick: without them a grid/flex child refuses to be * shorter than its content and the overflow lands back on the page. */ .main.sw-host { padding: 0; overflow: hidden; } /* THREE SECTIONS THE USER OWNS. * * The heights come from variables so each boundary can be dragged, and the last * section is `1fr` so the rows always run to the bottom of the workspace — no * panel stops early and leaves the background showing under it. Each section * scrolls its own overflow, so a section with many buttons moves inside itself * instead of pushing the others off the screen. */ .sw { height: 100%; min-height: 0; display: grid; gap: 10px; padding: 10px 14px 12px; overflow: hidden; position: relative; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--sw-r1, auto) var(--sw-r2, auto) minmax(0, 1fr); grid-template-areas: "media side" "media band" "media list"; } /* The grab bars. Absolutely placed over the boundary so the grid keeps exactly three rows and no layout depends on them existing. */ .sw-grip { position: absolute; z-index: 5; height: 10px; cursor: row-resize; border-radius: 5px; background: transparent; } .sw-grip::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 3px; border-radius: 3px; background: var(--line); transition: background .12s ease; } .sw-grip:hover::after, .sw-grip.on::after { background: var(--accent); } .sw.sw-landscape { grid-template-columns: minmax(0, 1fr) minmax(230px, 310px); grid-template-areas: "media side" "band band" "list list"; } /* A project with no film — a subtitle job that was never given a video — is one column. The empty half used to hold an aspect control over nothing. */ .sw.sw-nomedia, .sw.sw-nomedia.sw-landscape { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "band" "list"; } .sw.sw-nomedia .sw-media { display: none; } .sw.sw-nomedia .sw-side { max-height: min(30vh, 260px); } .sw-media { grid-area: media; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; width: var(--sw-media-w, auto); } .sw.sw-landscape .sw-media { width: auto; align-items: center; } /* THE SUMMARY COLUMN IS BOUNDED, and that is what protects the list. * * It is an `auto` grid row, so on a 768px screen a screen with a source badge, * a done panel, two toolbars and three notes took 400px of the workspace and * left the list two pixels of it — a scrollport in name only. Capped, it * scrolls its own overflow instead of taking the list's height. In landscape * it shares a row with the film, so its ceiling is the film's own height: * that way the row is the size of the picture and never more. */ .sw-side { grid-area: side; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; max-height: min(38vh, 330px); } /* Once a boundary has been dragged the row IS the height, and a ceiling from the default sizing would fight it. */ .sw.sw-sized .sw-side, .sw.sw-sized.sw-landscape .sw-side { max-height: none; } .sw.sw-sized .sw-band-in, .sw.sw-sized.sw-landscape .sw-band-in { max-height: none; } .sw.sw-sized .sw-band { min-height: 0; overflow: hidden; display: flex; } .sw.sw-sized .sw-band > * { min-height: 0; flex: 1 1 auto; overflow-y: auto; } .sw.sw-landscape .sw-side { max-height: var(--sw-stage-h, 330px); } @media (max-height: 800px) { .sw-side { max-height: min(30vh, 240px); } } /* §3 — the step this screen is, and the two beside it. Compact on purpose: it is orientation, and the summary column it sits at the top of is capped. */ .sw-stagebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #14161e); font-size: 11.5px; } .sw-stagebar .btn { flex: none; } .sw-stage-now { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .sw-stage-now b { font-size: 12px; } .sw-stage-ok { color: #43cf90; } .sw-stage-todo { color: #e8ab3f; } .sw-stage-note { color: var(--muted); } .sw-stage-end { color: var(--muted); opacity: .6; padding: 0 4px; } .sw-band { grid-area: band; min-width: 0; } /* A FLOOR, so nothing above can squeeze the list to two rows. The film and the band both scroll or shrink; the list is where the work happens and it keeps a readable height on both screens this is used on. */ .sw-list { grid-area: list; min-height: 220px; min-width: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } @media (max-height: 800px) { .sw-list { min-height: 180px; } } /* The film. Its box is given an exact pixel size by `swLayout()` — computed from the workspace's real height and the media's real ratio — so the picture fills it and the black band that used to surround a vertical film is gone by construction rather than by a max-height that happened to fit. */ .sw-stage { flex: none; background: #000; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; width: var(--sw-stage-w, 100%); height: var(--sw-stage-h, auto); align-self: center; } .sw-stage video { display: block; width: 100%; height: 100%; object-fit: contain; } .sw-stage audio { width: 100%; } /* An audio-only project has no picture to shape. */ .sw-stage.sw-audio { height: auto; width: 100%; background: transparent; } .sw-head { display: flex; align-items: baseline; gap: 10px; flex: none; } .sw-head h2 { font-size: 15px; margin: 0; } .sw-head p { margin: 0; font-size: 11.5px; color: var(--muted); } .sw-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; } .sw-bar .grow { flex: 1; } /* A toolbar is allowed two lines and no more; past that it is scrolled sideways rather than being allowed to push the film down the screen. */ .sw-tools { max-height: 68px; overflow-y: auto; } /* Counters: pills, not cards. Six of these as `.st-meter` cards cost 96px of height each and three rows of the workspace. */ .sw-counts { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; } .sw-count { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); font-size: 11px; color: var(--muted); line-height: 1.25; min-width: 0; } .sw-count b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; } .sw-count span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-count.g b { color: var(--green); } .sw-count.w b { color: var(--amber); } .sw-count.r b { color: var(--red); } /* The row under review, lifted OUT of the list. In the list it was a card that grew to several hundred pixels, pushed every other row down and took the scroll position with it every time the selection moved. */ .sw-band-in { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 8px 10px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 22rem); /* A ceiling in BOTH units. `34vh` alone is 261px on a 768px screen, and in the landscape layout — where the band spans the full width under the film — that left the list 58px tall: a scrollport too short to read a row in. The band scrolls itself past this height rather than taking the list's. */ max-height: min(26vh, 200px); overflow-y: auto; } .sw.sw-landscape .sw-band-in { max-height: min(20vh, 170px); } @media (max-height: 800px) { .sw-band-in { max-height: min(20vh, 155px); } .sw.sw-landscape .sw-band-in { max-height: min(18vh, 135px); } } .sw-band-in.sw-band-2 { grid-template-columns: minmax(0, 1fr) minmax(240px, 24rem); } .sw-band-in.sw-band-1 { grid-template-columns: minmax(0, 1fr); } .sw-band-col { min-width: 0; display: grid; gap: 4px; align-content: start; } .sw-band-k { font-size: 10.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } .sw-band-empty { color: var(--muted); font-size: 12px; font-style: italic; } .sw-band .sc-tools, .sw-band .lq-tools { margin-top: 0; } .sw-ctx { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; cursor: pointer; } .sw-ctx b { color: #8d97ad; font-weight: 500; flex: none; } .sw-ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-cur { font-size: 13px; line-height: 1.35; } .sw-cur .st-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Compact timing, as two labelled runs of nudges. */ .sw-timing { display: grid; gap: 3px; grid-template-columns: auto repeat(4, auto); align-items: center; justify-content: start; } .sw-timing .k { font-size: 10.5px; color: var(--muted); padding-right: 4px; } .sw-timing .btn { padding: 3px 7px; font-size: 11px; } /* THE LIST — TWO LINES PER ROW, and that is the point. * * It used to be one: flag | #index+timestamp | source | Mongolian | badge, with * the whole stamp «#55 00:04:29,900 → 00:04:30,200» squeezed into a 96px * column and told `white-space: nowrap` with nothing to clip it. A nowrap * column narrower than its text does not shrink and does not scroll — it PAINTS * OVER THE NEXT ONE, so at 1366×768 the timestamp lay across the source * sentence and both were unreadable. Widening the column only moves the problem * to whichever screen has the longest stamp. * * So the row header — number, time, state — gets a line of its own across the * full width, and the two texts get the line under it, one column each. Nothing * has to be narrower than its content, so nothing can overlap anything. * Five children in a fixed order, shared by all five lists that draw one. */ .sw-list .st-row, .sw-list .sw-row { padding: 5px 9px; } .sw-row { display: grid; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "flag meta meta badge" "flag texta textb badge"; column-gap: 8px; row-gap: 2px; align-items: start; padding: 5px 9px; } .sw-row > * { min-width: 0; } .sw-row > *:nth-child(1) { grid-area: flag; } .sw-row > *:nth-child(2) { grid-area: meta; } .sw-row > *:nth-child(3) { grid-area: texta; } .sw-row > *:nth-child(4) { grid-area: textb; } .sw-row > *:nth-child(5) { grid-area: badge; align-self: start; } .sw-row:hover { background: rgba(255, 255, 255, .03); } .sw-row.active { background: rgba(91, 140, 255, .12); border-left-color: var(--accent); } .sw-row.g { border-left-color: var(--green); } .sw-row.w { border-left-color: var(--amber); } .sw-row.r { border-left-color: var(--red); } .sw-row.ok { opacity: .72; } .sw-row .sw-t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Two lines, then an ellipsis. A subtitle is at most two lines on screen, so a row that shows two of them has shown the line. */ .sw-row .sw-x { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sw-row .sw-x.mute { color: var(--muted); font-style: italic; } /* The index range that says what was joined to what. */ .sw-row .sw-lab { color: var(--muted); font-weight: 500; font-size: 11px; } .sw-row .sw-s { white-space: nowrap; font-size: 11px; text-align: right; } .sw-row .sw-n { color: var(--fg, #e8eaf0); font-weight: 600; } .sw-row .sw-sep { opacity: .35; margin: 0 5px; } .sw-empty { padding: 20px; color: var(--muted); } /* Under about 1100px the two columns stop being two columns. The workspace still does not scroll — the list simply takes what is left. */ @media (max-width: 1100px) { .sw, .sw.sw-landscape { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "media" "side" "band" "list"; } .sw-media { width: auto; align-items: center; } .sw-band-in { grid-template-columns: minmax(0, 1fr); max-height: 30vh; } /* Narrow: the two texts stack instead of sharing a line. The header keeps its own line either way, which is what stops the overlap. */ .sw-row { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "flag meta badge" "flag texta texta" "flag textb textb"; } } .st-meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .st-meter { background: var(--card, #14161e); border: 1px solid var(--line, #262a36); border-radius: 10px; padding: 10px 12px; } .st-meter-k { font-size: 11px; opacity: .65; letter-spacing: .04em; } .st-meter-v { font-size: 21px; font-weight: 600; margin-top: 3px; } .st-meter.g .st-meter-v { color: #43cf90; } .st-meter.y .st-meter-v { color: #e8ab3f; } .st-meter.r .st-meter-v { color: #ef6a6a; } .st-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .st-actions .grow { flex: 1; } .st-head { display: flex; gap: 12px; padding: 0 4px; font-size: 11px; letter-spacing: .06em; opacity: .6; } .st-head .st-flag { visibility: hidden; } .st-rows { border: 1px solid var(--line, #262a36); border-radius: 10px; background: var(--card, #14161e); max-height: 58vh; overflow: auto; } .st-row { display: flex; gap: 12px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line, #262a36); border-left: 3px solid transparent; } .st-row:hover { background: rgba(255, 255, 255, .03); } .st-row.sel { background: rgba(255, 255, 255, .06); } .st-row.g { border-left-color: #43cf90; } .st-row.y { border-left-color: #e8ab3f; } .st-row.r { border-left-color: #ef6a6a; } .st-flag { flex: none; width: 20px; text-align: center; font-size: 14px; } .st-flag.g { color: #43cf90; } .st-flag.y { color: #e8ab3f; } .st-flag.r { color: #ef6a6a; } .st-side { flex: 1 1 0; min-width: 0; } .st-num { font-size: 11.5px; font-weight: 600; opacity: .7; } .st-time { font-size: 11px; opacity: .5; font-variant-numeric: tabular-nums; } .st-text { font-size: 13px; margin-top: 3px; white-space: pre-wrap; word-break: break-word; } .st-text.src { opacity: .85; } .st-text.none { color: #ef6a6a; font-style: italic; } /* The timestamps the translation arrived with, and what a repair moved: small and dim on purpose — the source timing above them is the authoritative one. */ .st-was { font-size: 10.5px; opacity: .5; margin-top: 4px; line-height: 1.5; font-variant-numeric: tabular-nums; } .st-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(232, 171, 63, .16); color: #e8ab3f; font-size: 10.5px; } /* The repair tools, in the order the ROW needs them: the sentence saying what is wrong, the fix for it, the three every row has, and the rest folded away. Flat, wrapping and padded away from the left edge, they read as nine equal options and a user cannot tell which is safe. */ .st-tools { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 2px 0 8px; } .st-tools > .btn { width: 100%; justify-content: center; } .st-tools-line { display: flex; gap: 6px; flex-wrap: wrap; } .st-tools-line .btn { flex: 1 1 auto; } .st-why { font-size: 11.5px; color: var(--muted); line-height: 1.45; } .st-more { margin-top: 2px; } .st-more > summary { cursor: pointer; font-size: 11.5px; color: var(--muted); padding: 3px 0; list-style: none; } .st-more > summary::-webkit-details-marker { display: none; } .st-more > summary:hover { color: var(--fg, #e8eaf0); } .st-more .st-tools-line { margin-top: 6px; } .ct-k { font-size: 11px; color: var(--muted); min-width: 46px; } .ct-note { min-height: 15px; font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; } .ct-note.warn { color: #e8ab3f; } .st-loose { border: 1px solid var(--line, #262a36); border-radius: 10px; padding: 12px 14px; background: var(--card, #14161e); max-height: 24vh; overflow: auto; } .st-loose-row { display: flex; gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--line, #262a36); } @media (max-width: 1000px) { .st-meters { grid-template-columns: repeat(2, 1fr); } .st-row { flex-wrap: wrap; } .st-side { flex-basis: 100%; } } .btn.small { padding: 6px 11px; font-size: 12px; } /* The plain statement of what a repair achieved, and the way onward. */ .st-done { border: 1px solid #2c6b4f; border-radius: 10px; padding: 14px 16px; background: rgba(67, 207, 144, .07); } .st-done h3 { margin: 0 0 10px; font-size: 15px; color: #43cf90; } .st-done-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 2px 0; } .st-done-row span:first-child { color: #43cf90; } .st-done-row span:nth-child(2) { flex: 1; opacity: .8; } .st-done-row b { font-variant-numeric: tabular-nums; } .st-done .btn { margin-top: 12px; } /* ── Phase 4: three columns, five states ──────────────────────────────────── */ .lq-meters { grid-template-columns: repeat(5, 1fr); } .lq-filters { display: flex; gap: 7px; flex-wrap: wrap; } .lq-row .st-side { flex: 1 1 0; } .lq-head .st-side { flex: 1 1 0; } .lq-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .lq-gloss { border: 1px solid var(--line, #262a36); border-radius: 10px; padding: 10px 14px; background: var(--card, #14161e); } .lq-gloss summary { cursor: pointer; font-size: 13px; } .lq-gloss table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; } .lq-gloss th { text-align: left; opacity: .6; font-weight: 500; padding-bottom: 6px; } .lq-gloss td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line, #262a36); vertical-align: top; } @media (max-width: 1200px) { .lq-meters { grid-template-columns: repeat(3, 1fr); } } /* Which source the comparison is against — invisible before, and sometimes wrong. */ .src-badge { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line, #262a36); background: var(--card, #14161e); } .src-badge.ok { border-color: #2c6b4f; } .src-badge.warn { border-color: #6b5a2c; } /* A batch of two hundred lines, counted by the backend rather than by a clock. */ .lq-progress { border: 1px solid #3b4a6b; border-radius: 11px; padding: 12px 14px; background: var(--card, #14161e); display: grid; gap: 9px; } .lq-progress-head { display: flex; align-items: center; gap: 10px; font-size: 13px; } .lq-bar { height: 7px; border-radius: 5px; background: #1c2030; overflow: hidden; } .lq-bar-fill { height: 100%; background: #4d7cff; transition: width .25s ease; } .lq-fails { border: 1px solid #6b3a3a; border-radius: 11px; padding: 12px 14px; background: var(--card, #14161e); display: grid; gap: 7px; justify-items: start; } .lq-failnote { font-size: 12px; color: #e08a8a; margin-top: 6px; } .lq-row.lq-failed { border-color: #6b3a3a; } /* Why there is no film on screen — never an empty box, never a black one. */ .sw-media-why { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 22px 18px; height: 100%; box-sizing: border-box; } .sw-media-x { font-size: 22px; color: #e0a33a; } .sw-media-file { font: 11px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; opacity: .7; } .sw-media-fail { position: absolute; inset: 0; z-index: 4; background: rgba(10, 11, 16, .93); border-radius: inherit; } .sw-stage { position: relative; } /* Search over every cue, and the way back to the rest of them. */ .lq-find { flex: 1; min-width: 160px; max-width: 340px; background: var(--field, #0f1218); color: inherit; border: 1px solid var(--field-border, #313846); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12.5px; } .lq-more { padding: 10px; text-align: center; } .lq-whys { margin-top: 7px; display: grid; gap: 3px; } .lq-why { font-size: 12px; opacity: .72; line-height: 1.45; } .lq-pick { margin-bottom: 5px; cursor: pointer; } .st-done.warn { border-color: #6b5a2c; } /* The audio screen: cards, because a person has to LISTEN before they can judge. */ /* COMPACT ROWS. A cue is one short line of text and three buttons; at 13/15px padding and 12px between cards a 1080p window held about five of them, so a 256-cue reading was fifty screens of mostly empty card. The row furniture is unchanged — only the space around it. */ .am-cards { display: grid; gap: 7px; } .am-card { border: 1px solid var(--line, #262a36); border-radius: 12px; padding: 9px 12px; background: var(--card, #14161e); display: grid; gap: 6px; } /* THE FILM BESIDE THE READING, not above it. * * A full-size film stacked on top of a 256-cue list means the first row starts * below the fold and the film is gone by row 20 — which is the layout the * dubbing editor was rebuilt away from. The same answer applies here: the film * gets a column and stays in it while the list scrolls, so both are on screen * at once and the film can be big without costing a single row. */ /* THE SHAPE OF THE FILM DECIDES THE SHAPE OF THE SCREEN. * * A vertical film is tall and narrow, so it takes a column and the list sits * beside it — both on screen, and the film can be big without costing a row. * A landscape film is wide and short: putting THAT in a half-width column * makes it smaller than the box it replaced, so it keeps the full width and * the list goes underneath, where a short film leaves room for it. * `media-portrait` is set from the media's real dimensions, in shapeStages(). */ .ocr-work { display: grid; gap: 14px; align-items: start; grid-template-columns: 1fr; } .ocr-work.media-portrait { grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1fr); } .ocr-media { position: sticky; top: 6px; } .ocr-list { display: grid; gap: 10px; align-content: start; min-width: 0; } /* Landscape: driven by the WIDTH it is given, so it can never be wider than its column and can never letterbox. Vertical: driven by height, because a 9:16 film sized by width would be three times the height of the window. */ .st-video.st-stage-lg { width: 100%; height: auto; position: static; } /* `--st-h` is SET here rather than passed as a var() fallback: the base `.st-portrait` rule already defines it for the small in-page stages, and a fallback only applies to a variable that is undefined. */ .ocr-work.media-portrait .st-video.st-stage-lg { width: auto; --st-h: clamp(340px, 72vh, 820px); height: var(--st-h); } @media (max-width: 1180px) { .ocr-work.media-portrait { grid-template-columns: 1fr; } .ocr-media { position: static; } .ocr-work.media-portrait .st-video.st-stage-lg { --st-h: clamp(240px, 40vh, 480px); } } /* The one-line cue row: WHEN it is, WHAT it says, and what can be done to it. The middle column is the one that grows, because the text is the only part whose length varies. */ .ocrrow { grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; } .ocr-when { display: flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; } .ocr-time { opacity: .78; font-variant-numeric: tabular-nums; } .ocr-body { display: grid; gap: 4px; min-width: 0; } .ocr-body .am-text { min-height: 30px; } .ocr-acts { display: flex; align-items: center; gap: 6px; } @media (max-width: 1100px) { .ocrrow { grid-template-columns: 1fr; } .ocr-acts { justify-content: flex-end; } } .am-card.y { border-color: #6b5a2c; } .am-card.r { border-color: #6b3a3a; } .am-card.am-added { opacity: .78; border-color: #2c6b4f; } .am-card.am-ignored { opacity: .5; } .am-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; } .am-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #1c2030; font-size: 13px; } .am-mark.y { background: #3a3218; } .am-mark.r { background: #3a1e1e; } .am-why { font-size: 12.5px; opacity: .78; line-height: 1.5; } .am-context { display: grid; gap: 7px; } .am-ctx { font-size: 12.5px; opacity: .85; } .am-heard { display: grid; gap: 5px; font-size: 12.5px; } .am-text { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line, #262a36); background: #101219; color: inherit; } .am-scanned { font-size: 12.5px; } /* A CORRECTION IN PROGRESS HAS TO LOOK LIKE ONE. The middle state — «Гараар засаж байна» — is the whole point of the manual edit: the words in the box are the user's and are not in the subtitle yet. A box that looks identical whether it holds the reader's text or an unsaved draft is how somebody walks away from a correction believing it was kept. */ .am-text.editing { border-color: #e0b784; background: #14161f; box-shadow: 0 0 0 2px rgba(224, 183, 132, .16); } /* The delete question, asked in the page. Never a browser dialog: the desktop shell answers `window.confirm` with false without showing anything, so a real removal there would silently never happen. */ .ocr-ask { margin-top: 8px; display: grid; gap: 6px; } /* THE SUBTITLE BAND, DRAWN ON THE FILM. The layer is sized in script to the PICTURE inside the