/* ============================================================================= * Menüleiste · Desktop- und Tablet-Maßstab * * Die OS-Menüleiste kommt aus dem eingefrorenen Bundle: 36px hoch (h-9), Menüs und * rechter Cluster in 12px (text-xs), Logo 14px (Inline-Style), Status-Icons 14px. Auf * einem Desktop- oder Tablet-Bildschirm ist das zu klein. Diese Datei hebt den Maßstab * EINHEITLICH an — Leiste, Logo, Menüs, Status-Icons, Name/Datum/Uhrzeit und die * Kernel-Widgets (Uhr-Kachel, Lupe, Glocke, Namensmenü) — statt einzelne Teile groß zu * drehen. * * GELTUNGSBEREICH: Desktop (`wide`) und Tablet (`medium`), d. h. alles außer der * Telefon-Klasse `compact`. Das Telefon wird eigenständig versorgt: mobile-shell.css * baut die Leiste um (Namens-Zentrierung, 44px-Touch-Ziele über ::after) und * mobile-topbar.css macht daraus die App-Bar mit 56px + Notch-Inset, mit der * app-shell-geometry.css compact rechnet. (Hier stand „das Telefon behält die * Bundle-Höhe 36px" — seit der App-Bar falsch, und die Notiz hat den Vollbild-Fall * unten auf dem Telefon unversorgt gelassen: 16px Leiste blieben über dem Fenster * stehen. Die compact-Hälfte dieser Regel steht jetzt in mobile-topbar.css.) * * GEOMETRIE-VERTRAG: Die Höhe hier (44px) und `--vilo-topbar` im Basisblock von * app-shell-geometry.css (Tablet-App-Shell) sind DERSELBE Wert — das Fenster beginnt * unter der Leiste. Wer die Höhe ändert, ändert beide; menubar-desktop-scale.test.js * hält sie zusammen. * * VOLLBILD: Der Bundle fährt die Leiste bei einem maximierten Fenster per Inline- * Transform um genau 40px aus dem Bild (translateY(-40)). Eine 44px-Leiste ließe 4px * stehen. Deshalb unten die Regel auf `data-vilo-fullscreen` (Kernel spiegelt den * Zustand): ganz raus. `html.vilo-pin-menubar` (Popover offen) gewinnt weiterhin — * der Kernel setzt dort translateY(0) !important und ist hier ausgenommen. * * Selektoren: dieselben stabilen Anker wie mobile-shell.css (Leisten-Root * `div[class*="z-[9999]"]`, Kindposition, Tailwind-Klassen des Bundles). * ==========================================================================*/ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock { height: 44px; font-size: 15px; padding-left: 20px; padding-right: 20px; } /* Logo „vilo" — Inline-Style fontSize:14px, daher !important. */ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock button[style*="Otista"] { font-size: 18px !important; padding: 5px 12px; } /* App-Name (nur bei fokussiertem Fenster) + Desktop-Menüs Ablage/Bearbeiten/… */ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:first-child span.text-xs, html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:first-child .ml-1 button { font-size: 14px; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:first-child .ml-1 button { padding: 6px 12px; } /* Rechter Cluster: Status-Icons · Name/Uhr/Datum/Uhrzeit · Abmelden */ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child { gap: 22px; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:first-child { gap: 16px; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:first-child svg, html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child button[title="Abmelden"] svg { width: 18px; height: 18px; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child .text-xs { font-size: 14px; gap: 14px; } /* Kernel-Widgets in der Leiste (kernel.js setzt 14px-SVGs und 2px/8px-Polster). */ html:not([data-vilo-class="compact"]) .vilo-clock { font-size: 14px; padding: 4px 10px; gap: 8px; } html:not([data-vilo-class="compact"]) .vilo-clock .vc-dot { width: 8px; height: 8px; } html:not([data-vilo-class="compact"]) .vilo-search svg, html:not([data-vilo-class="compact"]) .vilo-bell svg { width: 18px; height: 18px; } html:not([data-vilo-class="compact"]) .vilo-namebtn { font-size: 14px; } /* Vollbild: Leiste vollständig aus dem Bild (siehe Kopf). */ html:not([data-vilo-class="compact"])[data-vilo-fullscreen]:not(.vilo-pin-menubar) div[class*="z-[9999]"].glass-dock { transform: translateY(-100%) !important; transition: transform .5s cubic-bezier(.23, 1, .32, 1); } /* ----------------------------------------------------------------------------- * Datum · Uhrzeit · Abmelden: nicht mehr zeigen (Vorgabe Betreiber). * * Der Bundle rendert den rechten Cluster als * {Name}|{Datum}{Zeit} * Der Kernel hängt seine Kacheln (Uhr, Lupe, Glocke) IMMER direkt hinter den * Namens-Span (injectWidgets/injectSearch/injectNotif, `insertAdjacentElement` * bzw. `insertBefore(anchor.nextSibling)`) — also VOR den Trenner. Deshalb ist * "der Trenner und alles dahinter" genau Datum + Uhrzeit; `:not([class*="vilo-"])` * hält die Kernel-Kacheln auch dann heraus, wenn dort je etwas landet. * * VERBERGEN, NICHT ENTFERNEN: `menubarNameSpan()` im Kernel erkennt den richtigen * Cluster an genau diesem "|"-Span (Signatur). Ohne ihn fände er den Namen nicht * mehr und Uhr-Kachel, Suche, Glocke und Namensmenü verschwänden mit. `display:none` * lässt Text und Kindreihenfolge unangetastet — nth-child-Selektoren in * mobile-shell.css bleiben ebenfalls gültig. * * Das Telefon (`compact`) hatte beides schon vorher aus (mobile-shell.css M1.4); * mit dieser Hälfte ist es auf jeder Klasse aus. Abmelden bleibt wie dort über den * „vilo"-Menü-Trigger links erreichbar ("Abmelden ...", ⇧⌘Q). * ---------------------------------------------------------------------------*/ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:nth-child(2) > span.text-white\/30, html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:nth-child(2) > span.text-white\/30 ~ span:not([class*="vilo-"]) { display: none; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > button[title="Abmelden"] { display: none; } /* ----------------------------------------------------------------------------- * Home-Bildschirm: nur das Logo, keine Menütitel (Vorgabe Betreiber). * * Links neben dem „vilo"-Knopf malt der Bundle fünf Menütitel — Ablage · Bearbeiten · * Darstellung · Fenster · Hilfe. Sie sehen aus wie ein Menü und sind keines: KEIN * einziger ihrer Einträge trägt eine Aktion (Bundle-Konstante `t8`, jeder Eintrag * entsteht aus `Z(label, kürzel)` OHNE den dritten Parameter, der die Aktion trüge) — * ein Klick klappt auf und wieder zu, und das war es. Auf dem Telefon (mobile-shell.css * M1.1) und auf dem Tablet (tablet-shell.css, Fix 2) sind sie längst weg, dort aus * Platzgründen. Hier gehen sie, weil eine Fläche nichts anbieten soll, was sie nicht * kann — dieselbe Linie wie beim Assistenten, der auf jede Frage seine Absage sagt. * * NUR AUF DEM HOME-BILDSCHIRM, und das ist der ganze Unterschied: steht ein Fenster im * Vordergrund, zeigt der Bundle an derselben Stelle die Menüs DIESER App (`n8[appId]`), * und darin steckt echte Funktion (Raumplan „Bearbeiten", Team „Neuer Mitarbeiter"). * Die bleiben stehen. * * DER ANKER IST DER APP-NAME-SPAN: der Bundle rendert * `y && ` nur, wenn ein Fenster * aktiv ist (`activeWindowId` = oberstes nicht minimiertes Fenster, sonst `null`). Kein * Span heißt also „kein Fenster im Vordergrund" — und das ist der Home-Bildschirm. * * EINE GRENZE, DIE MAN KENNEN MUSS: minimieren räumt den Vordergrund NICHT. Der Kernel * fängt den gelben Ampelknopf ab und hält das Fenster im React-Zustand am Leben (nur * `data-vilo-minimized` + CSS, damit das iframe seinen Zustand behält) — `isMinimized` * wird dabei gar nicht gesetzt. Ein minimiertes Fenster bleibt für den Bundle also aktiv, * sein Name und seine Menüs stehen weiter in der Leiste, bis es geschlossen wird. Das ist * die macOS-Lesart (die vorderste App behält die Leiste) und keine Lücke dieser Regel; * geprüft im Preview, nicht behauptet. Der Bundle-eigene Minimier-Pfad (Rest-Fall ohne * React-Kontext) räumt den Vordergrund sehr wohl — dann greift die Regel. * * EINE REGEL, DIE NUR VERSTECKT — nie eine, die zurückholt. Der naheliegende Weg wäre * ein Paar gewesen: „Menücluster aus" plus „bei fokussierter App wieder an". Die zweite * Hälfte hätte das Tablet mitgenommen — sie wäre spezifischer als * `html[data-vilo-appshell] … .gap-0.ml-1` aus tablet-shell.css und stünde zusätzlich * später in der Kaskade (index.html lädt menubar-desktop.css nach tablet-shell.css). * Auf dem iPad käme damit der Menücluster zurück und mit ihm der Zeilenumbruch in der * Leiste, den Fix 2 dort beseitigt hat. `:not(:has(…))` hält die Regel additiv: sie * kann verbergen, nie zeigen. * * Fällt `:has()` aus (Browser ohne Unterstützung), fällt die GANZE Regel weg und die * Menütitel stehen wieder da — sichtbar, nicht kaputt. Das ist der richtige Ausfall für * eine reine Aufräumregel; `_pattern.css` verlässt sich an der Fenster-Sidebar auf * dieselbe Eigenschaft. * ---------------------------------------------------------------------------*/ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:first-child:not(:has(> span.text-white\/80.text-xs.font-semibold.px-2)) > div.flex.items-center.gap-0.ml-1 { display: none; } /* ----------------------------------------------------------------------------- * Reihenfolge im rechten Cluster: Suche · Mitteilungen · NAME (Vorgabe Betreiber). * * Der Bundle rendert den Namen als ERSTES Kind der Gruppe, der Kernel haengt Lupe * und Glocke dahinter — sichtbar also „Name · Lupe · Glocke". Gewuenscht ist die * App-Bar-Konvention: die Aktionen links, die eigene Person als letztes, ganz * aussen. Das Telefon macht das seit mobile-topbar.css genau so (order 2/3/4); * hier steht dieselbe Loesung fuer Desktop und Tablet, damit beide Klassen die * Leiste gleich lesen. * * Nur `order`, kein Umhaengen im DOM: `menubarNameSpan()` im Kernel findet den * Cluster ueber die Kindreihenfolge und den „|"-Span, und mobile-shell.css * adressiert dieselbe Gruppe per nth-child. Ein Verschieben im DOM zoege beides * mit; die visuelle Reihenfolge ist eine reine Darstellungsfrage und gehoert * deshalb ins CSS. * * Die ausgeblendeten Geschwister (Uhr-Kachel, Trenner, Datum, Uhrzeit) behalten * order 0 — bei `display:none` ohne Wirkung, deshalb bleiben sie unangetastet. * ---------------------------------------------------------------------------*/ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:nth-child(2) > span.vilo-search { order: 1; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:nth-child(2) > span.vilo-bell { order: 2; } html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock > div:last-child > div:nth-child(2) > span:first-child { order: 3; } /* ----------------------------------------------------------------------------- * Optik: keine Fläche, keine Kante (Vorgabe Betreiber, „wie macOS"). * * Der Bundle gibt der Leiste dieselbe Klasse wie der Dock-Pille: `.glass-dock` — * `background:#1c1c1ed9`, 50px Backdrop-Blur, `border:1px solid rgba(255,255,255,.08)` * und ein inneres Licht (`box-shadow: inset 0 1px #ffffff0d`). Für eine schwebende * Pille ist das richtig; für eine Leiste, die über die ganze Breite am oberen Rand * klebt, ist es ein zweiter Balken über dem Hintergrund. Auf einem Mac steht dort * nichts — die Menüs liegen direkt auf dem Schirm. * * Deshalb hier: Fläche weg, Rahmen weg, inneres Licht weg — und der Blur ebenfalls. * Ein Backdrop-Filter OHNE Fläche ist nicht „nichts": er verwischt weiter, was dahinter * liegt, und hinterlässt am unteren Leistenrand eine sichtbare Kante genau dort, wo * gerade die Kante entfernt wurde. Alle vier gehören zusammen. * * GILT NUR FÜR DIE MENÜLEISTE, NICHT FÜR DAS DOCK. Beide tragen `.glass-dock`; * getrennt werden sie über `div[class*="z-[9999]"]` — das ist die Leiste (der Kernel * unterscheidet sie an derselben Stelle, kernel.js: „ein blinder erster Treffer" auf * `.glass-dock` wäre die obere Leiste). Das Dock ist eine schwebende Pille und behält * sein Glas; auch auf einem Mac hat es einen Grund. * * Was die Lesbarkeit trägt, ist der Hintergrund selbst: alle neun Bundle-Motive stehen * auf `#0a0a10` (`.desktop-bg`), die Farbverläufe liegen als weiche Flecken darüber. * Weiße Schrift bleibt darauf lesbar — nachgemessen bei 1440x900 über Ozean (Vorgabe), * Sonnenuntergang und Monochrom. Wer je ein helles Motiv aufnimmt, prüft diese Leiste * mit; ein „Eigenes Bild" kann hell sein, dafür gibt es hier bewusst keine Notlösung * (ein halbdurchsichtiger Verlauf wäre wieder eine Fläche, und genau die soll weg). * * `background: transparent` statt `none`: `background` ist die Kurzform und setzt auch * `background-image` zurück — `none` allein wäre für die Farbe ungültig. * ---------------------------------------------------------------------------*/ html:not([data-vilo-class="compact"]) div[class*="z-[9999]"].glass-dock { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }