eliott/authentik
1
0
Fork 0
mirror of https://github.com/goauthentik/authentik synced 2026-04-26 01:25:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

website: add hierarchy line to sidebar (#16565)

Browse Source 
* 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>
This commit is contained in:
Dewi Roberts
2025-09-22 17:17:21 +03:00
committed by GitHub
parent 2ce75b0b70
commit 493be79baf
1 changed files with 88 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
website/docusaurus-theme/theme/DocSidebarItems/styles.css
View File

@@ -1,11 +1,93 @@
.theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1.menu__list-item,
.theme-doc-sidebar-item-category-level-1 .menu__list-item-collapsible {
font-weight: 600;
: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);
}
}
.theme-doc-sidebar-item-category-level-1 .menu__list-item-collapsible {
border-top: 0.5px solid;
.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;
padding-block: 0.25em;
}
.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);
}
}