Die Weboberfläche — im Zuschnitt von Plex, vom Server selbst ausgeliefert
Einrichtung, Anmeldung, Mediathek, Detailseite mit Abspielen und Herunterladen, Zuordnung korrigieren, Verwaltung. Die Oberfläche aus der Jellyfin-Zeit ist dabei vollständig ersetzt: `types.ts`, `prefs.ts`, `contrast.ts`, `views/cards.ts`, `views/player.ts` und `views/settings.ts` sprachen Jellyfins Schnittstelle und hatten hier nichts mehr zu suchen. Seitenleiste links, waagerechte Reihen auf der Startseite, Plakate im Verhältnis 2:3, unscharfer Hintergrund hinter dem Kopf der Detailseite — das ist der Zuschnitt von Plex, weil er gefällt. **Die Farbe bleibt Flaros Orchidee**, nicht Plex' Orange; der Aufbau ist das Vorbild, nicht das Aussehen. Welche Bibliothek gezeigt wird, entscheidet die Seitenleiste. Eine zweite Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten. --- **Der Zugang liegt jetzt auch in einem Cookie.** Ein `<img>`, ein `<video>` und ein Download-Link senden keine eigenen Kopfzeilen — eine App kann ihr Token in jede Anfrage legen, ein Browser nicht. Das Token stattdessen in die Adresse zu schreiben wäre der naheliegende Ausweg und stünde danach in jedem Zugriffsprotokoll, in jedem Verlauf und in jedem weitergegebenen Link. `HttpOnly`, damit kein eingeschlichenes Skript herankommt. `SameSite=Strict` gegen Anfragen von fremden Seiten. `Secure` nur über https — sonst liesse sich die Oberfläche im Heimnetz über http gar nicht benutzen. Die Apps benutzen weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein zweites Verfahren. --- **Der Fehler, den erst der echte Container zeigte:** eine weisse Seite, ohne Hinweis worauf. Die Rückfallregel verlangt für jede Anfrage ohne eigenen Endpunkt einen angemeldeten Benutzer, und `/assets/index.js` hat keinen. Die statischen Dateien standen unter `UseAuthorization` — ein neuer Besucher bekam 401 auf genau das Skript, das ihm die Anmeldemaske zeichnen sollte. `/` kam durch, weil der SPA-Rückfall `AllowAnonymous` trägt; alles mit Dateiendung nicht. Jetzt liegen sie davor. Mit Prüfung. Beim Bau desselben Images der zweite: seit der Kontext die Projektwurzel ist, überschrieb `COPY server/` die `obj/`-Verzeichnisse aus dem Container mit denen vom Arbeitsrechner — die zeigen auf osx-arm64, gebaut wird linux-arm64, `dotnet publish` brach mit NETSDK1047 ab. Dafür gibt es jetzt eine `.dockerignore` in der Wurzel; die unter `server/` sucht Docker seit dem Umzug nicht mehr. --- Vier Prüfungen schlugen danach fehl, und zwar zu Recht: sie hiessen „ohne Anmeldung gibt es nichts", benutzten aber den Client, der nach dem Anmelden ein Cookie hält. Sie prüften also den Angemeldeten. Jetzt sagen sie ausdrücklich, dass sie ohne Zugang fragen. 313 Tests grün. Im Container nachgewiesen: Anmelden, Plakate, Abspielen, Staffeln und Folgen, Verwaltung — und ein Neuladen auf `/verwaltung`, das nicht in einem 404 endet. 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
a7cf6c5def
commit
91eb934048
+183
-495
@@ -1,558 +1,246 @@
|
||||
/* ============================================================================
|
||||
Flaro Web — ein Frontend für Jellyfin
|
||||
----------------------------------------------------------------------------
|
||||
Die Werte stammen aus FlaroDesign, nicht aus dem Augenmaß: dieselben
|
||||
Flächen, dieselben Radien, dieselben Abstände wie in der App.
|
||||
========================================================================= */
|
||||
/* Flaro — Weboberfläche
|
||||
*
|
||||
* Der Aufbau folgt Plex: Seitenleiste links, Inhalt als waagerechte Reihen,
|
||||
* Detailseite mit grossem unscharfem Hintergrund. Die Farben nicht — Orchid
|
||||
* stimmt mit der iOS-App überein, und Plex' Orange ist deren Marke.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--accent: #C04AC9; /* Orchid — wie auf dem iPad eingestellt */
|
||||
--accent: #C04AC9;
|
||||
--accent-dim: #8E3595;
|
||||
--canvas: #0B0B0D;
|
||||
--surface: #141417;
|
||||
--elevated: #1D1D21;
|
||||
--placeholder: #26262B;
|
||||
--text: #F5F5F7;
|
||||
--text-2: #A0A0A8;
|
||||
--text-3: #6E6E76;
|
||||
--separator: rgba(255,255,255,.10);
|
||||
--text-dim: #A1A1A8;
|
||||
--text-faint: #6E6E76;
|
||||
--separator: rgba(255, 255, 255, .10);
|
||||
|
||||
--r-card: 8px;
|
||||
--r-control: 10px;
|
||||
--r-sheet: 16px;
|
||||
--r-panel: 22px;
|
||||
--r-card: 6px;
|
||||
--r-control: 8px;
|
||||
--r-panel: 14px;
|
||||
|
||||
--s-tight: 4px; --s-snug: 8px; --s-regular: 12px;
|
||||
--s-loose: 16px; --s-section: 24px; --s-margin: 16px;
|
||||
--s-loose: 16px; --s-section: 28px;
|
||||
|
||||
/* 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;
|
||||
--sidebar-w: 240px;
|
||||
|
||||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
|
||||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
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;
|
||||
font-family: var(--font); font-size: 14px; line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body { overflow-x: hidden; }
|
||||
button { font-family: inherit; cursor: pointer; border: none; }
|
||||
img { display: block; }
|
||||
|
||||
button, input, select { font: inherit; color: inherit; }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---- Anmeldung ----------------------------------------------------------- */
|
||||
/* ---------- Gerüst ---------- */
|
||||
|
||||
#app { display: flex; min-height: 100%; }
|
||||
|
||||
#chrome {
|
||||
width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--separator);
|
||||
padding: var(--s-loose) 0;
|
||||
display: flex; flex-direction: column; gap: var(--s-tight);
|
||||
position: sticky; top: 0; height: 100vh; overflow-y: auto;
|
||||
}
|
||||
|
||||
.marke {
|
||||
font-size: 20px; font-weight: 700; letter-spacing: -.02em;
|
||||
padding: 0 var(--s-loose) var(--s-loose);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.nav-gruppe {
|
||||
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
|
||||
color: var(--text-faint); padding: var(--s-loose) var(--s-loose) var(--s-tight);
|
||||
}
|
||||
|
||||
#chrome button {
|
||||
display: block; width: calc(100% - var(--s-regular)); margin: 0 var(--s-snug);
|
||||
text-align: left; background: none; border: 0; cursor: pointer;
|
||||
padding: var(--s-snug) var(--s-regular); border-radius: var(--r-control);
|
||||
color: var(--text-dim); font-size: 14px;
|
||||
}
|
||||
#chrome button:hover { background: var(--elevated); color: var(--text); }
|
||||
#chrome button.check { background: var(--accent-dim); color: #fff; }
|
||||
|
||||
.nav-fuss { margin-top: auto; padding-top: var(--s-loose); }
|
||||
|
||||
#content { flex: 1; min-width: 0; padding: var(--s-section); }
|
||||
|
||||
/* ---------- Anmeldung ---------- */
|
||||
|
||||
#login {
|
||||
min-height: 100dvh; display: grid; place-items: center; padding: var(--s-loose);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
min-height: 100vh; padding: var(--s-loose);
|
||||
}
|
||||
.login-card {
|
||||
width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-regular);
|
||||
width: 100%; max-width: 360px; background: var(--surface);
|
||||
border: 1px solid var(--separator); border-radius: var(--r-panel);
|
||||
padding: var(--s-section); 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 h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
|
||||
|
||||
/* ---------- Bedienelemente ---------- */
|
||||
|
||||
.field {
|
||||
width: 100%; background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); padding: 10px var(--s-regular); outline: none;
|
||||
}
|
||||
.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); }
|
||||
.field:focus { 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;
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); padding: 9px var(--s-loose);
|
||||
cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.btn:hover { filter: brightness(1.25); }
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-row { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
|
||||
.btn:hover:not(:disabled) { background: #2A2A30; }
|
||||
.btn:disabled { opacity: .5; cursor: default; }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
|
||||
.btn-primary:hover:not(:disabled) { background: #CB5BD3; }
|
||||
.btn-row { display: flex; gap: var(--s-snug); flex-wrap: wrap; align-items: center; }
|
||||
|
||||
.error {
|
||||
color: #F08A8D; font-size: 13px; min-height: 18px; text-align: center;
|
||||
.seg { display: inline-flex; background: var(--elevated); border-radius: var(--r-control); padding: 2px; }
|
||||
.seg button {
|
||||
background: none; border: 0; cursor: pointer; color: var(--text-dim);
|
||||
padding: 6px var(--s-loose); border-radius: 6px;
|
||||
}
|
||||
.note { color: var(--text-3); font-size: 12px; text-align: center; margin-top: var(--s-snug); }
|
||||
.seg button.check { background: var(--accent); color: #fff; }
|
||||
|
||||
/* ---- 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; }
|
||||
.seitentitel { margin: 0; font-size: 24px; letter-spacing: -.02em; }
|
||||
.row { display: flex; gap: var(--s-regular); align-items: center; margin-bottom: var(--s-section); }
|
||||
.row .field { max-width: 280px; margin-left: auto; }
|
||||
|
||||
.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; }
|
||||
/* ---------- Karten und Raster ---------- */
|
||||
|
||||
.island button {
|
||||
background: none; color: var(--text); font-size: 15px; white-space: nowrap;
|
||||
padding: var(--s-snug) var(--s-loose); border-radius: 999px;
|
||||
.grid {
|
||||
display: grid; gap: var(--s-loose);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
|
||||
}
|
||||
.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);
|
||||
.card {
|
||||
background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
|
||||
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); }
|
||||
.card:hover .poster { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
|
||||
|
||||
/* 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;
|
||||
.poster {
|
||||
aspect-ratio: 2 / 3; width: 100%; background: var(--placeholder);
|
||||
border-radius: var(--r-card); overflow: hidden; position: relative;
|
||||
transition: transform .15s ease, box-shadow .15s 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; } }
|
||||
.poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
|
||||
.poster.geladen img { opacity: 1; }
|
||||
|
||||
/* ---- Reihen -------------------------------------------------------------- */
|
||||
.row { margin-bottom: var(--s-section); }
|
||||
.row h3 {
|
||||
.rowline { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||||
.rowline strong { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---------- Waagerechte Reihen, wie bei Plex ---------- */
|
||||
|
||||
.reihe { margin-bottom: var(--s-section); }
|
||||
.reihe h2 {
|
||||
font-size: 17px; font-weight: 600; margin: 0 0 var(--s-regular);
|
||||
padding: 0 var(--s-margin); letter-spacing: -.01em;
|
||||
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;
|
||||
display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
|
||||
gap: var(--s-loose); overflow-x: auto; padding-bottom: var(--s-snug);
|
||||
scrollbar-width: thin; scroll-snap-type: x proximity;
|
||||
}
|
||||
.strip::-webkit-scrollbar { display: none; }
|
||||
.strip > * { scroll-snap-align: start; }
|
||||
.strip::-webkit-scrollbar { height: 8px; }
|
||||
.strip::-webkit-scrollbar-thumb { background: var(--elevated); border-radius: 4px; }
|
||||
|
||||
.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); }
|
||||
/* ---------- Detailseite ---------- */
|
||||
|
||||
/* ---- 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);
|
||||
.detail-head {
|
||||
position: relative; margin: calc(var(--s-section) * -1) calc(var(--s-section) * -1) var(--s-section);
|
||||
padding: var(--s-section); overflow: hidden;
|
||||
}
|
||||
.grid .card { width: auto; }
|
||||
/* Der unscharfe Hintergrund, der die Seite trägt — Plex' auffälligster Zug. */
|
||||
.detail-head::before {
|
||||
content: ''; position: absolute; inset: -40px;
|
||||
background-image: var(--backdrop); background-size: cover; background-position: center;
|
||||
filter: blur(28px) saturate(1.2); opacity: .35; z-index: 0;
|
||||
}
|
||||
.detail-head::after {
|
||||
content: ''; position: absolute; inset: 0; z-index: 0;
|
||||
background: linear-gradient(to bottom, rgba(11,11,13,.3), var(--canvas));
|
||||
}
|
||||
.detail-head > * { position: relative; z-index: 1; }
|
||||
|
||||
/* ---- 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; }
|
||||
.detail-inner { display: flex; gap: var(--s-section); margin-top: var(--s-loose); align-items: flex-start; }
|
||||
.detail-inner .poster { width: 200px; flex: 0 0 200px; }
|
||||
.detail-text h1 { margin: 0 0 var(--s-snug); font-size: 30px; letter-spacing: -.02em; }
|
||||
.detail-text p { margin: 0; color: var(--text-dim); max-width: 60ch; }
|
||||
|
||||
/* **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; }
|
||||
.detail h2 { font-size: 17px; margin: var(--s-section) 0 var(--s-regular); }
|
||||
|
||||
/* 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); }
|
||||
/* ---------- Listen und Einstellungen ---------- */
|
||||
|
||||
.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. */
|
||||
/* Während des ersten Ladens haben Vor- und Zurückspulen keine Wirkung — es
|
||||
gibt noch keine Zeitachse. Der mittlere Knopf bleibt stehen: er trägt
|
||||
jetzt selbst den Kreisel. */
|
||||
#player.loading .pl-center > :not(.pl-play) { 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, .pl-wait {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Feste Größe für den mittleren Knopf, damit die beiden daneben stehen
|
||||
bleiben: der Kreisel ist schmaler als das Symbol, das er vertritt, und
|
||||
ohne diese Zeile rückten Zurück- und Vorspulen bei jedem Wechsel
|
||||
zusammen. */
|
||||
.pl-round.pl-play { width: 68px; height: 68px; }
|
||||
|
||||
.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; }
|
||||
.settings { display: flex; flex-direction: column; gap: var(--s-regular); }
|
||||
.setting {
|
||||
background: var(--surface); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); padding: var(--s-loose); margin-bottom: var(--s-regular);
|
||||
border-radius: var(--r-panel); padding: var(--s-loose);
|
||||
display: flex; flex-direction: column; gap: var(--s-snug);
|
||||
}
|
||||
.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;
|
||||
button.setting { cursor: pointer; text-align: left; width: 100%; }
|
||||
button.setting:hover { background: var(--elevated); }
|
||||
|
||||
.hint { color: var(--text-dim); font-size: 13px; }
|
||||
.tiny { color: var(--text-faint); font-size: 12px; }
|
||||
.note { color: var(--text-faint); font-size: 12px; }
|
||||
|
||||
.error {
|
||||
background: rgba(220, 60, 60, .14); border: 1px solid rgba(220, 60, 60, .4);
|
||||
color: #FF9A9A; border-radius: var(--r-control); padding: var(--s-regular);
|
||||
}
|
||||
.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; }
|
||||
.empty { color: var(--text-faint); padding: var(--s-section) 0; grid-column: 1 / -1; }
|
||||
|
||||
/* ---- 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;
|
||||
width: 22px; height: 22px; margin: var(--s-section) auto;
|
||||
border: 2px solid var(--separator); border-top-color: var(--accent);
|
||||
border-radius: 50%; animation: dreh .7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.empty { text-align: center; color: var(--text-2); padding: 60px var(--s-margin); }
|
||||
@keyframes dreh { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#hero { height: 70vh; }
|
||||
#hero h2 { font-size: 26px; }
|
||||
.card { width: 120px; }
|
||||
.card.wide { width: 200px; }
|
||||
/* ---------- Abspielen ---------- */
|
||||
|
||||
.pl-fill { position: fixed; inset: 0; background: #000; z-index: 50; }
|
||||
|
||||
/* ---------- Hinweis auf TMDB ---------- */
|
||||
|
||||
.attribution {
|
||||
margin-top: var(--s-section); padding-top: var(--s-loose);
|
||||
border-top: 1px solid var(--separator);
|
||||
color: var(--text-faint); font-size: 11px; display: flex; gap: var(--s-snug); align-items: center;
|
||||
}
|
||||
.attribution img { height: 14px; opacity: .7; }
|
||||
|
||||
/* ---------- Schmale Fenster ---------- */
|
||||
|
||||
@media (max-width: 760px) {
|
||||
#app { flex-direction: column; }
|
||||
#chrome {
|
||||
width: 100%; flex: none; height: auto; position: static;
|
||||
flex-direction: row; overflow-x: auto; padding: var(--s-snug);
|
||||
border-right: 0; border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.marke, .nav-gruppe { display: none; }
|
||||
.nav-fuss { margin: 0; padding: 0; display: flex; }
|
||||
#content { padding: var(--s-loose); }
|
||||
.detail-inner { flex-direction: column; }
|
||||
.detail-inner .poster { width: 140px; flex: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user