126 lines
2.2 KiB
CSS
126 lines
2.2 KiB
CSS
.nav-component {
|
|
margin: 0.35em 0;
|
|
}
|
|
|
|
.nav-link {
|
|
text-decoration: none !important;
|
|
|
|
& div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.3em;
|
|
|
|
& svg { color: hsl(var(--text)) }
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
display: block;
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s ease;
|
|
padding: 0.4em;
|
|
|
|
&:hover {
|
|
background-color: hsl(var(--nav-hovered-bkg));
|
|
}
|
|
|
|
&.nav-current {
|
|
color: hsl(var(--nav-selected-text));
|
|
background-color: hsl(var(--nav-selected-bkg));
|
|
|
|
&:hover {
|
|
background-color: hsl(var(--nav-selected-hovered-bkg));
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-collapsible {
|
|
overflow: hidden;
|
|
|
|
& > summary {
|
|
user-select: none;
|
|
|
|
& > div {
|
|
& > .nav-collapse-marker,
|
|
a {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
& > .nav-collapse-marker {
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 0.4em 0.8em;
|
|
display: flex;
|
|
}
|
|
|
|
& > a {
|
|
border-radius: 6px 0 0 6px;
|
|
padding: 0.4em;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&:hover {
|
|
& > .nav-collapse-marker,
|
|
a {
|
|
background-color: hsl(var(--nav-hovered-bkg));
|
|
|
|
&:not(:hover) {
|
|
background-color: hsl(var(--nav-hovered-weak-bkg));
|
|
}
|
|
}
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
gap: 0.1em;
|
|
|
|
& svg {
|
|
transition: transform 0.3s ease;
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .accordion-container > div {
|
|
padding-left: 1.3em;
|
|
|
|
& p:first-child {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
& :last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-collapsible.nav-current {
|
|
& > summary > div {
|
|
& > a {
|
|
color: hsl(var(--nav-selected-text));
|
|
}
|
|
|
|
& > .nav-collapse-marker,
|
|
a {
|
|
background-color: hsl(var(--nav-selected-bkg));
|
|
}
|
|
|
|
&:hover {
|
|
& > .nav-collapse-marker,
|
|
a {
|
|
background-color: hsl(var(--nav-selected-hovered-bkg));
|
|
|
|
&:not(:hover) {
|
|
background-color: hsl(var(--nav-selected-bkg));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-collapsible[open]:not(.closing) > summary > div svg {
|
|
transform: rotate(180deg);
|
|
}
|