/* css/editor.css - Editor video (auto-cut) standalone app styles, pattern-matched to shorts.css */ :root { --cut-accent: #0d9488; --cut-accent-hover: #0f766e; --cut-accent-soft: #ccfbf1; --cut-card-radius: 14px; --cut-card-bg: #ffffff; --cut-card-border: #e5e7eb; --cut-card-pad-x: 24px; --cut-page-bg: #f6fbfa; --cut-muted: #6b7280; --cut-danger: #dc2626; --cut-danger-soft: #fee2e2; --cut-keep: #0d9488; --cut-drop: #f97316; } body.dark-theme { --cut-accent-soft: #042f2e; --cut-card-bg: #1f2937; --cut-card-border: #374151; --cut-page-bg: #111827; --cut-muted: #9ca3af; --cut-danger-soft: #3f1d1d; } /* clip, not hidden: the site-wide `body { overflow-x: hidden }` in styles.css forces overflow-y to compute as auto, which turns into a scroll container that never scrolls — any position: sticky inside then binds to that dead scrollport and silently does nothing. clip does the same clipping without creating a scroll container. */ .cut-body, body.cut-body#page-top { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--cut-page-bg); color: var(--text-color); min-height: 100vh; overflow-x: clip; } .cut-main { flex: 1; padding-top: 96px; padding-bottom: 64px; } .cut-hero { padding: 26px 0 8px; text-align: center; } .cut-hero-icon { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--cut-accent-soft); color: var(--cut-accent); font-size: 1.5rem; } .cut-hero h1 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; } .cut-hero-lead { max-width: 760px; margin: 0 auto 14px; color: var(--cut-muted); font-size: 1rem; line-height: 1.6; } .cut-disclaimer { max-width: 760px; margin: 0 auto; padding: 9px 14px; border-radius: 999px; background: var(--cut-accent-soft); color: var(--cut-accent); font-size: .8rem; font-weight: 650; line-height: 1.45; } .cut-disclaimer i { margin-right: 5px; } .cut-work { padding: 26px 0 0; } .cut-layout { display: grid; gap: 22px; max-width: 980px; } .cut-card { --cut-card-pad-x: 24px; background: var(--cut-card-bg); border: 1px solid var(--cut-card-border); border-radius: var(--cut-card-radius); padding: 22px var(--cut-card-pad-x); box-shadow: 0 10px 30px rgba(0,0,0,.05); } .cut-card[hidden] { display: none; } .cut-card-heading { margin-bottom: 18px; } .cut-kicker { margin: 0 0 6px; color: var(--cut-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cut-kicker i { margin-right: 5px; } .cut-optional { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--cut-card-border); color: var(--cut-muted); font-weight: 700; letter-spacing: 0; text-transform: none; } .cut-card h2 { margin: 0 0 7px; font-size: 1.3rem; } .cut-intro { max-width: 680px; margin: 0; color: var(--cut-muted); font-size: .9rem; line-height: 1.55; } .cut-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .cut-field label { font-size: .84rem; font-weight: 700; } .cut-field input[type="file"], .cut-settings-row input[type="text"], .cut-settings-row select { width: 100%; padding: 9px 11px; border: 1px solid var(--cut-card-border); border-radius: 9px; background: var(--cut-page-bg); color: var(--text-color); font-size: .88rem; } .cut-filemeta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 12px; } .cut-filemeta[hidden] { display: none; } .cut-filemeta dt { margin: 0; color: var(--cut-muted); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; } .cut-filemeta dd { margin: 2px 0 0; font-size: .92rem; font-weight: 750; font-variant-numeric: tabular-nums; } .cut-settings-row { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 4px 0 10px; } .cut-settings-row label { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1; font-size: .8rem; font-weight: 650; color: var(--cut-muted); } .cut-settings-row label strong { color: var(--text-color); font-variant-numeric: tabular-nums; } .cut-settings-row input[type="range"] { width: 100%; accent-color: var(--cut-accent); } .cut-hint { margin: 6px 0 0; color: var(--cut-muted); font-size: .78rem; line-height: 1.5; } .cut-hint code { padding: 1px 5px; border-radius: 5px; background: var(--cut-page-bg); border: 1px solid var(--cut-card-border); font-size: .95em; } .cut-note { min-height: 1.25em; margin: 12px 0 0; color: var(--cut-muted); font-size: .82rem; line-height: 1.45; } .cut-note.is-success { color: #15803d; } .cut-note.is-error { color: var(--cut-danger); } .cut-note.is-warning { color: #b45309; } .cut-submit { margin-top: 14px; padding: 11px 18px; border: 0; border-radius: 10px; background: var(--cut-accent); color: #fff; font-size: .92rem; font-weight: 750; cursor: pointer; transition: background .15s; } .cut-submit:hover:not(:disabled) { background: var(--cut-accent-hover); } .cut-submit:disabled { opacity: .55; cursor: not-allowed; } .cut-submit i { margin-right: 6px; } .cut-secondary-btn { padding: 9px 13px; border: 1px solid var(--cut-card-border); border-radius: 9px; background: var(--cut-card-bg); color: var(--text-color); font-size: .84rem; font-weight: 700; cursor: pointer; } .cut-secondary-btn:hover:not(:disabled) { border-color: var(--cut-accent); color: var(--cut-accent); } .cut-secondary-btn i { margin-right: 5px; } .cut-linkbtn { padding: 0; border: 0; background: none; color: var(--cut-accent); font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline; } .cut-linkbtn:hover { color: var(--cut-accent-hover); } .cut-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .8rem; color: var(--cut-muted); } .cut-progress[hidden] { display: none; } .cut-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--cut-card-border); overflow: hidden; } .cut-progress-fill { width: 0%; height: 100%; border-radius: 999px; background: var(--cut-accent); transition: width .15s linear; } .cut-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 18px; } .cut-stats > div { display: flex; flex-direction: column; } .cut-stats span { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; } .cut-stats small { color: var(--cut-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .cut-stat-arrow { color: var(--cut-muted); } .cut-stat-saved span { color: var(--cut-accent); } .cut-timeline-wrap { position: relative; margin-bottom: 18px; } .cut-timeline { display: block; width: 100%; height: 96px; border-radius: 10px; background: var(--cut-page-bg); border: 1px solid var(--cut-card-border); cursor: pointer; } .cut-preview-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; } .cut-video-wrap { position: relative; } .cut-video { display: block; width: 100%; border-radius: 10px; background: #0b0b0b; } .cut-text-preview { position: absolute; left: 6%; right: 6%; bottom: 16%; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.62); color: #fff; text-align: center; font-size: clamp(.8rem, 2.2vw, 1.05rem); font-weight: 750; line-height: 1.35; pointer-events: none; } .cut-text-preview[hidden] { display: none; } .cut-preview-side { display: flex; flex-direction: column; gap: 10px; } .cut-bulkrow { display: flex; gap: 14px; } /* position: relative so a row's offsetTop is measured against the list, which is what the auto-scroll maths assumes. */ .cut-list { position: relative; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; } .cut-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cut-card-border); border-radius: 9px; background: var(--cut-page-bg); font-size: .82rem; cursor: pointer; } .cut-row:hover { border-color: var(--cut-accent); } .cut-row.is-current { border-color: var(--cut-accent); box-shadow: 0 0 0 2px var(--cut-accent-soft); } .cut-row.is-kept { opacity: .55; } .cut-row input[type="checkbox"] { accent-color: var(--cut-drop); width: 16px; height: 16px; } .cut-row-time { font-variant-numeric: tabular-nums; color: var(--cut-muted); } .cut-row-reason { font-weight: 650; } .cut-row-len { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--cut-drop); } .cut-textadd { margin-bottom: 14px; } .cut-textlist { display: flex; flex-direction: column; gap: 10px; } .cut-textitem { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--cut-card-border); border-radius: 10px; background: var(--cut-page-bg); } .cut-textitem-top { display: flex; gap: 8px; align-items: center; } .cut-textitem-top input[type="text"] { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--cut-card-border); border-radius: 8px; background: var(--cut-card-bg); color: var(--text-color); font-size: .86rem; } .cut-textitem-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .76rem; color: var(--cut-muted); } .cut-textitem-row label { display: flex; align-items: center; gap: 6px; } .cut-textitem-row input[type="number"] { width: 74px; padding: 5px 7px; border: 1px solid var(--cut-card-border); border-radius: 7px; background: var(--cut-card-bg); color: var(--text-color); font-size: .8rem; font-variant-numeric: tabular-nums; } .cut-textitem-row select { padding: 5px 7px; border: 1px solid var(--cut-card-border); border-radius: 7px; background: var(--cut-card-bg); color: var(--text-color); font-size: .8rem; } .cut-textitem-out { font-variant-numeric: tabular-nums; } .cut-textremove { border: 0; background: none; color: var(--cut-danger); cursor: pointer; font-size: .95rem; padding: 4px 6px; } .cut-command-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 8px; } .cut-command-actions { display: flex; flex-wrap: wrap; gap: 14px; } .cut-command { margin: 0; padding: 14px; border-radius: 10px; border: 1px solid var(--cut-card-border); background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow-y: auto; } .cut-collapsible { margin-top: 16px; border: 1px solid var(--cut-card-border); border-radius: 10px; padding: 10px 12px; } .cut-collapsible > summary { cursor: pointer; font-size: .84rem; font-weight: 700; } @media (max-width: 720px) { .cut-main { padding-top: 84px; } .cut-hero h1 { font-size: 1.7rem; } .cut-card { --cut-card-pad-x: 18px; padding: 18px; } .cut-preview-row { grid-template-columns: 1fr; } .cut-stats { gap: 10px 16px; } .cut-stats span { font-size: 1.05rem; } } /* Named and undoable at the moment it happens: a skipped cut leaves no mark on the playhead, so the only way to act on the one you just heard vanish is to be told which it was while you still remember it. */ .cut-nowbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--cut-drop); background: color-mix(in srgb, var(--cut-drop) 12%, transparent); font-size: .82rem; } .cut-nowbar[hidden] { display: none; } .cut-nowbar-tag { padding: 3px 9px; border-radius: 999px; background: var(--cut-drop); color: #fff; font-weight: 800; font-size: .74rem; } .cut-nowbar-text { flex: 1; min-width: 160px; color: var(--text-color); } .cut-nowbar-keep { padding: 6px 10px; font-size: .78rem; } .cut-nowbar-keep[hidden] { display: none; } .cut-row-num { color: var(--cut-muted); font-variant-numeric: tabular-nums; font-weight: 750; font-size: .76rem; } .cut-row { grid-template-columns: auto auto minmax(0, 1fr) auto auto; } .cut-row.is-current { border-color: var(--cut-drop); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cut-drop) 28%, transparent); } .cut-runline { margin: 16px 0 10px; font-size: .86rem; line-height: 1.55; } .cut-runrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cut-runrow .cut-submit { margin-top: 0; } .cut-collapsible .cut-command { margin-top: 10px; } /* The install step gets its own block rather than a collapsed note: the very first run of a downloaded script is where people meet "'ffmpeg' is not recognized", and a fix folded out of sight may as well not be written. */ .cut-install { margin-top: 18px; padding: 13px 14px; border: 1px solid var(--cut-card-border); border-radius: 10px; background: var(--cut-page-bg); } .cut-install-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: .85rem; } .cut-install-head i { margin-right: 5px; color: var(--cut-accent); } .cut-install-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cut-install-row code { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--cut-card-border); background: var(--cut-card-bg); font-size: .8rem; user-select: all; } .cut-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 650; cursor: pointer; } .cut-check input { accent-color: var(--cut-accent); width: 16px; height: 16px; } /* Sits over the video so the warning is where the eyes already are — reading a banner below the player while watching the player is not something anyone does. */ .cut-onvideo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: var(--cut-drop); color: #fff; font-size: .74rem; font-weight: 800; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.35); } .cut-onvideo[hidden] { display: none; } /* ── YouTube section ─────────────────────────────────────────────────────────────── */ .cut-yt-card { border-left: 3px solid #ff0033; } .cut-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .cut-label-link { font-size: .76rem; font-weight: 700; text-decoration: none; color: var(--cut-accent); } .cut-label-link:hover { text-decoration: underline; } .cut-field input[type="url"], .cut-collapsible input[type="password"] { width: 100%; padding: 9px 11px; border: 1px solid var(--cut-card-border); border-radius: 9px; background: var(--cut-page-bg); color: var(--text-color); font-size: .88rem; } .cut-collapsible input[type="password"] { margin-top: 8px; } #cut-key-state { color: var(--cut-muted); font-weight: 600; } .cut-yt-player { position: relative; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: #000; } .cut-yt-player iframe { width: 100%; height: 100%; border: 0; } .cut-yt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .cut-ytrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--cut-card-border); border-radius: 10px; background: var(--cut-page-bg); } .cut-ytrow.is-done { opacity: .5; } .cut-ytrow input[type="checkbox"] { margin-top: 3px; accent-color: var(--cut-accent); width: 16px; height: 16px; } .cut-ytrow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; } .cut-ytrow-kind { font-size: .78rem; font-weight: 800; color: var(--cut-drop); text-transform: uppercase; letter-spacing: .04em; } .cut-ytrow-why { margin: 5px 0 8px; font-size: .84rem; line-height: 1.5; } .cut-ytrow-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cut-stamp { padding: 5px 10px; border: 1px solid var(--cut-card-border); border-radius: 8px; background: var(--cut-card-bg); color: var(--text-color); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 700; } .cut-stamp:hover { border-color: var(--cut-accent); color: var(--cut-accent); } .cut-stamp small { display: block; font-family: inherit; font-size: .64rem; font-weight: 600; color: var(--cut-muted); text-transform: uppercase; letter-spacing: .05em; } /* A caption added without scrubbing first lands at 0:00 and is over in four seconds — easy to miss in the finished file and then conclude the text never got burned in. */ .cut-textitem-out.is-at-start { color: #b45309; font-weight: 700; }