Das Web bekommt ein Fundament und einen eigenen Server
Schritt 2 des Plans, erste Hälfte. Vite mit TypeScript, und ein Server ohne eine einzige Abhängigkeit — er soll auf einem kleinen Container laufen, nicht sein halbes Verzeichnis mitschleppen. Der Server ist nicht Zierde. Er löst zwei Dinge, gegen die keine Zeile im Frontend etwas ausrichten kann: Anfragen laufen über dieselbe Adresse wie die Seite, womit CORS erledigt ist, auch beim Streamen. Und läuft der Medienserver im Klartext, während die Seite verschlüsselt ausgeliefert wird, blockiert der Browser sonst den Strom. Geprüft: Weiterreichen mitsamt Autorisierung und richtig gesetztem Host, Ausliefern gebauter Dateien, unbekannte Wege landen auf der Seite — und ein Ausbruchsversuch mit "../../../etc/passwd" liefert die Seite statt der Passwortdatei. Der Körper wird durchgereicht statt gepuffert: ein Film ist ein Strom, und ihn erst vollständig einzulesen hieße, ihn zwischenzuspeichern. Die einzelne Datei bleibt vorerst, sie läuft ja. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
87b9fae94b
commit
a04784ca15
@@ -0,0 +1,549 @@
|
||||
/* ============================================================================
|
||||
Flixy Web — ein Frontend für Jellyfin
|
||||
----------------------------------------------------------------------------
|
||||
Die Werte stammen aus FlixyDesign, nicht aus dem Augenmaß: dieselben
|
||||
Flächen, dieselben Radien, dieselben Abstände wie in der App.
|
||||
========================================================================= */
|
||||
:root {
|
||||
--accent: #C04AC9; /* Orchid — wie auf dem iPad eingestellt */
|
||||
--canvas: #0B0B0D;
|
||||
--surface: #141417;
|
||||
--elevated: #1D1D21;
|
||||
--placeholder: #26262B;
|
||||
--text: #F5F5F7;
|
||||
--text-2: #A0A0A8;
|
||||
--text-3: #6E6E76;
|
||||
--separator: rgba(255,255,255,.10);
|
||||
|
||||
--r-card: 8px;
|
||||
--r-control: 10px;
|
||||
--r-sheet: 16px;
|
||||
--r-panel: 22px;
|
||||
|
||||
--s-tight: 4px; --s-snug: 8px; --s-regular: 12px;
|
||||
--s-loose: 16px; --s-section: 24px; --s-margin: 16px;
|
||||
|
||||
/* Die Kachelbreite. Der Regler in den Einstellungen verstellt genau diese
|
||||
eine Zahl — Reihen, Raster und Querformat rechnen sich daraus ab. */
|
||||
--card-w: 150px;
|
||||
--sidebar-w: 235px;
|
||||
|
||||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0; height: 100%;
|
||||
background: var(--canvas); color: var(--text);
|
||||
font-family: var(--font); font-size: 15px; line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body { overflow-x: hidden; }
|
||||
button { font-family: inherit; cursor: pointer; border: none; }
|
||||
img { display: block; }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---- Anmeldung ----------------------------------------------------------- */
|
||||
#login {
|
||||
min-height: 100dvh; display: grid; place-items: center; padding: var(--s-loose);
|
||||
}
|
||||
.login-card {
|
||||
width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-regular);
|
||||
}
|
||||
.login-card h1 {
|
||||
font-size: 34px; font-weight: 700; margin: 0 0 var(--s-tight);
|
||||
letter-spacing: -.02em; text-align: center;
|
||||
}
|
||||
.login-card .sub {
|
||||
color: var(--text-2); text-align: center; margin: 0 0 var(--s-section);
|
||||
}
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field label { font-size: 13px; color: var(--text-2); }
|
||||
.field input {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text);
|
||||
padding: 11px var(--s-regular); font-size: 15px; font-family: inherit;
|
||||
}
|
||||
.field input:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
.btn {
|
||||
border-radius: 999px; padding: 12px var(--s-section); font-size: 15px;
|
||||
font-weight: 600; background: var(--elevated); color: var(--text);
|
||||
transition: filter .15s ease;
|
||||
}
|
||||
.btn:hover { filter: brightness(1.25); }
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-row { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
|
||||
|
||||
.error {
|
||||
color: #F08A8D; font-size: 13px; min-height: 18px; text-align: center;
|
||||
}
|
||||
.note { color: var(--text-3); font-size: 12px; text-align: center; margin-top: var(--s-snug); }
|
||||
|
||||
/* ---- Die schwebende Navigationsinsel -------------------------------------
|
||||
Das Merkmal der App: eine Fläche mit Abstand ringsum, hinter der der
|
||||
Inhalt durchläuft. Sie blendet beim Scrollen aus und kommt zurück, sobald
|
||||
man wieder oben steht — genau wie in der App. */
|
||||
#chrome {
|
||||
position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
|
||||
z-index: 50; display: flex; justify-content: center;
|
||||
transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .28s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
#chrome.away { transform: translateY(-140%); opacity: 0; }
|
||||
|
||||
.island {
|
||||
pointer-events: auto;
|
||||
display: flex; align-items: center; gap: var(--s-tight);
|
||||
padding: var(--s-snug);
|
||||
background: rgba(20,20,23,.72);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border: 1px solid var(--separator);
|
||||
border-radius: var(--r-panel);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.45);
|
||||
max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
|
||||
}
|
||||
.island::-webkit-scrollbar { display: none; }
|
||||
|
||||
.island button {
|
||||
background: none; color: var(--text); font-size: 15px; white-space: nowrap;
|
||||
padding: var(--s-snug) var(--s-loose); border-radius: 999px;
|
||||
}
|
||||
.island button.active { background: var(--elevated); color: var(--accent); }
|
||||
.island .sep { width: 1px; height: 22px; background: var(--separator); margin: 0 var(--s-tight); }
|
||||
|
||||
/* Der Umschalter zwischen oben und seitlich — wie auf dem iPad ein Knopf in
|
||||
der Leiste selbst. Ihn in die Einstellungen zu verbannen hieße, für einen
|
||||
Handgriff zwei Ebenen tief zu gehen. */
|
||||
.island .toggle-nav {
|
||||
padding: var(--s-snug); color: var(--text-2); display: flex; align-items: center;
|
||||
border-radius: var(--r-control); flex: 0 0 auto;
|
||||
}
|
||||
.island .toggle-nav:hover { color: var(--text); background: var(--elevated); }
|
||||
.island .toggle-nav svg { width: 18px; height: 18px; display: block; }
|
||||
#app.side .island .toggle-nav { align-self: flex-end; margin: 0 var(--s-snug) var(--s-snug); }
|
||||
|
||||
/* ---- Aufmacher -----------------------------------------------------------
|
||||
Randlos bis an den oberen Rand, die Insel schwebt darüber. Genau die
|
||||
Entscheidung, die in der App getroffen wurde. */
|
||||
#hero {
|
||||
position: relative; height: var(--hero-h, 82vh); min-height: 380px; overflow: hidden;
|
||||
}
|
||||
#hero .shot {
|
||||
position: absolute; inset: 0; background-size: cover; background-position: center;
|
||||
opacity: 0; transition: opacity .55s ease;
|
||||
}
|
||||
#hero .shot.on { opacity: 1; }
|
||||
#hero .veil {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 150px),
|
||||
linear-gradient(to bottom, rgba(11,11,13,0) 45%, rgba(11,11,13,.75) 78%, var(--canvas) 100%);
|
||||
}
|
||||
#hero .body {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
padding: 0 var(--s-margin) var(--s-section);
|
||||
display: flex; flex-direction: column; gap: var(--s-snug);
|
||||
}
|
||||
#hero .logo { max-width: 286px; max-height: 84px; object-fit: contain; } /* 10 % über der App-Größe, auf Wunsch */
|
||||
#hero h2 { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
|
||||
#hero .meta { color: var(--text-2); font-size: 13px; }
|
||||
#hero .summary {
|
||||
color: var(--text-2); font-size: 13px; max-width: 640px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
#hero .actions { display: flex; gap: var(--s-regular); margin-top: var(--s-tight); }
|
||||
.dots { display: flex; gap: var(--s-snug); justify-content: center; padding: var(--s-regular) 0 var(--s-section); }
|
||||
.dots button {
|
||||
width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35);
|
||||
padding: 0; transition: width .25s ease, background .25s ease;
|
||||
}
|
||||
.dots button:hover { background: rgba(255,255,255,.6); }
|
||||
.dots button.on { width: 18px; background: var(--accent); }
|
||||
|
||||
/* Blättern von Hand. Die Pfeile liegen auf dem Bild und halten sich zurück,
|
||||
bis der Zeiger da ist — auf einem Zeigegerät. Wer wischt, braucht sie nicht. */
|
||||
.hero-nav {
|
||||
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
|
||||
width: 44px; height: 44px; border-radius: 999px; padding: 0;
|
||||
background: rgba(20,20,23,.55); color: var(--text); font-size: 20px;
|
||||
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--separator); opacity: 0; transition: opacity .2s ease;
|
||||
}
|
||||
#hero:hover .hero-nav { opacity: 1; }
|
||||
.hero-nav.prev { left: var(--s-margin); }
|
||||
.hero-nav.next { right: var(--s-margin); }
|
||||
@media (hover: none) { .hero-nav { display: none; } }
|
||||
|
||||
/* ---- Reihen -------------------------------------------------------------- */
|
||||
.row { margin-bottom: var(--s-section); }
|
||||
.row h3 {
|
||||
font-size: 17px; font-weight: 600; margin: 0 0 var(--s-regular);
|
||||
padding: 0 var(--s-margin); letter-spacing: -.01em;
|
||||
}
|
||||
.strip {
|
||||
display: flex; gap: var(--s-regular); overflow-x: auto;
|
||||
padding: 0 var(--s-margin) var(--s-tight); scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.strip::-webkit-scrollbar { display: none; }
|
||||
|
||||
.card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: start; background: none; padding: 0; text-align: left; }
|
||||
.card.wide { width: calc(var(--card-w) * 1.73); }
|
||||
.card .art {
|
||||
width: 100%; aspect-ratio: 2/3; border-radius: var(--r-card);
|
||||
background: var(--placeholder) center/cover no-repeat;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.card.wide .art { aspect-ratio: 16/9; }
|
||||
.card .title {
|
||||
font-size: 13px; color: var(--text); margin-top: 6px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.card .sub { font-size: 12px; color: var(--text-3); }
|
||||
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
|
||||
.card .bar span { display: block; height: 100%; background: var(--accent); }
|
||||
|
||||
/* ---- Raster (Mediathek) -------------------------------------------------- */
|
||||
.grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) * .75), 1fr));
|
||||
gap: var(--s-loose) var(--s-regular); padding: 0 var(--s-margin) var(--s-section);
|
||||
}
|
||||
.grid .card { width: auto; }
|
||||
|
||||
/* ---- Detailblatt --------------------------------------------------------- */
|
||||
#sheet {
|
||||
position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
|
||||
display: grid; place-items: center; padding: var(--s-loose);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
#sheet .panel {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); width: min(680px, 100%);
|
||||
max-height: 86dvh; overflow: auto; padding: var(--s-section);
|
||||
}
|
||||
#sheet h2 { margin: 0 0 var(--s-snug); font-size: 24px; letter-spacing: -.02em; }
|
||||
#sheet .meta { color: var(--text-2); font-size: 13px; margin-bottom: var(--s-regular); }
|
||||
#sheet p { color: var(--text-2); font-size: 14px; }
|
||||
/* ---- Der Player ----------------------------------------------------------
|
||||
Vollbild und schwarz. Ein Film nimmt den Bildschirm ein — alles andere ist
|
||||
ein Vorschaufenster. */
|
||||
#player {
|
||||
position: fixed; inset: 0; z-index: 100; background: #000;
|
||||
display: grid; place-items: center; overflow: hidden;
|
||||
}
|
||||
#player video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
|
||||
|
||||
/* **Die Fläche selbst nimmt keine Klicks entgegen, nur ihre Knöpfe.**
|
||||
Sonst liegt sie über dem Bild und schluckt jeden Klick — und „ins Bild
|
||||
tippen hält an" funktioniert genau dann nicht, wenn die Bedienung zu
|
||||
sehen ist, also fast immer. */
|
||||
.pl-chrome {
|
||||
position: absolute; inset: 0; opacity: 0; pointer-events: none;
|
||||
transition: opacity .25s ease;
|
||||
display: grid; grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.pl-chrome.on { opacity: 1; }
|
||||
.pl-chrome.on button,
|
||||
.pl-chrome.on .pl-track,
|
||||
.pl-chrome.on select { pointer-events: auto; }
|
||||
|
||||
/* Zwei Verläufe statt einer Fläche: die Mitte bleibt frei, und genau dort
|
||||
ist das Bild. */
|
||||
/* Eine gleichmäßige Abdunklung über allem, wie in der App: „genug, damit
|
||||
weiße Schrift auf hellen Szenen lesbar bleibt, wenig genug, dass das Bild
|
||||
nicht verfälscht wirkt." Zwei Verläufe an den Rändern taten das nicht —
|
||||
in der Mitte stehen die Transportknöpfe und hatten nichts hinter sich. */
|
||||
.pl-chrome { background: rgba(0,0,0,.35); }
|
||||
|
||||
.pl-top, .pl-bottom { padding: var(--s-loose) var(--s-section); }
|
||||
.pl-top {
|
||||
display: flex; align-items: center; gap: var(--s-regular);
|
||||
padding-top: calc(var(--s-loose) + env(safe-area-inset-top));
|
||||
}
|
||||
.pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); }
|
||||
|
||||
/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */
|
||||
.pl-quality { font-size: 14px; font-weight: 600; white-space: nowrap; }
|
||||
|
||||
.pl-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.pl-title strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
|
||||
.pl-title span { font-size: 13px; color: var(--text-2); }
|
||||
|
||||
/* **Keine Knopfflächen.** In der App sind das blanke weiße Symbole auf dem
|
||||
Bild — der einzige Hintergrund ist die Abdunklung über allem. Runde
|
||||
Flächen darunter waren meine Erfindung, und sie sind der Grund, warum
|
||||
„Original" als Text darin schief aussah: ein Wort passt in keinen Kreis. */
|
||||
.pl-icon {
|
||||
background: none; border: none; color: #fff; flex: 0 0 auto;
|
||||
padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control);
|
||||
opacity: .9; transition: opacity .15s ease, background .15s ease;
|
||||
}
|
||||
.pl-icon:hover { opacity: 1; background: rgba(255,255,255,.12); }
|
||||
/* Eine Vorgabegröße für alle Symbole, damit sie zueinander passen; einzelne
|
||||
überschreiben sie über `icon(name, size)`. */
|
||||
.pl-icon svg, .tiny svg, .hero-nav svg { width: 22px; height: 22px; }
|
||||
.btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.tiny, .pl-icon, .pl-round, .hero-nav { display: inline-flex; align-items: center; justify-content: center; }
|
||||
|
||||
.pl-center {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: calc(var(--s-section) * 2);
|
||||
}
|
||||
/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es
|
||||
durch die Abdunklung, die über dem ganzen Bild liegt. */
|
||||
.pl-round {
|
||||
background: none; border: none; color: #fff; padding: var(--s-snug);
|
||||
opacity: .95; transition: opacity .15s ease, transform .15s ease;
|
||||
}
|
||||
.pl-round:hover { opacity: 1; transform: scale(1.08); }
|
||||
|
||||
/* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war
|
||||
beides unlesbar, und die Zahl ist die eigentliche Auskunft. */
|
||||
|
||||
|
||||
/* Wie in der App: der Regler über die **volle Breite**, die Zeiten darunter.
|
||||
Nebeneinander gestellt nimmt er in der Mitte Platz weg und wirkt wie ein
|
||||
Formularfeld zwischen zwei Beschriftungen. */
|
||||
.pl-times {
|
||||
display: flex; justify-content: space-between;
|
||||
margin-top: var(--s-tight);
|
||||
font-size: 13px; color: rgba(255,255,255,.8);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pl-track {
|
||||
position: relative; width: 100%; height: 22px; cursor: pointer;
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.pl-track::before {
|
||||
content: ''; position: absolute; left: 0; right: 0; height: 4px;
|
||||
background: rgba(0,0,0,.45); border-radius: 999px;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
|
||||
}
|
||||
.pl-buf, .pl-fill { position: absolute; left: 0; height: 4px; border-radius: 999px; }
|
||||
.pl-buf { background: rgba(255,255,255,.3); width: 0; }
|
||||
.pl-fill { background: var(--accent); width: 0; }
|
||||
.pl-track i {
|
||||
position: absolute; width: 13px; height: 13px; border-radius: 999px;
|
||||
background: var(--accent); transform: translateX(-50%);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.6); transition: transform .12s ease;
|
||||
}
|
||||
.pl-track:hover i { transform: translateX(-50%) scale(1.25); }
|
||||
|
||||
.pl-spacer { flex: 1; }
|
||||
|
||||
/* Während geladen wird, treten die Transportknöpfe zurück: sie tun ohnehin
|
||||
nichts, und der Kreisel lag vorher genau hinter dem größten von ihnen. */
|
||||
#player.loading .pl-center { opacity: 0; pointer-events: none; }
|
||||
.pl-center { transition: opacity .2s ease; }
|
||||
|
||||
.pl-busy {
|
||||
position: absolute; display: none; pointer-events: none;
|
||||
}
|
||||
.pl-busy.on { display: block; }
|
||||
.pl-busy i {
|
||||
display: block; width: 44px; height: 44px; border-radius: 999px;
|
||||
border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent);
|
||||
animation: spin .8s linear infinite;
|
||||
}
|
||||
|
||||
.pl-error {
|
||||
position: absolute; max-width: 460px; padding: var(--s-section);
|
||||
background: var(--elevated); border: 1px solid rgba(229,72,77,.35);
|
||||
border-radius: var(--r-sheet); display: flex; flex-direction: column; gap: var(--s-regular);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,.6);
|
||||
}
|
||||
.pl-error strong { color: #F08A8D; font-size: 16px; font-weight: 600; }
|
||||
.pl-error span { color: var(--text-2); font-size: 14px; }
|
||||
.pl-error .btn { align-self: flex-start; }
|
||||
/* Das Menü für Qualität und Spuren — über der Leiste, nicht als Blatt.
|
||||
Ein Blatt würde das Bild verdecken, und man stellt hier etwas ein, das man
|
||||
am Bild beurteilen will. */
|
||||
.pl-menu {
|
||||
position: fixed; z-index: 4;
|
||||
min-width: 232px; max-width: 320px; max-height: 60vh; overflow-y: auto;
|
||||
background: rgba(20,20,23,.92); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); padding: var(--s-snug);
|
||||
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
|
||||
box-shadow: 0 16px 48px rgba(0,0,0,.6);
|
||||
}
|
||||
.pl-group {
|
||||
font-size: 11px; font-weight: 600; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: .06em;
|
||||
padding: var(--s-regular) var(--s-regular) var(--s-tight);
|
||||
}
|
||||
.pl-group:first-child { padding-top: var(--s-snug); }
|
||||
.pl-item {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular);
|
||||
width: 100%; padding: 9px var(--s-regular); border-radius: var(--r-control);
|
||||
background: none; color: var(--text); font-size: 14px; text-align: left;
|
||||
}
|
||||
.pl-item:hover { background: rgba(255,255,255,.08); }
|
||||
.pl-item.on { color: var(--accent); }
|
||||
.pl-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
|
||||
.pl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.pl-error code {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
|
||||
color: var(--text-3); background: rgba(0,0,0,.4); padding: var(--s-snug);
|
||||
border-radius: 6px; word-break: break-all; line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pl-top, .pl-bottom { padding-left: var(--s-loose); padding-right: var(--s-loose); }
|
||||
.pl-round { width: 50px; height: 50px; }
|
||||
.pl-round.pl-play { width: 64px; height: 64px; }
|
||||
.pl-rate, .pl-tools input[type=range] { display: none; }
|
||||
}
|
||||
|
||||
/* ---- Die Navigation an der Seite -----------------------------------------
|
||||
Dieselbe Wahl wie in der App: die Leiste sitzt oben als Insel oder links
|
||||
als Spalte. Links bleibt sie stehen, statt beim Scrollen wegzufahren —
|
||||
dort nimmt sie niemandem etwas weg. */
|
||||
#app.side #chrome {
|
||||
top: 0; bottom: 0; left: 0; right: auto; width: calc(var(--sidebar-w) + 24px);
|
||||
align-items: stretch; padding: 12px; transform: none !important; opacity: 1 !important;
|
||||
}
|
||||
#app.side .island {
|
||||
flex-direction: column; align-items: stretch; gap: 2px;
|
||||
width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden;
|
||||
padding: var(--s-regular) var(--s-snug);
|
||||
}
|
||||
#app.side .island button { text-align: left; border-radius: var(--r-control); }
|
||||
#app.side .island .sep { width: auto; height: 1px; margin: var(--s-snug); }
|
||||
#app.side #content { margin-left: calc(var(--sidebar-w) + 24px); }
|
||||
|
||||
/* ---- Der Umzug der Leiste -----------------------------------------------
|
||||
Sie **zieht um**, sie verschwindet nicht und taucht woanders wieder auf.
|
||||
Das ist der Unterschied zwischen einer Leiste, die man mit den Augen
|
||||
verfolgt, und zweien, von denen eine geht und eine kommt — und es ist das,
|
||||
was Mac und iPad tun.
|
||||
|
||||
Gemacht wird das mit FLIP: die alte Lage messen, umbauen, die neue Lage
|
||||
messen, und das Element vom alten Zustand in den neuen fahren lassen. Der
|
||||
Weg dazwischen ist eine einzige Bewegung, obwohl der Aufbau in der Mitte
|
||||
ausgetauscht wurde. Über CSS allein ginge das nicht — `right: auto` und
|
||||
`bottom: auto` lassen sich nicht animieren, und genau die wechseln hier.
|
||||
|
||||
Der Inhalt rückt gleichzeitig nach; ohne das bliebe links ein Loch stehen,
|
||||
bis die Leiste angekommen ist. */
|
||||
#content { transition: margin-left .42s cubic-bezier(.32,.72,0,1); }
|
||||
|
||||
/* Wer Bewegung nicht mag, bekommt keine. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#content, .card .art, .shot, .island { transition: none !important; }
|
||||
}
|
||||
#app.side .pad-top { padding-top: var(--s-loose); }
|
||||
|
||||
.island .brand {
|
||||
display: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
|
||||
padding: var(--s-snug) var(--s-loose) var(--s-regular); color: var(--text);
|
||||
}
|
||||
#app.side .island .brand { display: block; }
|
||||
.island .group-label {
|
||||
display: none; font-size: 12px; color: var(--text-3);
|
||||
padding: var(--s-regular) var(--s-loose) var(--s-tight);
|
||||
}
|
||||
#app.side .island .group-label { display: block; }
|
||||
|
||||
/* ---- Einstellungen -------------------------------------------------------- */
|
||||
.settings { max-width: 620px; margin: 0 auto; padding: 0 var(--s-margin) var(--s-section); }
|
||||
.settings h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 var(--s-section); }
|
||||
.settings .group {
|
||||
font-size: 13px; font-weight: 600; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: .06em;
|
||||
margin: var(--s-section) 0 var(--s-snug); padding-left: var(--s-tight);
|
||||
}
|
||||
.settings .group:first-of-type { margin-top: 0; }
|
||||
.hexrow { display: flex; gap: var(--s-snug); margin-top: var(--s-regular); }
|
||||
.hexrow input {
|
||||
flex: 1; background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text); padding: 9px var(--s-regular);
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px;
|
||||
}
|
||||
.hexrow input:focus { outline: none; border-color: var(--accent); }
|
||||
.hint { font-size: 12px; color: var(--text-3); margin: var(--s-snug) 0 0; min-height: 16px; }
|
||||
.rowline {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
padding: var(--s-snug) 0; border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.rowline:last-child { border-bottom: none; }
|
||||
.rowline.off span { color: var(--text-3); text-decoration: line-through; }
|
||||
.tiny {
|
||||
width: 30px; height: 30px; border-radius: var(--r-control);
|
||||
background: var(--elevated); color: var(--text-2); font-size: 14px; padding: 0;
|
||||
}
|
||||
.tiny:hover:not(:disabled) { color: var(--text); }
|
||||
.tiny:disabled { opacity: .3; cursor: default; }
|
||||
.pick {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text);
|
||||
padding: 9px var(--s-regular); font-family: inherit; font-size: 14px; width: 100%;
|
||||
}
|
||||
.pick:focus { outline: none; border-color: var(--accent); }
|
||||
.pickrow { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
|
||||
.pickrow label { flex: 1; min-width: 160px; font-size: 13px; color: var(--text-2); }
|
||||
.pickrow .pick { margin-top: 6px; }
|
||||
.setting {
|
||||
background: var(--surface); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); padding: var(--s-loose); margin-bottom: var(--s-regular);
|
||||
}
|
||||
.setting h4 { margin: 0 0 var(--s-snug); font-size: 15px; font-weight: 600; }
|
||||
.setting p { margin: 0 0 var(--s-regular); color: var(--text-2); font-size: 13px; }
|
||||
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-regular); }
|
||||
.swatch {
|
||||
width: 34px; height: 34px; border-radius: 999px; padding: 0;
|
||||
border: 2px solid transparent; transition: transform .12s ease;
|
||||
}
|
||||
.swatch:hover { transform: scale(1.12); }
|
||||
.swatch.on { border-color: var(--text); }
|
||||
.seg { display: flex; gap: var(--s-snug); }
|
||||
.seg button { flex: 1; background: var(--elevated); color: var(--text-2); border-radius: var(--r-control); padding: 10px; }
|
||||
.seg button.on { background: var(--accent); color: #fff; }
|
||||
input[type=range] { width: 100%; accent-color: var(--accent); }
|
||||
.range-row { display: flex; align-items: center; gap: var(--s-regular); }
|
||||
.range-row output { min-width: 82px; text-align: right; color: var(--text-2); font-size: 13px; }
|
||||
.check {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
padding: var(--s-snug) 0; font-size: 14px; color: var(--text-2); cursor: pointer;
|
||||
}
|
||||
.check input { accent-color: var(--accent); width: 17px; height: 17px; }
|
||||
|
||||
/* ---- Zustände ------------------------------------------------------------ */
|
||||
#content { padding-bottom: var(--s-section); }
|
||||
|
||||
/* Ein Seitenwechsel soll nicht schlagen. Kurz und flach — was länger dauert,
|
||||
fühlt sich nach Warten an statt nach Bewegung. */
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||||
.row, .grid, .settings, #hero { animation: rise .32s cubic-bezier(.32,.72,0,1) both; }
|
||||
/* Die Reihen kommen gestaffelt — die erste zuerst, dann nach unten weg. */
|
||||
.row:nth-of-type(2) { animation-delay: .04s; }
|
||||
.row:nth-of-type(3) { animation-delay: .08s; }
|
||||
.row:nth-of-type(4) { animation-delay: .12s; }
|
||||
.row:nth-of-type(n+5) { animation-delay: .16s; }
|
||||
|
||||
/* Kacheln heben sich beim Überfahren leicht an. */
|
||||
.card .art { transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease; }
|
||||
.card:hover .art { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
|
||||
.pad-top { padding-top: calc(84px + env(safe-area-inset-top)); }
|
||||
.spinner {
|
||||
width: 26px; height: 26px; border: 2px solid var(--separator);
|
||||
border-top-color: var(--accent); border-radius: 999px;
|
||||
animation: spin .8s linear infinite; margin: 60px auto;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.empty { text-align: center; color: var(--text-2); padding: 60px var(--s-margin); }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#hero { height: 70vh; }
|
||||
#hero h2 { font-size: 26px; }
|
||||
.card { width: 120px; }
|
||||
.card.wide { width: 200px; }
|
||||
}
|
||||
Reference in New Issue
Block a user