/* ============================================================================= * Mobil-Topleiste · Neuordnung nach App-Bar-Konvention (Telefon, Klasse `compact`) * * Ausgangslage: mobile-shell.css (M1.x) hält die 36px-Bundle-Leiste auf dem Telefon * BEDIENBAR — Name mittig, Uhr/Lupe/Glocke rechts mit 44px-Trefferflächen, Desktop- * Menüs weg. Das ist Reparatur, keine Gestaltung: die Leiste bleibt eine geschrumpfte * Desktop-Leiste. Diese Datei legt darüber die Anordnung, die auf einem Telefon * erwartet wird (Material 3 Top App Bar / iOS Navigation Bar): * * ┌──────────────────────────────────────────────────────────┐ * │ (MM) vilo 🔍 🔔 │ 56px + Notch-Inset * └──────────────────────────────────────────────────────────┘ * * · LINKS der Avatar — der Profil-Einstieg (Namensmenü, erste Zeile Zeiterfassung). * · MITTE die Marke, groß — zugleich der eine Menü-Trigger (Abmelden, Sperren …). * · RECHTS die Aktionen: Suche · Mitteilungen. * · Jedes Ziel 44×44 (Apple HIG) bzw. 48 (Material) — hier 44 mit 4px Luft. * * VORGABE BETREIBER (2026-09-04). Davor stand die Marke links und der Avatar ganz * rechts hinter Lupe und Glocke — die Anordnung, die iOS/Android für einen NAVIGATIONS- * kopf vorsehen (zurück links, Aktionen rechts). VILO hat oben aber keine Navigation: * links stand eine Wortmarke, die nur ein Menü öffnet. Mit dem Avatar links und der * Marke mittig liest sich die Leiste als Kopf einer App (wer bin ich · wo bin ich · * was kann ich), und die beiden Aktionen bleiben unter demselben Daumen. * * DIE SYMMETRIE IST GERECHNET, NICHT GESCHÄTZT: der Avatar ist 32px breit und sitzt * 12px vom linken Rand — seine Mitte liegt bei 28px. Die Glocke ist eine 44px-Zelle mit * 22px-Glyph an 6px Rand — ihre Glyph-Mitte liegt bei 6+22 = 28px vom rechten Rand. * Beide Ränder sind deshalb ungleich (12 links, 6 rechts) und ergeben trotzdem denselben * optischen Abstand. Wer eines von beiden ändert, rechnet das andere nach. * * DER AVATAR IST DERSELBE KNOTEN WIE DER NAME: der Kernel dekoriert den Namens-Span zum * Menü-Trigger (injectNameMenu) und schreibt seit dieser Datei die Initialen als * `data-vilo-initials` daran. Hier wird der Text unsichtbar (font-size 0, der Span * bleibt für Screenreader lesbar) und das Pseudo-Element zeigt die Initialen. Das * Namensmenü (vier Mein-Profil-Panes) öffnet sich unverändert per Tap. * * ER LIEGT IM RECHTEN CLUSTER UND WIRD NICHT UMGEHÄNGT. Der Bundle rendert ihn als * erstes Kind des Nutzer-Clusters ganz rechts; ein Umhängen im DOM zöge `menubarNameSpan()` * im Kernel (erkennt den Cluster am "|"-Span) und jeden nth-child-Selektor in * mobile-shell.css mit. Stattdessen wird er — wie schon in M1.4, nur an eine andere * Stelle — aus dem Flex-Fluss genommen und absolut an den linken Leistenrand gesetzt. * Der Leisten-Root ist der positionierte Vorfahre (Bundle: `absolute`), die beiden * Zwischencontainer sind es nicht. * * GELTUNGSBEREICH: nur `html[data-vilo-class="compact"]` — die Klasse, die der Kernel * setzt (kurze Seite ≤ Telefon-Maß). Kein rohes max-width. Desktop/Tablet: menubar- * desktop.css, das die Marke links und den Namen rechts behält (dort ist Platz für * beides, und der Name steht ausgeschrieben statt als Initialen-Kachel). * mobile-shell.css bleibt unangetastet und liefert weiter die Basis (Menüs/Datum/ * Abmelden ausgeblendet, Trefferflächen); diese Datei lädt danach und gewinnt über die * höhere Spezifität (html[…]-Präfix). * * GEOMETRIE-VERTRAG: 56px hier = `--vilo-topbar` für compact in app-shell-geometry.css * (plus derselbe Inset-Term). menubar-desktop-scale.test.js hält beide zusammen. * * VOLLBILD (unten, letzte Regel): wer die Leiste HÖHER macht, muss auch sagen, wie sie * bei einem maximierten Fenster verschwindet — der Bundle fährt sie nur 40px aus dem * Bild. Das ist die zweite Hälfte desselben Vertrags; sie fehlte hier, während * menubar-desktop.css sie für Tablet/Desktop längst trägt. * ==========================================================================*/ /* Leiste */ html[data-vilo-class="compact"] div[class*="z-[9999]"] { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: 12px; padding-right: 6px; box-sizing: border-box; } /* ── Marke · MITTIG ─────────────────────────────────────────────────────────── Zentriert wird der WRAPPER aus dem Bundle (`div.relative`, erstes Kind des linken Clusters) — nicht der Knopf darin. Der Wrapper ist der Anker des vilo-Menüs (`absolute top-full left-0`), und das ist auf dem Telefon der einzige Weg zu Abmelden · Sperren · Einstellungen; ein Knopf, der ohne seinen Anker wandert, ließe das Menü an der alten Stelle aufgehen. WARUM `left:0; right:0` UND NICHT `left:50%; transform:translateX(-50%)`: ein transform macht den Wrapper zum Containing Block für alles Positionierte darin. Das Menü rechnete dann in Wrapper-Koordinaten und stünde mit seinen mindestens 240px von der Bildschirmmitte aus über den rechten Rand hinaus (gerechnet bei 320px Breite: 42px abgeschnitten). Über die volle Leistenbreite gespannt beginnt der Wrapper am linken Bildschirmrand — die Regel darunter richtet das Menü daran in Bildschirmkoordinaten aus, ohne eine einzige Messung. `pointer-events` ist die Gegenrechnung: der Wrapper ist positioniert und liegt damit ÜBER Lupe und Glocke (statische Flex-Geschwister stehen tiefer im Stapel) — er schluckte sonst jeden Tap auf beide. Er selbst nimmt deshalb nichts mehr an, Knopf und Menü nehmen ihre Taps wieder auf. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:first-child > div:first-child { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top); bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:first-child > div:first-child > button, html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:first-child > div:first-child > div { pointer-events: auto; } /* Marke — Inline-Style fontSize:14px, daher !important. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] button[style*="Otista"] { font-size: 28px !important; line-height: 1; padding: 6px 10px; min-height: 44px; border-radius: 12px; } /* vilo-Menü — im Bildschirm statt unter der Marke hervorquellend. `top-full` bleibt unangetastet: der Wrapper reicht jetzt exakt bis zur Leistenunterkante, 100% davon ist genau die richtige Höhe. Nur horizontal wird aus „am Knopf ausgerichtet" ein Rand zu beiden Bildschirmseiten; `min-width:0` nimmt dem Bundle-Mindestmaß (240px) die Möglichkeit, das wieder aufzureißen. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:first-child > div:first-child > div[class*="min-w-[240px]"] { left: 8px; right: 8px; min-width: 0; } /* Rechter Cluster: ein Flex-Lauf, Aktionen in fester Reihenfolge. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child { display: flex; align-items: center; gap: 0; height: 56px; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) { display: flex; align-items: center; gap: 4px; height: 56px; } /* Uhr-Kachel (Zeiterfassung): NICHT in der Leiste — die laufende Zeit steht als erste Zeile im Avatar-Menü (kernel.js, ensureNameMenu → .vnm-zeit) und öffnet von dort dasselbe Popover. Die Kachel bleibt im DOM (Registry-Instanz, Popover-Anker), nur unsichtbar. Die Regel dazu stand hier und galt nur für `compact`; seit 2026-09-03 gilt sie auf jeder Breite und liegt deshalb im Kernel bei der Kachel selbst (widgetCss). Hier bliebe sonst eine zweite Stelle für dieselbe Aussage stehen — und zwei Stellen driften. */ /* Suche · Mitteilungen — 44×44-Ziele, Glyph 22px. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-search, html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-bell { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; } /* Der Kernel hängt beide Kacheln direkt hinter den Namens-Span — welche dabei zuerst liegt, entscheidet die Injektionsreihenfolge und nicht diese Datei. `order` sagt es deshalb ausdrücklich: Lupe vor Glocke, wie auf jeder Breite. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-search { order: 1; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-bell { order: 2; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-search svg, html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-bell svg { width: 22px; height: 22px; } /* Zähler der Glocke: zur 44×44-Zelle passend (mobile-shell.css setzt sie für 44×36). */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-bell .vilo-bell__n { top: 6px; right: 6px; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-bell .vilo-bell__q { top: 9px; right: 9px; } /* Avatar — der Namens-Span als runde Initialen-Kachel, absolut am LINKEN Leistenrand. Er bleibt Kind des rechten Clusters (siehe Kopf: Umhängen zöge menubarNameSpan() und die nth-child-Selektoren in mobile-shell.css mit) und wird nur aus dem Flex-Fluss genommen — `order` hat für ein absolut positioniertes Element keine Bedeutung mehr und steht deshalb nicht mehr hier. M1.4 setzt dieselben Eigenschaften mit eigener Absicht (Zentrierung des ausgeschriebenen Namens), deshalb durchgehend !important — insbesondere `transform`, das dort die Box um ihre halbe Größe zurückschiebt, und `margin`, das die Basisregel aus dem Kernel mitbringt. `top`: 12px unter der Inset-Zone, 32px Kachel, 12px darunter = die 56px der Leiste. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child { position: absolute !important; left: 12px !important; right: auto !important; top: calc(env(safe-area-inset-top) + 12px) !important; transform: none !important; margin: 0 !important; width: 32px; min-width: 32px; max-width: 32px; height: 32px; border-radius: 50%; background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center; overflow: visible; font-size: 0; /* Name bleibt im DOM (Screenreader), nur nicht gemalt */ line-height: 0; letter-spacing: .02em; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child::before { content: attr(data-vilo-initials); font-size: 13px; font-weight: 700; line-height: 32px; color: #fff; } /* 44×44-Trefferfläche um den 32px-Avatar (HIG-Mindestmaß), unsichtbar. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child::after { content: ""; position: absolute; inset: -6px; } html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child.vilo-namebtn:hover, html[data-vilo-class="compact"] div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child.vilo-namebtn[aria-expanded="true"] { background: #4f46e5; } /* ── Vollbild · maximiertes Fenster ──────────────────────────────────────────── Der Bundle fährt einem maximierten Fenster die Leiste per Inline-Transform um GENAU 40px aus dem Bild — bemessen für seine eigene 36px-Leiste. Diese Datei macht sie 56px hoch (+ Notch-Inset), also blieben 16px + Inset stehen: gemessen bei 390x844 und 375x667 ein 16px-Streifen mit z-index 9999 ÜBER dem Fenster (z-index 11), der den Kopf der App anschneidet. Tablet und Desktop hatten die Regel längst (menubar-desktop.css, dort gemessen 0px Rest); ausgerechnet `compact` war ausgenommen, mit der Begründung, das Telefon behalte die Bundle-Höhe 36px — bei 36px fiel nichts auf (36 < 40), seit der App-Bar ist die Begründung überholt. Warum der Streifen kein Ersatz für die Leiste war, sondern Schaden: sichtbar blieben nur Bruchstücke der 44px-Ziele (Lupe/Glocke ~10px, Avatar ~4px), am obersten Bildschirmrand und auf einem Gerät mit Notch zusätzlich unter der Systemleiste. Verdeckt hat er dafür das, was darunter liegt — im Raumplan (öffnet immer maximiert) das vilo-Logo bei top 11, also den EINZIGEN Rückweg aus dem Vollbild (`vilo:restore-window`). Die Aussage „deckt den Viewport" gilt jetzt auch hier, und der Rückweg liegt frei. `:not(.vilo-pin-menubar)` wie auf dem Desktop: solange ein Popover offen ist (Avatar-Menü mit der Zeiterfassungs-Zeile, Suche, Glocke), hält der Kernel die Leiste mit translateY(0) !important sichtbar — sonst hinge das Menü unter einer verschwundenen Leiste. Gepinnt: mobile-topbar-appbar.test.js §4. */ html[data-vilo-class="compact"][data-vilo-fullscreen]:not(.vilo-pin-menubar) div[class*="z-[9999]"] { transform: translateY(-100%) !important; transition: transform .5s cubic-bezier(.23, 1, .32, 1); } /* ── Optik: keine Fläche, keine Kante ───────────────────────────────────────── Dieselbe Vorgabe wie auf Desktop/Tablet (menubar-desktop.css, „wie macOS"): die Leiste trägt die `.glass-dock`-Optik des Bundles — Fläche, 50px-Blur, 1px-Rahmen, inneres Licht. Auf dem Telefon ist das eine zweite Statusleiste unter der des Systems. Weg damit; der Blur muss mit, sonst bleibt die verwischte Kante genau dort stehen, wo der Rahmen war. Nur die LEISTE (`div[class*="z-[9999]"]`), nicht die Dock-Pille — die trägt dieselbe Klasse und behält ihr Glas (mobile-shell.css, `.glass-dock.rounded-3xl`). Was hier NICHT dahinter liegt: eine App. Das Fenster beginnt unter der Leiste (`--vilo-topbar` in app-shell-geometry.css), und ein maximiertes fährt sie ganz aus dem Bild (Regel darüber). Hinter der Leiste steht damit immer der Hintergrund des Schirms — deshalb genügt hier dasselbe Argument wie auf dem Desktop. */ html[data-vilo-class="compact"] div[class*="z-[9999]"] { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }