Feinschliff-Spalten + Kopfzeilen-Panels (Placement/Transparenz)

- teacher.html Aktuell-Spalten: Weltkueche '🏆 Punkte' (score), Fluss
  '👥 Einw.' + '🌾 Ernte' (population/food), Busfahrt '📍 Ø km' (avgTapKm).
  (Kofferdetektiv Items-% vertagt: Sim liefert live noch keine Item-Zahl.)
- admin-styleguide.html Kopfzeile: Untermenues 30% transparent (Blur);
  Tempo oeffnet links + bleibt offen, Musik klappt nach unten + schliesst
  nach Song-Auswahl; Toggle per Klick.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-25 13:04:32 +02:00
parent 88e3c09e5c
commit 362aaba883
2 changed files with 8 additions and 4 deletions
+4 -4
View File
@@ -258,7 +258,7 @@
.khz-fhd{height:120px}
.khz-scroll{overflow-x:auto}
/* Aufgeklappte Steuerung */
.khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:#fff;border-radius:12px;box-shadow:0 2px 9px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.06);vertical-align:middle}
.khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:rgba(255,255,255,.7);backdrop-filter:blur(2px);-webkit-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);vertical-align:middle}
.khz-pop .ic{width:16px;height:16px;color:#1f4e5a}
.khz-seg{height:30px;min-width:36px;padding:0 .6rem;border:none;background:transparent;border-radius:8px;font-weight:800;font-size:.82rem;color:#4a4a4a;cursor:pointer;display:flex;align-items:center;justify-content:center}
.khz-seg.on{background:#4a7c8a;color:#fff}
@@ -322,7 +322,7 @@
</div></div>
</div>
<div class="khz-frame-lab">Aufgeklappt · Tempo (Klick auf das Tempo-Icon — nur Echtzeit-Sims)</div>
<div class="khz-frame-lab">Aufgeklappt · Tempo — öffnet LINKS vom Button, bleibt offen (nur Echtzeit-Sims) · 30 % transparent</div>
<div class="khz-pop">
<button class="khz-seg" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
<button class="khz-seg on">1×</button>
@@ -339,7 +339,7 @@
</div>
<p style="font-size:.76rem;color:#6a6a6a;margin:.5rem 0 0">Klick öffnet das Tempo-Panel und lässt es offen bis zum erneuten Klick (Toggle) — genauso beim Musik-Player. Der Button selbst zeigt jederzeit den Speed: <b>1×</b>, <b>2×</b>, <b>8× Auto</b> (z. B. Logistik) oder <b>⏸ Pause</b>. So bleibt der Zustand sichtbar, ohne dass das Panel offen bleiben muss.</p>
<div class="khz-frame-lab">Aufgeklappt · Musikplayer (Klick auf das Musik-Icon)</div>
<div class="khz-frame-lab">Aufgeklappt · Musikplayer — klappt nach UNTEN auf, schließt nach Song-Auswahl · 30 % transparent</div>
<div class="khz-pop khz-music">
<button class="khz-seg on" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
<span class="khz-select"><svg class="ic"><use href="#ic-music"/></svg> Ruhige Klänge <svg class="ic"><use href="#ic-caret"/></svg></span>
@@ -348,7 +348,7 @@
</div>
<div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:1rem">
<b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
<b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. <b>Untermenüs:</b> Tempo öffnet <b>links</b> vom Button und bleibt offen (Zustand steht ohnehin im Button); Musik klappt <b>nach unten</b> auf und schließt nach der Song-Auswahl; beide 30 % transparent hinterlegt als Untermenü-Signal, Toggle per Klick. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
</div>
</div>