/* Vylife ERP - App-Shell-Styles (Fluent-nativ, Windows 11 Look). Ungenutzte Mockup-Styles wurden nach mockup-legacy.css ausgelagert. */ /* Globaler Windows-11-Scrollbar-Stil: schmal, kein sichtbarer Hintergrund/ Track, keine Pfeil-Buttons, nur ein dezenter, abgerundeter "Daumen", der NUR waehrend des tatsaechlichen Scrollens sichtbar ist (Klasse .is-scrolling, wird per JS in app-shell.js/onGlobalScroll gesetzt/entfernt) und danach wieder ausblendet - NICHT schon bei blossem Hover ueber den Container (bei einer Sidebar/Liste waere das quasi dauerhaft sichtbar). Gilt fuer die GESAMTE App (Sidebar-Navigation, Panels, Listen, Dialoge etc.), damit kuenftige scrollbare Bereiche automatisch konsistent aussehen - liegt deshalb hier in der Shell-weiten app-shell.css und nicht in der von der Blazor-Vorlage generierten app.css (Bootstrap-Validierungs- stile, Error-Boundary). !important, weil Chromium/WebView2 fuer die -webkit-scrollbar-Pseudoelemente teils hoeher priorisierte interne Default-Regeln mitbringt, die width/Pfeile sonst nicht sauber ueberschreiben. Firefox nutzt die standardisierte scrollbar-width/-color-Eigenschaft (dort kein Auto-Hide per CSS moeglich). */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--neutral-foreground-rest) 30%, transparent) transparent; } *::-webkit-scrollbar { /* An Windows 11 Flyout-Menues (z.B. Startmenue) angelehnt: ein sehr duenner Scroll-Indikator statt eines klassischen breiten Balkens. */ width: 2px !important; height: 2px !important; } *::-webkit-scrollbar-track { background: transparent !important; } *::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; } /* Fluent-Web-Components (fluent-icon, fluent-divider, fluent-search etc.) sind Custom Elements: waehrend des Prerenderings existiert bereits ihr Light-DOM-Markup, aber das Custom-Element ist noch nicht "defined" (Shadow- DOM/Styles fehlen), bis das Fluent-JS-Bundle nach dem Wechsel zum interaktiven Circuit geladen wird ("Custom Element Upgrade"). Genau in diesem Moment springen Header-Icons, der Nav-Indicator, das Suchfeld und das Footer-Hilfe-Icon kurz, weil der Browser sie vorher/nachher mit unterschiedlicher intrinsischer Box behandelt (z.B. inline statt inline-flex, keine feste Groesse). Reine /
-Texte (Marke, Persona-Name, Versionszeile) sind davon nicht betroffen, weil sie schon vorher fertige HTML-Elemente sind. Fix: die Zielgroesse/-darstellung bereits VOR der Definition erzwingen, damit das Upgrade layoutneutral ist. */ fluent-icon:not(:defined), fluent-divider:not(:defined), fluent-search:not(:defined), fluent-text-field:not(:defined), fluent-persona:not(:defined) { display: inline-flex; box-sizing: border-box; } fluent-divider:not(:defined) { display: block; } /* FluentPersona rendert den Presence-Status-Punkt (gruener Verfuegbar-Badge) NICHT als eigenes Blazor-Markup, sondern als Teil des Shadow-DOM-Templates der Web-Component selbst. Waehrend des Prerenderings ist noch "not(:defined)": der Browser zeigt nur das rohe Light-DOM (Avatar-Bild/ Initialen als Slot-Inhalt), das Shadow-DOM mit dem Presence-Punkt existiert schlicht noch nicht. Erst beim Custom-Element-Upgrade (JS-Start des interaktiven Circuits) wird das Shadow-DOM aufgebaut und der Punkt poppt sichtbar auf - anders als Avatar/Initialen/Stift-Icon, die als normales Blazor-Markup schon von Anfang an vollstaendig da sind. Ein Platzhalter mit identischer Groesse/Position schliesst die Luecke, sodass der Punkt beim Upgrade nicht mehr "einfliegt", sondern von Anfang an sichtbar ist. */ .app-sidebar-profile fluent-persona:not(:defined) { position: relative; } .app-sidebar-profile fluent-persona:not(:defined)::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--presence-available, #6ccb5a); pointer-events: none; } *::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 100px !important; transition: background-color 0.15s ease-in-out; } *.is-scrolling::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--neutral-foreground-rest) 30%, transparent); } *::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--neutral-foreground-rest) 45%, transparent); } *::-webkit-scrollbar-corner { background: transparent; } /* Die gesamte Shell-Farbgebung kommt ausschliesslich aus den Fluent-Design- Tokens (--accent-fill-rest, --neutral-layer-* etc.), die unter Windows automatisch der System-Akzentfarbe folgen (siehe FluentDesignTheme + WindowsAccentColorProvider). Bewusst KEINE hartkodierten Farbwerte und keine Hex-Fallbacks in var()-Aufrufen mehr: ein Fallback wuerde bei einem kurzzeitig noch nicht gesetzten Token stillschweigend eine abweichende Farbe einsetzen und so zu inkonsistenten Akzent-Abstufungen fuehren. */ body { font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Themeabhaengiger Fluent-Token statt fixem Win11-Light-Grau, damit der Dark Mode nicht gegen einen hellen Body-Hintergrund arbeitet. */ background-color: var(--neutral-layer-1); } /* ===================================================================== APP-SHELL LAYOUT (Fluent-nativ, Windows 11 Look) Nur noch das, was Fluent nicht selbst abdeckt. Farben kommen aus den Fluent-Design-Tokens (--neutral-layer-*, --accent-fill-rest, --neutral-foreground-*), damit Light/Dark automatisch mitwandern. ===================================================================== */ html, body { margin: 0; padding: 0; height: 100%; } /* Overflow-Bugfix: alle Shell-Elemente rechnen Border/Padding in die Breite ein -> verhindert den horizontalen Scrollbalken. */ .app-layout *, .app-layout *::before, .app-layout *::after { box-sizing: border-box; } .app-shell-body { height: 100vh; overflow: hidden; } /* Wrapper fuellt den gesamten Viewport. */ .app-layout { height: 100vh; overflow: hidden; } /* Zwei-Spalten-Grundgeruest: Sidebar (feste Breite) | rechte Spalte (Rest). Dezent abgesetzte Standard-Hintergrundfarbe (--app-shell-background, siehe app.css), OHNE Verlauf/Textur-Spielereien - fuer Light UND Dark identisch ruhig, analog zur Windows-11-Einstellungsseite (Fensterhintergrund dezent zurueckgesetzt, damit Content-Cards ueber --surface-elevate sich davon abheben). */ .app-shell { display: flex; height: 100vh; overflow: hidden; background: var(--app-shell-background); } /* Rechte Spalte: Header oben, Content darunter. */ .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; } /* Explorer-Stil-Adressleiste: zweite Zeile der rechten Spalte, UNTER der Toolbar (.app-fluent-header). Niedriger als die Toolbar (32px statt 48px), damit beide zusammen nicht wie ein zu wuchtiger Doppel-Header wirken - analog zu Visual Studio (Menueleiste duenner als Toolbar) bzw. GitHub (schmale Breadcrumb-Zeile ueber der Aktionsleiste). Bewusst OHNE Akzent- Toenung und OHNE Trennlinie zur Toolbar/zum Content (Stand: vorlaeufig entfernt, Option offen fuer spaetere Wiedereinfuehrung/andere Gestaltung). */ .app-nav-bar { display: flex; align-items: center; gap: 0.25rem; height: 32px; flex-shrink: 0; /* Gleiches horizontales Padding wie .app-fluent-header (1rem), damit der Zurueck-Pfeil hier optisch exakt unter dem Hamburger-Icon beginnt. */ padding: 0 1rem; background: var(--app-shell-background); } .app-nav-bar .fluent-button { min-width: 28px; } .app-nav-bar .fluent-button svg { width: 16px !important; height: 16px !important; } .app-nav-bar-path { display: flex; align-items: center; gap: 1px; margin-left: 0.25rem; min-width: 0; flex: 1; height: 100%; overflow: hidden; white-space: nowrap; cursor: text; border-radius: 4px; } /* Rest-Flaeche der Breadcrumb-Zeile: fuellt den freien Platz nach dem letzten Segment, damit auch dort (nicht nur direkt auf den Buttons) ein Klick den Adress-Editiermodus oeffnet - wie ein Klick auf den freien Bereich der Explorer-Adressleiste. */ .app-nav-bar-path-fill { flex: 1; height: 100%; } .app-nav-bar-path:hover { background: color-mix(in srgb, var(--neutral-foreground-rest) 5%, transparent); } .app-nav-bar-crumb { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: none; border-radius: 4px; background: transparent; font: inherit; font-size: 0.8rem; color: var(--neutral-foreground-secondary); cursor: pointer; transition: background 0.1s ease-in-out, color 0.1s ease-in-out; } button.app-nav-bar-crumb:hover { background: color-mix(in srgb, var(--neutral-foreground-rest) 8%, transparent); color: var(--neutral-foreground-rest); } button.app-nav-bar-crumb:focus-visible { outline: 1px solid var(--accent-fill-rest); outline-offset: 1px; } .app-nav-bar-crumb-current { color: var(--neutral-foreground-rest); cursor: default; } .app-nav-bar-crumb-sep { flex-shrink: 0; color: var(--neutral-foreground-hint); } /* Adress-Eingabefeld: ersetzt bei Klick auf die Breadcrumb-Flaeche den Pfad-Bereich 1:1 an derselben Stelle (gleiche Hoehe/Margin), damit der Wechsel Breadcrumb <-> Texteingabe nicht springt - wie im Windows-11- Explorer. */ .app-nav-bar-address-input { flex: 1; height: 22px; margin-left: 0.25rem; padding: 0 6px; border: 1px solid var(--accent-fill-rest); border-radius: 4px; background: var(--neutral-layer-1); font: inherit; font-size: 0.8rem; color: var(--neutral-foreground-rest); outline: none; min-width: 0; } /* Kopfzeile: schlichte Standard-Hintergrundfarbe (neutral-layer-1), OHNE Blur/Transparenz/Verlauf - identisch zur restlichen Shell. Bewusst OHNE Akzent-Toenung und OHNE Trennlinie zum Content (Stand: vorlaeufig entfernt, Option offen fuer spaetere Wiedereinfuehrung/andere Gestaltung). */ .app-fluent-header { display: flex; align-items: center; gap: 0.25rem; height: 48px; flex-shrink: 0; padding: 0 1rem; background: var(--app-shell-background); } /* Markenzeile - keine Trennlinie mehr zum Profilbereich darunter (auf Nutzerwunsch entfernt; der Footer-Divider oberhalb der Fusszeile bleibt bestehen). */ .app-sidebar-brand { display: flex; align-items: center; gap: 0.5rem; height: 48px; box-sizing: border-box; flex-shrink: 0; padding: 0 0.5rem; /* Windows-11-typischer Abstand zur Profilkarte darunter (analog zum Abstand Profil<->Suche und der Vollansicht-Abstand Suche<->Navigation): einheitlicher 0.5rem-Rhythmus zwischen allen Sidebar-Bloecken, statt Brand und Profil direkt aneinanderstossen zu lassen. Gilt fuer Voll- UND Rail-Ansicht gleichermassen (keine Rail-Ueberschreibung noetig). */ margin-bottom: 0.5rem; } /* Logo-Styling (Icon-Box, Vylife.ERP-Schriftzug, "System"-Untertitel) liegt zentral in Components/VylifeLogo.razor.css - siehe VylifeLogo.razor, das sowohl hier (Sidebar) als auch auf der Login-Seite verwendet wird. */ /* Windows-like Text-Ein-/Ausblendung beim Umschalten Voll<->Rail: Die Sidebar- Texte (Firmenname, Profilblock, Nav-Labels, Footer-Text) teilen sich diesel- be sanfte Transition. Im Voll-Zustand sind sie voll sichtbar (opacity:1, max-width offen, kein Versatz); die Rail-Regeln (weiter unten, in der Media-Query) faden sie ueber Opacity/Breite/Versatz aus. So verhalten sich ALLE Texte gleich - kein Springen mehr zwischen "fluid" und "statisch". Der Fade-In (Rail->Voll) ist leicht verzoegert, damit der Text erst erscheint, wenn die Sidebar bereits breit genug ist. */ .app-sidebar-brand .vylife-logo-title, .app-sidebar-profile-info, .app-sidebar-footer-text, .app-sidebar-profile .fluent-persona .name, .app-nav .fluent-nav-text { opacity: 1; max-width: 12rem; transform: translateX(0); /* KEINE Transition beim Aufklappen (Rail->Voll): die Texte sollen sofort im Voll-Zustand erscheinen, nicht mitfaden/mitschieben. Das Zuklappen (Voll->Rail) animiert weiter - dessen Transition steht in der .rail-Regel. */ transition: none; } /* Voll-Zustand des Profil-Textblocks: volle Hoehe. Beim Aufklappen (Rail->Voll) ohne Transition, damit er nicht mitanimiert; das Zuklappen animiert weiter (Transition in der .rail-Regel). */ .app-sidebar-profile .fluent-persona .name .app-sidebar-profile-info { max-height: 4rem; transition: none; } /* Header-Icon-Buttons: kompakt und rund, damit sie wie Icons wirken statt wie flaechige Buttons. Die Ruheflaeche-transparent/Hover-Logik ist zentral in IconActionButton.razor.css (Variant.Blend) hinterlegt und wird NICHT mehr hier dupliziert - siehe Konzept/Fluent-UX-Konzept.md. */ .app-fluent-header .fluent-button { min-width: 34px; } /* Alle Header-Icons einheitlich 20px. */ .app-fluent-header .fluent-button svg { width: 20px !important; height: 20px !important; } /* ---- Sidebar: volle Hoehe, links ---- */ .app-sidebar { width: 18rem; flex-shrink: 0; display: flex; flex-direction: column; height: 100vh; position: relative; /* Breite animiert NUR beim Zuklappen (Voll->Rail); die Transition steht daher in der .rail-Regel. Beim Aufklappen (Rail->Voll) gilt diese Basis- Regel ohne Transition -> die Sidebar erscheint sofort in voller Breite, sodass Logo/Profil/Footer NICHT mitwandern. */ transition: none; /* Standard-Hintergrundfarbe (neutral-layer-1), OHNE Blur/Transparenz - identisch zu Header/Content, damit die gesamte Shell wie EINE einheitliche Flaeche wirkt statt wie getrennte Kacheln (analog Windows-11-Einstellungsseite). Bewusst OHNE Trennlinie zum Content (Stand: vorlaeufig entfernt, Option offen fuer spaetere Wiedereinfuehrung/andere Gestaltung). */ background: var(--app-shell-background); padding: 0 0.75rem 0.75rem 0.75rem; overflow: hidden; /* Kontrast-Override fuer die nativen FluentDivider-Trennlinien (Brand- und Footer-Divider): der globale Fluent-Divider-Token ist auf dem Sidebar-Hintergrund in beiden Themes zu schwach. Gleiches Muster wie .surface-header (app.css) - zentral hier gesetzt, damit ALLE Divider innerhalb der Sidebar automatisch davon profitieren. */ --neutral-stroke-divider-rest: var(--surface-stroke); } /* Beim Programmstart/Reload wird der gemerkte Rail-Zustand erst NACH dem ersten Render angewendet. Ohne diese Klasse liefe dabei die Voll->Rail-Animation sichtbar ab ("Zusammenklappen" beim Start). Die .no-anim-Klasse (initial vom MainLayout gesetzt, nach dem ersten Anwenden per JS/Timeout entfernt) schaltet ALLE Transitions in der Sidebar kurzzeitig ab, sodass der gemerkte Zustand ohne Animation erscheint. */ .app-sidebar.no-anim, .app-sidebar.no-anim * { transition: none !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .app-sidebar { background: var(--app-shell-background); } } /* ===================================================================== RAIL-MODUS (Desktop): schmale Sidebar, nur Icons. Leitgedanke: die Icons behalten EXAKT ihre horizontale Position wie im Vollmodus - das linke Sidebar-Padding (0.75rem) bleibt unveraendert, nur die Textlabels/Brand/Profiltexte werden ausgeblendet und die Sidebar schrumpft auf die Icon-Breite. Hover-/Aktiv-Flaechen und der gleitende Selection-Strich bleiben unveraendert (dieselben .positioning-region-Regeln). Gilt nur auf Desktop-Breite; das mobile Drawer (max-width:767px) ignoriert die Rail-Klasse. */ @media (min-width: 768px) { .app-sidebar.rail { /* Icon-Breite (22px) + linkes/rechtes Sidebar-Padding (2x 0.75rem) + Selection-Strich-Abstand. Ergibt eine kompakte Icon-Spalte. */ width: 60px; /* Breiten-Transition NUR hier: greift beim Uebergang Voll->Rail (Zuklappen). Das Aufklappen laeuft ueber die transitionslose Basis-Regel und ist daher sofort. */ transition: width 0.2s ease-in-out; /* Seitliches Padding im Rail reduzieren (Basis: 12px): 60px - 2x6px = 48px nutzbar. Das 36px-Quadrat sitzt dann zentriert MIT je 6px Freiraum links/rechts - der linke Freiraum ist der "Gutter" fuer den Selection-Strich, damit er DANEBEN und nicht IM Button liegt. */ padding-left: 6px; padding-right: 6px; } /* Rail-Padding ist schmaler (6px statt 12px) - die Overlay-Scrollbar muss daher auch weniger weit herausgeschoben werden, um weiterhin exakt an der (jetzt schmaleren) Sidebar-Aussenkante zu sitzen. */ .app-sidebar.rail .app-nav-scrollbar-track { right: -6px; } /* Firmenname, Profiltexte und Fussnotentext im Rail ausblenden - jedoch NICHT per display:none (nicht animierbar), sondern per Opacity + auf 0 kollabierender Breite. So faden die Texte beim Umschalten Voll<->Rail weich aus/ein und schieben sich Windows-typisch leicht zusammen, waehrend Icons/Avatar an Ort und Stelle bleiben. Der Fade-In (Rail->Voll) wird leicht verzoegert, damit er erst greift, wenn die Sidebar breit genug ist. */ .app-sidebar.rail .vylife-logo-title, .app-sidebar.rail .app-sidebar-profile-info, .app-sidebar.rail .app-sidebar-footer-text { opacity: 0; max-width: 0; transform: translateX(-6px); overflow: hidden; white-space: nowrap; pointer-events: none; /* Ausblenden (Voll->Rail) ohne Delay, damit der Text sofort mit dem Zuklappen zu faden beginnt. */ transition: opacity 0.14s ease-in-out, max-width 0.2s ease-in-out, transform 0.14s ease-in-out; } /* Das Suchfeld wird im Rail zum reinen Such-Icon: das Textinput verschwindet, die Lupe bleibt zentriert und mittig als Absprung fuer die globale Schnellsuche (oeffnet spaeter ein Popover). Keine Button-/Card- Optik mehr (kein Rahmen, keine eigene Flaeche in Ruhe) - nur das Icon, mit demselben neutralen Hover-Ton wie die uebrigen Icon-Buttons (--shell-icon-hover, app.css), statt eines eigenstaendigen Feld-Looks. */ .app-sidebar.rail .app-sidebar-search-input { display: none; } .app-sidebar.rail .app-sidebar-search-label { display: none; } .app-sidebar.rail .app-sidebar-search { justify-content: center; width: 36px; height: 36px; margin: 0 auto; padding: 0; gap: 0; cursor: pointer; border-radius: 8px; border: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .app-sidebar.rail .app-sidebar-search:hover { background: var(--shell-icon-hover); } .app-sidebar.rail .app-sidebar-search:focus-within { border: none; box-shadow: none; background: var(--shell-icon-hover); } .app-sidebar.rail .app-sidebar-search-section { padding-left: 0; padding-right: 0; } /* Im Rail-Modus rueckt die Navigation wieder direkt ans Suchfeld heran (kein Windows-Vollansicht-Abstand noetig, da hier ohnehin nur schmale Icon-Spalten ohne Labels/Textabsaetze sichtbar sind). WICHTIG: neben .app-nav-wrap muss auch .app-nav selbst ueberschrieben werden - dessen Basisregel (margin-top: 0.5rem, weiter unten) gilt sonst weiterhin und liess den Abstand Suchfeld<->erster Menuepunkt sichtbar groesser wirken als den Abstand zwischen den Menuepunkten untereinander. */ .app-sidebar.rail .app-nav-wrap, .app-sidebar.rail .app-nav-wrap .app-nav { margin-top: 0; } /* Nav-Labels ausblenden, Icon bleibt an gleicher horizontaler Position. Echte Fluent-Struktur: positioning-region > content-region > fluent-nav-link > (svg + .fluent-nav-text). Statt display:none (nicht animierbar) faden wir den Text ueber Opacity/Breite weich aus. WICHTIG: margin:0, damit der (auf 0 kollabierende) Text keinen Rand- Versatz erzeugt und das Icon exakt zentriert bleibt. */ .app-sidebar.rail .app-nav .fluent-nav-text { opacity: 0; max-width: 0; margin: 0 !important; transform: translateX(-6px); overflow: hidden; white-space: nowrap; pointer-events: none; transition: opacity 0.14s ease-in-out, max-width 0.2s ease-in-out, transform 0.14s ease-in-out; } .app-sidebar.rail .app-nav .content-region { margin-inline-start: 0 !important; gap: 0 !important; } .app-sidebar.rail .app-nav .positioning-region, .app-sidebar.rail .app-nav .content-region, .app-sidebar.rail .app-nav .fluent-nav-link { justify-content: center !important; } /* Im Rail ist jeder Nav-Punkt ein QUADRATISCHER Icon-Button (Win11-Rail). Die aeussere Kette (span/content-region/fluent-nav-link) fuellt die Spalte, damit alles zentriert und klickbar bleibt; die graue Hover-/Aktiv-Flaeche (.positioning-region) selbst ist aber ein zentriertes 36x36-Quadrat statt eines breiten Rechtecks. Der Strich (.app-nav-indicator) liegt im linken Rand DANEBEN (nicht ueber der Flaeche), daher wirkt der Button quadratisch. */ .app-sidebar.rail .app-nav .fluent-nav-item > span, .app-sidebar.rail .app-nav .content-region, .app-sidebar.rail .app-nav .fluent-nav-link { width: 100% !important; box-sizing: border-box; } .app-sidebar.rail .app-nav .positioning-region { width: 36px !important; height: 36px !important; margin: 0 auto !important; border-radius: 8px !important; box-sizing: border-box; } .app-sidebar.rail .app-nav .fluent-nav-link { padding-left: 0; padding-right: 0; } /* Footer im Rail zentrieren (nur noch das Hilfe-Icon). */ .app-sidebar.rail .app-sidebar-footer { justify-content: center; padding-left: 0; padding-right: 0; } .app-sidebar.rail .app-sidebar-footer-brand { justify-content: center; } /* Versionszeile im Rail komplett ausblenden - nur im vollen Modus sichtbar. */ .app-sidebar.rail .app-sidebar-footer-version { display: none; } /* Brand/Profil im Rail zentrieren, damit Logo und Avatar mittig in der schmalen Spalte sitzen. */ .app-sidebar.rail .app-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } /* WICHTIG: .vylife-logo setzt intern einen festen gap (siehe VylifeLogo.razor.css) zwischen Icon und Titel-Block. Auch wenn der Titel-Block im Rail via opacity/max-width ausgeblendet wird, bleibt dieser gap als tatsaechlicher Flex-Abstand bestehen - dadurch wird nicht das Icon selbst zentriert, sondern "Icon + Gap + Null-Breite-Titel" zusammen, was das Icon sichtbar nach links verschiebt (analog .landing-sidebar.rail .landing-brand .vylife-logo in landing.css). Im Rail-Modus daher den gap auf 0 setzen, damit wirklich nur das Icon zentriert wird. */ .app-sidebar.rail .app-sidebar-brand .vylife-logo { gap: 0; } .app-sidebar.rail .app-sidebar-profile { display: flex; align-items: center; justify-content: center; /* Gleicher knapper Abstand nach oben wie in der Vollansicht (EXPERIMENT, Windows-11-Einstellungsseite-Referenz), statt mehr Luft im Rail-Modus zu haben. */ height: auto; padding: 0.5rem 0 0.5rem 0; } /* Persona im Rail auf den reinen Avatar reduzieren: Namensblock weg, der Avatar wird zentriert. .fluent-persona rendert initials + name nebenein- ander; wir blenden .name aus und zentrieren den Rest. */ .app-sidebar.rail .app-sidebar-profile .fluent-persona { justify-content: center; align-items: center; } /* Persona im Rail auf den reinen Avatar reduzieren: Namensblock faded weg (nicht display:none, sondern animierbar wie die uebrigen Sidebar-Texte), der Avatar bleibt zentriert. */ .app-sidebar.rail .app-sidebar-profile .fluent-persona .name { opacity: 0; max-width: 0; margin: 0 !important; transform: translateX(-6px); overflow: hidden; white-space: nowrap; pointer-events: none; transition: opacity 0.14s ease-in-out, max-width 0.2s ease-in-out, transform 0.14s ease-in-out; } /* Zusaetzlich die Hoehe des Text-Blocks kollabieren: der Namensblock ist eine table-cell mit 3 Zeilen und wuerde den Profil-Container sonst hoeher machen als den 32px-Avatar (asymmetrischer Vertikalraum). Wir setzen den inneren Info-Block auf Hoehe 0, damit der Container exakt so hoch wie der Avatar bleibt. */ .app-sidebar.rail .app-sidebar-profile .fluent-persona .name .app-sidebar-profile-info { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; } /* Persona rendert intern als Tabelle; die .name-Zelle behaelt sonst ihre intrinsische Zeilenhoehe und macht die Persona hoeher als den 32px-Avatar. .name im Rail komplett aus dem Layout nehmen, damit nur der Avatar die Hoehe bestimmt und exakt mittig zwischen den Linien sitzt. */ .app-sidebar.rail .app-sidebar-profile .fluent-persona .name { width: 0 !important; height: 0 !important; min-width: 0 !important; padding: 0 !important; } /* Status-Punkt am kleineren Rail-Avatar proportional verkleinern (Voll: 18px an 64px -> Rail: ~12px an 36px). Eigener Offset, da die Voll-Ansicht right/bottom:0 nutzt, das Rail-Original aber mit -2px gepasst hat. */ .app-sidebar.rail .app-sidebar-profile .fluent-presence-badge svg.status { right: -2px; bottom: -2px; width: 12px !important; height: 12px; } /* Initialen-Schrift proportional zum kleineren Rail-Avatar verkleinern (Voll: 56px Avatar -> Rail: 36px Avatar), sonst wirken die Initialen im schmalen Avatar ueberdimensioniert. Die Transition liegt bereits an der Basis-Regel (.fluent-presence-badge > div, weiter oben), diese Regel liefert nur den Zielwert fuer den Rail-Zustand. */ .app-sidebar.rail .app-sidebar-profile .fluent-presence-badge > div { font-size: 0.75rem !important; } /* Placeholder-Punkt (siehe oben, fluent-persona:not(:defined)::after) im Rail-Modus proportional verkleinert, analog zum echten Presence-Punkt. */ .app-sidebar.rail .app-sidebar-profile fluent-persona:not(:defined)::after { right: -2px; bottom: -2px; width: 12px; height: 12px; } } .app-sidebar-profile { /* Knapper Abstand nach oben zum Brand-Bereich (EXPERIMENT, Referenz Windows-11-Einstellungsseite: der Profilbereich sitzt dort recht nah unter dem Titel, statt mit viel Luft abgesetzt zu sein). Keine Trennlinie zum Suchfeld darunter. Feste Gesamthoehe (box-sizing: border-box), damit die darunter liegende Suchfeld/Nav-Trennlinie in Voll- UND Rail-Ansicht auf gleicher Hoehe sitzt. */ box-sizing: border-box; position: relative; height: 6rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin-bottom: 0.5rem; border-radius: 6px; } /* Stift-Button: bewusst NICHT die ganze Karte hoverbar/klickbar - nur der Bearbeiten-Button reagiert (siehe Nutzer-Feedback: grossflaechiger Hover ueber Avatar+Text sah unpassend aus). Unten rechts an der Karte verankert und dauerhaft sichtbar (kein Hover-Reveal mehr). */ .app-sidebar-profile-edit { position: absolute; bottom: 0.5rem; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--neutral-foreground-secondary); cursor: pointer; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; } .app-sidebar-profile-edit:hover { /* Gemeinsamer, neutraler Hover-Token (--shell-icon-hover, app.css) wie Header-Icons/IconActionButton und Hauptnavigation - konsistentes Hover-Verhalten app-weit. */ background-color: var(--shell-icon-hover); color: var(--neutral-foreground-rest); } .app-sidebar-profile-edit:focus-visible { outline: 1px solid var(--accent-fill-rest); outline-offset: -1px; } /* Im Rail-Modus ist kein Platz fuer den Stift neben dem schmalen Avatar - dort bleibt die Karte reine Anzeige. */ .app-sidebar.rail .app-sidebar-profile-edit { display: none; } /* Presence-Punkt (Anwesenheits-Status) am Initialen-Avatar korrekt verankern. FluentPersona rendert die Initialen als table-cell; ohne eigene Regel legt Fluent die Status-SVG daneben in den Fluss statt unten rechts ueber den Avatar. Wir machen den Badge-Container zum Positionierungskontext und heften die SVG als kleinen Punkt an die untere rechte Ecke - mit einem duennen Ring in der Hintergrundfarbe der Sidebar, damit ein sauberer Trennspalt zum Avatar entsteht (Windows/Teams-Optik), ohne den Punkt selbst zu ueberdecken. */ .app-sidebar-profile .fluent-presence-badge { position: relative; display: inline-block; } /* Akzentfarbe des Initialen-Avatars: siehe globale Regel in app.css (fluent-persona .fluent-presence-badge > div), dort app-weit fuer JEDE FluentPersona definiert statt hier auf den Sidebar-Profilbereich beschraenkt zu bleiben. */ /* Avatar-Groesse (64px<->36px, per Inline-Style ueber ImageSize gesetzt) beim Umschalten Voll<->Rail bewusst OHNE Transition: das Placeholder-Div (Initialen-Zelle) sprang zuvor animiert um, waehrend das darueber liegende echte Profilbild () nicht von dieser Regel erfasst wurde und daher sofort/ungleichmaessig sprang. Damit Placeholder und Bild wieder einheitlich (beide sofort) umschalten, wird hier keine Groessen-Animation mehr gesetzt. */ .app-sidebar-profile .fluent-presence-badge svg.status { position: absolute; /* Negativ-Offset, damit der Punkt AN der unteren rechten Ecke sitzt - unabhaengig von seiner Groesse bleibt die Position fix. */ right: 0; bottom: 0; width: 18px !important; height: 18px; border-radius: 50%; /* Windows-11-'Verfuegbar'-Gruen statt des grellen Fluent-Neongruens. Helleres, frisches Xbox-/Win11-Status-Gruen. Sowohl fill als auch color setzen, da Fluent die Presence-SVG teils ueber currentColor faerbt. Bewusst OHNE Ring/Rahmen um den Punkt - nur die reine Gruenflaeche. */ /* Fallback-Wert (#13a10e, Fluent-Default) direkt im var()-Aufruf: die CSS-Variable --presence-available wird von Fluent erst per JS beim Start des interaktiven Circuits injiziert (Design-Token-Setup). Waehrend der Prerender-Phase ist die Variable also noch undefiniert - ohne Fallback erscheint der Punkt kurz farblos/transparent und "poppt" beim JS-Start sichtbar in Gruen auf. Mit Fallback ist die Farbe von Anfang an stabil. */ fill: var(--presence-available, #13a10e) !important; color: var(--presence-available, #13a10e) !important; } .app-sidebar-profile .fluent-presence-badge svg.status path { fill: var(--presence-available, #13a10e) !important; } .app-sidebar-profile-info { display: flex; flex-direction: column; min-width: 0; } .app-sidebar-profile-name { font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--neutral-foreground-rest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar-profile-email { font-size: 0.75rem; /* Sekundaertext: etwas kraeftiger als der Hint, aber leiser als der Name - Windows-typische Kontraststufung. */ color: var(--neutral-foreground-secondary); line-height: 1.25; margin-top: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar-profile-location-role { font-size: 11px; color: var(--neutral-foreground-hint); line-height: 1.25; margin-top: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Globale Schnellsuche ueber der Hauptnavigation ---- Entitaetsuebergreifender Schnellzugriff. Dezente Acryl-Flaeche wie die Nav-Punkte, damit sie als zur Sidebar gehoerendes "Material" wirkt; im Fokus ein akzentfarbener Rahmen (folgt automatisch der System-Akzentfarbe). Aeussere Abstaende (padding/margin/Divider) sind bewusst mit .app-sidebar-profile abgestimmt, damit der Suchbereich denselben seitlichen Abstand und dieselbe vertikale Gliederung wie Profil und Hauptmenue hat. */ .app-sidebar-search-section { /* Oben nur 2px, damit das Suchfeld naeher an den Profilbereich rueckt (dessen margin-bottom 0.5rem zaehlt zusaetzlich). Unten sehr knapp (EXPERIMENT), damit die Navigation direkt anschliesst, als waere das Suchfeld selbst der oberste Hauptnavigationspunkt. */ padding: 0.125rem 0.5rem 0.125rem 0.5rem; margin-bottom: 0; } .app-sidebar-search { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; /* Wie ein Fluent-Outline-Textfeld (analog zu den Login-Feldern): rundum gleicher, gerundeter Rahmen. Im Fokus wird zusaetzlich die Unterkante akzentfarben (Win11-Underline) - siehe :focus-within. Kein abgeschnittener Look mehr durch nur-oben-gerundete Ecken. */ border-radius: 4px; /* Ruhezustand: Feldflaeche kommt aus dem zentralen Theme-Token --input-background (app.css) - identisch zu .form-input/.app-input. In der Vollbreiten-Sidebar ist dieses Feld ein normales Textfeld (kein Icon-Button wie im Rail-Modus) - dafuer ist KEIN Hover-Effekt gerechtfertigt, nur Fokus gibt Feedback (siehe :focus-within unten). */ background: var(--input-background); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--input-stroke); transition: border-color 0.12s ease-in-out, background 0.12s ease-in-out, box-shadow 0.12s ease-in-out; } /* Fokus: wie ein fokussiertes Fluent-Textfeld gleich, die untere Kante bekommt eine akzentfarbene Unterlinie (via box-shadow, damit die 6px-Rundung erhalten bleibt). Die Flaeche selbst bleibt bewusst neutral (keine Akzentfarbe im Feldinhalt) - nur der Rahmen/die Unterlinie ist akzentfarben. Gilt fuer alle Eingabefelder nach demselben Muster (.form-input, .app-input, .login-input). */ .app-sidebar-search:focus-within { border-color: var(--input-stroke); box-shadow: inset 0 -2px 0 0 var(--accent-fill-rest); } /* Lupe rechts im Feld: neutraler Kontrast-Ton (--shell-icon-hover-Logik, Sekundaerfarbe) in Ruhe, Hover UND Fokus - Feldinhalt bleibt bewusst frei von Akzentfarbe (nur Rahmen/Unterlinie ist akzentfarben, siehe oben). */ .app-sidebar-search-icon { flex: 0 0 auto; order: 2; } .app-sidebar-search-icon svg { fill: var(--neutral-foreground-secondary) !important; transition: fill 0.12s ease-in-out; } .app-sidebar-search:focus-within .app-sidebar-search-icon svg { fill: var(--neutral-foreground-rest) !important; } .app-sidebar-search-input { flex: 1; order: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 0.875rem; color: var(--neutral-foreground-rest); } /* Floating-Label wie bei .app-input-floating (app.css): der Placeholder-Text "Suchen..." liegt in Ruhe als Label ueber dem (leeren) Feld und springt bei Fokus/Eingabe nach oben aus der Feldflaeche heraus, dabei wird er akzentfarben - dasselbe Verhalten wie bei den uebrigen Formularfeldern, statt eines statischen, neutralen input::placeholder. Das echte input::placeholder bleibt leer (nur ein Leerzeichen, siehe Markup), damit :placeholder-shown weiterhin funktioniert. */ .app-sidebar-search-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.875rem; line-height: 1; color: var(--neutral-foreground-hint); pointer-events: none; transition: top 0.15s ease-in-out, font-size 0.15s ease-in-out, color 0.12s ease-in-out; } .app-sidebar-search-input:focus ~ .app-sidebar-search-label, .app-sidebar-search-input:not(:placeholder-shown) ~ .app-sidebar-search-label { top: -18px; transform: none; font-size: 0.75rem; color: var(--neutral-foreground-secondary); } .app-sidebar-search-input:focus ~ .app-sidebar-search-label { color: var(--accent-fill-rest); } .app-sidebar-search-input::placeholder { color: var(--neutral-foreground-hint); } /* FluentNavMenu soll die verfuegbare Hoehe fuellen. */ .app-nav { flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 0.5rem; width: 100%; /* Weichere Scroll-Bewegung bei Mausrad/Tastatur/programmatischem Scrollen (z.B. Sprung zu einem fokussierten Nav-Link). Wirkt browserseitig ohne eigenes JS; fuer Trackpad-Wischgesten war die Bewegung ohnehin schon weich, hier geht es primaer um Mausrad-Schritte. */ scroll-behavior: smooth; /* Native Scrollbar hier komplett ausblenden: Chromium/WebView2 reserviert fuer sie weiterhin sichtbaren Platz (unabhaengig von den globalen ::-webkit-scrollbar-Overrides oben), was im Rail-Modus die Icons nach links schob. Stattdessen zeichnet app-shell.js einen eigenen, absolut positionierten Overlay-Thumb (.app-nav-scrollbar-track/-thumb weiter unten), der KEINEN Platz reserviert. */ scrollbar-width: none; -ms-overflow-style: none; } .app-nav::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } /* Wrapper fuer den Win11-Selection-Indicator: das Menue plus der absolut positionierte gleitende Balken teilen sich denselben Positionierungs-Kontext. */ .app-nav-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; /* Windows-11-typischer Abstand zwischen Suchfeld und Hauptnavigation in der Vollansicht (eigenstaendig abgesetzter Bereich statt direkt anzuschliessen). Im Rail-Modus (schmale Icon-Spalte) ruecken Suchfeld und Navigation dagegen bewusst enger zusammen - siehe Rail-Override weiter unten. */ margin-top: 0.5rem; } .app-nav-wrap .app-nav { margin-top: 0; } /* Der gleitende Balken (Win11 Selection Indicator): ein 3px breiter, akzentfarbener, abgerundeter Strich links. Position wird ueber top + bottom aufgespannt und per JS gesetzt; die Transition (inkl. Stretch-Delays) kommt ebenfalls aus dem JS (app-shell.js). */ .app-nav-indicator { position: absolute; left: 0; width: 3px; border-radius: 3px; background: var(--accent-fill-rest); pointer-events: none; z-index: 1; /* Ragt die aktive Zeile durch Scrollen ueber den Rand von .app-nav hinaus (z.B. am oberen Rand hinter der Suchleiste angeschnitten), wird der Strich exakt im gleichen Mass zugeschnitten (clip-path, per JS gesetzt in reposition()/app-shell.js) statt in voller Laenge herauszuragen. */ /* Ohne top/bottom nimmt das Element (position: absolute) seine normale Fluss-Position ein - also faktisch ganz oben im Container, neben dem ERSTEN Menuepunkt, unabhaengig davon welcher tatsaechlich aktiv ist. Bis app-shell.js (moveToActive/reposition) die echte top/bottom-Position gemessen und gesetzt hat, bleibt der Strich daher unsichtbar - sonst "springt" er beim (Re-)Mount sichtbar von der ersten Zeile zur tatsaechlich aktiven Zeile, wenn diese weiter unten in der Liste steht. */ visibility: hidden; } /* Eigene Overlay-Scrollbar der Sidebar-Navigation (siehe app-shell.js, initNavScrollbar). STANDARD-MUSTER: Dieses Overlay-Scrollbar-Konzept (native Scrollbar komplett ausgeblendet + eigener, an der Aussenkante positionierter Thumb) ist als kuenftiger GLOBALER Standard fuer alle scrollbaren Container der App gedacht - spaeter auch fuer Panels, Popups/Dialoge und Flyouts, nicht nur die Sidebar-Navigation. Bei Uebernahme fuer einen neuen Container: - Track/Thumb-Klassen analog benennen (z.B. .app-panel-scrollbar-track) oder generisch als .app-scrollbar-track/-thumb + BEM-Modifier fassen, sobald ein zweiter Verwendungsfall ansteht. - right-Offset des Tracks immer negativ um das Padding des jeweiligen Containers setzen (siehe Erklaerung unten), damit der Thumb an dessen eigener Aussenkante landet statt am inneren Scroll-Container. - Farbe/Breite/border-radius 1:1 uebernehmen, damit alle Overlay- Scrollbars der App einheitlich aussehen (kein seitenspezifisches Redesign). Liegt absolut GANZ AUSSEN, direkt an der rechten Sidebar-Aussenkante von .app-nav-wrap (wie im Windows-11-Startmenue: die Scrollbar der Menuekarte sitzt praktisch buendig an der Kartenkante, nicht mit sichtbarem Abstand daneben) - reserviert keinen Platz und schiebt die Nav-Icons nie zur Seite. Anders als eine reine "nur beim Scrollen"-Auto-Hide-Leiste blendet sie erst beim Hover ueber die Sidebar-Navigation ein (siehe .app-nav-wrap:hover weiter unten) und bleibt ansonsten unsichtbar. Die Farbe bleibt dabei KONSTANT (kein Aufhellen/Abdunkeln waehrend des Scrollens). WICHTIG zur Position: .app-nav-wrap liegt INNERHALB des Sidebar-Paddings (siehe .app-sidebar padding-right: 0.75rem / .app-sidebar.rail padding-right: 6px), right:0 waere also noch VOR der eigentlichen Sidebar-Aussenkante. Der negative right-Offset schiebt den Track exakt um dieses Padding nach rechts heraus, damit er wirklich an der Sidebar-Kante selbst sitzt (Voll- und Rail-Modus haben unterschiedliches Padding, daher die getrennten Werte in der Rail-Media-Query weiter unten). */ .app-nav-scrollbar-track { position: absolute; top: 0; right: -0.75rem; bottom: 0; width: 2px; pointer-events: none; z-index: 2; /* Nur bei Hover ueber der Sidebar-Navigation einblenden (Windows-11- Overlay-Scrollbar-Verhalten), statt dauerhaft sichtbar zu sein. */ opacity: 0; transition: opacity 0.15s ease; } .app-nav-wrap:hover .app-nav-scrollbar-track { opacity: 1; } .app-nav-scrollbar-thumb { position: absolute; top: 0; left: 0; width: 100%; border-radius: 2px; background-color: color-mix(in srgb, var(--neutral-foreground-rest) 32%, transparent); } /* Hauptmenue-Punkte: schmaler/kompakter wie auf der Win11-Einstellungsseite. */ .app-nav .fluent-nav-link { height: 36px; font-size: 0.9rem; font-weight: 500; border-radius: 6px; /* Kleines linkes Padding, damit Icon/Text nah am Selection-Balken sitzen (Win11-Einstellungsseite-Optik). */ padding-left: 4px; padding-right: 6px; } /* Fluent setzt den Abstand zwischen Balken/Rand und Icon NICHT per Padding auf dem Link, sondern via `margin-inline-start` auf der .content-region und einem Padding auf der .positioning-region. Diese liegen NICHT zwingend unter .fluent-nav-link, daher breit direkt unter .app-nav ansetzen, sonst greift die Regel nicht (Icon/Text bleiben zu weit vom Strich weg). */ .app-nav .positioning-region { padding-left: 0 !important; padding-inline-start: 0 !important; } .app-nav .content-region { margin-inline-start: 2px !important; gap: 10px; } .app-nav a { padding-left: 0 !important; padding-inline-start: 0 !important; } /* EXPERIMENT (Win11-Einstellungsseite-Optik): GRUNDZUSTAND (inaktiv) OHNE eigene Hintergrundflaeche - der Nav-Punkt zeigt nur Icon/Text auf dem Sidebar-Hintergrund, keine eigene "Material"-Flaeche mehr. BEWUSST OHNE eigenes backdrop-filter: die Sidebar selbst ist bereits eine geblurrte Acryl-Flaeche; ein zusaetzliches blur() PRO Nav-Button erzeugt in Chromium/Edge-WebView2 einen eigenen Compositor-Layer je Button. Sobald das Administration-Flyout (ebenfalls backdrop-filter) direkt daneben liegt und beim Hovern neu gezeichnet wird, entstehen an den ueberlappenden Layer- Kanten sichtbare rechteckige Nahtstellen auf den Nav-Buttons. Ohne eigenes blur() gibt es diese Layer-Ueberlappung nicht mehr. */ .app-nav .positioning-region { background: transparent !important; transition: background 0.12s ease-in-out; } /* Hover (nicht-aktiver Punkt): gemeinsamer, neutraler Hover-Token (--shell-icon-hover, app.css) - derselbe Ton wie Header-Icons und Bearbeiten-Button (Kontrast zum Theme-Hintergrund statt Akzentfarbe). */ .app-nav .fluent-nav-item:not(.active) .positioning-region:hover { background: var(--shell-icon-hover) !important; } /* AKTIVER Nav-Punkt: uebernimmt exakt denselben Ton wie der Hover-Zustand (statt einer staerkeren eigenen Akzent-Flaeche), damit aktiv und Hover farblich identisch wirken. Einheitlich fuer Hell UND Dunkel. */ .app-nav .active .positioning-region, .app-nav .fluent-nav-link.nav-active .positioning-region, .app-nav .nav-active .positioning-region { background: var(--shell-icon-hover) !important; } /* Hover eines aktiven Punktes: gleicher Ton, bleibt dadurch stabil/gleich. */ .app-nav .active .positioning-region:hover, .app-nav .nav-active .positioning-region:hover { background: var(--shell-icon-hover) !important; } /* Fluent-Default-Indikator (eigener Strich pro aktivem Link) ausblenden - wir nutzen stattdessen den EINEN gleitenden .app-nav-indicator. */ .app-nav .fluent-nav-link::before, .app-nav .fluent-nav-link .fluent-nav-link-indicator { display: none !important; } .app-nav .fluent-nav-link .fluent-nav-icon, .app-nav .fluent-nav-link svg { width: 22px; height: 22px; } /* Der Browser-Default-Fokusring (bunter Rahmen, je nach Browser blau/lila) wird durch einen dezenten, akzentfarbenen Fokusring im Fluent-Stil ersetzt - tritt z.B. auf, wenn nach dem Schliessen des Administration-Flyouts der Fokus auf den zuletzt aktiven Nav-Link zurueckspringt. */ .app-nav .fluent-nav-link:focus-visible { outline: 1px solid var(--accent-fill-rest); outline-offset: -1px; } .app-nav .fluent-nav-link:focus:not(:focus-visible) { outline: none; } /* ---- Fussbereich der Sidebar ---- */ .app-sidebar-footer { margin-top: auto; padding: 0.75rem 0.5rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; } /* Trennlinie oberhalb der Fusszeile - selbes FluentDivider-Muster wie die Marken-Trennlinie oben; Kontrast-Override erbt von .app-sidebar. */ .app-sidebar-footer-divider { margin: 0 0 0.4rem 0; } /* Zeile mit 'Powered by Vylife' + Hilfe-Icon. */ .app-sidebar-footer-brand { display: flex; align-items: center; justify-content: space-between; } .app-sidebar-footer-text { display: inline-flex; align-items: baseline; gap: 0.2rem; font-size: 11px; /* Voller Kontrast (fast schwarz im Hell / weiss im Dark), damit der Vermerk klar lesbar ist. */ color: var(--neutral-foreground-rest); } /* Hilfe-/Info-Icon in der Fusszeile: etwas groesser als der Fusszeilentext, vertikal zentriert zur 'Powered by Vylife.'-Zeile. Farbe bewusst genauso dezent wie .app-sidebar-footer-text, damit es nicht auffaelliger als der Fusszeilentext wirkt. */ .app-sidebar-footer-help { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; align-self: center; color: var(--neutral-foreground-rest); } .app-sidebar-footer-help svg { width: 16px; height: 16px; } /* Versionszeile ganz unten: dezenter Hinweistext unter 'Powered by Vylife'. */ .app-sidebar-footer-version { font-size: 11px; color: var(--neutral-foreground-hint); line-height: 1.2; } /* Sidebar-Trennlinien (Firma/Profil, unter Profil, ueber Footer) in dezent getoenter Akzentfarbe, damit die Gliederung des Hauptmenues deutlicher wirkt und sich vom neutralen Content-Chrome abhebt. Die Toenungsstaerke je Theme steuert zentral --sidebar-divider (app.css). */ .app-sidebar-brand, .app-sidebar-profile, .app-sidebar-search-section, .app-sidebar-footer { border-color: var(--sidebar-divider); } /* ---- Inhaltsbereich: schlichte Standard-Hintergrundfarbe (neutral-layer-1), OHNE Blur/Transparenz - identisch zu Header/Sidebar, damit die gesamte Shell wie EINE einheitliche, ruhige Flaeche wirkt (analog zur Windows-11- Einstellungsseite). Option offen fuer spaetere Wiedereinfuehrung von Verlauf/Mica-Textur, falls gewuenscht. */ .app-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.5rem 2.5rem; background: var(--app-shell-background); min-width: 0; /* Container-Query-Kontext: Content-Bereiche (z.B. .win11-two-col in app.css) reagieren damit auf die tatsaechlich verfuegbare Breite DIESES Bereichs statt auf die Fensterbreite - der Effekt greift also korrekt, wenn sich die Rail oeffnet/schliesst (Content wird breiter/schmaler), unabhaengig von Browser-Zoom oder Fenstergroesse. Die Rail selbst bleibt davon komplett unberuehrt. */ container-type: inline-size; container-name: app-content; } /* Win11-typische Content-Einblendung beim Menuewechsel: leichtes Hochgleiten mit Fade. Dauer ~ dem Selection-Balken (app-shell.js), damit beide Effekte zusammen wirken. Zusaetzlich (generisch fuer JEDE Seite, da app-content-fade der einzige direkte Kindwrapper von .app-content ist): begrenzt die maximale Breite des Contents. Hintergrund: Windows empfiehlt bei 4K bewusst 300% Skalierung - bei DIESER Skalierung stimmen Proportionen/Lesbarkeit optimal. Stellt man eine niedrigere Skalierung ein (z.B. 250%/200%), wird die effektive CSS-Pixel-Breite groesser (weniger Skalierung = mehr logische Pixel passen auf den Bildschirm) - ohne Deckelung wuerde der Inhalt dann unbegrenzt mitwachsen und Formulare/Tabellen wuerden unleserlich breit. Windows-11- Einstellungen und aehnliche Seiten (z.B. GitHub) loesen das genauso: ab einer bestimmten effektiven Breite waechst der Content einfach nicht mehr mit und bleibt LINKSBUENDIG stehen (kein margin:auto/Zentrierung) - .app-content bleibt selbst weiterhin voll breit (Hintergrundflaeche), nur der eigentliche Inhalt wird gedeckelt. */ .app-content-fade { animation: app-content-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); max-width: 1800px; } /* Demo/Option 2 (siehe MainLayout.razor _suppressAnim): unterdrueckt die Fade-Einblendung fuer den allerersten Content-Render nach dem Wechsel von Prerendering auf den interaktiven Circuit. Ohne dies laeuft die Animation sichtbar ZWEIMAL kurz hintereinander (einmal beim statischen Prerender- Markup, einmal erneut beim interaktiven Remount desselben Contents) - das erzeugt den "doppelten Flash" im Hauptcontent. _suppressAnim wird bereits fuer die Sidebar (.no-anim) verwendet und im selben Moment (nach dem initialen Shell-JS-Boot in OnAfterRenderAsync) wieder auf false gesetzt. */ .app-content-fade.no-anim { animation: none; } @keyframes app-content-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Nutzer mit reduzierter Bewegung: keine Animation. */ @media (prefers-reduced-motion: reduce) { .app-content-fade { animation: none; } .app-nav-indicator { transition: none; } } /* Hamburger ist immer sichtbar: auf Desktop schaltet er den Rail-Modus, auf schmalen Screens oeffnet/schliesst er das mobile Drawer. */ .app-header-hamburger { display: inline-flex; } @media (max-width: 767px) { .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; box-shadow: var(--shadow-overlay); z-index: 50; } .app-sidebar.open { transform: translateX(0); } .app-header-hamburger { display: inline-flex; } .app-content { padding: 1.5rem 1rem; } /* Overlay hinter der aufgeklappten Sidebar: schliesst sie beim Klick in den Content. Nur in der mobilen Ansicht sichtbar. */ .app-sidebar-overlay { position: fixed; inset: 0; z-index: 40; background: var(--scrim-color); } } /* Auf Desktop-Breite existiert kein aufklappbares Menue -> kein Overlay. */ .app-sidebar-overlay { display: none; } @media (max-width: 767px) { .app-sidebar-overlay { display: block; } } /* Confirm-Dialog-Overlay/-Card wurde durch den nativen Fluent-UI-Dialog-Stack (IDialogService/FluentDialogProvider) ersetzt - siehe MainLayout.razor, Benutzerverwaltung.razor, CreateUserDialog.razor. Die .app-confirm-* Klassen sind daher nicht mehr in Verwendung und wurden entfernt. */ /* Hinweis zur Akzentfarbe in Cards: Fluent berechnet --accent-fill-rest adaptiv zur Helligkeit der darunterliegenden Flaeche (Kontrast-Rezept) und schreibt das Ergebnis per JavaScript (DesignToken-System) direkt auf das Element. Ein CSS-Override von --fill-color hat darauf KEINEN Einfluss - das wurde im Styleguide (Abschnitt 4) nachgemessen. Die Vereinheitlichung der Akzentfarbe erfolgt deshalb in app-shell.js (applyUniformAccent). */ /* Abmelde-Bestaetigung (natives Fluent-MessageBox im FluentDialogProvider, siehe MainLayout.razor RequestLogoutAsync): Icon/Buttons sollen demselben Muster wie .surface-header folgen (Icon in Accent-Farbe statt Fluents Standard-Warnsymbolfarbe). Buttons erben ihren Ton bereits ueber applyUniformAccent() (app-shell.js), da fluent-dialog im ACCENT_HOST_SELECTOR enthalten ist - hier nur noch das Icon angleichen. */ .fluent-messagebox .icon { color: var(--accent-fill-rest) !important; fill: var(--accent-fill-rest) !important; } /* Toasts (FluentToastProvider/ToastService) sollen unabhaengig vom Intent (Success/Error/Warning/Info) einheitlich in der Akzentfarbe erscheinen, statt in Fluents Standard-Neutralfarben. --foreground-on-accent-rest ist dasselbe kontrastberechnete Token, das Fluent auch fuer Text auf Accent-Buttons verwendet (siehe accent-fill-rest-Muster oben), daher bleibt die Schrift automatisch lesbar. !important noetig, da Fluent den Hintergrund sonst per Intent-spezifischem Inline-Style setzt. */ .fluent-toast { background-color: var(--accent-fill-rest) !important; color: var(--foreground-on-accent-rest) !important; } .fluent-toast .fluent-toast-title, .fluent-toast .fluent-toast-body, .fluent-toast .fluent-toast-action { color: var(--foreground-on-accent-rest) !important; } .fluent-toast svg { fill: var(--foreground-on-accent-rest) !important; }