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) */
|
/* Werte 1:1 aus admin-styleguide.html (Entwurf B, von Thomas bestätigt) */
|
||||||
.ggs-header--float {
|
.ggs-header--float {
|
||||||
|
display: flex !important; /* selbsttragend, auch ohne design-system.css */
|
||||||
|
align-items: center;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
|
|||||||
@@ -485,7 +485,7 @@
|
|||||||
===================================================== */
|
===================================================== */
|
||||||
#obs-launcher {
|
#obs-launcher {
|
||||||
position: absolute;
|
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) */
|
z-index: 11; /* über dem UI-Panel (z-index 10) */
|
||||||
}
|
}
|
||||||
#obs-open-btn {
|
#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>
|
<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="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="bgm-toggle" class="icon-btn" title="Hintergrund-Klang an/aus">🎵</button>
|
||||||
<button id="easy-toggle" class="icon-btn" title="Leichte Sprache">📖</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">💡</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">☀️</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>
|
<button id="help-toggle" class="icon-btn" title="Help">❓</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -2167,9 +2167,11 @@ function setHighContrast(on) {
|
|||||||
sunLight.intensity = on ? 2.8 : 2.2;
|
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', () => {
|
themeToggle.addEventListener('click', () => {
|
||||||
const isLight = uiPanel.classList.toggle('light');
|
const isLight = uiPanel.classList.toggle('light');
|
||||||
themeToggle.textContent = isLight ? '🌙' : '☀️';
|
themeToggle.innerHTML = isLight ? _moonSvg : _sunSvg;
|
||||||
setHighContrast(isLight);
|
setHighContrast(isLight);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user