/* ============================================================ Media Hub — designsystem Formsprog: mørk biograf. Anton som plakat-display (versaler), Manrope som brødtekst, rav/marquee-gul som eneste accent. Mørkt tema er standard for ALLE (medier ses bedst mod mørkt); lyst tema slås til med knappen i headeren (data-theme="light" på , husket i localStorage — theme.js sætter den før maling). Radius-regel: flader 16px, kontroller 10px, piller runde. ============================================================ */ /* ---------- skrifter (selvhostede, ingen CDN i drift) ---------- */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/manrope-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/manrope-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF; } /* ---------- tokens (mørk biograf er standard) ---------- */ :root { color-scheme: dark; /* native kontroller (afspillere, selects, scrollbars) følger temaet */ --display: 'Anton', 'Arial Narrow', 'Franklin Gothic Medium', sans-serif; --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* forhåndsvisning af filmtekst: filmen brændes med DejaVu Sans (render.js), så previews skal ligne DEN, ikke brandets displayskrift */ --filmfont: 'DejaVu Sans', Verdana, sans-serif; --bg: #0e0f13; --bg-veil: radial-gradient(120% 80% at 50% -10%, #1a1d25 0%, rgba(26, 29, 37, 0) 60%); --surface: #161920; --surface-2: #1c2029; --surface-sunken: #111318; --line: #262b36; --line-strong: #39404f; --ink: #eceef3; --ink-2: #aeb4c2; --ink-3: #868da0; --accent-ink: #ffc76b; /* rav der er læsbar som tekst på mørkt */ --accent: #ffaa2b; --accent-bright: #ffc043; --accent-soft: #7a5a1d; --accent-wash: #2b2214; /* marquee-lys: knaptekst er mørk på det lyse rav */ --accent-grad: linear-gradient(135deg, #ffbe4d 0%, #ff9f1a 55%, #f28f0e 100%); --danger: #f28b7d; --danger-wash: #331d19; --danger-line: #55302a; --ok: #7fce9b; --ok-wash: #16281d; --stage: #08090b; --r-lg: 16px; /* flader: kort, modaler, felter */ --r-md: 10px; /* kontroller: knapper, input, miniaturer */ --r-sm: 7px; /* små chips */ --sh-1: 0 1px 2px rgba(0, 0, 0, .45); --sh-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -16px rgba(0, 0, 0, .75); --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 80px -34px rgba(0, 0, 0, .9); --ring: 0 0 0 3px rgba(255, 170, 43, .32); --ease: cubic-bezier(.16, 1, .3, 1); --fast: 140ms; --base: 220ms; } :root[data-theme="light"] { color-scheme: light; --bg: #f3f4f7; --bg-veil: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%); --surface: #ffffff; --surface-2: #eef0f4; --surface-sunken: #e8eaef; --line: #dcdfe6; --line-strong: #c3c9d4; --ink: #191c22; --ink-2: #4d5462; /* dæmpet, men stadig AA på hvid og på baggrunden */ --ink-3: #656c7c; --accent-ink: #96600a; --accent: #b47207; --accent-bright: #e29612; --accent-soft: #ecd3a2; --accent-wash: #faf1de; /* mørkere rav i lyst tema: lyseste stop holder stadig ≥4,5:1 mod hvid knaptekst */ --accent-grad: linear-gradient(135deg, #a4680a 0%, #855205 55%, #96600a 100%); --danger: #b3352a; --danger-wash: #fbedec; --danger-line: #eccbc7; --ok: #2f6b46; --ok-wash: #eaf3ed; --stage: #101114; --sh-1: 0 1px 2px rgba(15, 18, 26, .06), 0 1px 3px rgba(15, 18, 26, .05); --sh-2: 0 1px 2px rgba(15, 18, 26, .06), 0 10px 24px -14px rgba(15, 18, 26, .28); --sh-3: 0 2px 6px rgba(15, 18, 26, .07), 0 30px 70px -30px rgba(15, 18, 26, .42); --ring: 0 0 0 3px rgba(180, 114, 7, .3); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg-veil), var(--bg); background-attachment: fixed; min-height: 100dvh; -webkit-font-smoothing: antialiased; } /* papirkorn: fast lag, ingen hit-test, ingen repaint under scroll */ body::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Anton har én vægt og er tegnet til versaler — plakat/marquee-register */ h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .045em; line-height: 1.12; } h2 { font-size: 1.32rem; color: var(--ink); margin-bottom: .4rem; } h3 { font-size: 1rem; letter-spacing: .06em; } a { color: var(--accent-ink); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } ::selection { background: var(--accent-soft); color: var(--ink); } /* diskrete rullebjælker i de tætte paneler */ .libgrid, .strip, .modal, .stagewrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .libgrid::-webkit-scrollbar, .strip::-webkit-scrollbar, .modal::-webkit-scrollbar { width: 10px; height: 10px; } .libgrid::-webkit-scrollbar-thumb, .strip::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .libgrid::-webkit-scrollbar-track, .strip::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track { background: transparent; } /* ---------- topbjælke ---------- */ header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem clamp(1rem, 4vw, 2.25rem); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); } header h1 { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 400; letter-spacing: .06em; color: var(--ink); } header h1 .sub { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: .04em; } .brandmark { flex: none; width: 30px; height: 30px; color: var(--accent); } header nav { display: flex; gap: .35rem; align-items: center; } header nav #who { font-size: .82rem; color: var(--ink-2); padding-right: .5rem; margin-right: .25rem; border-right: 1px solid var(--line); font-weight: 600; } header a, header button { font-family: var(--sans); font-size: .84rem; font-weight: 600; color: var(--ink-2); text-decoration: none; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); padding: .42rem .7rem; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } header a:hover, header button:hover { background: var(--surface-2); color: var(--ink); } /* temaknappen: ikonet viser det tema man skifter TIL */ .themebtn { display: inline-flex; align-items: center; } .themebtn svg { display: block; } /* login-siden har ingen header — knappen ligger fast i hjørnet */ .login-theme { position: fixed; top: 1rem; right: 1rem; z-index: 10; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem .6rem; cursor: pointer; box-shadow: var(--sh-1); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .login-theme:hover { background: var(--surface-2); color: var(--ink); } main { max-width: 1120px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem) 4rem; } main.wide { max-width: 1560px; } /* ---------- flader ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 2.4vw, 1.6rem); box-shadow: var(--sh-1); } .card > h2 + p { color: var(--ink-2); font-size: .9rem; max-width: 68ch; } .empty { text-align: center; color: var(--ink-3); padding: 2.5rem 1rem; border-style: dashed; } .hint { color: var(--ink-3); font-size: .85rem; padding: .9rem; } .lbl { color: var(--ink-3); font-size: .78rem; } .error { color: var(--danger); margin-top: .6rem; min-height: 1.2em; font-size: .88rem; } /* ---------- kontroller ---------- */ input, select, textarea { font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: .6rem .8rem; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } input::placeholder, textarea::placeholder { color: var(--ink-3); } input:hover, select:hover, textarea:hover { border-color: var(--accent-soft); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-bright); box-shadow: var(--ring); } input:disabled { background: var(--surface-2); color: var(--ink-3); } select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } button.btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; font-family: var(--sans); font-size: .92rem; font-weight: 700; letter-spacing: .005em; color: #221703; background: var(--accent-grad); border: none; border-radius: var(--r-md); padding: .62rem 1.05rem; cursor: pointer; text-decoration: none; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease); } :root[data-theme="light"] button.btn, :root[data-theme="light"] .btn { color: #fff; } .btn:hover { filter: brightness(1.08); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .22); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); box-shadow: var(--sh-1); } .btn:disabled { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: not-allowed; filter: none; transform: none; } .btn.subtle { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; } .btn.subtle:hover { background: var(--accent-wash); border-color: var(--accent-soft); filter: none; } /* mørkt tema: --danger er en LYS laksefarve — fyldte knapper får mørk tekst, lyst tema flipper til hvid tekst på den mørke rød (nederst i lys-blokken) */ .btn.danger { background: var(--danger); color: #2b120d; } .mini { font-family: var(--sans); font-size: .78rem; font-weight: 600; line-height: 1.2; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: .34rem .6rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .mini:hover { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--ink); } .mini.danger { color: var(--danger); background: var(--danger-wash); border-color: var(--danger-line); } .mini.danger:hover { background: var(--danger); color: #2b120d; border-color: var(--danger); } .pill { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .24rem .7rem; font-size: .78rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-2); cursor: pointer; } .chk input { width: auto; accent-color: var(--accent); } progress { width: 100%; height: 8px; margin-top: .8rem; display: none; appearance: none; border: none; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; } progress::-webkit-progress-bar { background: var(--surface-sunken); } progress::-webkit-progress-value { background: var(--accent-grad); border-radius: 99px; } progress::-moz-progress-bar { background: var(--accent-bright); } table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .92rem; } th { text-align: left; padding: .5rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); } tbody tr { transition: background var(--fast) var(--ease); } tbody tr:hover { background: var(--surface-2); } td a { font-weight: 600; text-decoration: none; } td a:hover { text-decoration: underline; } .userform { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; } .userform input { flex: 1; min-width: 150px; } /* ---------- login ---------- */ .login-wrap { display: grid; place-items: center; min-height: 100dvh; padding: 1.5rem; } .login-wrap .card { width: 100%; max-width: 420px; text-align: center; padding: 2.75rem 2.25rem 2rem; box-shadow: var(--sh-3); position: relative; overflow: hidden; } .login-wrap .error:empty { min-height: 0; } .login-wrap .card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); } .login-wrap .mark { color: var(--accent); margin-bottom: 1.1rem; } .login-wrap h2 { font-size: 2.1rem; line-height: 1.1; } .login-wrap p { color: var(--ink-2); font-size: .92rem; margin-top: .5rem; } .login-wrap form { display: grid; gap: .7rem; margin-top: 1.75rem; } .login-wrap input { text-align: center; padding: .72rem .9rem; } .login-wrap .btn { margin-top: .3rem; padding: .75rem 1rem; } /* ---------- upload ---------- */ .drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; padding: 1.35rem 1.5rem; text-align: left; cursor: pointer; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); transition: border-color var(--base) var(--ease), background var(--base) var(--ease); } .drop:hover { border-color: var(--accent-soft); } .drop.over { border-color: var(--accent-bright); background: var(--accent-wash); } .drop .dropicon { flex: none; color: var(--accent); } .drop strong { font-size: 1.02rem; } .drop .lbl { max-width: 42ch; } .drop progress, .drop .error { flex-basis: 100%; margin-top: 0; } .drop .error:empty { min-height: 0; } @media (max-width: 560px) { .drop { flex-direction: column; text-align: center; gap: .5rem; padding: 1.5rem 1rem; } } /* ---------- filterbjælke ---------- */ .filterbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; padding: .75rem 1rem; } .filterbar label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .filterbar select { font-size: .88rem; padding: .42rem 2rem .42rem .7rem; background-color: var(--surface-2); min-width: 165px; } /* ---------- filgitter ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 1.1rem; margin-top: 1.5rem; } .tile { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); } .tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--accent-soft); } .tile .thumb { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--stage); border: none; transition: transform 480ms var(--ease); } .tile a:hover .thumb { transform: scale(1.035); } .tile > a { display: block; overflow: hidden; } .thumb.converting { display: grid; place-items: center; align-content: center; gap: .35rem; color: var(--accent-ink); font-size: 1.6rem; text-align: center; line-height: 1.2; background: var(--surface-sunken); } .thumb.converting span { font-size: .78rem; color: var(--ink-3); } .tile audio { width: 100%; } .tile .meta { padding: .8rem .85rem .2rem; font-size: .82rem; flex: 1; } .tile .meta .fname { font-weight: 700; word-break: break-word; line-height: 1.35; } .tile .meta .sub { color: var(--ink-3); margin-top: .2rem; font-variant-numeric: tabular-nums; } .tile .actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem .85rem .85rem; } .tile .actions button, .tile .actions a { flex: 1; font-family: var(--sans); font-size: .78rem; font-weight: 600; padding: .42rem; border-radius: var(--r-md); border: 1px solid var(--line); cursor: pointer; text-align: center; text-decoration: none; background: var(--surface-2); color: var(--ink-2); transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .tile .actions .dl:hover { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--ink); } .tile .actions .del { color: var(--danger); background: var(--danger-wash); border-color: var(--danger-line); } .tile .actions .del:hover { background: var(--danger); color: #2b120d; } .tile .actions .icon { flex: none; width: 36px; display: grid; place-items: center; padding: .3rem 0; } .tile .actions .icon:hover:not(:disabled) { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent-ink); } .tile .actions .icon:disabled { opacity: .5; cursor: progress; } /* billedet drejer med, mens serveren arbejder — så kan man se hvor mange tryk der mangler */ .tile .thumb { transition: transform 320ms var(--ease); } .tile .rotErr { padding: 0 .85rem; } .tile .rotErr:empty { min-height: 0; margin: 0; } /* ---------- modaler ---------- */ .modal-bg { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 1rem; background: rgba(6, 8, 12, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-bg.open { display: grid; } .modal { max-width: 440px; width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: var(--sh-3); animation: modalin var(--base) var(--ease) both; } @keyframes modalin { from { opacity: 0; transform: translateY(10px) scale(.985); } } .modal p { color: var(--ink-2); font-size: .92rem; } .modal input { width: 100%; margin: .9rem 0; } /* .row bruges både i modalernes knaprække og under forhåndsvisningen — den skal kunne bryde, ellers stikker afspilningsknapperne ud af en smal skærm */ .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .modal .row { justify-content: flex-end; margin-top: 1.25rem; } /* ============================================================ Filmproduktion ============================================================ */ .filmtop { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .8rem 1rem; } /* filmtitlen er brugerindhold — brødskrift, ikke plakat-versaler */ .filmtop #title { flex: 1; min-width: 220px; font-family: var(--sans); font-size: 1.2rem; font-weight: 700; padding: .4rem .65rem; } .filmtop .btn, .filmtop .mini { flex: none; } .editgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; margin-top: 1.25rem; align-items: start; } .editgrid > aside { position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); display: flex; flex-direction: column; } .editgrid.readonly .module, .editgrid.readonly .lib .add { pointer-events: none; opacity: .65; } /* forhåndsvisning */ /* loftet holder tidslinjen inden for skærmen: uden det fylder 16:9 i en 940 px kolonne hele viewporten, og man skal scrolle for at se det man redigerer */ .stage { position: relative; aspect-ratio: 16/9; background: var(--stage); border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; width: 100%; max-width: calc(44vh * 16 / 9); margin-inline: auto; box-shadow: inset 0 0 40px rgba(0, 0, 0, .4); } .stage img, .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Teksten skal fylde det SAMME af billedet som i den færdige film. Den var sat i vw, mens scenen selv skaleres efter højden (44vh) — på en lav, bred skærm (åben devtools) blev teksten derfor større end scenen og blev skåret af foroven og forneden. cqw måler scenen, ikke vinduet: 76/1920 og 58/1920 er præcis ASS-størrelserne i render.js. */ .stage { container-type: size; } .stageidle { position: absolute; color: var(--ink-3); font-size: .92rem; letter-spacing: .02em; } .stagetext { position: absolute; bottom: 8%; left: 7%; right: 7%; text-align: center; color: #fff; font-family: var(--filmfont); font-size: 3.02cqw; line-height: 1.3; white-space: pre-wrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 0 4px rgba(0, 0, 0, .95); } .stagetext.centered { top: 6%; bottom: 6%; display: flex; align-items: center; justify-content: center; font-size: 3.96cqw; } .stagebar { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(255, 255, 255, .12); cursor: pointer; touch-action: none; transition: background var(--fast) var(--ease); } .stagebar:hover { background: rgba(255, 255, 255, .22); } .stagebar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); pointer-events: none; } .stagebar div::after { content: ''; float: right; width: 3px; height: 100%; background: #fff; } /* moduler og klip */ .module { padding: 1rem 1.05rem; margin-top: 1rem; transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); } .module.selected { border-color: var(--accent-soft); box-shadow: var(--sh-2), 0 0 0 1px var(--accent-soft); } .module.dragging { opacity: .4; } .modhead { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .modhead .modname { flex: 1; min-width: 150px; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; padding: .3rem .5rem; background: transparent; border-color: transparent; } .modhead .modname:hover { border-color: var(--line); background: var(--surface-2); } .handle { cursor: grab; font-size: 1.1rem; color: var(--ink-3); padding: 0 .15rem; user-select: none; } .handle:active { cursor: grabbing; } .strip { display: flex; align-items: flex-start; /* ellers strækkes hvert klip til det højeste i rækken */ gap: .55rem; overflow-x: auto; padding: .75rem .5rem; margin-top: .75rem; min-height: 96px; border-radius: var(--r-lg); background: var(--surface-sunken); border: 1px solid transparent; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); } .strip.over { background: var(--accent-wash); border-color: var(--accent-soft); } .clip { flex: none; width: 178px; min-width: 0; /* fast bredde: ellers presser lydstyrke-rækken kortet bredere */ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .45rem; font-size: .76rem; cursor: grab; box-shadow: var(--sh-1); transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); } .clip:hover { box-shadow: var(--sh-2); border-color: var(--accent-soft); } .clip.dragging { opacity: .35; } .cthumb { width: 100%; aspect-ratio: 16/10; background: var(--stage); border-radius: var(--r-sm); display: block; } .cthumb.textcard { display: grid; place-items: center; color: var(--accent-bright); font-family: var(--filmfont); font-size: 1.35rem; background: var(--stage); } .cname { font-weight: 700; margin: .35rem 0 .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crow { display: flex; align-items: center; gap: .3rem; margin-top: .28rem; min-width: 0; } .crow > * { min-width: 0; } .crow input[type=number] { width: 58px; flex: none; padding: .18rem .3rem; font-size: .76rem; } .crow input[type=range] { flex: 1; min-width: 40px; accent-color: var(--accent); } .crow .volpct { flex: none; } .clip .mini { max-width: 100%; overflow: hidden; } .cfoot { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--line); } .cfoot .len { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } .count.is-used { color: var(--ok); } .count.is-unused { color: var(--danger); } .ctextprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tracks { margin-top: .6rem; display: grid; gap: .4rem; } .track { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: .45rem .65rem; } .track strong { font-weight: 700; } .track select { font-size: .76rem; padding: .18rem 1.6rem .18rem .35rem; max-width: 190px; } .track input[type=range] { width: 88px; accent-color: var(--accent); } /* Muted spor: dæmpet, men mute-knappen selv skal stå skarpt — ellers kan man ikke se hvordan man får sporet tilbage. Derfor dæmpes SØSKENDE, ikke hele rækken. */ .track.muted { background: var(--surface-sunken); border-style: dashed; } .track.muted > *:not(.mutebox) { opacity: .45; } .track .mutebox { color: var(--ink-2); } .track.muted .mutebox { color: var(--danger); font-weight: 700; } /* ---------- lydkortet ---------- Ét spor pr. række, sorteret efter starttid, plus en dækningsrække: hvor er der stille, og hvor ligger to lyde oven i hinanden. Det kunne man før kun høre ved at rendere filmen. */ .amwrap { overflow-x: auto; padding-bottom: .2rem; } .audiomap { position: relative; min-width: 420px; margin: .5rem 0 .6rem; } .amrow, .amplay { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .5rem; align-items: center; } .amrow { margin-bottom: 3px; } .amlbl { font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ambar { position: relative; height: 16px; border-radius: 5px; background: var(--surface-sunken); overflow: hidden; } .amseg { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 4px; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #fff; } .am1 { background: var(--accent-grad); } .am2 { background: repeating-linear-gradient(45deg, var(--accent-soft) 0 5px, var(--accent) 5px 10px); } /* ravsegmenterne er lyse i mørkt tema og mørke i lyst — etiketten følger med */ .am1, .am2 { color: #221703; } :root[data-theme="light"] .am1, :root[data-theme="light"] .am2 { color: #fff; } .ammuted { color: var(--accent-ink); } .am0 { background: repeating-linear-gradient(45deg, var(--danger-wash) 0 5px, var(--danger-line) 5px 10px); box-shadow: inset 0 0 0 1px var(--danger-line); } .ammuted { background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-soft); } .amown { background: linear-gradient(135deg, #2f6b46, #46865c); } .amruler .ambar { height: 14px; background: transparent; overflow: visible; } .amtick { position: absolute; top: 0; font-size: .68rem; font-style: normal; color: var(--ink-3); border-left: 1px solid var(--line-strong); padding-left: 2px; } .amtick.amend { left: auto; right: 0; border-left: none; padding: 0; } .amsum .ambar { height: 20px; } .amsum .amlbl { font-weight: 700; color: var(--ink); } .amoff .amlbl { text-decoration: line-through; color: var(--ink-3); } .amoff .ambar { opacity: .5; } .amplay { position: absolute; inset: 0; pointer-events: none; } .amplay .ambar { height: 100%; background: transparent; overflow: visible; } .amnow { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } .amlegend { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin-top: .2rem; } .amkey { display: inline-block; width: 15px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; } /* mediebibliotek */ .libcard { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 1.1rem; } /* position:sticky på