/* * profanity-censor.css — общая основа двух туров цензуры мата: * /profanity-remover (радиоверсия трека) и /profanity-remover-video * (цензура ролика). * * До 08.09.2026 эти 210 строк лежали инлайном в одном блейде, который * рендерили оба слага. Теперь у каждой страницы своя разметка и свой облик; * общей осталась механика органов, которая обязана выглядеть одинаково: * волновая дорожка, список находок, ползунки, списки слов. */ .upload-zone-text span { color: var(--accent); cursor: pointer; } #pc-fileinfo { margin-bottom: 12px; } .pc-lang-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .pc-lang-row label { font-size: 13px; color: var(--text-secondary); } #pc-lang { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 14px; } #pc-lang-note { font-size: 12px; color: var(--text-muted); } .pc-workspace { display: none; } .pc-workspace.active { display: block; } /* ---- progress card ---- */ #pc-progress { padding: 14px 16px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; } .pc-stage-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } #pc-stage { font-size: 13px; color: var(--text-secondary); } #pc-stage-pct { font-size: 13px; font-weight: 700; font-family: 'SF Mono', Monaco, monospace; color: var(--text-primary); } .pc-bar-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; position: relative; } [data-theme=light] .pc-bar-track { background: rgba(0,0,0,.08); } #pc-stage-bar { height: 100%; width: 0; background: var(--accent-gradient); border-radius: 4px; transition: width .25s; position: relative; overflow: hidden; } /* shimmer: keeps visible motion even between coarse worker callbacks */ #pc-stage-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); animation: pcShimmer 1.4s infinite; } @keyframes pcShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .pc-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; } #pc-progress-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .pc-model-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; } #pc-cancel { padding: 8px 14px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass-hover); color: var(--text-secondary); cursor: pointer; } #pc-cancel:hover { color: var(--text-primary); } #pc-results { display: none; } #pc-no-speech { padding: 12px 16px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-md); color: var(--warning); font-size: 13px; margin-bottom: 12px; } /* ---- player card ---- */ .pc-player-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; } #pc-video-holder:not(:empty) { margin-bottom: 10px; } #pc-video-holder { position: relative; } .pc-media { width: 100%; max-height: 340px; border-radius: var(--radius-md); background: #000; display: block; transition: filter .08s linear; } /* Live preview of the video censor-cue (Oleg 14.06) — mirrors the FFmpeg export effect with cheap CSS so the setting is visible BEFORE download. Classes toggled in sync with censored regions by applyVideoCue(). */ #pc-video-holder.pc-fx-darken .pc-media { filter: brightness(.5); } #pc-video-holder.pc-fx-float .pc-media { animation: pcFloatFx 1.1s ease-in-out infinite; } #pc-video-holder.pc-fx-shake .pc-media { animation: pcShakeFx .14s steps(2,end) infinite; } #pc-video-holder.pc-fx-border::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 6px rgba(220,38,38,.85); pointer-events: none; } @keyframes pcFloatFx { 0% { transform: translate(0,0); } 25% { transform: translate(6px,-3px); } 50% { transform: translate(-5px,4px); } 75% { transform: translate(4px,3px); } 100% { transform: translate(0,0); } } @keyframes pcShakeFx { 0% { transform: translate(-6px,2px); } 50% { transform: translate(6px,-2px); } 100% { transform: translate(-6px,2px); } } @media (prefers-reduced-motion: reduce) { #pc-video-holder.pc-fx-float .pc-media, #pc-video-holder.pc-fx-shake .pc-media { animation: none; } } #pc-wave-wrap { position: relative; height: 96px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: crosshair; touch-action: none; direction: ltr; } #pc-wave-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #pc-wave, #pc-wave-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #pc-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; will-change: transform; left: -2px; } #pc-drag-sel { position: absolute; top: 0; bottom: 0; background: rgba(99,102,241,.22); border-inline: 1px solid #818cf8; pointer-events: none; } .pc-mr-handle { position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px; cursor: ew-resize; } .pc-mr-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #818cf8; } .pc-wave-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .pc-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .pc-play-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent-gradient); color:var(--on-accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-play-btn svg { width: 18px; height: 18px; } .pc-time { font-family: 'SF Mono', Monaco, monospace; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .pc-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .pc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--text-secondary); background: var(--glass-hover); border: 1px solid var(--border); } .pc-chip b { font-weight: 700; font-family: 'SF Mono', Monaco, monospace; } .pc-chip.red b { color: #ef4444; } .pc-chip.yellow b { color: var(--warning); } .pc-chip.blue b { color: var(--accent); } .pc-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; margin-inline-start: auto; } .pc-toggle input { accent-color: var(--accent); width: 16px; height: 16px; } /* ---- transcript + hits ---- */ .pc-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; } @media (max-width: 760px) { .pc-cols { grid-template-columns: 1fr; } } .pc-panel { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; } .pc-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); } #pc-transcript { max-height: 230px; overflow-y: auto; line-height: 2.0; font-size: 14px; color: var(--text-secondary); overscroll-behavior: contain; } .pc-word { cursor: pointer; border-radius: 4px; padding: 2px 3px; } .pc-word:hover { background: var(--glass-hover); } .pc-word.hit { background: rgba(239, 68, 68, .28); color: var(--text-primary); text-decoration: line-through; } .pc-word.hit-fuzzy { background: rgba(245, 158, 11, .3); } .pc-word.hit-manual { background: rgba(99, 102, 241, .35); text-decoration: line-through; } #pc-hits { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; } .pc-hit-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-radius: 8px; font-size: 13px; } .pc-hit-row.fuzzy { outline: 1px dashed rgba(245, 158, 11, .5); } .pc-hit-row.manual { outline: 1px dashed rgba(99, 102, 241, .55); } .pc-hit-word { flex: 1; font-weight: 600; word-break: break-word; } .pc-hit-time { color: var(--text-muted); font-family: monospace; font-size: 12px; } .pc-hit-play, .pc-hit-ear, .pc-hit-del { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--glass-hover); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; } .pc-hit-play:hover, .pc-hit-ear:hover, .pc-hit-del:hover { color: var(--text-primary); background: var(--glass); } .pc-hit-ear { font-size: 14px; line-height: 1; padding: 0; } #pc-hits-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; } /* ---- settings ---- */ .pc-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; } .pc-set { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; } .pc-set label.head { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .pc-set select { width: 100%; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; } .pc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-top: 6px; cursor: pointer; } .pc-check input { accent-color: var(--accent); width: 16px; height: 16px; } .pc-check.locked { opacity: .65; cursor: default; } .pc-slider-row { margin-top: 10px; } .pc-slider-row label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .pc-slider-row output { font-family: 'SF Mono', Monaco, monospace; color: var(--text-primary); font-size: 12px; } .pc-slider-row input[type=range] { width: 100%; accent-color: var(--accent); display: block; } .pc-sound-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .pc-mini-btn { padding: 7px 12px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass-hover); color: var(--text-secondary); cursor: pointer; } .pc-mini-btn:hover { color: var(--text-primary); } #pc-custom-name { font-size: 12px; color: var(--text-muted); word-break: break-all; } #pc-custom-row { display: none; } #pc-custom-row.active { display: block; } #pc-freq-row.hidden, #pc-vol-row.hidden, #pc-coverage-row.hidden { display: none; } /* Segmented pill control (mode + video-fx) — VideoCensor-style, more tactile than a