/** * Festival Manager — Meldungsleiste (öffentlich) * * Kurzfristige Betriebsinfos: „Rathausplatz überfüllt", „Gewitter — Bühnen * pausieren", „Entwarnung". Die Leiste sitzt zuoberst im (wp_body_open) * oder dort, wo [festival_alerts] steht. * * Bewusst semantische Farben statt Markenorange: eine Unwetterwarnung darf * nicht wie ein Werbebanner aussehen. Die Farbwerte spiegeln * Domain\AlertSeverity::color() — beide Seiten zusammen ändern. * * @package FestivalManager * @since 4.7.0 */ .fm-alerts { --fm-alert-bg: #0369a1; --fm-alert-fg: #fff; --fm-alert-edge: rgba(0, 0, 0, .18); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; position: relative; z-index: 900; width: 100%; } .fm-alerts[hidden] { display: none !important; } .fm-alerts__list { display: flex; flex-direction: column; } /* ── Position ──────────────────────────────────────────── 'top' (Default) klebt oben — dort erwartet man eine Warnung. Damit sie nicht hinter einer fixierten Menüleiste liegt, misst das Script deren Unterkante und setzt sie in --fm-alerts-top; der Seiteninhalt rückt um die Leistenhöhe nach. 'bottom' klebt am unteren Bildschirmrand (kollidiert mit nichts). 'inline' bleibt im Seitenfluss — der Shortcode an seiner Stelle. */ .fm-alerts--top { position: fixed; top: var(--fm-alerts-top, 0px); left: 0; right: 0; z-index: 9990; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); } /* Der Seiteninhalt rückt um die Leistenhöhe nach; die fixierten Kopfleisten des Themes setzt das Script zusätzlich um dieselbe Höhe tiefer. Bewusst `body`-Padding statt `html`-Margin: WordPress setzt für die Adminbar `html { margin-top: 32/46px !important }` — dagegen käme die Regel nicht an, und eingeloggt läge die Leiste über dem Inhalt. */ html.fm-has-alerts-top body { padding-top: var(--fm-alerts-height-top, 0px); } .fm-alerts--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; box-shadow: 0 -2px 12px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom, 0px); } .fm-alerts--bottom .fm-alert { border-bottom: 0; border-top: 1px solid var(--fm-alert-edge); } /* Platz am Seitenende freihalten, damit die Leiste den Footer nicht dauerhaft überdeckt. Die Höhe meldet das Poll-Script. */ html.fm-has-alerts-bottom body { padding-bottom: var(--fm-alerts-height-bottom, 0px); } /* ── Einzelne Meldung ───────────────────────────────────── */ .fm-alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--fm-alert-bg); color: var(--fm-alert-fg); border-bottom: 1px solid var(--fm-alert-edge); line-height: 1.4; } .fm-alert--clear { --fm-alert-bg: #15803d; } .fm-alert--info { --fm-alert-bg: #0369a1; } .fm-alert--warning { --fm-alert-bg: #b45309; } .fm-alert--critical { --fm-alert-bg: #b91c1c; } /* Dringendes bekommt einen ruhigen Puls — auffällig, aber nicht als Dauerblinken (Barrierefreiheit, und es steht ggf. stundenlang da). */ .fm-alert--critical .fm-alert__icon { animation: fm-alert-pulse 2.4s ease-in-out infinite; } @keyframes fm-alert-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .fm-alert--critical .fm-alert__icon { animation: none; } } .fm-alert__icon { flex: 0 0 auto; font-size: 20px; line-height: 1.2; } .fm-alert__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fm-alert__headline { margin: 0; font-size: 15px; font-weight: 700; color: inherit; } .fm-alert__location { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; } .fm-alert__title { color: inherit; } .fm-alert__message { margin: 0; font-size: 14px; color: inherit; opacity: .95; } .fm-alert__link { align-self: flex-start; margin-top: 2px; color: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .fm-alert__link:hover, .fm-alert__link:focus { color: inherit; opacity: .85; } /* Schliessen — Touch-Ziel mind. 40px, die Leiste wird am Fest am Handy bedient. */ .fm-alert__close { flex: 0 0 auto; width: 40px; height: 40px; margin: -8px -8px -8px 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; opacity: .8; } .fm-alert__close:hover, .fm-alert__close:focus-visible { background: rgba(255, 255, 255, .18); opacity: 1; } .fm-alert__close:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } /* ── Mobil ──────────────────────────────────────────────── */ @media (max-width: 640px) { .fm-alert { gap: 10px; padding: 10px 12px; } .fm-alert__headline { font-size: 14px; } .fm-alert__message { font-size: 13px; } /* Ort auf eigene Zeile, aber nur so breit wie sein Text */ .fm-alert__location { display: inline-block; margin: 0 0 2px; } .fm-alert__title { display: block; } } /* Verweis auf die Statusseite, wenn mehr Meldungen laufen als Platz haben */ .fm-alerts__more { display: block; padding: 10px 16px; background: var(--fm-alert-bg, #1A0A00); color: var(--fm-alert-fg, #fff); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; text-align: center; } .fm-alerts__more:hover, .fm-alerts__more:focus { color: var(--fm-alert-fg, #fff); opacity: .9; }