Florian Wilde
f613136e8a
Server-Aktionen prüfen die Sitzung jeweils selbst — auf Angaben aus dem Formular ist beim Zugriffsschutz kein Verlass. Häkchen reagieren sofort und werden zurückgedreht, wenn der Server widerspricht: Abhaken soll sich anfühlen wie ein Schalter, nicht wie ein Formular. Jede Sichtungsaktion meldet sich unten kurz zurück und lässt sich von dort zurücknehmen — die Wirkung passiert weit weg vom Klick.
357 lines
10 KiB
CSS
357 lines
10 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ==========================================================================
|
|
Flimmer — Design-Tokens
|
|
--------------------------------------------------------------------------
|
|
Alle Farben liegen als CSS-Variablen (--fl-*) vor und werden über
|
|
`@theme inline` an Tailwind durchgereicht. Dadurch reagieren sämtliche
|
|
Utilities (bg-surface, text-muted, …) automatisch auf Theme-Wechsel und
|
|
spätere zusätzliche Themes brauchen nur einen neuen Selektor-Block.
|
|
|
|
Kontrast: jede hier definierte Vorder-/Hintergrund-Kombination erfüllt
|
|
mindestens WCAG AA (4,5:1 für Fließtext, 3:1 für große Schrift und
|
|
UI-Begrenzungen). Werte siehe docs/DESIGN.md.
|
|
========================================================================== */
|
|
|
|
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
|
|
|
:root,
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
/* Flächen — sehr dunkles Blauviolett/Anthrazit */
|
|
--fl-bg: #0c0a14;
|
|
--fl-bg-elevated: #12101d;
|
|
--fl-surface: #17142499;
|
|
--fl-surface-solid: #171424;
|
|
--fl-surface-2: #201b33;
|
|
--fl-border: #2e2745;
|
|
--fl-border-strong: #453a63;
|
|
|
|
/* Text */
|
|
--fl-text: #f4f1fa; /* 17,0:1 auf --fl-bg */
|
|
--fl-muted: #aca5c2; /* 7,7:1 auf --fl-bg */
|
|
--fl-faint: #7c7594; /* 4,6:1 auf --fl-bg */
|
|
|
|
/* Signatur: Glow-Gradient Bernstein → Magenta */
|
|
--fl-amber: #ffb454;
|
|
--fl-amber-soft: #ffc46b;
|
|
--fl-magenta: #ff4d9d;
|
|
--fl-magenta-soft: #ff6fb0;
|
|
--fl-accent: var(--fl-amber); /* als Textfarbe nutzbar: 11,3:1 */
|
|
--fl-accent-alt: var(--fl-magenta); /* als Textfarbe nutzbar: 6,0:1 */
|
|
--fl-on-accent: #1a1024; /* Text auf dem Gradient: min. 5,5:1 */
|
|
/* Markenstops fuer SVG-Verlaeufe (Logo). Als Variablen, damit das Logo im
|
|
Light Mode dunkler wird und lesbar bleibt, ohne die Identitaet zu aendern. */
|
|
--fl-brand-1: #ffc46b;
|
|
--fl-brand-2: #ffb454;
|
|
--fl-brand-3: #ff4d9d;
|
|
|
|
--fl-gradient: linear-gradient(115deg, var(--fl-amber-soft) 0%, var(--fl-amber) 38%, var(--fl-magenta) 100%);
|
|
/* Fuer Text: im Dunkeln identisch, im Hellen deutlich abgedunkelt (AA). */
|
|
--fl-gradient-ink: var(--fl-gradient);
|
|
--fl-gradient-soft: linear-gradient(115deg, #ffb45426 0%, #ff4d9d26 100%);
|
|
--fl-glow: 0 0 0 1px #ffb4541f, 0 8px 34px -10px #ff4d9d59, 0 2px 12px -4px #ffb45440;
|
|
--fl-glow-strong: 0 0 0 1px #ffb4543d, 0 14px 48px -12px #ff4d9d80, 0 4px 18px -6px #ffb4546b;
|
|
--fl-ring: #ff8a70;
|
|
|
|
/* Statusfarben (AA auf --fl-bg) */
|
|
--fl-success: #4ade80;
|
|
--fl-warning: #fbbf24;
|
|
--fl-danger: #ff6b6b;
|
|
--fl-info: #7dd3fc;
|
|
|
|
--fl-shadow: 0 10px 30px -12px #00000099;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* Flächen — heller, warmgrauer Grund */
|
|
--fl-bg: #faf7f5;
|
|
--fl-bg-elevated: #ffffff;
|
|
--fl-surface: #ffffffcc;
|
|
--fl-surface-solid: #ffffff;
|
|
--fl-surface-2: #f2ece8;
|
|
--fl-border: #e3dad4;
|
|
--fl-border-strong: #cbbdb4;
|
|
|
|
--fl-text: #1b1524; /* 16,2:1 auf --fl-bg */
|
|
--fl-muted: #5b5268; /* 6,7:1 auf --fl-bg */
|
|
--fl-faint: #766c84; /* 4,6:1 auf --fl-bg */
|
|
|
|
/* Dieselben Signaturfarben, für Text jedoch in abgedunkelten Varianten */
|
|
--fl-amber: #ffb454;
|
|
--fl-amber-soft: #ffc46b;
|
|
--fl-magenta: #ff4d9d;
|
|
--fl-magenta-soft: #ff6fb0;
|
|
--fl-accent: #8a4b00; /* als Textfarbe: 6,4:1 */
|
|
--fl-accent-alt: #b01262; /* als Textfarbe: 6,4:1 */
|
|
--fl-on-accent: #23122c; /* Text auf dem Gradient: min. 6,1:1 */
|
|
/* Logo im Hellen: dieselbe Bernstein-zu-Magenta-Bewegung, nur tiefer
|
|
angesetzt — sonst verschwindet die Wortmarke auf dem warmen Weiss. */
|
|
--fl-brand-1: #c26a00;
|
|
--fl-brand-2: #b35d00;
|
|
--fl-brand-3: #c9186f;
|
|
|
|
--fl-gradient: linear-gradient(115deg, var(--fl-amber-soft) 0%, var(--fl-amber) 38%, var(--fl-magenta) 100%);
|
|
/* Verlaufstext im Hellen: beide Enden erfuellen AA auf --fl-bg. */
|
|
--fl-gradient-ink: linear-gradient(115deg, #8a4b00 0%, #a33a2a 45%, #b01262 100%);
|
|
--fl-gradient-soft: linear-gradient(115deg, #ffb4542e 0%, #ff4d9d2e 100%);
|
|
--fl-glow: 0 0 0 1px #d8a15c33, 0 8px 26px -12px #ff4d9d4d, 0 2px 10px -4px #ffb4544d;
|
|
--fl-glow-strong: 0 0 0 1px #d8a15c59, 0 14px 40px -14px #ff4d9d66, 0 4px 16px -6px #ffb45473;
|
|
--fl-ring: #b01262;
|
|
|
|
--fl-success: #15803d;
|
|
--fl-warning: #a16207;
|
|
--fl-danger: #b91c1c;
|
|
--fl-info: #0369a1;
|
|
|
|
--fl-shadow: 0 10px 30px -14px #2a1a3a26;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-bg: var(--fl-bg);
|
|
--color-bg-elevated: var(--fl-bg-elevated);
|
|
--color-surface: var(--fl-surface);
|
|
--color-surface-solid: var(--fl-surface-solid);
|
|
--color-surface-2: var(--fl-surface-2);
|
|
--color-border-subtle: var(--fl-border);
|
|
--color-border-strong: var(--fl-border-strong);
|
|
|
|
--color-fg: var(--fl-text);
|
|
--color-muted: var(--fl-muted);
|
|
--color-faint: var(--fl-faint);
|
|
|
|
--color-amber: var(--fl-amber);
|
|
--color-amber-soft: var(--fl-amber-soft);
|
|
--color-magenta: var(--fl-magenta);
|
|
--color-magenta-soft: var(--fl-magenta-soft);
|
|
--color-accent: var(--fl-accent);
|
|
--color-accent-alt: var(--fl-accent-alt);
|
|
--color-on-accent: var(--fl-on-accent);
|
|
|
|
--color-success: var(--fl-success);
|
|
--color-warning: var(--fl-warning);
|
|
--color-danger: var(--fl-danger);
|
|
--color-info: var(--fl-info);
|
|
|
|
--radius-card: 1rem;
|
|
--radius-poster: 0.875rem;
|
|
|
|
--font-sans: var(--font-outfit), Outfit, Inter, ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
--shadow-glow: var(--fl-glow);
|
|
--shadow-glow-strong: var(--fl-glow-strong);
|
|
--shadow-card: var(--fl-shadow);
|
|
|
|
--ease-glow: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Basis
|
|
-------------------------------------------------------------------------- */
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: var(--fl-border);
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--fl-bg);
|
|
color: var(--fl-text);
|
|
font-family: var(--font-sans);
|
|
min-height: 100dvh;
|
|
/* Ruhiges Kino-Ambiente: zwei sehr weiche Lichtkegel im Hintergrund. */
|
|
background-image:
|
|
radial-gradient(60rem 40rem at 12% -8%, color-mix(in oklab, var(--fl-amber) 12%, transparent), transparent 70%),
|
|
radial-gradient(52rem 38rem at 92% 4%, color-mix(in oklab, var(--fl-magenta) 12%, transparent), transparent 68%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--fl-ring);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in oklab, var(--fl-magenta) 40%, transparent);
|
|
color: var(--fl-text);
|
|
}
|
|
|
|
/* Dezente Scrollbar im Kino-Look */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--fl-border-strong) transparent;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Wiederkehrende Bausteine
|
|
-------------------------------------------------------------------------- */
|
|
|
|
@utility fl-gradient-text {
|
|
background-image: var(--fl-gradient-ink);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@utility fl-gradient-bg {
|
|
background-image: var(--fl-gradient);
|
|
}
|
|
|
|
@layer components {
|
|
.fl-card {
|
|
background-color: var(--fl-surface);
|
|
border: 1px solid var(--fl-border);
|
|
border-radius: var(--radius-card, 1rem);
|
|
box-shadow: var(--fl-shadow);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* Posterkarte: sanftes Aufglimmen beim Hover, kein hartes Aufblitzen. */
|
|
.fl-poster-card {
|
|
position: relative;
|
|
border-radius: var(--radius-poster, 0.875rem);
|
|
transition:
|
|
transform 320ms var(--ease-glow),
|
|
box-shadow 320ms var(--ease-glow);
|
|
}
|
|
|
|
.fl-poster-card:hover,
|
|
.fl-poster-card:focus-within {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--fl-glow-strong);
|
|
}
|
|
|
|
.fl-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.75rem;
|
|
padding: 0.55rem 1rem;
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.2;
|
|
transition:
|
|
transform 200ms var(--ease-glow),
|
|
box-shadow 240ms var(--ease-glow),
|
|
background-color 200ms ease,
|
|
border-color 200ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fl-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.fl-btn-primary {
|
|
background-image: var(--fl-gradient);
|
|
color: var(--fl-on-accent);
|
|
box-shadow: var(--fl-glow);
|
|
}
|
|
|
|
.fl-btn-primary:hover:not(:disabled) {
|
|
box-shadow: var(--fl-glow-strong);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.fl-btn-ghost {
|
|
background-color: var(--fl-surface-2);
|
|
color: var(--fl-text);
|
|
border: 1px solid var(--fl-border);
|
|
}
|
|
|
|
.fl-btn-ghost:hover:not(:disabled) {
|
|
border-color: var(--fl-border-strong);
|
|
background-color: color-mix(in oklab, var(--fl-surface-2) 70%, var(--fl-amber) 8%);
|
|
}
|
|
|
|
.fl-input {
|
|
width: 100%;
|
|
background-color: var(--fl-surface-2);
|
|
border: 1px solid var(--fl-border);
|
|
border-radius: 0.75rem;
|
|
padding: 0.6rem 0.85rem;
|
|
color: var(--fl-text);
|
|
transition: border-color 200ms ease, box-shadow 200ms ease;
|
|
}
|
|
|
|
.fl-input::placeholder {
|
|
color: var(--fl-faint);
|
|
}
|
|
|
|
.fl-input:focus {
|
|
outline: none;
|
|
border-color: color-mix(in oklab, var(--fl-magenta) 55%, var(--fl-border));
|
|
box-shadow: 0 0 0 3px color-mix(in oklab, var(--fl-magenta) 22%, transparent);
|
|
}
|
|
|
|
/* Fortschrittsbalken im Signatur-Gradient */
|
|
.fl-progress {
|
|
height: 0.375rem;
|
|
border-radius: 999px;
|
|
background-color: var(--fl-surface-2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fl-progress > span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background-image: var(--fl-gradient);
|
|
transition: width 420ms var(--ease-glow);
|
|
}
|
|
}
|
|
|
|
/* Mikro-Animation: weiches Aufglimmen, z. B. beim Abhaken einer Episode. */
|
|
@keyframes fl-glimmer {
|
|
0% {
|
|
box-shadow: 0 0 0 0 color-mix(in oklab, var(--fl-amber) 55%, transparent);
|
|
background-color: color-mix(in oklab, var(--fl-amber) 16%, transparent);
|
|
}
|
|
60% {
|
|
box-shadow: 0 0 0 10px color-mix(in oklab, var(--fl-magenta) 0%, transparent);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 transparent;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.fl-glimmer {
|
|
animation: fl-glimmer 900ms var(--ease-glow);
|
|
}
|
|
|
|
/* Rückmeldungen fahren von unten herein — kurz und ohne Sprung. */
|
|
@keyframes fl-toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|