/* ═══════════════════════════════════════════════════════════════════════════ bytefret — styles/footer.css ─────────────────────────────────────────────────────────────────────────── Sticky Footer-Cockpit (das Operations-Pult unten): - .autosave (Save-Indicator) + @keyframes spin - #cell-status (D4 Bar · String · Beat live) - .metronome-btn (Base-Klasse für Metronom/Playback/Settings Toggle-Buttons) - Beat-Pulse Animationen + @keyframes metronome-ring/-accent/-flash - A4 Tab-Playback overrides - Metronom vs Playback visuelle Differenzierung - Cell-Playback-Highlights (.cell.tab-playing-col, .bar-num.tab-playing-col) → @media print resets co-located - Notation-Reference (Popover-Content via #notation-help) - footer (sticky glass-bar) + Atem-Pulse + @keyframes footer-active-breath - body.playback-active footer - Footer-Cockpit (.footer-cockpit, .cockpit-{status,actions,mixer,meta}) - body.is-read-only .cockpit-status (read-only hides save-status) - Mixer-Controls (Volume + Sustain + Auto-Scroll Slider) - .link-btn (Footer Feedback-Link, button-as-link) Dependencies: base.css, topbar.css (button defaults), sheet.css (.chip-popover). Cascade: dialogs.css/overlays.css load nach footer.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Autosave indicator ──────────────────────────────────────────────────── */ /* Lebt im Footer-Cockpit (.cockpit-status). Pre-Refactor war's der rechts- ausgerichtete .meta-Container, wo `margin-left: auto` den Right-Push machte — im Cockpit-Flex überflüssig, daher `0`. */ .autosave { margin-left: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--secondary-line); letter-spacing: .06em; font-weight: 500; text-transform: uppercase; transition: color .3s var(--ease); } .autosave .icon { width: 12px; height: 12px; transition: transform .35s var(--ease); } .autosave.saving { color: var(--accent); } .autosave.saving .icon { animation: spin .55s var(--ease); } /* C1 — Quota-Warnung: Autosave-Slot wechselt auf danger-Farbe und blendet das Check-Icon dezent aus (statt ein neues Icon zu mounten — minimal- invasiv, alles bereits-existing). title-attr trägt den ausführlichen Hint. */ .autosave.is-error { color: var(--danger-text); cursor: help; } .autosave.is-error .icon { opacity: .35; } @keyframes spin { from { transform: rotate(-90deg); opacity: .4; } to { transform: rotate(0); opacity: 1; } } /* ─── Cell-Status (D4) — Bar · String · Beat live im Player-Dock ─────────── */ .cell-status { font-size: .72rem; color: var(--text-subtle); letter-spacing: .06em; font-variant-numeric: tabular-nums; font-weight: 500; text-transform: uppercase; min-height: 1em; /* verhindert Layout-Sprung wenn leer */ transition: color .3s var(--ease); } .cell-status:not(:empty)::before { content: '·'; margin-right: .5em; color: var(--border); } /* ─── Metronome / Playback / Settings Buttons ───────────────────────────── .metronome-btn ist die Base-Klasse für alle drei Toggle-Buttons (Metronom, Tab-Playback, Settings). Wohnen jetzt im Footer-Cockpit (.cockpit-actions); Pulse-Animation beim Beat — Pinch-Zoom (--tz) bewusst NICHT angewendet (UI-Control vs. Tab-Geometrie). Globaler `button:focus-visible` (siehe oben) deckt Focus-Ring ab. */ .metronome-btn { position: relative; /* Anker für ::after Ring-Pulse */ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-sunken); color: var(--text-muted); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); } .metronome-btn:hover:not([disabled]) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .metronome-btn:active:not([disabled]) { transform: scale(.94); /* taktiles Click-Feedback */ } /* Playing state — gefüllter Accent als klares „ON"-Signal. Bessere Unterscheidung als nur Border-Color-Flip. */ .metronome-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); box-shadow: 0 0 0 1px var(--accent-soft), 0 1px 6px var(--accent-glow); } .metronome-btn[aria-pressed="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .metronome-btn[disabled] { opacity: .4; cursor: not-allowed; } .metronome-btn .metronome-icon { width: 13px; height: 13px; display: block; pointer-events: none; } /* SVG-Icon-Toggle via aria-pressed: Play→Stop. */ .metronome-btn .ico-stop { display: none; } .metronome-btn[aria-pressed="true"] .ico-play { display: none; } .metronome-btn[aria-pressed="true"] .ico-stop { display: inline; } /* ─── Beat-Pulse: Audio-Ripple-Ring + sanfter Brightness-Pop ─────────────── Statt Scale-Bounce (zu cartoonig) pulsiert ein Ring nach außen wie eine Schallwelle. Pseudo-Element ::after expandiert von 0px Border zu 3-5px und fadet gleichzeitig auf 0 Opacity. Accent-Beat (Bar-Anfang) hat etwas kräftigeren, längeren Ring. Plus: ein dezenter brightness-Flash auf dem Button selbst — nur in Playing-State sichtbar (gefüllter Accent), gibt rhythmisches Feedback ohne Layout-Shift. KEIN scale-Bounce mehr. Class-restart-trick (JS: remove → reflow → add) erzwingt animation-restart bei jedem Beat. */ .metronome-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 0 solid var(--accent); opacity: 0; pointer-events: none; box-sizing: border-box; } @keyframes metronome-ring { 0% { opacity: .55; border-width: 0; inset: 0; } 100% { opacity: 0; border-width: 2px; inset: -4px; } } @keyframes metronome-ring-accent { 0% { opacity: .75; border-width: 0; inset: 0; } 100% { opacity: 0; border-width: 3px; inset: -7px; } } .metronome-btn.metronome-pulse::after { animation: metronome-ring 220ms cubic-bezier(.2, .65, .35, 1); } .metronome-btn.metronome-pulse.metronome-accent::after { animation: metronome-ring-accent 320ms cubic-bezier(.2, .65, .35, 1); } /* Brightness-Flash auf dem Button selbst — nur sichtbar wenn Playing (gefüllter Accent-Background). Im Stopped-State (transparenter Button) wäre filter:brightness sowieso wirkungslos. */ @keyframes metronome-flash { 0% { filter: brightness(1.25); } 100% { filter: brightness(1); } } .metronome-btn[aria-pressed="true"].metronome-pulse { animation: metronome-flash 140ms ease-out; } .metronome-btn[aria-pressed="true"].metronome-pulse.metronome-accent { animation: metronome-flash 200ms ease-out; } @media (prefers-reduced-motion: reduce) { .metronome-btn.metronome-pulse, .metronome-btn.metronome-pulse::after { animation: none; } } /* Touch-Targets: 44px auf coarse-Pointer (WCAG 2.2 SC 2.5.8). Icon bleibt proportional kleiner — der Button-Padding wächst mit. */ @media (pointer: coarse) { .metronome-btn { width: 44px; height: 44px; border-radius: 10px; } .metronome-btn .metronome-icon { width: 16px; height: 16px; } } /* ─── A4 Tab-Playback (Stage 11) ────────────────────────────────────────── Play-Button (#playback-toggle) und Settings-Button (#playback-settings) nutzen die existing .metronome-btn Base-Klasse (~25 CSS-Regeln greifen unverändert). Pulse-Klassen (.metronome-pulse, .metronome-accent) bleiben metronom-spezifisch und werden nie auf .playback-btn getriggert. Print- Hide im Print über die globale `footer { display: none }`-Regel (siehe unten). */ /* ─── Metronom vs Playback — visuelle Differenzierung ───────────────────── Default-`.metronome-btn[aria-pressed="true"]` füllt mit `--accent` (orange). Beide Buttons (Metronom + Playback-Toggle) nutzten dieselbe Base-Klasse → im Idle-State unterscheidbar nur über die Icons (jetzt Pendel vs. Play- Dreieck), im Active-State unterscheidbar über die Farbe: - Playback-Toggle: orange (--accent) — primär-Aktion, „Hauptplay" - Metronom-Toggle: bronze (--secondary) — sekundäres Werkzeug Bronze passt thematisch (warmes Werkzeug-Symbol) und nutzt das vorhandene `--secondary`-Token aus dem Brand-System. Beide Tokens sind Light + Dark theme-aware. */ #metronome-toggle[aria-pressed="true"] { background: var(--secondary); border-color: var(--secondary); color: var(--accent-on); /* Soft-Outer-Glow analog Accent-Variante, aber in Bronze. */ box-shadow: 0 0 0 1px var(--secondary-soft), 0 1px 6px var(--secondary-soft); } #metronome-toggle[aria-pressed="true"]:hover { background: var(--secondary-line); border-color: var(--secondary-line); } /* Hover im Idle-State (nicht active): bronze statt orange — konsistent. `:not([aria-pressed="true"])` schließt Active-Hover (oben) aus. */ #metronome-toggle:hover:not([disabled]):not([aria-pressed="true"]) { background: var(--secondary-soft); border-color: var(--secondary); color: var(--secondary); } /* Pulse-Ring auf Metronom-Beats: Border-Color von default `--accent` auf `--secondary` umstellen, damit der Beat-Ring zur Active-Bronze passt. */ #metronome-toggle::after { border-color: var(--secondary); } /* ARIA-Live-Container für "Playing bar N" — visuell unsichtbar, von Screenreader gelesen. Standard a11y-pattern (sr-only äquivalent). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Edit-Lock während Playback (P6-W1, 3-Schicht-Defense Layer 1 — CSS). Cells werden visuell gedimmt + pointer-events blockiert. Section/Chord/ Title-Inputs bleiben editierbar (andere Klassen, nicht .cell). */ .playback-active .cell { pointer-events: none; opacity: 0.85; cursor: not-allowed; } .playback-active .cell:focus { outline: none; } /* Playhead-Highlight (Schritt 7). Wird vom rAF-Loop per classList.toggle gesetzt, mit pulseQueue-Pattern analog metronome.js. P11-W1 Spezifität: muss .cell.bar-selected und .cell.bar-active overrulen (beide 0.0.2). Daher mehrstufige Selektoren statt simpler .tab-playing-col. Box-shadow inset zusätzlich zum background → bleibt sichtbar auch wenn .bar-selected den Background hält. */ .cell.tab-playing-col, .bar-num.tab-playing-col { background: var(--accent-soft, rgba(255, 200, 100, 0.25)); box-shadow: inset 0 0 0 2px var(--accent, #d49a3a); transition: background 0.08s linear, box-shadow 0.08s linear; } /* Wenn Cell sowohl bar-selected als auch tab-playing-col hat: Playhead gewinnt visuell (background-Mix wäre verwirrend). */ .cell.bar-selected.tab-playing-col { background: var(--accent-soft); } /* Print-Reset: Playhead-Highlight darf nicht im Druck landen (User öffnet Print-Dialog während Playback). P19-W1: zusätzlich opacity-Reset für Edit-Lock-Cells — sonst druckt User die Cells mit 85 % Opacity. */ @media print { .cell.tab-playing-col, .bar-num.tab-playing-col, .cell.bar-selected.tab-playing-col { background: transparent !important; box-shadow: none !important; } .playback-active .cell { opacity: 1 !important; cursor: auto !important; } } /* ─── Notation-Reference (Popover-Content, geöffnet via #notation-help) ──── Pre-Refactor lebte das als langer permanenter Text-Block in der Footer- Info-Zeile. Jetzt hidden in #notation-ref-source unten am body, wird per buildNotationRefPopover() in den Popover gehängt. */ #notation-ref-source { display: none !important; } .notation-ref { display: flex; flex-direction: column; gap: .65rem; min-width: 14rem; max-width: 22rem; text-align: left; } .notation-ref-section { display: flex; flex-direction: column; gap: .35rem; } .notation-ref-heading { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; } .notation-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .25rem .65rem; font-size: .75rem; color: var(--text-muted); } .notation-ref-grid > span { display: inline-flex; align-items: center; gap: .35rem; } .notation-ref-label { color: var(--text-muted); font-size: .75rem; } .notation-ref .kbd-hints { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; } .notation-ref code, .notation-ref kbd { display: inline-block; background: var(--bg-sunken); border: 1px solid var(--border-soft); padding: 1px 6px; margin: 0; border-radius: 3px; color: var(--secondary-line); font-size: .7rem; font-family: "JetBrains Mono", monospace; line-height: 1.4; } .notation-ref kbd { color: var(--text); border-bottom-width: 2px; border-color: var(--border-soft) var(--border-soft) var(--border-strong) var(--border-soft); font-size: .65rem; min-width: 1.2rem; text-align: center; } /* ─── Footer (sticky glass-bar, single-row Cockpit) ────────────────────────── Footer ist jetzt EIN Streifen mit vier Sektionen: STATUS · MIXER · TRANSPORT · META. Die ehemalige zweite Info-Zeile (Trust + Legal-Links) ist aufgelöst: Trust-Statement lebt im Welcome-Toast (Brand-Erstkontakt), Legal-Links sind in einem ⋯-Menü-Popover am rechten Cockpit-Ende. Active-Playback-Edge-Glow: subtiler 4px-Akzent-Stripe links via inset box-shadow, wenn body.playback-active. Atem-Pulse-Animation darunter. Ambient REC-LED-Feeling, kein Geblinke. */ footer { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; padding: 0 1.25rem; padding-bottom: env(safe-area-inset-bottom); color: var(--text-muted); font-size: .72rem; border-top: 1px solid var(--border-soft); background: var(--bg-footer); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 4px 0 0 0 transparent; transition: box-shadow .35s var(--ease); } /* Active-Playback Atem-Pulse — 2s ease-in-out langsamer Wechsel zwischen --accent und --accent-hover. Wirkt wie eine atmende REC-LED am Cockpit: ambient State-Feedback, nichts nervös-blinkendes. Statisches Fallback (`box-shadow: inset 4px 0 0 0 var(--accent)`) kommt unter @media reduced- motion zum Tragen — via animation:none überlebt der Static-State. */ body.playback-active footer { box-shadow: inset 4px 0 0 0 var(--accent); animation: footer-active-breath 2s ease-in-out infinite; } @keyframes footer-active-breath { 0%, 100% { box-shadow: inset 4px 0 0 0 var(--accent); } 50% { box-shadow: inset 4px 0 0 0 var(--accent-hover); } } @media (prefers-reduced-motion: reduce) { body.playback-active footer { animation: none; } } /* (Pre-Refactor existierten hier `footer em { color: --secondary-line }` und `.trust-line em::before { content: "↻"/"⊘"/"◇" }` für die Trust- Statement-Badges in der Footer-Info-Zeile. Trust-Line lebt jetzt nur noch im Welcome-Toast — die Footer-em/Trust-Selektoren sind entfallen.) */ /* (Pre-Refactor — chronologisch: Wide-Screen-Grid für die Footer-Info-Zeile mit Trust links / Notation Mitte / Legal rechts → vereinfacht auf flex space-between als Notation hinter ⌨ Icon-Popover wanderte → komplett entfallen mit dem Single-Row-Cockpit-Refactor: Footer ist jetzt EIN Strip mit vier Sektionen (Status · Mixer · Transport · Meta), siehe weiter unten Block `.footer-cockpit`.) */ /* ─── Footer-Cockpit ────────────────────────────────────────────────────── Single-Row Operations-Bar mit vier Sektionen (Status · Mixer · Transport · Meta), getrennt durch Hairline-Trenner. Pattern wie die Status-Bar in VSCode/Figma oder die Transport-Strip in einem DAW: oben ist das Sheet (lesen), unten ist das Cockpit (bedienen). Typografische Hierarchie statt Background-Differenzierung: - STATUS (links): --text-subtle, leise — Glance-Info - MIXER (mid-left): --text-muted, Mittelton — Aktion-bereit - TRANSPORT (mid-right): voll, Akzent-active — visueller Schwerpunkt - META (rechts): --text-subtle, leise — selten gebraucht So fließt das Auge automatisch von leise → laut → leise mit dem Play- Button als Anker rechts der Mitte. Frühere Iterationen: floating-pill → Sticky-Sub-Toolbar oben → 2-zeiliger Footer (Cockpit + Info). Trust-Line lebt jetzt im Welcome-Toast (Brand- Erstkontakt), Legal-Links im ⋯-Meta-Popover — eine einzige Operations- Zeile, halbierte Footer-Höhe. */ .footer-cockpit { display: flex; flex: 1 1 auto; align-items: center; gap: 1rem; padding: .5rem 0; } .cockpit-status { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; color: var(--text-subtle); } .cockpit-mixer { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; } .cockpit-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; } .cockpit-meta { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; color: var(--text-subtle); flex-wrap: wrap; } /* Hairline-Trenner zwischen Sektionen — wirken wie Mixer-Channel-Trenner, nicht wie harte Box-Borders. align-self:stretch + margin:.15rem 0 → Border ist ~80% der Cockpit-Höhe, oben+unten je 2-3px Luft. */ .cockpit-status + .cockpit-mixer, .cockpit-mixer + .cockpit-actions, .cockpit-actions + .cockpit-meta { padding-left: 1rem; border-left: 1px solid var(--border-soft); align-self: stretch; margin: .15rem 0; } /* Im ehemaligen .meta-Container brauchte .autosave `margin-left: auto` für den Right-Push. Im Cockpit übernimmt das Layout die Aufteilung. */ .cockpit-status #autosave { margin-left: 0; } /* ─── Mixer-Controls (Volume + Sustain Slider, Auto-Scroll Toggle) ──────── */ .mixer-control { display: flex; align-items: center; gap: .35rem; cursor: pointer; padding: .15rem .25rem; border-radius: 4px; transition: background .15s var(--ease); } .mixer-control:hover { background: var(--bg-sunken); } .mixer-icon { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; transition: color .15s var(--ease); } .mixer-control:hover .mixer-icon { color: var(--text); } /* Slider — kompakt, accent-thumb */ .mixer-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 70px; height: 4px; background: var(--bg-sunken); border-radius: 2px; outline: none; cursor: pointer; margin: 0; border: 1px solid var(--border-soft); } .mixer-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; cursor: pointer; border: none; transition: transform .1s var(--ease); } .mixer-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); } .mixer-control input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; border: none; cursor: pointer; } .mixer-control input[type="range"]:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); } .mixer-control input[type="range"]:disabled, .mixer-toggle:disabled { opacity: .4; cursor: not-allowed; } /* Auto-Scroll-Toggle als Icon-Button (Pendant zu den Slidern in Größe) */ .mixer-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text-muted); transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .mixer-toggle:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text); } .mixer-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); } .mixer-toggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); } .mixer-toggle .mixer-icon { width: 16px; height: 16px; } @media (pointer: coarse) { .mixer-toggle { width: 36px; height: 36px; } .mixer-toggle .mixer-icon { width: 18px; height: 18px; } } /* Cockpit-Meta-Links (Notation · Imprint · Privacy · Feedback): Text-Links und Middot-Separators. Notation + Feedback sind