HitonabiandClaude Fable 5.1
f5dab5d1c1
Die sechs Punkte des Commanders vom 02.09.2026 abends und seine Entscheide:
* Restzeit der Kompression aus HandBrakes eigener ETA-Klammer (Formatstring
aus dem Binary 1.11.2 gelesen), KompressionStand.restS.
* Kachel zeigt nach dem Rip nur noch eine Zeile — Balken, Prozent, Ziel in
der Kompressions-Karte und im Verlauf ("nur in der Kompressions-Karte").
* Kopfzeile bleibt beim Scrollen stehen (sticky), Sektionswahl darunter.
* Untertitel-Vorwahl je Extra ("NUR für Extras, IMMER OPTIONAL"): welche
Untertitel-Spur beim Abspielen an ist — weiche Spur, nie eingebrannt;
RipAuftragTitel/RohDatei.untertitelVorwahl, sprachwahl.
* Mehrere Filme je Disc: "anderer Film …" je Titel mit TMDb-Suche;
filme.ts filmGruppen trennt am Rip-Ende in eigene Roh-Ordner, Vorgänge
und Kompressions-Aufträge mit voller Zuordnung (erkennung.zuordnungAus).
* Roh-Ordner und Dateien tragen den Filmnamen (filme.ts rohOrdnerName,
ablage/dateinamen.ts: Akira (1988).mkv, - Fassung n, - Extra nn).
* Hell-Modus: Einstellung design (dunkel/hell/system), data-design auf
<html>, Token --color-tinte statt white/-Alpha-Klassen.
* Vorgangs-Leiste (Commander: "Phase 1–4 plus Komprimierung — zu einem
machen"): gemeinsam/vorgangsleiste.ts + uebersicht/VorgangsLeiste.tsx,
vier Stationen (Rettung als Zwischenstation), Segment-Balken in der
aktiven Station; Kachel, Kompressions-Karte, Verlauf. PHASE-x/4-Texte weg.
* Automatik-Kasten leert sich, sobald ein Rip startet.
Beweise: 446 Tests (neu: filme, dateinamen, vorgangsleiste; erweitert:
auftrag, handbrake, automatik, ablegen), drei Typprüfungen, Klick-Beweis
33 Schritte inkl. Vorwahl, anderer Film, Vorgangs-Leiste, Restzeit,
Hell-Modus (Bilder beweise/klick/01…11).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
127 lines
5.0 KiB
CSS
127 lines
5.0 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Der Kinosaal+Schaltpult-Mix (Design-Entscheid des Commanders, 31.08.2026):
|
|
warmes Schwarz mit Saallicht und Korn, Gold als Akzent, dazu die
|
|
Geräte-Präzision — Segmente, Mono-Caps, LED-Punkte. Die Tokens hier sind
|
|
die EINE Quelle der Farbwelt; alles Weitere sind Tailwind-Klassen. */
|
|
@theme {
|
|
--font-display: 'Bricolage Grotesque Variable', Georgia, serif;
|
|
--font-sans: 'Instrument Sans', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', Consolas, monospace;
|
|
|
|
/* Bühne und Panels — warm abgetönte Schwarztöne, nie kaltes Grau. */
|
|
--color-buehne: oklch(0.13 0.012 60);
|
|
--color-karte: oklch(0.17 0.015 60);
|
|
--color-samt: oklch(0.16 0.015 60);
|
|
|
|
/* Premierengold, in drei Stufen für Verläufe und Ränder. */
|
|
--color-gold-hell: oklch(0.88 0.09 80);
|
|
--color-gold: oklch(0.83 0.11 75);
|
|
--color-gold-tief: oklch(0.74 0.13 60);
|
|
|
|
/* Die Aufnahme-LED aus dem Schaltpult. */
|
|
--color-rec: oklch(0.72 0.17 45);
|
|
|
|
/* Schriftstufen — warmes Weiß bis Nebel. */
|
|
--color-schnee: oklch(0.93 0.01 80);
|
|
--color-dunst: oklch(0.68 0.015 80);
|
|
--color-nebel: oklch(0.55 0.015 80);
|
|
|
|
/* Zustandsfarben, alle in der warmen Familie. */
|
|
--color-gruen: oklch(0.78 0.13 150);
|
|
--color-warn: oklch(0.8 0.12 85);
|
|
--color-rot: oklch(0.68 0.19 25);
|
|
|
|
/* Linien und Flächen mit Alpha: im Dunkeln Weiß, im Hellen Tinte (5.6.0). */
|
|
--color-tinte: oklch(1 0 0);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Das Saallicht: zwei warme Glühherde und ein Grundschimmer — liegt als
|
|
festes Bühnenbild hinter allem. */
|
|
.buehnenlicht {
|
|
background:
|
|
radial-gradient(900px 520px at 78% 0%, oklch(0.28 0.07 45 / 0.5), transparent 70%),
|
|
radial-gradient(1100px 700px at 0% 100%, oklch(0.24 0.09 25 / 0.55), transparent 65%),
|
|
radial-gradient(700px 400px at 45% 45%, oklch(0.2 0.04 60 / 0.45), transparent 70%);
|
|
}
|
|
|
|
/* Filmkorn — ein feines Turbulenz-Muster, hauchdünn über die Bühne gelegt. */
|
|
.filmkorn {
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
|
|
opacity: 0.05;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
/* Volle Segmente der Aussteuerungsanzeige glühen golden. */
|
|
.segment-gluehen {
|
|
background: linear-gradient(180deg, var(--color-gold-hell), var(--color-gold-tief));
|
|
box-shadow: 0 0 8px oklch(0.8 0.12 70 / 0.45);
|
|
}
|
|
|
|
/* Eigene Titelleiste (§ 4.2): Das Fenster hat seit 5.1.3 keinen
|
|
Windows-Rahmen mehr (frame:false) — gezogen wird an der Kopfzeile.
|
|
`drag` macht eine Fläche zum Fenstergriff; ALLES Bedienbare darin
|
|
braucht `nicht-ziehbar`, sonst verschluckt der Griff den Klick.
|
|
Doppelklick auf den Griff maximiert, das macht Windows von selbst. */
|
|
.ziehbar {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.nicht-ziehbar {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Dezente Scrollbalken — helle Standardbalken zerschneiden die Bühne. */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--color-tinte) 14%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
|
|
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--color-tinte) 24%, transparent); }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
/* Der Poster-Lauf der Erst-Einrichtung (5.5.0): Jede Spalte wandert langsam
|
|
nach oben; die Liste ist verdoppelt, bei -50 % beginnt sie nahtlos von
|
|
vorn. Dauer und Versatz setzt die Komponente je Spalte. */
|
|
@keyframes poster-lauf {
|
|
from { transform: translateY(0); }
|
|
to { transform: translateY(-50%); }
|
|
}
|
|
.poster-spalte {
|
|
animation-name: poster-lauf;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* ── Hell-Modus (5.6.0, Commander: „White Mode") ─────────────────────────
|
|
Dieselben Tokens, andere Werte: warmes Papier statt Kinosaal, Gold als
|
|
dunklerer Akzent, Tinte statt Weiß für Linien und Flächen. Geschaltet
|
|
über data-design auf <html> (App.tsx, Einstellung „design": dunkel /
|
|
hell / system). */
|
|
:root[data-design="hell"] {
|
|
color-scheme: light;
|
|
--color-buehne: oklch(0.965 0.008 80);
|
|
--color-karte: oklch(0.99 0.004 80);
|
|
--color-samt: oklch(0.94 0.01 80);
|
|
--color-gold-hell: oklch(0.6 0.12 72);
|
|
--color-gold: oklch(0.66 0.13 70);
|
|
--color-gold-tief: oklch(0.56 0.13 58);
|
|
--color-rec: oklch(0.6 0.19 40);
|
|
--color-schnee: oklch(0.2 0.012 60);
|
|
--color-dunst: oklch(0.4 0.015 60);
|
|
--color-nebel: oklch(0.55 0.015 60);
|
|
--color-gruen: oklch(0.52 0.15 150);
|
|
--color-warn: oklch(0.58 0.13 80);
|
|
--color-rot: oklch(0.55 0.2 25);
|
|
--color-tinte: oklch(0.15 0.01 60);
|
|
}
|
|
:root[data-design="hell"] .buehnenlicht {
|
|
background:
|
|
radial-gradient(900px 520px at 78% 0%, oklch(0.9 0.06 80 / 0.6), transparent 70%),
|
|
radial-gradient(1100px 700px at 0% 100%, oklch(0.9 0.05 40 / 0.5), transparent 65%);
|
|
}
|
|
:root[data-design="hell"] .filmkorn {
|
|
opacity: 0.03;
|
|
}
|