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:
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user