diff --git a/App/assets/css/ggs-header.css b/App/assets/css/ggs-header.css index 4449d29..6c31649 100644 --- a/App/assets/css/ggs-header.css +++ b/App/assets/css/ggs-header.css @@ -23,6 +23,16 @@ flex-wrap: nowrap; } +/* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …). + Der Sim-Canvas muss dann bis top:0 laufen; Sim-eigene Top-HUDs ggf. + nach unten schieben (siehe Kofferdetektiv). */ +.ggs-header--float.ggs-header--overlay { + position: absolute; + left: 0; + right: 0; + top: 0; +} + /* --- Marken-Pille: Kreis-Logo · Titel · Level ---------------- */ .ggs-header--float .ggs-hpille { display: flex; @@ -61,6 +71,8 @@ font-size: .92rem; white-space: nowrap; line-height: 1; + margin: 0; + padding: 0; } .ggs-header--float .ggs-header-badge { font-size: .6rem; @@ -115,6 +127,33 @@ gap: .5rem; flex: none; } +/* Bespoke-Sims: Buttons/Links in den Aktionen ohne .ggs-btn-ghost-Klasse + bekommen trotzdem die schwebende Icon-Button-Optik. */ +.ggs-header--float .ggs-header-actions > button, +.ggs-header--float .ggs-header-actions > a { + 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; + font-size: 17px; + line-height: 1; + transition: background .15s, transform .1s; +} +.ggs-header--float .ggs-header-actions > button:hover, +.ggs-header--float .ggs-header-actions > a:hover { + background: #fff; + transform: translateY(-1px); +} /* --- Tempo-Zustandsbutton (zeigt IMMER den aktuellen Speed) --- */ .ggs-header--float .ggs-tempo { position: relative; display: inline-flex; } diff --git a/App/assets/js/ggs-header.js b/App/assets/js/ggs-header.js index 6c7ac62..d74cd34 100644 --- a/App/assets/js/ggs-header.js +++ b/App/assets/js/ggs-header.js @@ -70,7 +70,7 @@ } return null; } - var SOUND_IDS = ['btn-sound', 'btn-mute', 'btnVoiceToggle', 'btnAudioToggle', 'btnAudio', 'btn-ton', 'btn-audio']; + var SOUND_IDS = ['btn-sound', 'btn-mute', 'btnVoiceToggle', 'btnAudioToggle', 'btnAudio', 'audio-toggle', 'btnSound', 'btn-ton', 'btn-audio']; var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart']; var HELP_IDS = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe']; @@ -94,6 +94,7 @@ injectSprite(); header.setAttribute('data-ggs-enhanced', '1'); header.classList.add('ggs-header--float'); + if (opts.overlay || header.getAttribute('data-ggs-overlay') === '1') header.classList.add('ggs-header--overlay'); var q = function (sel) { return header.querySelector(sel); }; var homeHref = opts.home || header.getAttribute('data-ggs-home') || '/schueler'; @@ -108,10 +109,19 @@ pille.className = 'ggs-hpille'; if (logo) { logo.parentNode.insertBefore(pille, logo); - pille.appendChild(logo); } else { header.insertBefore(pille, header.firstChild); + // Fallback: Kreis-Logo erzeugen, falls die Sim keins im Header hat + logo = document.createElement('a'); + logo.className = 'ggs-header-logo'; + logo.setAttribute('href', homeHref); + var limg = document.createElement('img'); + limg.className = 'ggs-header-logo-icon'; + limg.src = opts.logo || header.getAttribute('data-ggs-logo') || '/assets/img/bildLogo.png'; + limg.alt = ''; + logo.appendChild(limg); } + pille.appendChild(logo); var mod = q('.ggs-header-module'); if (mod) pille.appendChild(mod); var badges = header.querySelectorAll('.ggs-header-badge'); for (var i = 0; i < badges.length; i++) pille.appendChild(badges[i]); diff --git a/App/sims/farmer/game.html b/App/sims/farmer/game.html index e40d1a3..8a3b300 100644 --- a/App/sims/farmer/game.html +++ b/App/sims/farmer/game.html @@ -8,6 +8,9 @@ + + +