/* ───────────────────────────────────────────────────────────── GD Template Bar – Stylesheet Die Leiste selbst ist optisch identisch zur GD Filterleiste. Alles, was sich beide teilen (Flex-Reihe, runde Schaltflächen, Beschriftungen), steht weiterhin in gqa-filter-bar.css — diese Datei wird zusätzlich geladen. WICHTIG: Hier steht bewusst KEIN pauschales `.gqa-template-bar *`-Reset wie bei der Filterleiste. Der Inhalt kommt aus einer beliebigen Vorlage, und ein pauschales `margin: 0; padding: 0` würde deren Abstände plattmachen. ───────────────────────────────────────────────────────────── */ .gqa-template-bar-wrapper { margin: 0; padding: 0; } /* ── Leiste ─────────────────────────────────────────────────── */ .gqa-template-bar { width: 100%; /* Rahmen und Innenabstand rechnen in die 100% hinein – sonst ragt die Leiste bei voller Breite über den Viewport hinaus. */ box-sizing: border-box; background-color: rgba(28, 28, 30, 0.85); border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 20px 20px 0 0; --gqa-padding-v: 6px; padding-top: var(--gqa-padding-v, 6px); padding-bottom: calc(var(--gqa-padding-v, 6px) + env(safe-area-inset-bottom, 0px)); padding-left: 6px; padding-right: 6px; z-index: 9998; overflow: visible; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .gqa-template-bar[data-position="fixed"] { position: fixed; bottom: var(--gqa-bottom-offset, 0px); left: 0; right: 0; } .gqa-template-bar[data-position="sticky"] { position: sticky; bottom: var(--gqa-bottom-offset, 0px); left: 0; right: 0; } .gqa-template-bar[data-position="relative"] { position: relative; } .gqa-template-bar.has-blur { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* Im Querformat gibt es keinen Home-Indicator – der Safe-Area-Abstand unten würde die Leiste sonst unnötig hoch machen. */ @media (orientation: landscape) { .gqa-template-bar.gqa-template-bar { padding-bottom: var(--gqa-padding-v, 6px); } } /* ── Inhaltsbereich ─────────────────────────────────────────── */ .gqa-template-bar-content { --gqa-template-align: stretch; display: flex; flex-direction: column; align-items: var(--gqa-template-align, stretch); justify-content: center; width: 100%; min-width: 0; } /* Die Breite steuert allein --gqa-template-align (align-items): "stretch" füllt die Leiste, die übrigen Werte lassen die Vorlage ihre natürliche Breite behalten. Deshalb hier bewusst kein width: 100%. */ .gqa-template-bar-content > * { min-width: 0; } /* ── Inhaltsbreite ──────────────────────────────────────────── */ .gqa-template-bar.is-fit-content { width: fit-content; width: -moz-fit-content; min-width: unset; border-radius: 20px; } .gqa-template-bar.is-fit-content[data-position="fixed"] { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--gqa-bottom-offset, 0px) + 12px); } .gqa-template-bar.is-fit-content[data-position="sticky"] { left: 50%; transform: translateX(-50%); } .gqa-template-bar.is-fit-content .gqa-template-bar-content { width: auto; } /* ── Ausgelagerte Off-Canvas-Panels ─────────────────────────── */ /* gqa-template-bar.js hängt Off-Canvas-Panels aus der Leiste ans Ende von (siehe Kommentar dort: fixed + backdrop-filter erzeugen sonst einen Containing Block und das Panel klebt in der Leiste). Der Aufnahme-Wrapper darf dabei keinen eigenen Kasten aufspannen. */ .gqa-offcanvas-host { position: static; width: 0; height: 0; } /* ── In der Reihe mit den runden Schaltflächen ──────────────── */ /* Dort positionieren sich Leiste und Schaltflächen nicht mehr selbst. */ .gqa-filter-row .gqa-template-bar[data-position] { position: relative; left: auto; right: auto; bottom: auto; transform: none; } .gqa-filter-row .gqa-template-bar:not(.is-fit-content) { flex: 1 1 auto; min-width: 0; }