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

fix: theme switching causing constant color transitions, too much shadow on codeblocks in light theme

Browse source
This commit is contained in:
Oleksandr 2026-02-17 19:02:00 +02:00
parent 8848037c63
commit 5d43f69d69
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
52 changed files with 8088 additions and 3601 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/styles/docs/nav/search.css
View file

@ -4,47 +4,20 @@
}
#qs_search {
--search-result-spacing: calc(
1.25rem *
var(--pagefind-ui-scale)
);
--search-result-pad-inline-start: calc(
3.75rem *
var(--pagefind-ui-scale)
);
--search-result-pad-inline-end: calc(
1.25rem *
var(--pagefind-ui-scale)
);
--search-result-pad-block: calc(
0.9375rem *
var(--pagefind-ui-scale)
);
--search-result-nested-pad-block: calc(
0.625rem *
var(--pagefind-ui-scale)
);
--search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
--search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
--search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
--search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
--search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
--search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
--search-page-icon-size: calc(
1.875rem *
var(--pagefind-ui-scale)
);
--search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
--search-page-icon-inline-start: calc(
(
var(--search-result-pad-inline-start) -
var(--search-page-icon-size)
) /
(var(--search-result-pad-inline-start) - var(--search-page-icon-size)) /
2
);
--search-tree-diagram-size: calc(
2.5rem *
var(--pagefind-ui-scale)
);
--search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
--search-tree-diagram-inline-start: calc(
(
var(--search-result-pad-inline-start) -
var(--search-tree-diagram-size)
) /
(var(--search-result-pad-inline-start) - var(--search-tree-diagram-size)) /
2
);
}
@ -57,12 +30,7 @@
#qs_search
.pagefind-ui--reset
*:where(
:not(html, iframe, canvas, img, svg, video):not(
svg *,
symbol *
)
) {
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
outline: unset;
}
@ -119,18 +87,14 @@
}
#qs_search
.pagefind-ui__result-title:not(
:where(.pagefind-ui__result-nested *)
),
.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
#qs_search .pagefind-ui__result-nested {
position: relative;
background-color: hsl(0deg 0% 10%);
}
#qs_search
.pagefind-ui__result-title:not(
:where(.pagefind-ui__result-nested *)
):hover,
.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
#qs_search
.pagefind-ui__result-title:not(
:where(.pagefind-ui__result-nested *)
@ -161,17 +125,12 @@
border-radius: 0 0 var(--search-corners) var(--search-corners);
}
#qs_search
.pagefind-ui__result-inner
> .pagefind-ui__result-title {
padding: var(--search-result-pad-block)
var(--search-result-pad-inline-end);
#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-title {
padding: var(--search-result-pad-block) var(--search-result-pad-inline-end);
padding-inline-start: var(--search-result-pad-inline-start);
}
#qs_search
.pagefind-ui__result-inner
> .pagefind-ui__result-title::before {
#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
content: "";
position: absolute;
inset-block: 0;
@ -199,9 +158,7 @@
text-decoration: none;
}
#qs_search
.pagefind-ui__result-nested
.pagefind-ui__result-link::before {
#qs_search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
content: unset;
}
@ -236,9 +193,7 @@
overflow-wrap: anywhere;
}
#qs_search
.pagefind-ui__result-inner
> .pagefind-ui__result-excerpt {
#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-excerpt {
display: inline-block;
position: relative;
background: hsl(0deg 0% 10%);
@ -273,18 +228,8 @@
site-search {
--shadow-lg:
0px 25px 7px hsl(0deg, 0%, 0%, 0.03),
0px 16px 6px hsl(0deg, 0%, 0%, 0.1), 0px 9px 5px hsl(
223deg,
13%,
10%,
0.33
),
0px 4px 4px hsl(0deg, 0%, 0%, 0.75), 0px 4px 2px hsl(
0deg,
0%,
0%,
0.25
);
0px 16px 6px hsl(0deg, 0%, 0%, 0.1), 0px 9px 5px hsl(223deg, 13%, 10%, 0.33),
0px 4px 4px hsl(0deg, 0%, 0%, 0.75), 0px 4px 2px hsl(0deg, 0%, 0%, 0.25);
display: contents;
}
@ -433,8 +378,7 @@ button[data-close-modal] {
}
html.dark button[data-open-modal],
html:has(input#theme-manual-toggle:checked)
button[data-open-modal] {
html:has(input#theme-manual-toggle:checked) button[data-open-modal] {
background-color: hsla(var(--blue) 15% 15% / 0.5);
color: hsl(var(--blue) 40% 65%);