quickshell-web/src/styles/docs/toc/toc.css
outfoxxed e20c5126f9
various small fixes
- light theme footer css
- fixed l/r overlay css
- fixed discolored generics
- fixed scroll margin
- elements selected by url now display as hovered
- fixed top padding in mobile layout
- fixed padding for import string on type pages
- fixed padding on module listing pages
- fixed link clickable areas on left nav
2024-10-16 19:05:54 -07:00

141 lines
2.1 KiB
CSS

@import "./types-toc.css";
@import "./intro-toc.css";
.toc-wrapper {
display: none;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.toc-wrapper-mobile {
display: block;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
background-color: transparent;
}
.toc-content {
background-color: transparent;
}
.toc-toggle {
--width: 80svw;
display: block;
position: unset;
height: 24px;
font-size: 1.614rem;
max-height: 500px;
& > svg {
height: 100%;
width: 24px;
}
& div {
width: 100%;
height: max-content;
}
&:hover {
cursor: pointer;
}
& .toc-mobile {
position: absolute;
top: 2.5rem;
right: -1rem;
width: 0;
height: calc(100svh - 3.5rem);
font-size: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
background-color: hsl(var(--overlay-bkg));
border-left: 1px solid hsl(var(--overlay-bkg-border));
&::-webkit-scrollbar {
display: none;
}
transition: width 0.3s ease, padding 0.3s ease;
&.shown {
overflow-y: scroll;
width: var(--width);
display: flex;
flex-direction: column;
align-items: center;
}
}
}
@media (min-width: 40rem) {
.toc-toggle {
--width: 19rem;
}
.toc-wrapper {
display: none;
}
}
@media (min-width: 65rem) {
.toc-wrapper {
width: 19rem;
flex-shrink: 0;
}
.toc-wrapper-mobile {
display: none;
}
.toc-wrapper {
--width: 19rem;
background-color: transparent;
display: block;
position: sticky;
top: 3.5rem;
max-width: 19rem;
max-height: calc(100svh - 3.5rem);
overflow-y: scroll;
z-index: 9;
margin-right: 1.272rem;
& .toc_a {
transition: color 0.33s;
color: hsl(var(--green) 72 40);
}
& ul {
margin: 0;
}
& li {
list-style: none;
&.active {
& > .toc_a {
color: hsl(var(--green) 72 60);
}
}
}
& .toc_heading {
margin: 0;
margin-block: 0.618rem;
& * {
margin-left: 0.348rem;
}
}
}
}