Spotify jetzt als kleiner Knopf auf jeder Seite statt grosser Bloecke
- Alle grossen Musik-Abschnitte entfernt (Start, Links, HasiDog, VanVan) - Neuer schwebender Musik-Knopf unten rechts, wie im Analyse-Tool: Klick oeffnet ein Feld mit den Playern von Hasidog und Van-Van - Zentral in main.js gerendert, erscheint dadurch automatisch auf ALLEN Seiten, ohne jede Datei einzeln anzufassen - Player werden erst beim ersten Oeffnen geladen, damit keine Seite unnoetig zwei fremde Einbettungen mitzieht - Schliessen per Knopf oder Escape, kleiner auf dem Handy, im Druck aus Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+88
-33
@@ -950,52 +950,107 @@ footer.site-footer {
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken
|
||||
MUSIK-KNOPF — kleiner schwebender Knopf unten rechts, auf jeder Seite
|
||||
|
||||
Klick öffnet ein Feld mit den Spotify-Playern von Hasidog und Van-Van.
|
||||
Bewusst schwebend (position:fixed) statt als eigener Seitenabschnitt:
|
||||
so ist die Musik überall mit einem Klick erreichbar, nimmt aber nirgends
|
||||
Platz weg. Die Player werden erst beim ersten Öffnen geladen.
|
||||
========================================================================== */
|
||||
.music-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.4rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
.music-widget {
|
||||
position: fixed;
|
||||
right: 22px;
|
||||
bottom: 22px;
|
||||
z-index: 120;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.music-player {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.2rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color .3s ease;
|
||||
}
|
||||
.music-player:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
|
||||
.music-player h3 {
|
||||
margin: 0 0 .2rem;
|
||||
font-size: 1.05rem;
|
||||
.music-toggle {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
flex: none;
|
||||
border-radius: 999px;
|
||||
font-size: 1.45rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .45rem;
|
||||
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));
|
||||
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;
|
||||
}
|
||||
.music-player .music-sub {
|
||||
margin: 0 0 .9rem;
|
||||
font-size: .82rem;
|
||||
.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);
|
||||
}
|
||||
.music-widget.open .music-toggle { transform: rotate(12deg); }
|
||||
|
||||
.music-panel {
|
||||
width: min(330px, calc(100vw - 44px));
|
||||
max-height: min(74vh, 640px);
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.1rem 1.2rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
|
||||
animation: music-panel-in .22s ease-out;
|
||||
}
|
||||
.music-panel[hidden] { display: none; }
|
||||
@keyframes music-panel-in {
|
||||
from { opacity: 0; transform: translateY(10px) scale(.97); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.music-panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .6rem;
|
||||
}
|
||||
.music-panel-head strong { font-size: .95rem; }
|
||||
.music-close {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: .2rem .3rem;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/* Spotify liefert einen eigenen, abgerundeten Rahmen mit — deshalb hier
|
||||
nur Höhe/Breite setzen und nicht doppelt umrahmen. */
|
||||
.music-player iframe {
|
||||
.music-close:hover { color: var(--accent); }
|
||||
.music-artist-label {
|
||||
margin: .9rem 0 .4rem;
|
||||
font-size: .7rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/* Spotify bringt seinen eigenen abgerundeten Rahmen mit — hier nur Größe setzen. */
|
||||
.music-panel iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.music-note {
|
||||
text-align: center;
|
||||
font-size: .8rem;
|
||||
color: var(--text-muted);
|
||||
margin: 1.2rem auto 0;
|
||||
max-width: 56ch;
|
||||
@media (max-width: 620px) {
|
||||
.music-widget { right: 14px; bottom: 14px; }
|
||||
.music-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
|
||||
}
|
||||
@media print { .music-widget { display: none !important; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.music-panel { animation: none; }
|
||||
.music-toggle { transition: none; }
|
||||
}
|
||||
|
||||
/* ---------- Live-Status-Punkt ---------- */
|
||||
|
||||
Reference in New Issue
Block a user