/* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-6s9wre4iq1] { position: relative; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } main[b-6s9wre4iq1] { flex: 1; min-height: 0; overflow-y: auto; } .sidebar[b-6s9wre4iq1] { background: linear-gradient(180deg, #334155 0%, #1E293B 100%); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); border-right: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.15); transition: width 0.2s ease; } /* Collapsed-Modus: schmaler Icon-Streifen. Klasse "sidebar-collapsed" wird serverseitig in App.razor anhand des Cookies "rivca-sidebar-collapsed" auf gesetzt -> kein Flicker beim Reload. Blazor scoped CSS scopen automatisch nur den letzten Selektor (.sidebar), "html.sidebar-collapsed" bleibt als Praefix unveraendert. KEIN :global() verwenden! */ html.sidebar-collapsed .sidebar[b-6s9wre4iq1] { width: 64px !important; /* overflow visible damit Flyout-Panels (Pattern B) aus der Sidebar austreten koennen und rechts daneben mit Items angezeigt werden. */ overflow: visible !important; } /* Im collapsed-Modus muss auch der Page-Container overflow visible erlauben, sonst wuerde das Flyout-Panel beim Austritt aus der Sidebar geklippt werden. .page hat height: 100vh und enthaelt nur Sidebar+main (beide 100vh) -> es gibt keinen content der overflowed, daher ist visible hier sicher. */ html.sidebar-collapsed .page[b-6s9wre4iq1] { overflow: visible !important; } /* Dark-Mode-Variante für die Sidebar (scoped, damit sie die helle scoped-Variante schlägt – gleich hoch in der Spezifität durch Attribut-Selector, aber html.mud-theme-dark vorn erhöht sie). */ html.mud-theme-dark .sidebar[b-6s9wre4iq1] { background: linear-gradient(180deg, #0F172A 0%, #020617 100%); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4); border-right: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.2); } .top-row[b-6s9wre4iq1] { background-color: #FFFFFF; border-bottom: 1px solid #E2E8F0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); justify-content: flex-end; height: 3.5rem; display: none; /* Top-Row ausgeblendet */ align-items: center; } html.mud-theme-dark .top-row[b-6s9wre4iq1] { background-color: #0F172A; border-bottom: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .top-row[b-6s9wre4iq1] a, .top-row[b-6s9wre4iq1] .btn-link { white-space: nowrap; margin-left: 1.5rem; text-decoration: none; } .top-row[b-6s9wre4iq1] a:hover, .top-row[b-6s9wre4iq1] .btn-link:hover { text-decoration: underline; } .top-row[b-6s9wre4iq1] a:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640.98px) { .top-row[b-6s9wre4iq1] { justify-content: space-between; } .top-row[b-6s9wre4iq1] a, .top-row[b-6s9wre4iq1] .btn-link { margin-left: 0; } /* Mobile: Sidebar als statische, persistente Sidebar weg. Die Top-Bar (mit NotificationBell) bleibt aber sichtbar, da sie NICHT in .sidebar liegt - sie ist Teil der NavMenu-Component. .sidebar enthaelt nur die NavMenu, deren .top-row sticky/fixed positioniert ist und deren .nav-scrollable im Mobile-Modus zum Slide-Drawer wird. Die Sidebar darf hier nicht display:none werden, sonst verschwindet auch die Top-Bar. Stattdessen: Sidebar nimmt 0 Breite ein und wird zum reinen "Container" fuer die Top-Bar + Slide-Drawer. Der Slide-Drawer (.nav-scrollable) ist position:fixed -> ausserhalb des Layout-Flusses. Die Top-Bar bleibt sichtbar. */ .page[b-6s9wre4iq1] { flex-direction: column; } .sidebar[b-6s9wre4iq1] { width: 100%; height: auto; flex-shrink: 0; overflow: visible; } /* Page-Inhalt nicht von der fixed Bottom-Tab-Bar verdeckt. 64px = Bottom-Nav-Hoehe, env() = iOS-Safe-Area, +16px = Atmungsabstand. */ main[b-6s9wre4iq1] { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px); } } @media (min-width: 641px) { .page[b-6s9wre4iq1] { flex-direction: row; flex-shrink: 0; } .sidebar[b-6s9wre4iq1] { width: 250px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .top-row[b-6s9wre4iq1] { position: sticky; top: 0; z-index: 1; } .top-row.auth[b-6s9wre4iq1] a:first-child { flex: 1; text-align: right; width: 0; } .top-row[b-6s9wre4iq1], article[b-6s9wre4iq1] { padding-left: 2rem !important; padding-right: 1.5rem !important; } } #blazor-error-ui[b-6s9wre4iq1] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-6s9wre4iq1] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/MobileBottomNav.razor.rz.scp.css */ /* Mobile-Bottom-Nav: nur auf Mobile sichtbar (max-width 640.98px). Auf Desktop per default versteckt - dort uebernimmt die Sidebar (Pattern-B-Flyout) die Navigation. */ .mobile-bottom-nav[b-35kmiuspbq] { display: none; } @media (max-width: 640.98px) { .mobile-bottom-nav[b-35kmiuspbq] { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); border-top: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.2); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35); z-index: 1100; justify-content: space-around; align-items: stretch; } } html.mud-theme-dark .mobile-bottom-nav[b-35kmiuspbq] { background: linear-gradient(180deg, #0F172A 0%, #020617 100%); border-top: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.25); } .mobile-bottom-nav .mobile-tab[b-35kmiuspbq] { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.7rem; line-height: 1; font-weight: 500; border: none; background: transparent; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; padding: 0.4rem 0.25rem; margin: 0; min-width: 0; text-align: center; -webkit-tap-highlight-color: transparent; } .mobile-bottom-nav .mobile-tab span[b-35kmiuspbq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; } .mobile-bottom-nav .mobile-tab[b-35kmiuspbq] .mud-icon-root { font-size: 1.5rem !important; width: 1.5rem; height: 1.5rem; color: inherit; margin: 0; } .mobile-bottom-nav .mobile-tab:hover[b-35kmiuspbq] { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.05); } .mobile-bottom-nav .mobile-tab.active[b-35kmiuspbq] { color: #FFFFFF; background-color: rgba(var(--color-primary-rgb, 6, 182, 212), 0.18); } .mobile-bottom-nav .mobile-tab:focus-visible[b-35kmiuspbq] { outline: 2px solid var(--color-primary, #06B6D4); outline-offset: -2px; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ .navbar-logo[b-9peuisnusy] { height: 28px; width: auto; transition: all 0.2s ease; } .navbar-brand:hover .navbar-logo[b-9peuisnusy] { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(var(--color-primary-rgb, 6, 182, 212), 0.4)); } html.mud-theme-dark .navbar-brand:hover .navbar-logo[b-9peuisnusy] { filter: drop-shadow(0 0 12px rgba(var(--color-primary-rgb, 6, 182, 212), 0.6)); } /* Divider zwischen Glocke und Dark Mode Toggle */ .nav-divider[b-9peuisnusy] { width: 1px; height: 24px; background-color: rgba(255, 255, 255, 0.2); } html.mud-theme-dark .nav-divider[b-9peuisnusy] { background-color: rgba(255, 255, 255, 0.15); } .navbar-toggler[b-9peuisnusy] { appearance: none; cursor: pointer; width: 3.5rem; height: 2.5rem; color: white; position: absolute; top: 0.5rem; right: 1rem; /* Ganz rechts */ border: 1px solid rgba(255, 255, 255, 0.1); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); } /* ========================================================================= MOBILE-NAV (max-width: 640.98px) STRIKTE Trennung: Auf Mobile ist NUR die neue Mobile-Navigation sichtbar. - Schlanke Top-Bar: Logo + Brand + NotificationBell (Rest ausgeblendet) - Pattern-B-Sidebar-Toggle, LanguageSwitcher, DarkMode-Toggle, Hamburger weg - .nav-scrollable wird zum links-eingehenden Slide-Drawer (CSS-only via Checkbox) - .mobile-drawer-footer im Drawer enthaelt Sprache + DarkMode (in Top-Bar versteckt) - .mobile-drawer-backdrop = Label fuer Tap-to-close auf Hintergrund ========================================================================= */ @media (max-width: 640.98px) { /* Top-Row schlank: nur Logo/Brand + NotificationBell. Sidebar-Collapse-Toggle (Pattern B) ist Desktop-only und hat auf Mobile keine Bedeutung. Sprache + DarkMode wandern in den Drawer-Footer. */ .top-row .sidebar-collapse-toggle[b-9peuisnusy], .top-row .nav-divider[b-9peuisnusy], .top-row .dark-mode-toggle[b-9peuisnusy], .top-row .top-row-lang[b-9peuisnusy] { display: none !important; } /* Top-Row Layout: Brand links, NotificationBell rechts. */ .top-row .container-fluid[b-9peuisnusy] { padding: 0 0.75rem; } /* Hamburger-Checkbox visuell unsichtbar, aber aktiv (fuer