quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

added dedicated style for overflow: hidden on body

Browse source
This commit is contained in:
Xanazf 2024-10-17 23:46:54 +03:00
parent 48650545bd
commit f110669e31
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/navigation/sidebars/nav/index.tsx
View file

@ -57,10 +57,11 @@ const NavComponent: Component<NavProps> = props => {
if (open()) {
window.addEventListener("click", handleClickOutside);
document.body.style.overflow = "hidden";
document.body.classList.add("overflow-nav");
document.body.classList.add("dim-content-nav");
} else {
window.removeEventListener("click", handleClickOutside);
document.body.style.overflow = "auto";
document.body.classList.remove("overflow-nav");
document.body.classList.remove("dim-content-nav");
}
});

3
src/components/navigation/sidebars/toc/index.tsx
View file

@ -49,11 +49,12 @@ const TableOfContents: Component<TOCProps> = props => {
createEffect(() => {
if (open()) {
window.addEventListener("click", handleClickOutside);
document.body.style.overflow = "hidden";
document.body.classList.add("overflow-toc");
document.body.classList.add("dim-content-toc");
} else {
window.removeEventListener("click", handleClickOutside);
document.body.style.overflow = "auto";
document.body.classList.remove("overflow-toc");
document.body.classList.remove("dim-content-toc");
}
});

19
src/styles/global.css
View file

@ -56,6 +56,11 @@ html.dark {
all: unset;
}
.overflow-nav,
.overflow-toc {
overflow: hidden;
}
.search {
display: none;
}
@ -133,12 +138,10 @@ footer {
left: -1rem;
height: 1px;
width: calc(100% + 1rem);
background: linear-gradient(
90deg,
transparent 0%,
hsl(var(--footer-bkg-border)) 50%,
transparent 100%
);
background: linear-gradient(90deg,
transparent 0%,
hsl(var(--footer-bkg-border)) 50%,
transparent 100%);
}
& a {
@ -177,12 +180,12 @@ footer {
gap: 0.127rem;
color: hsl(var(--text-dark));
& > p {
&>p {
margin-bottom: 0.2rem;
color: hsl(0 0 40);
}
& > a {
&>a {
text-decoration: none;
}
}