/* ===================================================================== Video-Studio – UI (framework-frei), hell/dunkel umschaltbar. Theme über . Tokens unten je Theme. ===================================================================== */ /* ---- Design-Tokens: DUNKEL (Standard) ---- */ :root, :root[data-theme="dark"] { --bg: #0e131a; --bg-2: #121a24; --panel: #161f2b; --panel-2: #1d2836; --elevated: #1f2b3a; --border: #2a3646; --border-2: #34445a; --text: #eef2f7; --text-2: #c2cdda; --muted: #8a97a7; --primary: #4c8dff; --primary-2: #6ba1ff; --primary-ink:#ffffff; --ok: #34d399; --warn: #fbbf24; --err: #f87171; --ring: rgba(76,141,255,.45); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --radius: 12px; color-scheme: dark; } /* ---- Design-Tokens: HELL ---- */ :root[data-theme="light"] { --bg: #f4f6fb; --bg-2: #eef1f7; --panel: #ffffff; --panel-2: #f6f8fc; --elevated: #ffffff; --border: #e2e7f0; --border-2: #d3dae6; --text: #16202e; --text-2: #3a4757; --muted: #6b7787; --primary: #2f6bff; --primary-2: #1f57e6; --primary-ink:#ffffff; --ok: #0ea968; --warn: #b8790a; --err: #d64545; --ring: rgba(47,107,255,.30); --shadow: 0 1px 2px rgba(16,32,64,.06), 0 10px 28px rgba(16,32,64,.10); --shadow-sm: 0 1px 2px rgba(16,32,64,.08); color-scheme: light; } *{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% } body{ margin:0; background:var(--bg); color:var(--text); font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none } h1{ font-size:1.5rem; letter-spacing:-.01em; margin:0 0 4px } h2{ font-size:1.15rem; letter-spacing:-.01em } h3{ font-size:1rem } .muted{ color:var(--muted) } .small{ font-size:.85em } .empty{ padding:56px 0; text-align:center } hr{ border:0; border-top:1px solid var(--border); margin:18px 0 } code{ background:var(--panel-2); padding:2px 6px; border-radius:6px; font-size:.9em; border:1px solid var(--border) } svg.ico{ width:1.1em; height:1.1em; vertical-align:-.15em; flex:0 0 auto } /* ---- Topbar ---- */ .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px; padding:0 22px; height:60px; background:color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em } .brand .logo{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg, var(--primary), #8b5cf6); color:#fff; box-shadow:var(--shadow-sm); } .topbar nav{ display:flex; gap:4px } .topbar nav a{ display:flex; align-items:center; gap:7px; color:var(--text-2); padding:8px 12px; border-radius:9px; font-weight:500; } .topbar nav a:hover{ background:var(--panel-2); color:var(--text) } .topbar nav a.active{ background:var(--panel-2); color:var(--text) } .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px } .topbar .user{ color:var(--muted); font-size:.9rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .icon-btn{ display:grid; place-items:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text-2); cursor:pointer; } .icon-btn:hover{ color:var(--text); border-color:var(--border-2) } .inline{ display:inline } .wrap{ padding:26px; max-width:1440px; margin:0 auto } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border:1px solid var(--border-2); background:var(--panel-2); color:var(--text); border-radius:10px; cursor:pointer; font-size:.92rem; font-weight:500; font-family:inherit; transition:background .15s, border-color .15s, transform .05s, box-shadow .15s; } .btn:hover{ border-color:var(--muted); background:var(--elevated) } .btn:active{ transform:translateY(1px) } .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring) } .btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink) } .btn-primary:hover{ background:var(--primary-2); border-color:var(--primary-2) } .btn-ghost{ background:transparent; border-color:transparent } .btn-ghost:hover{ background:var(--panel-2); border-color:var(--border) } .btn-danger:hover{ border-color:var(--err); color:var(--err) } .btn-sm{ padding:6px 11px; font-size:.85rem; border-radius:9px } .btn-xs{ padding:4px 8px; font-size:.78rem; border-radius:7px } .btn-block{ width:100%; } /* ---- Formularfelder ---- */ input,select,textarea{ background:var(--panel); border:1px solid var(--border-2); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; width:100%; transition:border-color .15s, box-shadow .15s; } input::placeholder,textarea::placeholder{ color:var(--muted) } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring) } label{ font-size:.9rem; color:var(--text-2) } .alert{ padding:11px 14px; border-radius:10px; margin:12px 0; border:1px solid transparent } .alert-error{ background:color-mix(in srgb, var(--err) 14%, var(--panel)); border-color:color-mix(in srgb,var(--err) 40%, transparent); color:var(--err) } .alert-ok{ background:color-mix(in srgb, var(--ok) 14%, var(--panel)); border-color:color-mix(in srgb,var(--ok) 40%, transparent); color:var(--ok) } /* ---- Login ---- */ .bare{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg)); } .login-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:34px; width:380px; max-width:92vw; box-shadow:var(--shadow); } .login-card .brand{ margin-bottom:14px; font-size:1.2rem } .login-card label{ display:block; margin:16px 0 5px } .login-card .btn{ margin-top:22px; width:100% } /* ---- 2-Spalten-Layout ---- */ .layout-2col{ display:grid; grid-template-columns:264px 1fr; gap:26px } .sidebar{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; height:fit-content; position:sticky; top:84px; box-shadow:var(--shadow-sm) } .side-section{ margin-top:18px } .side-head{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; font-weight:600 } .folder-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px } .folder-list li{ border-radius:9px } .folder-list li a{ display:flex; align-items:center; gap:9px; padding:8px 10px; color:var(--text-2); border-radius:9px } .folder-list li a:hover{ background:var(--panel-2); color:var(--text) } .folder-list li.active > a{ background:var(--panel-2); color:var(--text); font-weight:500 } .folder-item{ display:flex; align-items:center; justify-content:space-between } .folder-item .btn-xs{ opacity:0; transition:opacity .15s } .folder-item:hover .btn-xs{ opacity:1 } .folder-item.dragover{ outline:2px dashed var(--primary); outline-offset:-2px; background:color-mix(in srgb,var(--primary) 10%, transparent) } .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto } .count{ margin-left:auto; color:var(--muted); font-size:.78rem; background:var(--panel-2); padding:1px 8px; border-radius:999px } .side-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border) } .side-foot a{ color:var(--muted); display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px } .side-foot a:hover{ color:var(--text); background:var(--panel-2) } /* ---- Projektraster ---- */ .content > h1{ margin-bottom:18px; display:flex; align-items:center; gap:10px } .project-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px } .project-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; cursor:grab; } .project-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border-2) } .project-card:active{ cursor:grabbing } .pc-body{ padding:18px } .pc-body h3{ margin:0 0 10px; font-size:1.05rem; letter-spacing:-.01em } .pc-meta{ display:flex; flex-direction:column; gap:6px } .pc-actions{ display:flex; gap:7px; padding:12px 18px; border-top:1px solid var(--border); flex-wrap:wrap } .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:500; width:fit-content } .badge::before{ content:""; width:6px; height:6px; border-radius:50% } .badge-draft{ background:color-mix(in srgb,#6b8cc9 18%, transparent); color:#7ea3df } .badge-draft::before{ background:#7ea3df } .badge-queued{ background:color-mix(in srgb,var(--warn) 18%, transparent); color:var(--warn) } .badge-queued::before{ background:var(--warn) } .badge-rendering{ background:color-mix(in srgb,#22c3e6 18%, transparent); color:#3fcbe6 } .badge-rendering::before{ background:#3fcbe6 } .badge-done{ background:color-mix(in srgb,var(--ok) 18%, transparent); color:var(--ok) } .badge-done::before{ background:var(--ok) } .badge-error{ background:color-mix(in srgb,var(--err) 18%, transparent); color:var(--err) } .badge-error::before{ background:var(--err) } /* ---- Modal ---- */ .modal{ border:1px solid var(--border); border-radius:16px; background:var(--panel); color:var(--text); padding:0; max-width:92vw; box-shadow:var(--shadow) } .modal::backdrop{ background:rgba(4,8,14,.55); backdrop-filter:blur(2px) } .modal-body{ padding:26px; width:440px; max-width:90vw } .modal-body label{ display:block; margin:14px 0 5px } .modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:22px } /* ---- Wizard ---- */ .wizard-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px } .title-input{ max-width:440px; font-size:1.05rem; font-weight:600; background:transparent; border-color:transparent } .title-input:hover{ border-color:var(--border) } .autosave{ margin-left:auto; color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:6px } .autosave::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok) } .stepbar{ display:flex; gap:0; list-style:none; padding:0; margin:0 0 26px; overflow-x:auto; scrollbar-width:thin } .stepbar li{ flex:0 0 auto; position:relative } .stepbar li a{ display:flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; color:var(--text-2) } .stepbar li .num{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; font-weight:600; background:var(--panel-2); border:1px solid var(--border-2); color:var(--muted) } .stepbar li.done .num{ background:var(--ok); border-color:var(--ok); color:#04240f } .stepbar li.current a{ color:var(--text) } .stepbar li.current .num{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px var(--ring) } .stepbar li .lbl{ font-size:.86rem; white-space:nowrap } .stepbar li:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; width:1px; height:20px; background:var(--border); transform:translateY(-50%) } .step-panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:26px; max-width:860px; box-shadow:var(--shadow-sm) } .step-panel > h2{ margin-top:0 } .step-panel label{ display:block; margin:18px 0 6px } .wizard-nav{ display:flex; justify-content:space-between; margin-top:26px; gap:12px } .callout{ background:color-mix(in srgb,var(--primary) 8%, var(--panel)); border:1px solid color-mix(in srgb,var(--primary) 28%, transparent); padding:13px 15px; border-radius:11px; margin-top:14px; color:var(--text-2) } .action-row{ display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap } .plan-out{ background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:14px; margin-top:14px; white-space:pre-wrap; font-size:.85rem; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; color:var(--text-2) } /* ---- Bibliothek ---- */ .lib-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px } .lib-head h1{ margin:0; margin-right:auto } .lib-filter{ display:flex; gap:9px; margin-bottom:18px; flex-wrap:wrap } .lib-filter input[type=search]{ max-width:380px } .asset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px } .asset-card{ background:var(--panel); border:1px solid var(--border); border-radius:13px; overflow:hidden; margin:0; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s } .asset-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow) } .asset-thumb{ position:relative; aspect-ratio:16/10; background:var(--panel-2); display:grid; place-items:center; overflow:hidden } .asset-thumb img{ width:100%; height:100%; object-fit:cover } .ph{ font-size:1.8rem; color:var(--muted); display:grid; place-items:center } .fav{ position:absolute; top:8px; right:9px; color:#fbbf24; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) } .asset-card figcaption{ padding:11px 12px } .asset-title{ font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .tags{ display:flex; gap:5px; flex-wrap:wrap; margin:7px 0 } .tag{ background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:1px 7px; font-size:.72rem; color:var(--muted) } .asset-meta{ margin-top:2px } .asset-actions{ display:flex; gap:6px; margin-top:9px } .upload-progress{ margin-bottom:12px; color:var(--muted) } /* ---- Admin ---- */ .admin{ max-width:1040px } .card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:22px; box-shadow:var(--shadow-sm) } .card h2{ margin-top:0; display:flex; align-items:center; gap:9px } .table{ width:100%; border-collapse:collapse } .table th{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--border-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) } .table td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); font-size:.9rem } .table tr:last-child td{ border-bottom:none } .row-actions{ display:flex; gap:6px } .inline-form{ display:flex; gap:9px; align-items:end; flex-wrap:wrap; margin-top:14px } .inline-form label{ display:flex; flex-direction:column; font-size:.8rem; gap:5px } .inline-form input,.inline-form select{ width:auto } .key-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px } .key-row{ display:flex; flex-direction:column; gap:7px; background:var(--panel-2); padding:13px; border-radius:11px; border:1px solid var(--border) } .key-row label{ display:flex; justify-content:space-between; align-items:center; font-weight:500 } .key-status{ font-size:.7rem; padding:2px 8px; border-radius:999px; font-weight:500 } .key-status.set{ background:color-mix(in srgb,var(--ok) 18%, transparent); color:var(--ok) } .key-status.unset{ background:color-mix(in srgb,var(--err) 16%, transparent); color:var(--err) } .domain-list{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:2px } .domain-list li{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border) } .prompt-block{ border:1px solid var(--border); border-radius:11px; margin-bottom:10px; padding:10px 14px; background:var(--panel-2) } .prompt-block summary{ cursor:pointer; padding:4px 0; font-weight:500 } .prompt-form{ margin-top:10px } .prompt-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px } .prompt-meta label{ display:flex; flex-direction:column; font-size:.8rem; gap:4px } .prompt-meta input,.prompt-meta select{ width:auto } .prompt-form textarea{ width:100%; font-family:ui-monospace,monospace; font-size:.85rem; line-height:1.5 } .mp-kind{ margin:18px 0 7px; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600 } .mp-table td{ vertical-align:middle } .mp-table input{ width:auto } /* ---- Toaster (Politur der Rückmeldungen) ---- */ .toast-wrap{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:100 } .toast{ background:var(--elevated); border:1px solid var(--border-2); border-left:3px solid var(--primary); border-radius:11px; padding:12px 15px; box-shadow:var(--shadow); max-width:360px; font-size:.9rem; animation:toast-in .2s ease-out } .toast.ok{ border-left-color:var(--ok) } .toast.err{ border-left-color:var(--err) } @keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } /* ---- Responsiv ---- */ @media(max-width:860px){ .layout-2col{ grid-template-columns:1fr } .sidebar{ position:static; order:2 } .wrap{ padding:18px } } /* ---- Job-Status & Ergebnis ---- */ .status-box{ background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:11px; padding:12px 15px; margin:6px 0 18px; font-size:.92rem; color:var(--text-2) } .status-box .status-hint{ margin-top:8px; font-size:.85rem; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:9px 11px } .status-box .status-extra{ margin-top:8px; font-size:.82rem } .spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px } @keyframes spin{ to{ transform:rotate(360deg) } } .ok-dot,.err-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:1px } .ok-dot{ background:var(--ok) } .err-dot{ background:var(--err) } .result-block{ margin-top:22px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); overflow:hidden } .result-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border) } .result-head h3{ margin:0 } .sentence-list{ margin:0; padding:14px 16px 14px 40px; display:flex; flex-direction:column; gap:9px } .sentence-list li{ line-height:1.5 } .sec{ display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.04em; padding:1px 6px; border-radius:6px; margin-right:8px; vertical-align:1px; background:var(--panel); border:1px solid var(--border); color:var(--muted) } .sec-hook{ color:var(--primary); border-color:color-mix(in srgb,var(--primary) 40%, transparent) } .sec-outro{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%, transparent) } /* Eingabe + Knopf nebeneinander (URL/Stimme) */ .input-row{ display:flex; gap:8px; align-items:stretch } .input-row > input,.input-row > select{ flex:1 } .input-row > .btn{ white-space:nowrap }