/* ============================================ Sidebar – Standalone CSS (kein Tailwind/Bootstrap) Based on Satiatrix reference implementation ============================================ */ :root { --sb-width: 240px; --sb-collapsed-width: 64px; --sb-bg: #32323a; --sb-bg-dark: #28282e; --sb-bg-darker: #202025; --sb-text: #aeb2b7; --sb-text-hover: #ffffff; --sb-active-accent: #3E9B2C; --sb-border: rgba(255,255,255,0.05); --sb-transition: .25s cubic-bezier(.4,0,.2,1); --sb-header-height: 48px; } /* ── Pre-paint collapsed (via Klasse, gesetzt im vor erstem Paint) ── */ html.sidebar-will-collapse #sidebar { width: var(--sb-collapsed-width) !important; } html.sidebar-will-collapse #main-content { margin-left: var(--sb-collapsed-width) !important; } html.sidebar-will-collapse .header { left: var(--sb-collapsed-width) !important; } /* ── Sidebar Container ────────────────────── */ #sidebar { width: var(--sb-width); height: 100%; position: fixed; top: 0; left: 0; background: var(--sb-bg); z-index: 1001; display: flex; flex-direction: column; overflow: hidden; } /* Transitions erst nach Init aktivieren (kein Slide beim Seitenladen) */ #sidebar.sidebar-ready { transition: width var(--sb-transition); } /* ── Sidebar Header (Logo + Close) ────────── */ .sidebar-header { display: flex; align-items: center; justify-content: center; height: 64px; min-height: 64px; padding: 0; background: #fff; box-shadow: 1px 0 3px rgba(0,0,0,.15); z-index: 1; } .sidebar-header .logo { display: flex; align-items: center; overflow: hidden; text-decoration: none; float: none !important; margin: 0 !important; } .sidebar-header .logo img { height: 32px; width: auto; } /* Mobile close button */ .sidebar-mobile-close { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: #999; font-size: 16px; cursor: pointer; border-radius: 4px; flex-shrink: 0; } .sidebar-mobile-close:hover { background: #f3f4f6; color: #333; } /* Collapsed: Logo-Header ausblenden */ #sidebar.sidebar-collapsed .sidebar-header { display: none; } /* ── Scrollable Navigation ────────────────── */ .leftside-navigation { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .leftside-navigation::-webkit-scrollbar { width: 4px; } .leftside-navigation::-webkit-scrollbar-track { background: transparent; } .leftside-navigation::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .leftside-navigation::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* ── Menu Reset ───────────────────────────── */ ul.sidebar-menu, ul.sidebar-menu li ul.sub { margin: 0; padding: 0; list-style: none; } ul.sidebar-menu { padding-top: 0; padding-bottom: 8px; } /* ── Top-Level Items ──────────────────────── */ ul.sidebar-menu > li { position: relative; border-bottom: 1px solid var(--sb-border); } ul.sidebar-menu > li > a { display: flex !important; align-items: center; padding: 14px 16px 14px 20px; color: var(--sb-text); text-decoration: none; font-size: 13px; white-space: nowrap; transition: background var(--sb-transition), color var(--sb-transition); position: relative; } ul.sidebar-menu > li > a > i { font-size: 16px; width: 24px; min-width: 24px; text-align: center; margin-right: 12px; transition: color var(--sb-transition); } ul.sidebar-menu > li > a > span { flex: 1; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; } /* Hover & Active */ ul.sidebar-menu > li > a:hover, ul.sidebar-menu > li > a:focus { background: var(--sb-bg-dark); color: var(--sb-text-hover); display: flex !important; } ul.sidebar-menu > li > a.active { background: var(--sb-bg-dark); color: var(--sb-text-hover); border-left: 3px solid var(--sb-active-accent); padding-left: 17px; display: flex !important; } /* ── Chevron Indicator for Sub-Menus ──────── */ ul.sidebar-menu li.sub-menu > a::after { content: '\f078'; /* fa-chevron-down */ font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 10px; margin-left: auto; padding-left: 8px; transition: transform var(--sb-transition); color: rgba(255,255,255,0.25); flex-shrink: 0; } ul.sidebar-menu li.sub-menu.open > a::after { transform: rotate(180deg); } /* ── Sub-Menu (Accordion) ─────────────────── */ ul.sidebar-menu li ul.sub { max-height: 0; overflow: hidden; background: var(--sb-bg-dark); } li.sub-menu.open > ul.sub { max-height: 500px; } /* Transition erst nach Init */ #sidebar.sidebar-ready ul.sidebar-menu li ul.sub { transition: max-height .3s ease-in-out; } /* Override old display:none from style.css */ #sidebar > ul > li > ul.sub { display: block; } #sidebar > ul > li.active > ul.sub { display: block; } ul.sidebar-menu li ul.sub li a { display: flex; align-items: center; padding: 11px 16px 11px 56px; font-size: 12px; color: var(--sb-text); text-decoration: none; transition: background var(--sb-transition), color var(--sb-transition); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul.sidebar-menu li ul.sub li a:hover, ul.sidebar-menu li ul.sub li.active a { background: var(--sb-bg-darker); color: var(--sb-text-hover); } ul.sidebar-menu li ul.sub li { background: transparent; border-bottom: none; margin: 0; } /* ── Toggle Button ────────────────────────── */ .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: var(--sb-bg-dark); color: var(--sb-text); border: none; border-top: 1px solid var(--sb-border); cursor: pointer; font-size: 12px; width: 100%; white-space: nowrap; transition: background var(--sb-transition), color var(--sb-transition); } .sidebar-toggle-btn:hover { background: var(--sb-bg-darker); color: var(--sb-text-hover); } .sidebar-toggle-btn i { font-size: 14px; transition: transform var(--sb-transition); } .sidebar-toggle-btn span { overflow: hidden; } /* ── Expanded Mode: Sub-Menü-Items ohne Icons ── */ #sidebar:not(.sidebar-collapsed) ul.sidebar-menu li ul.sub li a > i { display: none; } #sidebar:not(.sidebar-collapsed) ul.sidebar-menu li ul.sub li a { padding-left: 56px; } /* ── Collapsed Mode ───────────────────────── */ #sidebar.sidebar-collapsed { width: var(--sb-collapsed-width); } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a { display: flex !important; padding: 14px 0 !important; justify-content: center !important; align-items: center !important; border-left: none !important; } /* Active-Markierung im Collapsed Mode */ #sidebar.sidebar-collapsed ul.sidebar-menu > li > a.active { background: var(--sb-bg-darker); color: var(--sb-text-hover); border-left: 3px solid var(--sb-active-accent) !important; padding-left: 0 !important; } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a > i { margin-right: 0 !important; } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a > span, #sidebar.sidebar-collapsed li.sub-menu > a::after { display: none !important; } /* Collapsed: Accordion Sub-Menus – nur Icons, anderer Hintergrund */ #sidebar.sidebar-collapsed li.sub-menu:not(.open) > ul.sub { max-height: 0 !important; } #sidebar.sidebar-collapsed li.sub-menu.open > ul.sub { max-height: 500px !important; } #sidebar.sidebar-collapsed li.sub-menu > ul.sub { background: var(--sb-bg-darker); } #sidebar.sidebar-collapsed li.sub-menu > ul.sub li a { display: flex !important; padding: 10px 0 !important; justify-content: center !important; align-items: center !important; font-size: 0 !important; text-align: center !important; } #sidebar.sidebar-collapsed li.sub-menu > ul.sub li a > i { display: inline-block !important; font-size: 14px !important; margin: 0 !important; width: auto !important; min-width: auto !important; } /* Active Sub-Menü-Item im Collapsed Mode */ #sidebar.sidebar-collapsed li.sub-menu > ul.sub li.active a, #sidebar.sidebar-collapsed li.sub-menu > ul.sub li a.active { background: rgba(255,255,255,0.08); color: var(--sb-text-hover); } /* Active Parent im Collapsed Mode (Hauptkategorie mit aktivem Kind) */ #sidebar.sidebar-collapsed li.sub-menu > a.active { background: var(--sb-bg-darker); color: var(--sb-text-hover); border-left: 3px solid var(--sb-active-accent) !important; padding-left: 0 !important; } /* Toggle button icon flip */ #sidebar.sidebar-collapsed .sidebar-toggle-btn i { transform: rotate(180deg); } #sidebar.sidebar-collapsed .sidebar-toggle-btn span { display: none; } /* Menu title items */ ul.sidebar-menu li.menu-title { border-bottom: none; } ul.sidebar-menu li.menu-title span { display: block; padding: 20px 16px 6px; font-size: 11px; text-transform: uppercase; color: #666; letter-spacing: 0.5px; } #sidebar.sidebar-collapsed ul.sidebar-menu li.menu-title { display: none; } /* Hide dcjq-icon artifacts (legacy) */ .dcjq-icon { display: none !important; } /* ── Main Content Offset ──────────────────── */ #main-content { margin-left: var(--sb-width); } #sidebar.sidebar-ready ~ section#main-content { transition: margin-left var(--sb-transition); } #sidebar.sidebar-collapsed ~ section#main-content { margin-left: var(--sb-collapsed-width); } /* Wrapper top margin for fixed topbar */ .wrapper { margin-top: var(--sb-header-height); } /* ── Top Bar (Header) ─────────────────────── */ .header { left: var(--sb-width); right: 0; z-index: 1002; background: #fff; height: var(--sb-header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; } #sidebar.sidebar-ready ~ .header { transition: left var(--sb-transition); } #sidebar.sidebar-collapsed ~ .header { left: var(--sb-collapsed-width); } /* Brand im Header nicht mehr nötig */ .brand { display: none !important; } /* ── Notification Buttons (topbar-left) ───── */ .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-right { display: flex; align-items: center; gap: 8px; } /* Mobile hamburger – nur auf Mobile sichtbar */ .topbar-mobile-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: #f3f4f6; color: #555; font-size: 16px; border-radius: 50%; cursor: pointer; flex-shrink: 0; } .topbar-mobile-toggle:hover { background: #e5e7eb; color: #111; } /* Notification icon buttons */ .topbar-notify-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f3f4f6; color: #555; border: none; cursor: pointer; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; } .topbar-notify-btn:hover, .topbar-notify-btn:focus { background: #e5e7eb; color: #111; text-decoration: none; } .topbar-notify-btn .badge { position: absolute; top: -4px; right: -6px; font-size: 10px; padding: 2px 5px; border-radius: 10px; line-height: 1; z-index: 1; } /* Notification dropdowns */ .topbar-left .dropdown-menu.extended { top: 42px; left: -10px; } /* User dropdown */ .topbar-user { position: relative; } .topbar-user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; color: #555; text-decoration: none; transition: background .15s; } .topbar-user-btn:hover, .topbar-user-btn:focus { background: #f3f4f6; text-decoration: none; color: #555; } .topbar-user-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .topbar-user-btn .username { font-weight: 500; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .topbar-user-btn .caret { margin-left: 2px; } /* Contract selector dropdown */ .topbar-contract { position: relative; } .topbar-contract-btn { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; cursor: pointer; background: #f0f7ff; border: 1px solid #d0e3f7; color: #333; font-size: 12px; transition: background 0.2s; text-decoration: none; max-width: 300px; } .topbar-contract-btn:hover, .topbar-contract-btn:focus { background: #e0efff; text-decoration: none; color: #333; } .topbar-contract-btn img { width: 20px; height: 20px; } .topbar-contract-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Language selector */ .topbar-lang { position: relative; } .topbar-lang > a { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; text-decoration: none; transition: background 0.2s; } .topbar-lang > a:hover { background: #f3f4f6; } /* Alte Klassen überschreiben */ .notify-row { float: none; margin: 0; } .top-nav { margin: 0; float: none; } /* ── Mobile / Responsive ──────────────────── */ @media (max-width: 767px) { /* Header: volle Breite, Hamburger sichtbar – Override style-responsive.css */ .header { left: 0 !important; height: 56px; padding: 0 12px; position: fixed !important; top: 0 !important; margin-top: 0 !important; } .topbar-mobile-toggle { display: flex; } .sidebar-mobile-close { display: flex; position: absolute; right: 8px; } .sidebar-header { justify-content: center; position: relative; } /* Sidebar: Off-Canvas von links – Override style-responsive.css */ #sidebar { margin-left: calc(-1 * var(--sb-width)) !important; width: var(--sb-width) !important; z-index: 1003; top: 0 !important; transition: margin-left .25s ease; } #sidebar.mobile-open { margin-left: 0 !important; } /* Overlay hinter Sidebar */ #sidebar.mobile-open::after { content: ''; position: fixed; top: 0; left: var(--sb-width); right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: -1; } ul.sidebar-menu { padding-top: 0; } #main-content { margin-left: 0 !important; } .wrapper { margin-top: 56px !important; } .sidebar-toggle-btn { display: none; } /* Mobile: Sub-Menü-Icons verstecken (wie im expanded Mode) */ #sidebar ul.sidebar-menu li ul.sub li a > i { display: none !important; } #sidebar ul.sidebar-menu li ul.sub li a { padding-left: 28px !important; } /* Collapsed-Modus auf Mobile ignorieren */ #sidebar.sidebar-collapsed { width: var(--sb-width) !important; } #sidebar.sidebar-collapsed .sidebar-header { display: flex; } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a > span, #sidebar.sidebar-collapsed li.sub-menu > a::after { display: inline-flex; } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a { padding: 14px 16px 14px 20px; justify-content: flex-start; } #sidebar.sidebar-collapsed ul.sidebar-menu > li > a > i { margin-right: 12px; } /* User-Dropdown: Username verstecken */ .topbar-user-btn .username { display: none; } /* Contract-Selector schmaler */ .topbar-contract-btn span { max-width: 150px; } } @media (max-width: 479px) { body { margin-top: 0 !important; } .header { padding: 0 10px; } .topbar-contract-btn span { max-width: 100px; } .topbar-contract-btn { font-size: 11px; padding: 4px 8px; } }