/* ============================================================================ KI-Moderations-Studio v1.0 — Admin-Stylesheet ============================================================================ */ * { box-sizing: border-box; } /* Anker für die studioweite Textgrößen-Steuerung (Studio.fontsize skaliert die -font-size; alle rem-Maße wachsen proportional mit). */ html { font-size: 16px; } body { margin: 0; font-family: var(--studio-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); background: #f4f6f8; color: #1e2a38; line-height: 1.45; font-size: 0.875rem; /* = 14px bei 100 % */ } /* Überschriften + Marke/Sendungsnamen folgen der Anzeige-Schrift (Fallback = body-Schrift) */ .studio-sidebar .sb-brand, .studio-main h1, .studio-main h2, .studio-main h3, .card h1, .card h2, .card h3 { font-family: var(--studio-font-display, var(--studio-font, inherit)); } a { color: #3b82f6; text-decoration: none; } a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- Shell: Hellblaue Sidebar + Topbar + Inhaltsbereich (v1.21.2 UI-Redesign) --------------------------------------------------------------------------- */ .studio-shell { display: flex; min-height: 100vh; align-items: stretch; } .studio-sidebar { width: 236px; flex-shrink: 0; background: #e3eefb; /* hellblau */ border-right: 1px solid #c7dbf3; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .studio-sidebar .sb-brand { padding: 18px 18px 14px; font-size: 1rem; font-weight: 700; letter-spacing: -0.2px; color: #2f6fb0; display: flex; flex-direction: column; gap: 3px; } .studio-sidebar .sb-brand::before { content: "🎙"; font-size: 1.125rem; } .studio-sidebar .sb-brand small { font-size: 0.6875rem; font-weight: 500; color: #5f7da6; text-transform: uppercase; letter-spacing: 0.5px; } .sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px 10px; } .sb-nav .sb-section { font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #7c93b0; padding: 14px 10px 5px; } /* --- Klappbare Nav-Gruppen (v1.21.8) --- */ .sb-group { margin-top: 4px; } .sb-group-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #7c93b0; padding: 12px 10px 5px; border-radius: 7px; font-family: inherit; text-align: left; transition: color .12s, background .12s; } .sb-group-head:hover { color: #1d6fd0; background: #d9e8fb; } .sb-caret { font-size: 0.625rem; transition: transform .2s ease; transform: rotate(-90deg); /* zu = Pfeil zeigt zur Seite */ flex-shrink: 0; } .sb-group.open .sb-caret { transform: rotate(0deg); } /* offen = Pfeil nach unten */ .sb-group-items { max-height: 0; overflow: hidden; transition: max-height .28s ease; } .sb-group.open .sb-group-items { max-height: 620px; } .sb-nav .sb-link { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px; color: #34465b; font-size: 0.84375rem; font-weight: 500; text-decoration: none; margin: 1px 0; transition: background .12s, color .12s; } .sb-nav .sb-link .sb-ico { font-size: 0.9375rem; width: 20px; text-align: center; flex-shrink: 0; } .sb-nav .sb-link:hover { background: #d3e4fa; color: #1e2a38; text-decoration: none; } .sb-nav .sb-link.active { background: #ffffff; color: #1d6fd0; box-shadow: 0 1px 2px rgba(16,40,80,0.10); } .sb-foot { border-top: 1px solid #c7dbf3; padding: 10px 12px; } .sb-foot .sb-ver { font-size: 0.6875rem; font-style: italic; color: #6b7a8d; padding: 2px 4px 8px; } .sb-foot .sb-user { display: flex; align-items: center; gap: 10px; } .sb-foot .sb-ava { width: 34px; height: 34px; border-radius: 50%; background: #bcd3f0; color: #2f5a8c; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } .sb-foot .sb-user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .sb-foot .sb-user-name { font-size: 0.8125rem; font-weight: 600; color: #2b3a4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-foot .sb-user-role { font-size: 0.6875rem; color: #6b7a8d; text-transform: capitalize; } .sb-foot .sb-logout { margin-left: auto; color: #6b7a8d; font-size: 1rem; text-decoration: none; padding: 4px 7px; border-radius: 6px; } .sb-foot .sb-logout:hover { background: #d3e4fa; color: #1e2a38; text-decoration: none; } .studio-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } header.studio-topbar { height: 56px; background: #ffffff; border-bottom: 1px solid #e4e7ec; display: flex; align-items: center; gap: 16px; padding: 0 22px; position: sticky; top: 0; z-index: 50; } .topbar-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: #f4f6f8; border: 1px solid #e4e7ec; border-radius: 8px; color: #6b7a8d; font-size: 0.8125rem; cursor: pointer; font-family: inherit; } .topbar-search:hover { border-color: #cfe0f6; color: #374151; } .topbar-search .kbd { font-size: 0.625rem; background: #e7eaef; color: #6b7280; border-radius: 4px; padding: 1px 5px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .topbar-locale, .topbar-theme { background: #f4f6f8; border: 1px solid #e4e7ec; color: #374151; border-radius: 7px; font-size: 0.8125rem; font-family: inherit; cursor: pointer; padding: 6px 9px; } .topbar-locale:focus, .topbar-theme:hover { outline: none; border-color: #cfe0f6; } .topbar-status { width: 11px; height: 11px; border-radius: 50%; background: #22c55e; } /* Textgrößen-Steuerung (Plus / Minus) in der Topbar */ .topbar-fontsize { display: inline-flex; align-items: center; gap: 2px; background: #f4f6f8; border: 1px solid #e4e7ec; border-radius: 7px; padding: 2px; } .topbar-fontsize .fs-btn { width: 26px; height: 26px; border: none; background: transparent; color: #1d6fd0; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: inherit; } .topbar-fontsize .fs-btn:hover { background: #e3eefb; } .topbar-fontsize .fs-val { min-width: 46px; height: 26px; border: none; background: transparent; color: #6b7a8d; font-size: 0.72rem; font-family: ui-monospace, monospace; cursor: pointer; border-radius: 5px; } .topbar-fontsize .fs-val:hover { background: #e3eefb; color: #1d6fd0; } #studio-font-select { font-size: 0.78rem; } @media (max-width: 820px) { .topbar-fontsize, #studio-font-select { display: none; } /* auf schmalen Screens ausblenden */ } /* Inhalt nutzt die volle Bildschirmbreite (v1.21.9) — kein fester Deckel mehr. Innenabstand wächst auf großen Monitoren leicht mit, damit nichts klebt. */ main.studio-main { flex: 1; padding: 22px 26px; max-width: none; width: 100%; } @media (min-width: 1500px) { main.studio-main { padding: 26px 42px; } } @media (min-width: 1900px) { main.studio-main { padding: 30px 56px; } } /* Mittlere Bildschirme (Laptop/Tablet quer): 3er-Raster wird 2er-Raster, damit Karten nicht zu schmal werden */ @media (max-width: 1150px) { .grid-3 { grid-template-columns: 1fr 1fr; } } /* Schmale Viewports: Sidebar stapelt oben */ @media (max-width: 820px) { .studio-shell { flex-direction: column; } .studio-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid #c7dbf3; } .sb-nav { max-height: 280px; } main.studio-main { max-width: none; padding: 16px; } /* Breite Tabellen auf kleinen Screens horizontal scrollen statt sprengen */ table.studio-table { display: block; overflow-x: auto; } } /* Sub-Navigation: echte Tab-Optik */ .studio-subtabs { display: flex; gap: 2px; margin: -8px 0 24px 0; padding: 0; border-bottom: 2px solid #e2e8f0; flex-wrap: wrap; } .studio-subtabs a { padding: 10px 18px; color: #64748b; text-decoration: none; font-size: 0.875rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s, background .15s; border-radius: 6px 6px 0 0; } .studio-subtabs a:hover { color: #0f172a; background: rgba(15,23,42,0.04); } .studio-subtabs a.active { color: #0891b2; border-bottom-color: #22d3ee; background: transparent; } h1 { font-size: 1.5rem; margin: 0 0 18px; font-weight: 600; } h2 { font-size: 1.0625rem; margin: 22px 0 12px; font-weight: 600; } h3 { font-size: 0.875rem; margin: 18px 0 8px; font-weight: 600; } /* --------------------------------------------------------------------------- Cards & Layout --------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid #e1e7ee; border-radius: 6px; padding: 20px; margin-bottom: 18px; } .card h2:first-child, .card h3:first-child { margin-top: 0; } .row { margin-bottom: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Forms --------------------------------------------------------------------------- */ label { display: block; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 600; color: #475569; } label .req { color: #dc2626; margin-left: 2px; } label .info-icon { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; text-align: center; line-height: 16px; font-size: 0.6875rem; font-weight: 700; cursor: help; margin-left: 6px; vertical-align: middle; } label .info-icon:hover { background: #3b82f6; } input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input[type="color"], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.875rem; font-family: inherit; background: #fff; color: #1e2a38; } input[type="color"] { padding: 2px; height: 38px; } textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, "SF Mono", Consolas, monospace; } input:focus, select:focus, textarea:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: #3b82f6; } .help-text { font-size: 0.75rem; color: #64748b; margin-top: 4px; } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 9px 16px; background: #3b82f6; color: #fff; border: 0; border-radius: 4px; font-size: 0.875rem; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .15s; } .btn:hover { background: #2563eb; text-decoration: none; } .btn:disabled { background: #94a3b8; cursor: not-allowed; } .btn-secondary { background: #64748b; } .btn-secondary:hover { background: #475569; } .btn-danger { background: #dc2626; } .btn-danger:hover { background: #b91c1c; } .btn-success { background: #16a34a; } .btn-success:hover { background: #15803d; } .btn-small { padding: 4px 10px; font-size: 0.75rem; } .btn-link { background: transparent; color: #3b82f6; padding: 0; } .btn-link:hover { background: transparent; text-decoration: underline; } /* --------------------------------------------------------------------------- Tables --------------------------------------------------------------------------- */ table.studio-table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; } table.studio-table th, table.studio-table td { padding: 9px 12px; border-bottom: 1px solid #eef2f6; text-align: left; vertical-align: top; } table.studio-table th { background: #f7fafc; font-weight: 600; color: #475569; } table.studio-table tr:hover td { background: #fafbfd; } /* --------------------------------------------------------------------------- Badges --------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .badge-ok { background: #dcfce7; color: #166534; } .badge-warn { background: #fef3c7; color: #92400e; } .badge-error { background: #fee2e2; color: #991b1b; } .badge-info { background: #dbeafe; color: #1e40af; } .badge-muted { background: #e2e8f0; color: #475569; } .badge-stale { background: #fed7aa; color: #9a3412; } /* --------------------------------------------------------------------------- Flash-Meldungen --------------------------------------------------------------------------- */ .flash { padding: 12px 16px; border-radius: 4px; margin-bottom: 18px; font-size: 0.875rem; border-left: 4px solid; } .flash-success { background: #dcfce7; color: #166534; border-color: #16a34a; } .flash-error { background: #fee2e2; color: #991b1b; border-color: #dc2626; } .flash-info { background: #dbeafe; color: #1e40af; border-color: #3b82f6; } .flash-warning { background: #fef3c7; color: #92400e; border-color: #d97706; } /* --------------------------------------------------------------------------- Mono / Muted --------------------------------------------------------------------------- */ .mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.78125rem; } .muted { color: #64748b; font-size: 0.78125rem; } /* --------------------------------------------------------------------------- Audio Player --------------------------------------------------------------------------- */ audio { width: 100%; max-width: 460px; } /* --------------------------------------------------------------------------- Filter-Leiste --------------------------------------------------------------------------- */ .filter-bar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 18px; } .filter-bar .row { margin-bottom: 0; min-width: 180px; } .filter-bar .row.flex-grow { flex: 1; } /* --------------------------------------------------------------------------- Pagination --------------------------------------------------------------------------- */ .pagination { margin: 18px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-block; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #475569; text-decoration: none; font-size: 0.8125rem; } .pagination a:hover { background: #f1f5f9; } .pagination .current { background: #3b82f6; color: #fff; border-color: #3b82f6; } .pagination .disabled { color: #cbd5e1; pointer-events: none; } /* --------------------------------------------------------------------------- Bulk-Toolbar --------------------------------------------------------------------------- */ .bulk-bar { display: none; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 4px; padding: 10px 14px; margin-bottom: 12px; gap: 10px; align-items: center; flex-wrap: wrap; } .bulk-bar.visible { display: flex; } .bulk-bar .count { font-weight: 600; margin-right: 8px; } /* --------------------------------------------------------------------------- Quota / Stat-Box --------------------------------------------------------------------------- */ .stat-box { background: #f8fafc; border-left: 4px solid #3b82f6; padding: 12px 14px; border-radius: 4px; margin-bottom: 12px; } .stat-box.warn { border-color: #d97706; background: #fffbeb; } .stat-box.danger { border-color: #dc2626; background: #fef2f2; } .stat-box strong { display: block; font-size: 0.75rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; } .stat-box span { font-size: 1.125rem; font-weight: 600; color: #1e2a38; } /* --------------------------------------------------------------------------- Modal --------------------------------------------------------------------------- */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); z-index: 1000; } .modal-backdrop.visible { display: flex; align-items: center; justify-content: center; } .modal-content { background: #fff; max-width: 460px; width: 90%; padding: 24px; border-radius: 6px; } .modal-content h3 { margin-top: 0; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* --------------------------------------------------------------------------- Info-Tooltip --------------------------------------------------------------------------- */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: #1e2a38; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.75rem; white-space: pre-wrap; max-width: 280px; z-index: 100; }