Sonnensystem-Header-Fixes: Pille-Breite, obs-launcher, eigene Icons

- Komponente: .ggs-header--float bekommt display:flex (war auf design-
  system.css angewiesen) -> behebt volle-Breite-Pille bei Sims ohne
  design-system (Sonnensystem).
- obs-launcher (Aufgaben/Info) unter den Header (top 64, links 268).
- Eigene SVG-Icons: Leichte-Sprache (Textseite), Lights (Gluehbirne),
  Theme (Sonne/Mond-Umschaltung) statt Emoji.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-25 21:43:30 +02:00
parent 637c058507
commit 085b0b6aa8
2 changed files with 9 additions and 5 deletions
+2
View File
@@ -12,6 +12,8 @@
/* Werte 1:1 aus admin-styleguide.html (Entwurf B, von Thomas bestätigt) */
.ggs-header--float {
display: flex !important; /* selbsttragend, auch ohne design-system.css */
align-items: center;
background: transparent !important;
border-bottom: none !important;
height: auto !important;
+7 -5
View File
@@ -485,7 +485,7 @@
===================================================== */
#obs-launcher {
position: absolute;
top: 12px; left: 304px; /* direkt rechts vom UI-Panel (280 px breit + 12 px Margin) */
top: 64px; left: 268px; /* unter dem Header, rechts vom UI-Panel (244 px + 12 px Margin) */
z-index: 11; /* über dem UI-Panel (z-index 10) */
}
#obs-open-btn {
@@ -824,9 +824,9 @@
<a id="cockpit-link" href="/schueler" class="icon-btn" title="Zurück zur Schülerseite" style="text-decoration:none">🏠</a>
<button id="reset-defaults-toggle" class="icon-btn" title="Standard-Setup wiederherstellen">🔄</button>
<button id="bgm-toggle" class="icon-btn" title="Hintergrund-Klang an/aus">🎵</button>
<button id="easy-toggle" class="icon-btn" title="Leichte Sprache">📖</button>
<button id="light-toggle" class="icon-btn" title="Lights on">💡</button>
<button id="theme-toggle" class="icon-btn" title="Light/dark UI">☀️</button>
<button id="easy-toggle" class="icon-btn" title="Leichte Sprache"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3.5" width="16" height="17" rx="2.5"/><path d="M8 9h8M8 13h8M8 17h4"/></svg></button>
<button id="light-toggle" class="icon-btn" title="Lights on"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 21h4"/><path d="M12 3a6 6 0 0 0-3.8 10.7c.5.4.8 1 .8 1.6V16h6v-.7c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3z"/></svg></button>
<button id="theme-toggle" class="icon-btn" title="Light/dark UI"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.3M12 19.2v2.3M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M2.5 12h2.3M19.2 12h2.3M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7"/></svg></button>
<button id="help-toggle" class="icon-btn" title="Help"></button>
</div>
</header>
@@ -2167,9 +2167,11 @@ function setHighContrast(on) {
sunLight.intensity = on ? 2.8 : 2.2;
}
const _sunSvg = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.3M12 19.2v2.3M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M2.5 12h2.3M19.2 12h2.3M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7"/></svg>';
const _moonSvg = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4 7 7 0 1 0 20 14.5z"/></svg>';
themeToggle.addEventListener('click', () => {
const isLight = uiPanel.classList.toggle('light');
themeToggle.textContent = isLight ? '🌙' : '☀️';
themeToggle.innerHTML = isLight ? _moonSvg : _sunSvg;
setHighContrast(isLight);
});