/* * DE: Rollen-basierte Themes via CSS-Variablen. * EN: Role-based themes via CSS variables. * * Verwendung: */ /* ============================================================ Public / Guest (Default) ============================================================ */ :root, .theme-public { --app-primary: #206bc4; --app-navbar-bg: #1d273b; --app-navbar-border: rgba(255, 255, 255, 0.1); /* Tabler Overrides */ --tblr-primary: var(--app-primary); --tblr-primary-rgb: 32, 107, 196; } .theme-public .navbar-app { background: var(--app-navbar-bg); } /* ============================================================ User - Blau ============================================================ */ .theme-user { --app-primary: #206bc4; --app-navbar-bg: #206bc4; --app-navbar-border: rgba(255, 255, 255, 0.15); --tblr-primary: var(--app-primary); --tblr-primary-rgb: 32, 107, 196; } .theme-user .navbar-app { background: var(--app-navbar-bg); } /* ============================================================ Manager - Teal ============================================================ */ .theme-manager { --app-primary: #0ca678; --app-navbar-bg: #0ca678; --app-navbar-border: rgba(255, 255, 255, 0.15); --tblr-primary: var(--app-primary); --tblr-primary-rgb: 12, 166, 120; } .theme-manager .navbar-app { background: var(--app-navbar-bg); } /* ============================================================ Admin - Rot ============================================================ */ .theme-admin { --app-primary: #d63939; --app-navbar-bg: #d63939; --app-navbar-border: rgba(255, 255, 255, 0.15); --tblr-primary: var(--app-primary); --tblr-primary-rgb: 214, 57, 57; } .theme-admin .navbar-app { background: var(--app-navbar-bg); } /* ============================================================ Shared Navbar Styles ============================================================ */ .navbar-app { border-bottom: 1px solid var(--app-navbar-border); } .navbar-app .nav-link { color: rgba(255, 255, 255, 0.85); } .navbar-app .nav-link:hover { color: #ffffff; } .navbar-app .nav-link.active { color: #ffffff; font-weight: 500; } .navbar-app .dropdown-menu { margin-top: 0; } /* Avatar in Navbar */ .navbar-app .avatar { background: rgba(255, 255, 255, 0.2); color: #ffffff; } /* Navbar Brand */ .navbar-app .navbar-brand { color: #ffffff; } .navbar-app .navbar-brand:hover { color: #ffffff; }