From f4329da1c1626ab00982d4d453e574bd81b4550d Mon Sep 17 00:00:00 2001 From: qcigano Date: Tue, 4 Aug 2026 14:49:55 +0200 Subject: [PATCH] =?UTF-8?q?Verwaltungsseite:=206=20kleine=20verteilte=20Hi?= =?UTF-8?q?ntergrund-Logos=20statt=202=20gro=C3=9Fe=20+=20Custom-Scrollbar?= =?UTF-8?q?=20im=20Shop-Filter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auf ausdrücklichen Wunsch: das rotierende Logo-Wasserzeichen im Hintergrund der Verwaltungs- Hauptseite wirkte als EIN großer zentraler Fleck (zwei große, zentrierte Ebenen). Jetzt sechs kleinere Logos (150-260px statt 950-1500px), über den ganzen Viewport verteilt (obere/mittlere/ untere Zeile, je links und rechts), weiterhin gegenläufig rotierend, jetzt zusätzlich mit einer dritten Markenfarbe (Cyan) neben Gold/Violett für mehr Abwechslung. Reine Markup-/CSS-Änderung. Zusätzlich: die Standard-Browser-Scrollbar im Kategorie-Dropdown des Shop-Filters (schwarz-weiß, wirkte fremd im dunklen Design) durch eine gestylte, schlanke, markenfarbene Verlaufs-Scrollbar ersetzt (Firefox über scrollbar-color/-width, Chrome/Edge/Safari über ::-webkit-scrollbar). Lokal mit wrangler pages dev getestet (beide Änderungen im ausgelieferten CSS bestätigt). Co-Authored-By: Claude Sonnet 5 --- src/pages/verwaltung/index.astro | 17 ++++-- src/styles/global.css | 98 ++++++++++++++++++++++++++------ 2 files changed, 91 insertions(+), 24 deletions(-) diff --git a/src/pages/verwaltung/index.astro b/src/pages/verwaltung/index.astro index f163539..61516fc 100644 --- a/src/pages/verwaltung/index.astro +++ b/src/pages/verwaltung/index.astro @@ -29,14 +29,19 @@ const lang: Locale = "de"; path="/verwaltung/" noindex={true} > - {/* Van's-Logo als großes, sehr dezentes Wasserzeichen im GESAMTEN Seitenhintergrund — fix - positioniert (bleibt beim Scrollen stehen), zwei gegenläufig rotierende Ebenen (gold/violett - eingefärbt), exakt dieselbe CSS-Technik wie auf der Zugangscode-Seite (invert()+sepia()+ - mix-blend-mode:screen), nur als eigenständige Datei nachgebaut, da diese Seite anders als - /verwaltung-code.html ein ganz normaler Astro-Layout-Seiteninhalt mit Scroll ist. Auf - ausdrücklichen Wunsch: die ganze Seite soll sich für VanVan "ultra speziell" anfühlen. */} + {/* Van's-Logo als mehrere kleine, sehr dezente Wasserzeichen, verteilt über den GESAMTEN + Seitenhintergrund — fix positioniert (bleiben beim Scrollen stehen), sechs unterschiedlich + große/schnelle/gegenläufig rotierende Kopien (gold/violett/cyan eingefärbt), exakt dieselbe + CSS-Technik wie auf der Zugangscode-Seite (invert()+sepia()+mix-blend-mode:screen). Auf + ausdrücklichen Wunsch (04.08.2026): statt zwei großer, zentrierter Logos (wirkte wie EIN + großer Fleck) jetzt viele kleine, über die ganze Fläche verstreut. Auf ausdrücklichen + Wunsch: die ganze Seite soll sich für VanVan "ultra speziell" anfühlen. */} + + + +
diff --git a/src/styles/global.css b/src/styles/global.css index fcaab02..a4b7e5c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1078,8 +1078,19 @@ a:focus-visible, button:focus-visible { flex-direction: column; gap: 0.1rem; z-index: 60; + /* Firefox: eigene, schmale, markenfarbene Scrollleiste statt der grauen Standard-Leiste. */ + scrollbar-width: thin; + scrollbar-color: var(--c-accent) transparent; } .cat-filter.open .cat-filter-menu { display: flex; } +/* Chrome/Edge/Safari (WebKit/Blink): dieselbe Wirkung über die proprietären ::-webkit-scrollbar- + Pseudoelemente — dunkle, transparente Spur, schlanker abgerundeter Verlaufs-Balken in den + Markenfarben, der beim Hover/Ziehen heller aufleuchtet, statt der nackten schwarz-weißen + System-Leiste. */ +.cat-filter-menu::-webkit-scrollbar { width: 8px; } +.cat-filter-menu::-webkit-scrollbar-track { background: rgba(244, 241, 247, 0.05); border-radius: 999px; margin-block: 0.3rem; } +.cat-filter-menu::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-accent), #9b7fd6); border-radius: 999px; } +.cat-filter-menu::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #78ddf1, #ad94e0); } .cat-filter-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; } .cat-filter-group:first-of-type { margin-top: 0.2rem; } .cat-filter-group-label { @@ -3181,36 +3192,84 @@ a:focus-visible, button:focus-visible { /* Interne Bestellverwaltung (/verwaltung/) — Status-Kacheln, Filterleiste, Auswertungs-Balken. */ -/* 04.08.2026: Van's-Logo als riesiges, sehr dezentes Wasserzeichen im GESAMTEN Seitenhintergrund - — fix positioniert (bleibt beim Scrollen an Ort und Stelle, läuft "unter" der Seite durch), - zwei gegenläufig rotierende Ebenen in Gold/Violett. Exakt derselbe Einfärbe-Trick wie auf der - Zugangscode-Seite (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem - Grund um, mix-blend-mode:screen lässt den (jetzt schwarzen) ehemals-weißen Kreis komplett - verschwinden, sepia()+saturate()+hue-rotate() färbt die übrig bleibenden (jetzt weißen) Linien - warm ein. z-index -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe) - ganz normal darüber liegt — sichtbar wird das Wasserzeichen nur in den Zwischenräumen. */ +/* 04.08.2026, überarbeitet: Van's-Logo als SECHS kleine, sehr dezente Wasserzeichen, verteilt + über den GESAMTEN Seitenhintergrund — fix positioniert (bleiben beim Scrollen an Ort und + Stelle), jedes rotiert unabhängig um die eigene Mitte, unterschiedliche Größe/Tempo/Richtung/ + Einfärbung für eine organische, nicht-synchrone Wirkung (ursprünglich zwei GROSSE, zentrierte + Ebenen — wirkte wie ein einzelner großer Fleck statt "über die Fläche verstreut", siehe + Vault-Feedback). Exakt derselbe Einfärbe-Trick wie auf der Zugangscode-Seite + (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem Grund um, + mix-blend-mode:screen lässt den (jetzt schwarzen) ehemals-weißen Kreis komplett verschwinden, + sepia()+saturate()+hue-rotate() färbt die übrig bleibenden (jetzt weißen) Linien ein. z-index + -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe) ganz normal + darüber liegt — sichtbar wird jedes Wasserzeichen nur in den Zwischenräumen. */ .verwaltung-logo-bg { position: fixed; - top: 50%; - left: 50%; background: url("/logo.png") center / contain no-repeat; mix-blend-mode: screen; pointer-events: none; z-index: -1; } +/* Oben links, golden, größtes der sechs. */ .verwaltung-logo-bg-1 { - width: min(1500px, 220vw); - height: min(1500px, 220vw); + top: 4%; + left: 3%; + width: min(260px, 55vw); + height: min(260px, 55vw); + filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35); + opacity: 0.08; + animation: verwaltung-logo-spin-1 95s linear infinite; +} +/* Oben rechts, violett. */ +.verwaltung-logo-bg-2 { + top: 10%; + right: 5%; + width: min(190px, 45vw); + height: min(190px, 45vw); + filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15); + opacity: 0.07; + animation: verwaltung-logo-spin-2 130s linear infinite; +} +/* Mitte links, cyan (dritte Markenfarbe), leicht über den Rand hinaus für einen "angeschnittenen" + Effekt. */ +.verwaltung-logo-bg-3 { + top: 46%; + left: -3%; + width: min(220px, 50vw); + height: min(220px, 50vw); + filter: invert(1) sepia(1) saturate(6) hue-rotate(160deg) brightness(1.2); + opacity: 0.06; + animation: verwaltung-logo-spin-1 75s linear infinite; +} +/* Mitte rechts, golden, kleinstes der sechs. */ +.verwaltung-logo-bg-4 { + top: 55%; + right: -2%; + width: min(150px, 40vw); + height: min(150px, 40vw); filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35); opacity: 0.09; - animation: verwaltung-logo-spin-1 110s linear infinite; + animation: verwaltung-logo-spin-2 60s linear infinite; } -.verwaltung-logo-bg-2 { - width: min(950px, 150vw); - height: min(950px, 150vw); +/* Unten links, violett. */ +.verwaltung-logo-bg-5 { + bottom: 6%; + left: 8%; + width: min(210px, 48vw); + height: min(210px, 48vw); filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15); + opacity: 0.07; + animation: verwaltung-logo-spin-1 140s linear infinite; +} +/* Unten rechts, cyan. */ +.verwaltung-logo-bg-6 { + bottom: 3%; + right: 10%; + width: min(175px, 42vw); + height: min(175px, 42vw); + filter: invert(1) sepia(1) saturate(6) hue-rotate(160deg) brightness(1.2); opacity: 0.08; - animation: verwaltung-logo-spin-2 75s linear infinite; + animation: verwaltung-logo-spin-2 110s linear infinite; } @keyframes verwaltung-logo-spin-1 { from { transform: translate(-50%, -50%) rotate(0deg); } @@ -3220,7 +3279,10 @@ a:focus-visible, button:focus-visible { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } } -@media (prefers-reduced-motion: reduce) { .verwaltung-logo-bg-1, .verwaltung-logo-bg-2 { animation: none; } } +@media (prefers-reduced-motion: reduce) { + .verwaltung-logo-bg-1, .verwaltung-logo-bg-2, .verwaltung-logo-bg-3, + .verwaltung-logo-bg-4, .verwaltung-logo-bg-5, .verwaltung-logo-bg-6 { animation: none; } +} @media print { .verwaltung-logo-bg { display: none; } } /* "Kisten" — jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Bestellliste, Bestseller,