feat: full JS-less theme transition, better transition animation between themes, better light theme colors
This commit is contained in:
parent
da6dd0100b
commit
c0e0266d45
GPG key ID:
821EEC32761AC17C
46 changed files with 4031 additions and 2536 deletions
|
|
@ -4,20 +4,48 @@
|
|||
}
|
||||
|
||||
#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-corners: calc(0.3125rem * 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)) / 2
|
||||
--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-inline-start: calc(
|
||||
(
|
||||
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)) /
|
||||
2
|
||||
(
|
||||
var(--search-result-pad-inline-start) -
|
||||
var(--search-tree-diagram-size)
|
||||
) /
|
||||
2
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +57,12 @@
|
|||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
|
@ -57,9 +90,11 @@
|
|||
|
||||
#qs_search .pagefind-ui__search-clear::before {
|
||||
content: "";
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
||||
-webkit-mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
||||
center / 50% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
||||
mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
||||
center / 50% no-repeat;
|
||||
background-color: hsl(0deg 25% 45%);
|
||||
display: block;
|
||||
|
|
@ -84,14 +119,18 @@
|
|||
}
|
||||
|
||||
#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 *)
|
||||
|
|
@ -122,12 +161,17 @@
|
|||
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;
|
||||
|
|
@ -155,7 +199,9 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -166,9 +212,11 @@
|
|||
inset-inline-start: var(--search-tree-diagram-inline-start);
|
||||
width: var(--search-tree-diagram-size);
|
||||
background: hsl(var(--blue) 10% 30%);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
||||
-webkit-mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
||||
0% 0% / 100% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
||||
mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
||||
0% 0% / 100% no-repeat;
|
||||
}
|
||||
|
||||
|
|
@ -188,7 +236,9 @@
|
|||
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%);
|
||||
|
|
@ -204,9 +254,11 @@
|
|||
inset-inline-start: var(--search-tree-diagram-inline-start);
|
||||
width: var(--search-tree-diagram-size);
|
||||
background: hsl(var(--blue) 10% 30%);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
|
||||
-webkit-mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
|
||||
0% 0% / 100% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
|
||||
mask:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
|
||||
0% 0% / 100% no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
@ -219,9 +271,20 @@
|
|||
|
||||
/* default styles */
|
||||
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);
|
||||
--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
|
||||
);
|
||||
display: contents;
|
||||
}
|
||||
|
||||
|
|
@ -275,7 +338,8 @@ button > kbd {
|
|||
background-color: hsl(var(--blue) 15% 80%);
|
||||
}
|
||||
|
||||
html.dark button > kbd {
|
||||
html.dark button > kbd,
|
||||
html:has(input#theme-manual-toggle:checked) button > kbd {
|
||||
background-color: hsl(var(--blue) 5% 20% / 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -368,7 +432,9 @@ button[data-close-modal] {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark button[data-open-modal] {
|
||||
html.dark 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%);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue