/* Sidebar active state — consistent across all layouts. The current section stands up off the menu as a small raised tile: a light surface lit from above (a highlight along the top edge, a shade along the bottom), a soft coloured shadow under it, and the accent bar on its inline start. Pointing at any other item raises it the same way, so the pointer gets the same answer the page does. The tile sits only just off the menu: a half-pixel lip and a short shadow, no lift while active and half a pixel under the pointer, and the icon nudging up (2026-10-21: the user asked twice for it lower — this is a quarter of the first version's height). Readers who asked their system for less motion keep the look without the movement. Colours come from --bs-primary-rgb. The old rules read --kt-primary-rgb, which this theme never defines, so the active item drew no background at all. */ .app-sidebar { --lp-side-rgb: var(--bs-primary-rgb, 27, 132, 255); --lp-side-surface: linear-gradient(180deg, #ffffff 0%, rgba(var(--lp-side-rgb), .07) 100%); --lp-side-edge: rgba(var(--lp-side-rgb), .22); --lp-side-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(var(--lp-side-rgb), .12), 0 .5px 0 rgba(var(--lp-side-rgb), .22), 0 2px 4px -1.5px rgba(var(--lp-side-rgb), .35), 0 .5px 1px rgba(15, 23, 42, .06); } [data-bs-theme="dark"] .app-sidebar { --lp-side-surface: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(var(--lp-side-rgb), .16) 100%); --lp-side-edge: rgba(var(--lp-side-rgb), .38); --lp-side-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 .5px 0 rgba(0, 0, 0, .45), 0 2px 5px -1.5px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--lp-side-rgb), .10); } .app-sidebar .menu-item > .menu-link { position: relative; /* A little less side padding than Metronic's 13px: the titles get the room, so the sidebar can be narrower without cutting a word. */ padding-inline: 10px !important; border: 1px solid transparent; border-radius: 12px !important; transition: transform .22s cubic-bezier(.2, .8, .3, 1.3), box-shadow .22s ease, background-color .22s ease, border-color .22s ease; will-change: transform; } .app-sidebar .menu-item > .menu-link .menu-icon i { transition: transform .22s cubic-bezier(.2, .8, .3, 1.3), color .2s ease; } /* The raised tile: the active item, and any item under the pointer. */ .app-sidebar .menu-item > .menu-link.active, .app-sidebar .menu-item > .menu-link:hover { background: var(--lp-side-surface) !important; border-color: var(--lp-side-edge); box-shadow: var(--lp-side-shadow) !important; transform: none; } .app-sidebar .menu-item > .menu-link:hover { transform: translateY(-.5px); } /* Pressed: the tile sinks onto its lip. */ .app-sidebar .menu-item > .menu-link:active { transform: translateY(.5px); box-shadow: inset 0 1px 2px rgba(var(--lp-side-rgb), .18), 0 0 0 rgba(0, 0, 0, 0) !important; transition-duration: .08s; } .app-sidebar .menu-item > .menu-link:hover .menu-icon i { transform: translateY(-1px) scale(1.12); } .app-sidebar .menu-item > .menu-link.active, .app-sidebar .menu-item > .menu-link.active .menu-title, .app-sidebar .menu-item > .menu-link.active .menu-icon i, .app-sidebar .menu-item > .menu-link:hover .menu-title, .app-sidebar .menu-item > .menu-link:hover .menu-icon i { color: rgb(var(--lp-side-rgb)) !important; } /* The accent bar on the active tile's inline start, sliding in when the page opens. */ .app-sidebar .menu-item > .menu-link.active::before { content: ""; position: absolute; inset-inline-start: -1px; top: 22%; bottom: 22%; width: 4px; background: rgb(var(--lp-side-rgb)); border-start-end-radius: 4px; border-end-end-radius: 4px; box-shadow: 0 0 8px rgba(var(--lp-side-rgb), .55); animation: lp-side-bar-in .45s cubic-bezier(.2, .8, .3, 1.2) both; } .app-sidebar .menu-item > .menu-link.active { animation: lp-side-pop .45s cubic-bezier(.2, .8, .3, 1.3) both; } @keyframes lp-side-pop { 0% { transform: translateY(.5px) scale(.99); box-shadow: none; } 100% { transform: none; } } @keyframes lp-side-bar-in { 0% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } /* An open section whose page is one of its children: tinted, not raised — the raised tile belongs to the page itself, below it. */ .app-sidebar .menu-item.here > .menu-link:not(:hover) { background-color: rgba(var(--lp-side-rgb), .06) !important; color: rgb(var(--lp-side-rgb)) !important; font-weight: 600 !important; } .app-sidebar .menu-item.here > .menu-link .menu-icon i, .app-sidebar .menu-item.here > .menu-link .menu-title { color: rgb(var(--lp-side-rgb)) !important; } @media (prefers-reduced-motion: reduce) { .app-sidebar .menu-item > .menu-link, .app-sidebar .menu-item > .menu-link .menu-icon i { transition: none; } .app-sidebar .menu-item > .menu-link.active, .app-sidebar .menu-item > .menu-link.active::before { animation: none; } .app-sidebar .menu-item > .menu-link:hover, .app-sidebar .menu-item > .menu-link.active, .app-sidebar .menu-item > .menu-link:hover .menu-icon i { transform: none; } } /* Other menus (settings, dropdowns) keep what the old shared rule gave them. */ .menu-item .menu-link.active { font-weight: 800 !important; position: relative; border-radius: 12px !important; } .menu-item.here > .menu-link { font-weight: 600 !important; border-radius: 12px !important; } /* Consistent font size & weight for all sidebar menu items */ .app-sidebar a.menu-link .menu-title, .app-sidebar span.menu-link .menu-title, .app-sidebar .menu-sub a.menu-link .menu-title, .app-sidebar .menu-sub span.menu-link .menu-title { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Active top-level item */ .app-sidebar a.menu-link.active .menu-title { font-weight: 700 !important; } /* Expanded parent (has active child) */ .app-sidebar .menu-item.here > span.menu-link .menu-title { font-weight: 600 !important; } /* Active child item */ .app-sidebar .menu-sub a.menu-link.active .menu-title { font-weight: 700 !important; }