DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Musik-Knopf wird zum Chamäleon - passt Farben live an jede Seite an

Browse Source 
Bisher kannte der Knopf nur 3 feste Weltfarben (dogfather/hasidog/
spicymedia). Jetzt analysiert main.js (musikKnopfFarbenAnpassen) per
Canvas das tatsächliche Bild jeder einzelnen Seite - Durchschnittsfarbe
plus die kräftigste Farbe darin, als Verlauf - und setzt sie live als
--music-c1/--music-c2 auf den Knopf.

Bildquelle in Prioritätsreihenfolge: 1) scharfes Hero-Banner-Bild,
2) Startseiten-Artwork, 3) Ambiente-Hintergrundbild der Seite. Ohne
Bild fällt der Knopf sauber auf die normale Weltfarbe zurück. Läuft
beim ersten Laden UND nach jedem nahtlosen Seitenwechsel (SPA-Navigation),
damit die Farbe wirklich bei jeder Seite mitwechselt.
This commit is contained in:
DogFatherGit
2026-08-01 11:11:58 +02:00
parent 9d47a1e425
commit d8664e7476
2 changed files with 144 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+14 -9
View File
@@ -1233,9 +1233,12 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
align-items: flex-end;
gap: 12px;
}
/* Musik-Knopf: passt sich wieder der Farbwelt der jeweiligen Seite an
(babyblau auf Dogfather/HasiDog, rot auf Spicy-Media-Seiten) statt
fest halb/halb zu sein. */
/* Musik-Knopf: "Chamäleon" — passt sich per JS (main.js,
musikKnopfFarbenAnpassen) an das tatsächliche Bild der jeweiligen Seite
an (Durchschnitts- + kräftigste Farbe daraus), statt nur 3 feste
Weltfarben zu kennen. --music-c1/--music-c2 werden dafür live per
Canvas-Analyse gesetzt; ohne Bild (oder solange JS noch lädt) fällt der
Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück. */
.music-toggle {
width: 54px;
height: 54px;
@@ -1247,19 +1250,21 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--accent-contrast);
border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 60%, transparent);
background: linear-gradient(135deg, var(--music-c1, var(--accent)), var(--music-c2, var(--accent-2)));
box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
0 0 24px color-mix(in srgb, var(--music-c1, var(--accent)) 35%, transparent);
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease,
background 1.1s ease, border-color 1.1s ease;
}
.music-toggle:hover,
.music-toggle:focus-visible {
transform: translateY(-2px) scale(1.05);
filter: brightness(1.12);
box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
0 0 34px color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
}
.music-widget.open .music-toggle { transform: rotate(12deg); }
.music-toggle span { position: relative; z-index: 2; }