fix(style): fix dark mode sidebar gap by using page-level background

Applies the dark translucent background to the .page element itself rather than individual sidebar/panel elements, ensuring full-height coverage with no gaps when scrolling.
This commit is contained in:
2026-03-03 17:13:59 -08:00
committed by Naomi Carrigan
parent 3fcbc5d7b4
commit c729fa8a60
+10 -2
View File
@@ -33,7 +33,7 @@ html[data-theme="dark"] {
/* Dark theme uses darker colors for background, lighter for text */
.page {
--background-color: var(--witch-purple-translucent);
--background-color: transparent;
}
--primary-color: var(--witch-lavender);
--sl-color-text-accent: var(--witch-lavender);
@@ -70,11 +70,15 @@ html[data-theme="dark"] {
}
.sidebar-pane,
.right-sidebar-panel {
.right-sidebar {
background-color: var(--background-color);
color: var(--primary-color);
}
.right-sidebar-panel {
color: var(--primary-color);
}
h1,
h2,
h3,
@@ -90,6 +94,10 @@ a {
backdrop-filter: var(--content-blur);
}
html[data-theme="dark"] .page {
background: var(--witch-purple-translucent);
}
a[aria-current="page"] {
color: var(--background-color) !important;
background-color: var(--witch-rose) !important;