Adminator
b835475ef7
Ursache: die transparente ggs-header ueber der Vollbild-Leaflet-Karte fing alle Klicks ab -> Pflanzen unmoeglich. Fix zentral: Container pointer-events:none, nur Bedienelemente pointer-events:auto (Karte darunter bleibt bedienbar). Gilt fuer alle Karten/Canvas-Sims. Farmer: Pille nach links (Vollbreite-Header, Steuerung rechts), Leaflet-Zoom nach unten links verschoben. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
308 lines
8.8 KiB
CSS
308 lines
8.8 KiB
CSS
/* ============================================================
|
|
GGS-HEADER — Einheitliche Sim-Kopfzeile (Entwurf B, „schwebend")
|
|
------------------------------------------------------------
|
|
Wird von ggs-header.js aktiviert (Klasse .ggs-header--float auf
|
|
<header class="ggs-header">). Überführt das vorhandene
|
|
Design-System-Markup in die schwebende Pillen-Optik:
|
|
Kreis-Logo · Titel · Level = EINE Pille, rechts schwebende
|
|
Icon-Buttons, Tempo-/Musik-Panels als Untermenü (30 % transparent).
|
|
Styling ist auf .ggs-header--float gescoped → betrifft nur
|
|
Sims, die die Komponente laden.
|
|
============================================================ */
|
|
|
|
/* Werte 1:1 aus admin-styleguide.html (Entwurf B, von Thomas bestätigt) */
|
|
.ggs-header--float {
|
|
background: transparent !important;
|
|
border-bottom: none !important;
|
|
height: auto !important;
|
|
min-height: 50px;
|
|
gap: .5rem !important;
|
|
padding: .55rem .7rem !important;
|
|
position: relative;
|
|
z-index: 1000;
|
|
flex-wrap: nowrap;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
|
|
Der Sim-Canvas muss dann bis top:0 laufen; Sim-eigene Top-HUDs ggf.
|
|
nach unten schieben (siehe Kofferdetektiv). */
|
|
.ggs-header--float.ggs-header--overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* WICHTIG bei Vollbild-Karten/Canvas: die schwebende Zeile darf die
|
|
Karte darunter nicht blockieren. Der Container ist klick-durchlässig,
|
|
nur die tatsächlichen Bedienelemente fangen Klicks. */
|
|
.ggs-header--float { pointer-events: none; }
|
|
.ggs-header--float .ggs-hpille,
|
|
.ggs-header--float .ggs-btn-ghost,
|
|
.ggs-header--float .ggs-header-actions > button,
|
|
.ggs-header--float .ggs-header-actions > a,
|
|
.ggs-header--float .ggs-tempo,
|
|
.ggs-header--float .ggs-music-wrap { pointer-events: auto; }
|
|
|
|
/* --- Marken-Pille: Kreis-Logo · Titel · Level ---------------- */
|
|
.ggs-header--float .ggs-hpille {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
height: 38px;
|
|
padding: 0 .8rem 0 .3rem;
|
|
background: rgba(255, 255, 255, .96);
|
|
border-radius: 19px;
|
|
box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
|
|
flex: none;
|
|
}
|
|
.ggs-header--float .ggs-header-logo {
|
|
width: 30px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
min-height: 0;
|
|
border-radius: 50%;
|
|
background: #1f4e5a;
|
|
flex: none;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
padding: 0;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.ggs-header--float .ggs-header-logo-icon {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover;
|
|
animation: none !important;
|
|
}
|
|
.ggs-header--float .ggs-header-logo-text { display: none !important; }
|
|
.ggs-header--float .ggs-header-separator { display: none !important; }
|
|
.ggs-header--float .ggs-header-module {
|
|
font-weight: 800;
|
|
color: #1f4e5a;
|
|
font-size: .92rem;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.ggs-header--float .ggs-header-badge {
|
|
font-size: .6rem;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
background: #5a8a5e;
|
|
border-radius: 9px;
|
|
padding: .2rem .5rem;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
/* Live-Tick-Punkt (klima) darf in der Pille mitlaufen */
|
|
.ggs-header--float .ggs-hpille .kw-tick-dot { flex: none; }
|
|
|
|
/* --- Schwebende Icon-Buttons (rechts + Home links) ----------- */
|
|
.ggs-header--float .ggs-btn-ghost,
|
|
.ggs-header--float .ggs-spd,
|
|
.ggs-header--float .ggs-mtrigger {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, .96);
|
|
box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #1f4e5a;
|
|
padding: 0;
|
|
flex: none;
|
|
text-decoration: none;
|
|
transition: background .15s, transform .1s;
|
|
}
|
|
.ggs-header--float .ggs-btn-ghost:hover,
|
|
.ggs-header--float .ggs-spd:hover,
|
|
.ggs-header--float .ggs-mtrigger:hover {
|
|
background: #fff;
|
|
color: #16323a;
|
|
border-radius: 12px;
|
|
transform: translateY(-1px);
|
|
}
|
|
.ggs-header--float .ggs-btn-ghost .ic,
|
|
.ggs-header--float .ggs-mtrigger .ic {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.ggs-header--float .ggs-header-spacer { flex: 1; }
|
|
.ggs-header--float .ggs-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
flex: none;
|
|
}
|
|
/* Bespoke-Sims: Buttons/Links in den Aktionen ohne .ggs-btn-ghost-Klasse
|
|
bekommen trotzdem die schwebende Icon-Button-Optik. */
|
|
.ggs-header--float .ggs-header-actions > button,
|
|
.ggs-header--float .ggs-header-actions > a {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, .96);
|
|
box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #1f4e5a;
|
|
padding: 0;
|
|
flex: none;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
transition: background .15s, transform .1s;
|
|
}
|
|
.ggs-header--float .ggs-header-actions > button:hover,
|
|
.ggs-header--float .ggs-header-actions > a:hover {
|
|
background: #fff;
|
|
transform: translateY(-1px);
|
|
}
|
|
.ggs-header--float .ggs-header-actions > button .ic,
|
|
.ggs-header--float .ggs-header-actions > a .ic {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* --- Tempo-Zustandsbutton (zeigt IMMER den aktuellen Speed) --- */
|
|
.ggs-header--float .ggs-tempo { position: relative; display: inline-flex; }
|
|
.ggs-header--float .ggs-spd {
|
|
flex-direction: column;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
}
|
|
.ggs-header--float .ggs-spd b { font-size: .82rem; }
|
|
.ggs-header--float .ggs-spd small {
|
|
font-size: .5rem;
|
|
font-weight: 700;
|
|
margin-top: 1px;
|
|
color: #4a7c8a;
|
|
letter-spacing: .02em;
|
|
}
|
|
.ggs-header--float .ggs-spd .ic { width: 18px; height: 18px; color: inherit; }
|
|
.ggs-header--float .ggs-spd.act { background: #4a7c8a; color: #fff; }
|
|
.ggs-header--float .ggs-spd.act small { color: #dbe9ee; }
|
|
|
|
/* --- Untermenü-Panels (Tempo links, Musik unten) ------------ */
|
|
.ggs-header--float .ggs-pop {
|
|
display: none;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
height: 38px;
|
|
padding: 0 .3rem;
|
|
background: rgba(255, 255, 255, .7);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 9px rgba(0, 0, 0, .14);
|
|
border: 1px solid rgba(255, 255, 255, .5);
|
|
position: absolute;
|
|
z-index: 1001;
|
|
}
|
|
.ggs-header--float .ggs-tempo.open .ggs-pop--tempo,
|
|
.ggs-header--float .ggs-music-wrap.open .ggs-pop--music { display: inline-flex; }
|
|
/* Tempo: öffnet LINKS vom Button, bleibt offen */
|
|
.ggs-header--float .ggs-pop--tempo {
|
|
right: calc(100% + 6px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
/* Musik: klappt nach UNTEN, schließt nach Song-Auswahl */
|
|
.ggs-header--float .ggs-music-wrap { position: relative; display: inline-flex; }
|
|
.ggs-header--float .ggs-pop--music {
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
gap: .5rem;
|
|
padding: 0 .55rem;
|
|
height: 38px;
|
|
}
|
|
|
|
/* --- Tempo-Segmente im Panel (nutzt bestehende .ggs-speed) --- */
|
|
.ggs-header--float .ggs-pop--tempo .ggs-speed {
|
|
display: inline-flex;
|
|
gap: .25rem;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
}
|
|
.ggs-header--float .ggs-pop--tempo .ggs-speed-btn {
|
|
height: 30px;
|
|
min-width: 36px;
|
|
padding: 0 .6rem;
|
|
border: none !important;
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
font-weight: 800;
|
|
font-size: .82rem;
|
|
color: #4a4a4a;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ggs-header--float .ggs-pop--tempo .ggs-speed-btn:hover { background: rgba(74, 124, 138, .15); color: #1f4e5a; }
|
|
.ggs-header--float .ggs-pop--tempo .ggs-speed-btn.active { background: #4a7c8a; color: #fff; }
|
|
|
|
/* --- Musik-Widget im Panel (bestehendes #ggs-music) --------- */
|
|
.ggs-header--float .ggs-pop--music .ggs-music {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: none;
|
|
padding: 0;
|
|
height: auto;
|
|
}
|
|
.ggs-header--float .ggs-pop--music .ggs-music[hidden] { display: inline-flex !important; }
|
|
/* Musik-Bedienelemente selbst gestalten (auch für Sims ohne design-system.css) */
|
|
.ggs-header--float .ggs-pop--music .ggs-music-sel {
|
|
height: 30px;
|
|
border: 1px solid rgba(0, 0, 0, .12);
|
|
border-radius: 8px;
|
|
padding: 0 .5rem;
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
color: #1f4e5a;
|
|
background: #f7f6f3;
|
|
max-width: 130px;
|
|
}
|
|
.ggs-header--float .ggs-pop--music .ggs-music-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #4a7c8a;
|
|
color: #fff;
|
|
font-size: .8rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: none;
|
|
}
|
|
.ggs-header--float .ggs-pop--music .ggs-music-btn.playing { background: #5a8a5e; }
|
|
.ggs-header--float .ggs-pop--music .ggs-music-vol {
|
|
width: 84px;
|
|
accent-color: #4a7c8a;
|
|
}
|
|
|
|
/* Schmaler auf iPad-Landscape (Platz sparen) */
|
|
@media (max-width: 1100px) {
|
|
.ggs-header--float .ggs-header-actions { gap: .4rem; }
|
|
}
|