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

Musik-Knopf bekommt überall den animierten Polarlicht-Stil

Browse Source 
Bisher hatte der Chamäleon-Musik-Knopf nur einen einfachen, statischen
Farbverlauf - jetzt läuft er wie der Bewerben-Knopf: dunkler Grund +
wandernde, weichgezeichnete Farbwolken + durchlaufender Lichtschimmer
(wiederverwendete @keyframes btn-aurora/btn-shimmer). Die Farben kommen
weiterhin live per Canvas-Analyse aus dem Seitenbild (--music-c1/-c2).
Auf Start-/Bewerben-Seiten überschreibt der bestehende Block die Farben
weiterhin fest auf die Bewerben-Palette (höhere Selektor-Spezifität).
This commit is contained in:
DogFatherGit
2026-08-01 13:18:40 +02:00
parent 6737354075
commit 060f6a8fe6
1 changed files with 43 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+43 -10
View File
@@ -1282,13 +1282,20 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
align-items: flex-end;
gap: 12px;
}
/* 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. */
/* Musik-Knopf: gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste
(dunkler Grund + wandernde, weichgezeichnete Farbwolken + durchlaufender
Lichtschimmer) — aber mit den Chamäleon-Farben der jeweiligen Seite statt
der festen Regenbogen-Palette. "Chamäleon" heißt: main.js
(musikKnopfFarbenAnpassen) liest per Canvas das tatsächliche Bild der
Seite aus (Durchschnitts- + kräftigste Farbe daraus) und setzt
--music-c1/--music-c2 live. Ohne Bild (oder solange JS noch lädt) fällt
der Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück.
Auf der Startseite und den Bewerben-Seiten überschreibt ein eigener Block
weiter unten die Farben fest auf die Bewerben-Palette (siehe dort). */
.music-toggle {
position: relative;
isolation: isolate;
overflow: hidden;
width: 54px;
height: 54px;
flex: none;
@@ -1301,12 +1308,35 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
cursor: pointer;
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)));
background: #0b0e14;
border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
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;
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color 1.1s ease;
}
.music-toggle::before {
content: "";
position: absolute;
inset: -50%;
z-index: 0;
background:
radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--music-c1, var(--accent)) 92%, transparent), transparent 58%),
radial-gradient(circle at 75% 72%, color-mix(in srgb, var(--music-c2, var(--accent-2)) 92%, transparent), transparent 58%);
filter: blur(7px) saturate(1.3);
animation: btn-aurora 10s ease-in-out infinite alternate;
transition: background 1.1s ease;
}
.music-toggle::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 999px;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
background-size: 240% 100%;
mix-blend-mode: overlay;
animation: btn-shimmer 5s linear infinite;
pointer-events: none;
}
.music-toggle:hover,
.music-toggle:focus-visible {
@@ -1317,6 +1347,9 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
}
.music-widget.open .music-toggle { transform: rotate(12deg); }
.music-toggle span { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.music-toggle::before, .music-toggle::after { animation: none; }
}
/* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf
dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste