/* css/shorts.css - Auto Shorts AI standalone app styles (pattern-matched to mecanica.css/taxe.css) */ :root { --sh-accent: #e11d48; --sh-accent-hover: #be123c; --sh-accent-soft: #ffe4e9; --sh-card-radius: 14px; --sh-card-bg: #ffffff; --sh-card-border: #e5e7eb; --sh-page-bg: #fbf7f8; --sh-muted: #6b7280; --sh-danger: #dc2626; --sh-danger-soft: #fee2e2; --sh-warning: #92400e; --sh-warning-soft: #fef3c7; } body.dark-theme { color-scheme: dark; --sh-accent-soft: #4c0519; --sh-card-bg: #1f2937; --sh-card-border: #374151; --sh-page-bg: #0f172a; --sh-muted: #9ca3af; --sh-danger-soft: #450a0a; --sh-warning: #fbbf24; --sh-warning-soft: #451a03; } /* clip, not hidden. The site-wide `body { overflow-x: hidden }` in styles.css keeps a wide child from scrolling the page sideways, but overflow-x: hidden forces overflow-y to compute as auto — which turns into a scroll container that never actually scrolls. position: sticky then binds to that dead scrollport instead of the viewport and silently does nothing. overflow-x: clip does the same clipping without creating a scroll container, so overflow-y stays visible and the preview can pin. Browsers too old for clip ignore the declaration and fall back to hidden — no sticky, exactly as before. */ .shorts-body, body.shorts-body#page-top { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--sh-page-bg); color: var(--text-color); min-height: 100vh; overflow-x: clip; } .shorts-main { padding-top: 88px; } .shorts-hero { text-align: center; padding: 28px 16px 20px; } .shorts-hero-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, var(--sh-accent), #7f1d1d); } .shorts-hero h1 { font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 10px; } .shorts-hero-lead { max-width: 640px; margin: 0 auto 14px; color: var(--sh-muted); font-size: 1.02rem; line-height: 1.6; } .shorts-disclaimer { max-width: 640px; margin: 0 auto; font-size: .85rem; color: var(--sh-muted); background: var(--sh-accent-soft); border-radius: 10px; padding: 10px 14px; display: flex; gap: 8px; align-items: flex-start; text-align: left; } .shorts-disclaimer i { margin-top: 2px; flex-shrink: 0; color: var(--sh-accent); } .shorts-work { padding: 12px 16px 72px; } .shorts-layout { max-width: 980px; display: grid; gap: 22px; } .shorts-card { --sh-card-pad-x: 24px; background: var(--sh-card-bg); border: 1px solid var(--sh-card-border); border-radius: var(--sh-card-radius); padding: 22px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.05); } .shorts-field { margin-bottom: 14px; } .shorts-field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; } .shorts-required { color: var(--sh-accent); } .shorts-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 6px; } .shorts-label-row label { margin-bottom: 0; } .shorts-label-link { display: inline-flex; align-items: center; gap: 5px; color: var(--sh-accent); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .shorts-label-link:hover { text-decoration: underline; } .shorts-field input, .shorts-field select { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--sh-card-border); background: var(--sh-page-bg); color: var(--text-color); font: inherit; font-size: .95rem; } .shorts-field input:focus, .shorts-field select:focus { outline: none; border-color: var(--sh-accent); box-shadow: 0 0 0 3px var(--sh-accent-soft); } .shorts-hint { margin: 6px 0 0; font-size: .8rem; color: var(--sh-muted); } .shorts-submit { width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; background: var(--sh-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s; } .shorts-submit:hover { background: var(--sh-accent-hover); } .shorts-submit:disabled { opacity: .6; cursor: not-allowed; } .shorts-key-details { margin-top: 16px; font-size: .85rem; color: var(--sh-muted); } .shorts-key-details summary { cursor: pointer; font-weight: 650; } .shorts-key-note { margin: 10px 0; } .shorts-key-row { display: flex; gap: 8px; } .shorts-key-row input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sh-card-border); background: var(--sh-page-bg); color: var(--text-color); } .shorts-key-save { padding: 8px 14px; border: 0; border-radius: 8px; background: var(--sh-card-border); color: var(--text-color); font-weight: 650; cursor: pointer; } .shorts-loading { display: flex; align-items: center; gap: 12px; color: var(--sh-muted); background: var(--sh-card-bg); border: 1px solid var(--sh-card-border); border-radius: var(--sh-card-radius); padding: 22px 24px; } .shorts-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--sh-accent-soft); border-top-color: var(--sh-accent); animation: sh-spin .8s linear infinite; flex-shrink: 0; } @keyframes sh-spin { to { transform: rotate(360deg); } } .shorts-error { color: var(--sh-danger); background: var(--sh-danger-soft); border-radius: 10px; padding: 12px 14px; font-size: .92rem; } .shorts-loading-status { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; color: var(--sh-warning); background: var(--sh-warning-soft); font-size: .82rem; font-weight: 650; } /* ── Editor: vertical "phone" preview + rating/details ── */ .shorts-editor { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; } @media (max-width: 720px) { .shorts-editor { grid-template-columns: 1fr; justify-items: center; } } .shorts-phone { width: 100%; max-width: 300px; } .shorts-phone-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,.28); border: 6px solid #111; } /* The real YouTube embed is 16:9; centre-cropped to fill the vertical frame (left/right edges trimmed) — an honest, purely-CSS approximation of an auto-reframed short, not a claim that we've actually re-encoded or re-cropped the source video. */ .shorts-phone-frame #sh-player, .shorts-phone-frame iframe { position: absolute; top: 50%; left: 50%; height: 100%; width: calc(100% * 16 / 9); transform: translate(-50%, -50%); border: 0; pointer-events: none; } .shorts-caption-overlay { position: absolute; left: 8%; right: 8%; bottom: 9%; text-align: center; z-index: 3; font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.55); pointer-events: none; transition: opacity .15s; } .shorts-caption-overlay:empty { opacity: 0; } .sh-cap-word { display: inline-block; transition: transform .1s ease; } .sh-cap-word.is-active-word { transform: scale(1.24); } .sh-cap-emoji { font-size: 2.1em; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); } .shorts-phone-controls { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .shorts-icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--sh-card-border); background: var(--sh-card-bg); color: var(--text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; } .shorts-icon-btn:hover { border-color: var(--sh-accent); color: var(--sh-accent); } .shorts-play-toggle { min-height: 38px; padding: 8px 11px; border: 1px solid var(--sh-card-border); border-radius: 999px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .shorts-play-toggle:hover { border-color: var(--sh-accent); color: var(--sh-accent); } .shorts-caption-style { display: inline-flex; border: 1px solid var(--sh-card-border); border-radius: 999px; padding: 3px; gap: 2px; } .shorts-style-btn { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 650; color: var(--sh-muted); cursor: pointer; } .shorts-style-btn.is-active { background: var(--sh-accent); color: #fff; } .shorts-youtube-preview-note { margin: 8px 2px 0; color: var(--sh-muted); font-size: .72rem; line-height: 1.35; } .shorts-details { min-width: 0; } .shorts-rating-card { background: var(--sh-card-bg); border: 1px solid var(--sh-card-border); border-radius: var(--sh-card-radius); padding: 18px 20px; margin-bottom: 16px; } .shorts-rating-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; } .shorts-score { font-size: 2.2rem; font-weight: 800; color: var(--sh-accent); line-height: 1; flex-shrink: 0; } .shorts-rating-label { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); } .shorts-rating-reason { margin: 0; font-size: .92rem; } .shorts-score-bar { height: 8px; border-radius: 999px; background: var(--sh-card-border); overflow: hidden; } .shorts-rating-model { margin: 9px 0 0; color: var(--sh-muted); font-size: .72rem; line-height: 1.4; } .shorts-rating-model[hidden] { display: none; } .shorts-rating-model.is-fallback { color: var(--sh-warning); } .shorts-score-fill { height: 100%; background: linear-gradient(90deg, var(--sh-accent), #fb7185); border-radius: 999px; transition: width .4s ease; } .shorts-title-suggestion { font-size: 1.15rem; font-weight: 750; margin: 0 0 8px; } .shorts-range { color: var(--sh-muted); font-size: .88rem; margin: 0; } .shorts-caption-tools { margin-top: 20px; padding: 14px; border: 1px solid var(--sh-card-border); border-radius: 10px; background: var(--sh-page-bg); } .shorts-caption-tools-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .shorts-caption-tools-heading strong { display: block; font-size: .86rem; } .shorts-caption-tools-heading span { display: block; margin-top: 3px; color: var(--sh-muted); font-size: .75rem; } .shorts-caption-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .caption-settings-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 10px 0 4px; padding: 9px 0; border-top: 1px solid var(--sh-card-border); border-bottom: 1px solid var(--sh-card-border); } .caption-settings-row label { display: flex; align-items: center; gap: 7px; color: var(--sh-muted); font-size: .76rem; font-weight: 700; } .caption-settings-row select { padding: 5px 7px; border: 1px solid var(--sh-card-border); border-radius: 6px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .76rem; } .caption-settings-row input[type="range"] { width: 120px; accent-color: var(--sh-accent); } .caption-settings-row strong { color: var(--text-color); font-variant-numeric: tabular-nums; } .shorts-caption-toggle { flex-shrink: 0; padding: 6px 9px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; } .shorts-caption-toggle:hover { border-color: var(--sh-accent); color: var(--sh-accent); } #sh-caption-editor { max-height: 360px; overflow-y: auto; padding-right: 5px; scroll-behavior: smooth; } .shorts-caption-cue { padding: 8px 0; border-top: 1px solid var(--sh-card-border); } .shorts-caption-cue.is-active { margin: 0 -7px; padding: 8px 7px; border-radius: 8px; background: var(--sh-accent-soft); } .shorts-caption-cue-time { display: block; margin-bottom: 5px; color: var(--sh-muted); font-size: .72rem; font-variant-numeric: tabular-nums; } .shorts-caption-cue input { width: 100%; padding: 8px 9px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .82rem; } .shorts-caption-cue input:focus { outline: none; border-color: var(--sh-accent); box-shadow: 0 0 0 2px var(--sh-accent-soft); } .shorts-caption-word-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .shorts-caption-word-chip { padding: 3px 6px; border: 1px solid var(--sh-card-border); border-radius: 5px; background: var(--sh-card-bg); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; } .shorts-caption-word-chip:hover { border-color: var(--sh-accent); transform: translateY(-1px); } @media (max-width: 560px) { .shorts-card { --sh-card-pad-x: 18px; padding: 18px; } } @media (prefers-reduced-motion: reduce) { .shorts-spinner { animation: none; border-top-color: var(--sh-accent-soft); } } /* Local browser editor */ .local-editor-card { margin-top: 2px; } .local-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .local-editor-kicker { margin: 0 0 6px; color: var(--sh-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .local-editor-kicker i { margin-right: 5px; } .local-editor-heading h2 { margin: 0 0 7px; font-size: 1.35rem; } .local-editor-intro { max-width: 650px; margin: 0; color: var(--sh-muted); font-size: .9rem; line-height: 1.5; } .local-editor-badge { flex-shrink: 0; border: 1px solid #bbf7d0; border-radius: 999px; padding: 7px 11px; color: #15803d; background: #f0fdf4; font-size: .76rem; font-weight: 750; } body.dark-theme .local-editor-badge { border-color: #166534; color: #86efac; background: #052e16; } .local-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 28px; align-items: start; } .local-editor-controls { min-width: 0; } .local-range-group { margin: 17px 0; } .local-range-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--sh-muted); font-size: .82rem; } .local-range-label strong { color: var(--text-color); font-variant-numeric: tabular-nums; } .local-range-group input[type="range"] { display: block; width: 100%; accent-color: var(--sh-accent); cursor: pointer; } .local-range-group input[type="range"]:disabled { cursor: not-allowed; opacity: .5; } .local-preview-controls { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 17px; } .local-preview-controls .shorts-secondary-btn { min-height: 38px; padding: 8px 11px; font-size: .8rem; } .local-framing-tools { margin: 17px 0; padding: 12px; border: 1px solid var(--sh-card-border); border-radius: 9px; background: var(--sh-page-bg); } .local-framing-tools > label { display: block; margin-bottom: 6px; color: var(--sh-muted); font-size: .82rem; font-weight: 700; } .local-framing-tools select { width: 100%; padding: 8px 9px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .82rem; } .local-keyframe-btn { margin-top: 8px; min-height: 36px; padding: 7px 10px; font-size: .78rem; } .local-framing-track { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .local-framing-empty { color: var(--sh-muted); font-size: .74rem; } .local-keyframe { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 7px; border: 1px solid var(--sh-card-border); border-radius: 6px; background: var(--sh-card-bg); color: var(--text-color); font-size: .72rem; font-variant-numeric: tabular-nums; } .local-keyframe-jump, .local-keyframe-remove { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .local-keyframe-jump:hover { color: var(--sh-accent); } .local-keyframe-remove { color: var(--sh-danger); padding: 0 2px; font-weight: 800; } .local-caption-field { margin-top: 18px; } .local-crop-y-group.is-inactive { opacity: .55; } /* A collapsed-by-default details block for the two optional overlays (image, and the manual text's position) — the sliders inside only matter to someone who wants them, so they stay out of the way of the controls everyone uses every time. */ .local-collapsible { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--sh-card-border); border-radius: 9px; background: var(--sh-page-bg); } .local-collapsible summary { cursor: pointer; color: var(--sh-muted); font-size: .82rem; font-weight: 700; list-style: none; } .local-collapsible summary::-webkit-details-marker { display: none; } .local-collapsible summary::before { content: '▸ '; } .local-collapsible[open] summary::before { content: '▾ '; } .local-collapsible[open] summary { margin-bottom: 10px; color: var(--text-color); } .local-collapsible > .shorts-hint:last-child { margin: 8px 0 0; } #local-overlay-details { margin-top: 18px; } .local-overlay-tools .shorts-field { margin-bottom: 10px; } .local-position-row, .local-overlay-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 8px; } .local-position-row label, .local-overlay-row label { display: flex; flex-direction: column; gap: 6px; color: var(--sh-muted); font-size: .78rem; font-weight: 700; } .local-position-row input[type="range"], .local-overlay-row input[type="range"] { width: 140px; accent-color: var(--sh-accent); } .local-overlay-row select { padding: 7px 9px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .8rem; } .local-position-row strong, .local-overlay-row strong { color: var(--text-color); font-variant-numeric: tabular-nums; } #local-overlay-custom-row { margin-top: 4px; } .local-export-quality-field { margin: 0; min-width: 170px; } .local-export-quality-field label { margin-bottom: 4px; font-size: .76rem; color: var(--sh-muted); } .local-export-quality-field select { padding: 9px 10px; min-height: 42px; } .local-ai-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sh-card-border); } .local-ai-tools .shorts-field { margin: 0; } .local-ai-btn { width: auto; min-height: 42px; padding: 10px 14px; font-size: .86rem; white-space: nowrap; } .local-caption-editor { margin-top: 18px; padding: 14px; border: 1px solid var(--sh-card-border); border-radius: 10px; background: var(--sh-page-bg); background: color-mix(in srgb, var(--sh-page-bg) 65%, var(--sh-card-bg)); } .local-caption-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .local-caption-editor-heading strong { display: block; font-size: .86rem; } .local-caption-editor-heading span { display: block; margin-top: 3px; color: var(--sh-muted); font-size: .75rem; } .local-caption-reset { flex-shrink: 0; padding: 5px 8px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--sh-muted); font: inherit; font-size: .72rem; cursor: pointer; } .local-caption-reset:hover { border-color: var(--sh-accent); color: var(--sh-accent); } .local-cue-row { padding: 10px 0; border-top: 1px solid var(--sh-card-border); } .local-caption-cues { max-height: 360px; overflow-y: auto; padding-right: 5px; scroll-behavior: smooth; } .local-cue-row.is-active { margin: 0 -7px; padding: 10px 7px; border-left: 3px solid var(--sh-accent); border-radius: 8px; background: var(--sh-accent-soft); } .local-cue-row.is-active .local-cue-time { color: var(--sh-accent); font-weight: 800; } .local-cue-time { display: block; margin-bottom: 5px; color: var(--sh-muted); font-size: .72rem; font-variant-numeric: tabular-nums; } .local-cue-text { width: 100%; padding: 8px 10px; border: 1px solid var(--sh-card-border); border-radius: 7px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .84rem; } .local-cue-text:focus { outline: none; border-color: var(--sh-accent); box-shadow: 0 0 0 2px var(--sh-accent-soft); } .caption-emoji-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; } .caption-emoji-picker .caption-emoji-input, .shorts-caption-cue .caption-emoji-input { width: 2.6em; flex: 0 0 auto; padding: 4px 0; text-align: center; border: 1px solid var(--sh-card-border); border-radius: 6px; background: var(--sh-card-bg); color: var(--text-color); font-size: .95rem; } .caption-emoji-chips { display: flex; flex-wrap: wrap; gap: 4px; } .caption-emoji-chips button { padding: 2px 5px; border: 1px solid var(--sh-card-border); border-radius: 5px; background: var(--sh-card-bg); font-size: .82rem; line-height: 1.3; cursor: pointer; } .caption-emoji-chips button:hover { border-color: var(--sh-accent); transform: translateY(-1px); } .caption-emoji-chips button.is-active { border-color: var(--sh-accent); background: var(--sh-accent-soft); } .caption-emoji-more { font-weight: 800; line-height: 1.1; color: var(--sh-muted); } .caption-emoji-more.is-open { border-color: var(--sh-accent); color: var(--sh-accent); background: var(--sh-accent-soft); } /* The full list: opened from "+", capped in height so a long cue list stays usable and the panel scrolls on its own instead of pushing every row below it off screen. */ .caption-emoji-panel { flex-basis: 100%; max-height: 190px; overflow-y: auto; margin-top: 2px; padding: 8px 9px; border: 1px solid var(--sh-card-border); border-radius: 8px; background: var(--sh-card-bg); } .caption-emoji-panel[hidden] { display: none; } .caption-emoji-group-title { display: block; margin: 6px 0 4px; color: var(--sh-muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; } .caption-emoji-group-title:first-child { margin-top: 0; } .caption-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 3px; } .caption-emoji-grid button { padding: 3px 0; border: 1px solid transparent; border-radius: 6px; background: none; font-size: 1.02rem; line-height: 1.25; cursor: pointer; } .caption-emoji-grid button:hover { border-color: var(--sh-accent); background: var(--sh-accent-soft); } .caption-emoji-grid button.is-active { border-color: var(--sh-accent); background: var(--sh-accent-soft); } .local-word-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .local-word-chip { padding: 3px 6px; border: 1px solid var(--sh-card-border); border-radius: 5px; background: var(--sh-card-bg); font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; } .local-word-chip:hover { border-color: var(--sh-accent); transform: translateY(-1px); } .local-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; } .shorts-secondary-btn, .shorts-clear-btn { min-height: 42px; padding: 10px 13px; border: 1px solid var(--sh-card-border); border-radius: 9px; background: var(--sh-card-bg); color: var(--text-color); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; } .shorts-secondary-btn:hover, .shorts-clear-btn:hover { border-color: var(--sh-accent); color: var(--sh-accent); } .shorts-secondary-btn:disabled, .shorts-clear-btn:disabled { cursor: not-allowed; opacity: .5; } .local-export-btn { width: auto; min-height: 42px; padding: 10px 14px; font-size: .86rem; } .shorts-clear-btn { color: var(--sh-danger); } .local-editor-note { min-height: 1.25em; margin: 12px 0 0; color: var(--sh-muted); font-size: .82rem; line-height: 1.45; } .local-editor-note.is-success { color: #15803d; } .local-editor-note.is-error { color: var(--sh-danger); } .local-editor-note.is-warning { color: var(--sh-warning); } /* The preview follows the scroll instead of sliding off the top, so every slider on the left can be judged against the frame it changes. Sticky needs the grid area to be taller than the item, which the existing align-items: start on .local-editor-grid gives us; the offset clears the fixed #mainNav. */ .local-preview-column { justify-self: center; align-self: start; width: 100%; max-width: 260px; position: sticky; top: 88px; z-index: 3; } .local-preview-frame { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border: 6px solid #111; border-radius: 20px; background: #0b0b0b; box-shadow: 0 16px 40px rgba(0,0,0,.24); } .local-preview-frame canvas { display: block; width: 100%; height: 100%; } .local-preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: #9ca3af; text-align: center; font-size: .82rem; } .local-preview-empty i { color: #64748b; font-size: 1.8rem; } .local-preview-empty[hidden] { display: none; } .local-preview-meta { margin: 10px 0 0; color: var(--sh-muted); font-size: .76rem; text-align: center; } /* Sits over the canvas while exporting. Deliberately a DOM layer and not something drawn into the canvas: captureStream records the canvas bitmap, so covering it on screen changes nothing about the file — it only spares you watching the clip play through again. */ .local-export-overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; text-align: center; background: rgba(8, 10, 14, .93); color: #fff; backdrop-filter: blur(2px); } .local-export-overlay[hidden] { display: none; } .local-export-overlay i { font-size: 1.5rem; color: var(--sh-accent); } .local-export-overlay strong { font-size: .92rem; font-weight: 750; } .local-export-bar { width: 78%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; } .local-export-bar-fill { width: 0%; height: 100%; border-radius: 999px; background: var(--sh-accent); transition: width .15s linear; } .local-export-percent { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; } .local-export-hint { font-size: .72rem; color: #cbd5e1; line-height: 1.4; } .local-source-video { position: absolute; width: 2px; height: 2px; opacity: .01; pointer-events: none; } @media (max-width: 720px) { .local-editor-heading { flex-direction: column; } /* Flex, not a one-column grid: grid would box each child in its own row area and a sticky item has no room to travel inside its own area. As flex items both children share one containing block, so the preview stays pinned while the controls scroll under it. */ .local-editor-grid { display: flex; flex-direction: column; } .local-preview-column { order: -1; display: flex; flex-direction: column; align-items: center; max-width: none; position: sticky; top: 62px; z-index: 5; /* Bleeds over the card padding so the controls scroll behind an opaque strip. */ margin: 0 calc(-1 * var(--sh-card-pad-x, 18px)); padding: 8px var(--sh-card-pad-x, 18px) 10px; background: var(--sh-card-bg); box-shadow: 0 12px 16px -14px rgba(0,0,0,.6); } /* Height-driven instead of width-driven: capped at a slice of the viewport so the pinned frame never eats the whole screen, with aspect-ratio deriving the width. */ .local-preview-frame { width: auto; height: min(38vh, 320px); border-width: 4px; border-radius: 16px; box-shadow: none; } .local-preview-meta { margin-top: 7px; font-size: .7rem; } .local-ai-tools { grid-template-columns: 1fr; } .local-ai-btn { width: 100%; } }