Einheitliche Sim-Kopfzeile (Entwurf B) als Komponente + Lizenz-Datenmodell
- ggs-header.css/.js: schwebende Pillen-Kopfzeile aus vorhandenem .ggs-header-Markup (Kreis-Logo/Titel/Level als eine Pille, eigene SVG-Icons, Tempo-Panel links + Zustandsbutton, Musik-Panel unten, 30% transparente Untermenues, Glossar target=_blank, Lehrplan raus). Enhance-Ansatz: Spiel-Logik (IDs/Klassen, data-speed) bleibt unberuehrt. - Eingebaut in Klima 2D/3D, Fluss, Logistik (Auto-Tempo), Energiemanager, Kofferdetektiv 3D. - admin-licenses.html: Datenmodell-Sektion (licenses-Tabelle, Lebenszyklus Generiert->Eingeloest->Zugewiesen, Beziehungen, Jahr->Schuljahr->Code). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
border-radius: 50%;
|
||||
background: #1f4e5a;
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* --- 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; }
|
||||
|
||||
/* Schmaler auf iPad-Landscape (Platz sparen) */
|
||||
@media (max-width: 1100px) {
|
||||
.ggs-header--float .ggs-header-actions { gap: .4rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user