diff --git a/web/css/layout/app-sidebar.css b/web/css/layout/app-sidebar.css index 1ef44b1..6d98895 100644 --- a/web/css/layout/app-sidebar.css +++ b/web/css/layout/app-sidebar.css @@ -11,7 +11,8 @@ --app-sidebar-summary-max-width: 142px; --app-sidebar-section-gap: 2rem; --app-sidebar-section-space: 5px; - --app-sidebar-hover-bg: transparent; + --app-sidebar-hover-bg: color-mix(in srgb, var(--app-primary) 6%, transparent); + --app-sidebar-active-bg: color-mix(in srgb, var(--app-primary) 12%, transparent); } .app-sidebar .brand { @@ -55,37 +56,6 @@ top: -1px; } - /* Per-group icon colors */ - .app-sidebar-admin-group [data-details-key="admin-organization"] { - --app-nav-icon-color: #2563eb; - } - .app-sidebar-admin-group [data-details-key="admin-roles-permissions"] { - --app-nav-icon-color: #7c3aed; - } - .app-sidebar-admin-group [data-details-key="admin-automation"] { - --app-nav-icon-color: #0891b2; - } - .app-sidebar-admin-group [data-details-key="admin-monitoring"] { - --app-nav-icon-color: #059669; - } - .app-sidebar-admin-group [data-details-key="admin-logs"] { - --app-nav-icon-color: #d97706; - } - .app-sidebar-admin-group [data-details-key="admin-system"] { - --app-nav-icon-color: #6b7280; - } - - /* Helpdesk module groups */ - .app-sidebar-admin-group [data-details-key="helpdesk-lookup"] { - --app-nav-icon-color: #2563eb; - } - .app-sidebar-admin-group [data-details-key="helpdesk-monitoring"] { - --app-nav-icon-color: #059669; - } - .app-sidebar-admin-group [data-details-key="helpdesk-administration"] { - --app-nav-icon-color: #6b7280; - } - aside.app-sidebar li:has(> .app-empty-state) { padding-inline: 19px; } @@ -210,11 +180,17 @@ overflow: hidden; } - .app-sidebar a:hover, + .app-sidebar a:hover { + color: var(--app-nav-icon-color, var(--app-primary)); + background: var(--app-sidebar-hover-bg); + border-left: var(--app-sidebar-border-width) solid + var(--app-nav-icon-color, var(--app-primary)); + } + .app-sidebar a.active, .app-sidebar .active > a { color: var(--app-nav-icon-color, var(--app-primary)); - background: var(--app-sidebar-hover-bg); + background: var(--app-sidebar-active-bg); border-left: var(--app-sidebar-border-width) solid var(--app-nav-icon-color, var(--app-primary)); }