mirror of
https://github.com/goauthentik/authentik
synced 2026-04-26 01:25:02 +02:00
493be79baf
* Adds hierarchy line * Color changes for light and dark mode and remove rounded corners * Remove comments * website: Fix selector specificity, alignment, theming. * Padding change * website: Limit hover states. Add a11y checks. --------- Co-authored-by: Teffen Ellis <teffen@goauthentik.io>
94 lines
2.8 KiB
CSS
94 lines
2.8 KiB
CSS
:root {
|
|
--ak-menu-link-padding-horizontal: 0.5rem;
|
|
--ak-menu-item-color: var(--ifm-color-emphasis-300);
|
|
--ak-menu-item-color-active: var(--ifm-color-primary);
|
|
--ak-menu-item-color-hover: var(--ifm-color-primary-dark);
|
|
|
|
--ak-menu-item-color-hover-active: var(--ifm-color-emphasis-400);
|
|
--ak-menu-item-border-width: 0.5px;
|
|
--ifm-menu-color-background-active: hsl(240 24% 98%);
|
|
|
|
/* Ensures that the scrollbar color retains its visibility. */
|
|
--ak-scrollbar-color: hsl(0deg 0% 0% / 20%);
|
|
|
|
&[data-theme="dark"] {
|
|
--ifm-menu-color-background-active: hsl(240 20% 12%);
|
|
--ak-menu-item-color-hover: var(--ifm-color-primary-light);
|
|
|
|
--ak-scrollbar-color: hsla(0, 0%, 100%, 0.2);
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
--ak-menu-item-color: var(--ifm-color-emphasis-600);
|
|
}
|
|
}
|
|
|
|
.thin-scrollbar {
|
|
scrollbar-color: var(--ak-scrollbar-color) transparent;
|
|
}
|
|
|
|
.theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1.menu__list-item,
|
|
.theme-doc-sidebar-item-category-level-1 {
|
|
font-weight: 600;
|
|
border-top-color: var(--ifm-category-color, var(--ifm-menu-color-background-active));
|
|
border-radius: 0;
|
|
}
|
|
|
|
.theme-doc-sidebar-menu {
|
|
.menu__link,
|
|
.menu__caret,
|
|
.menu__list-item-collapsible {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.menu__list-item {
|
|
position: relative;
|
|
|
|
&:not(:first-child) {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
.menu__list .menu__list {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
.menu__list .menu__list-item {
|
|
padding-inline-start: calc(0.2rem);
|
|
margin: 0;
|
|
}
|
|
|
|
.theme-doc-sidebar-item-link:has(.menu__link--active) {
|
|
--ak-menu-item-border-width: 2px;
|
|
--ak-menu-item-border-color: var(--ak-menu-item-color-active);
|
|
}
|
|
|
|
.theme-doc-sidebar-item-category {
|
|
& > .menu__list .menu__list-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline-start: calc(0.2rem);
|
|
inset-block: 0;
|
|
width: 0;
|
|
pointer-events: none;
|
|
transition-property: border-color;
|
|
transition-timing-function: var(--ifm-transition-timing-default);
|
|
transition-duration: 200ms;
|
|
border-inline-start: var(--ak-menu-item-border-width) solid
|
|
var(--ak-menu-item-border-color, var(--ak-menu-item-color));
|
|
}
|
|
|
|
&:has(.menu__link--active):hover {
|
|
--ak-menu-item-border-color: var(--ak-menu-item-color-hover-active);
|
|
}
|
|
|
|
.menu__list:not(:has(.menu__link--active)) {
|
|
--ak-menu-item-border-color: var(--ak-menu-item-color);
|
|
}
|
|
}
|
|
|
|
.theme-doc-sidebar-item-link:hover,
|
|
.theme-doc-sidebar-item-category:has(> .menu__list-item-collapsible:hover) .menu__list {
|
|
--ak-menu-item-border-color: var(--ak-menu-item-color-hover);
|
|
}
|
|
}
|