.vex-layout-ares { --footer-background: var(--background-base); --sidenav-background: var(--background-base); --toolbar-background: var(--background-base); --sidenav-color: var(--text-color); --sidenav-section-divider-color: transparent; --sidenav-item-background-hover: rgba(var(--color-primary), 0.1); --sidenav-item-background-active: var(--background-foreground); --sidenav-item-color: var(--text-color); --sidenav-item-color-hover: var(--text-color); --sidenav-item-color-active: var(--text-color); --sidenav-item-dropdown-color-active: var(--sidenav-item-color-active); --sidenav-item-dropdown-background-active: var(--background-hover); --sidenav-item-dropdown-background: var(--background-base); --sidenav-item-dropdown-background-hover: var(--background-hover); --secondary-toolbar-background: var(--background-base); --sidenav-toolbar-background: var(--background-base); --secondary-toolbar-height: 64px; .sidenav { border: none; vex-sidenav-item { .vex-sidenav-item { width: unset; @apply rounded-full py-2 mx-4; &.vex-sidenav-item--active { @apply shadow; } } .item-level-0 > .vex-sidenav-item { @apply my-1; } .item-level-1 .vex-sidenav-item.vex-sidenav-item--active { @apply shadow-none font-medium; .vex-sidenav-item__label { @apply text-black; } } .item-level-1 .vex-sidenav-item:hover .vex-sidenav-item__label { @apply text-black; } } } .sidenav-collapsed .sidenav vex-sidenav-item .vex-sidenav-item { @apply mx-0; } vex-secondary-toolbar { @apply rounded-b overflow-hidden; .secondary-toolbar { @apply shadow-none border-t-0 -mb-gutter; } } vex-footer { @apply rounded-t overflow-hidden; } .vex-page-layout-header { background: var(--background-base); color: var(--text-color); vex-breadcrumbs { .text-hint { color: var(--text-hint) !important; } } } &.vex-style-default { --sidenav-item-background-active: theme('backgroundColor.primary'); --sidenav-item-color-active: theme('textColor.primary-contrast'); --sidenav-item-dropdown-color-active: var(--sidenav-item-color); --sidenav-item-dropdown-color-hover: var(--text-color); --sidenav-item-icon-color-active: theme('textColor.primary-contrast'); } }