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
|
|
@ -1,7 +1,7 @@
|
|||
.accordion {
|
||||
& summary {
|
||||
list-style: none;
|
||||
transition: background-color 0.15s ease-out;
|
||||
transition: background-color var(--theme-transition);
|
||||
}
|
||||
|
||||
& .accordion-container {
|
||||
|
|
@ -12,7 +12,9 @@
|
|||
|
||||
& .accordion-container.animate {
|
||||
/* this somehow breaks if both min AND max aren't animated */
|
||||
transition: min-height 0.3s ease, max-height 0.3s ease;
|
||||
transition:
|
||||
min-height 0.3s ease,
|
||||
max-height 0.3s ease;
|
||||
min-height: var(--height);
|
||||
max-height: var(--height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,25 +20,33 @@
|
|||
background-color: hsl(var(--blue) 60% 98%);
|
||||
padding: 0.618rem;
|
||||
border: 1px solid hsl(var(--blue) 9% 75%);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: var(--xs);
|
||||
background-image: radial-gradient(hsl(var(--blue) 9% 75%) 1px,
|
||||
transparent 1px);
|
||||
background-image: radial-gradient(
|
||||
hsl(var(--blue) 9% 75%) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-position: 50% 50%;
|
||||
background-size: 1.1rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .featurelist-item {
|
||||
html.dark .featurelist-item,
|
||||
html:has(input#theme-manual-toggle:checked) .featurelist-item {
|
||||
background-color: hsl(var(--blue) 100% 81% / 0.05);
|
||||
border-color: hsl(0deg 0% 100% / 0.05);
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient(hsl(0deg 0% 100% / 0.1) 1px,
|
||||
transparent 1px);
|
||||
background-image: radial-gradient(
|
||||
hsl(0deg 0% 100% / 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,10 +61,12 @@ html.dark .featurelist-item {
|
|||
|
||||
& .feature-subtitle {
|
||||
color: #303030;
|
||||
transition: color var(--theme-transition);
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .feature-text {
|
||||
html.dark .feature-text,
|
||||
html:has(input#theme-manual-toggle:checked) .feature-text {
|
||||
& .feature-subtitle {
|
||||
color: #afafaf;
|
||||
}
|
||||
|
|
@ -99,8 +109,13 @@ html.dark .feature-text {
|
|||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .feature-showcase .shiki,
|
||||
html:not(.dark) .feature-showcase .shiki span {
|
||||
html:not(.dark):not(:has(input#theme-manual-toggle:checked))
|
||||
.feature-showcase
|
||||
.shiki,
|
||||
html:not(.dark):not(:has(input#theme-manual-toggle:checked))
|
||||
.feature-showcase
|
||||
.shiki
|
||||
span {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +154,7 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
transform-origin: center bottom;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
transform: rotate(0deg);
|
||||
animation: counter-spin 40s linear infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,13 @@
|
|||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
min-height: 200px; /* placeholder height */
|
||||
|
||||
&.initialized {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
|
|
@ -44,6 +51,11 @@
|
|||
padding: 0;
|
||||
will-change: transform;
|
||||
transform: translateX(0);
|
||||
visibility: hidden;
|
||||
|
||||
.initialized & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee-item {
|
||||
|
|
@ -56,7 +68,7 @@
|
|||
box-sizing: border-box;
|
||||
will-change: opacity;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
|
|
@ -89,8 +101,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
opacity 0.3s;
|
||||
background-color var(--theme-transition),
|
||||
opacity var(--theme-transition);
|
||||
z-index: 20;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
|
@ -106,7 +118,7 @@
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
width: 2.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
|
|
@ -120,7 +132,7 @@
|
|||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
|
@ -154,10 +166,9 @@
|
|||
.marquee-scroll-arrow {
|
||||
height: unset;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
background-color: #55555580;
|
||||
border-radius: var(--radius-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ html {
|
|||
font-weight: 400;
|
||||
|
||||
height: 100svh;
|
||||
width: 100svw;
|
||||
max-width: 100svw;
|
||||
/* width: 100svw; causes horizontal overflow due to the scrollbar*/
|
||||
width: 100%;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@ pre.shiki {
|
|||
}
|
||||
|
||||
html.dark .shiki,
|
||||
html.dark .shiki span {
|
||||
html.dark .shiki span,
|
||||
html:has(input#theme-manual-toggle:checked) .shiki,
|
||||
html:has(input#theme-manual-toggle:checked) .shiki span {
|
||||
color: var(--shiki-dark);
|
||||
background-color: var(--shiki-dark-bg);
|
||||
}
|
||||
|
|
@ -27,8 +29,8 @@ pre {
|
|||
overflow: hidden;
|
||||
text-wrap: wrap;
|
||||
transition:
|
||||
background-color 0.3s var(--ease-in-out),
|
||||
color 0.3s var(--ease-in-out);
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
|
||||
& .copy-button {
|
||||
all: unset;
|
||||
|
|
@ -48,17 +50,38 @@ pre {
|
|||
background-color: hsla(var(--blue) 85 35 / 0.01);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.3s var(--ease-in-out),
|
||||
color 0.3s var(--ease-in-out);
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
z-index: 10;
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
transition:
|
||||
transform 0.3s var(--ease-in-out),
|
||||
opacity 0.3s var(--ease-in-out);
|
||||
}
|
||||
|
||||
& .check-icon {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
color: hsl(var(--green) 100 69);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: hsla(var(--blue) 100 75 / 0.75);
|
||||
background-color: hsla(var(--blue) 85 35 / 0.1);
|
||||
}
|
||||
|
||||
&.copied {
|
||||
animation: var(--animate-bounce);
|
||||
& .copy-icon {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
& .check-icon {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:root {
|
||||
html:not(.dark):not(:has(input#theme-manual-toggle:checked)) {
|
||||
color-scheme: light dark;
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
--accent-400: var(--green) 90% 57%;
|
||||
--accent-500: var(--green) 90% 47%;
|
||||
--accent-600: var(--green) 88% 40%;
|
||||
--accent-700: var(--green) 70% 40%;
|
||||
--accent-700: var(--green) 70% 35%;
|
||||
|
||||
/* secondary */
|
||||
--blue: 224deg;
|
||||
|
|
@ -18,44 +18,45 @@
|
|||
|
||||
/* primary */
|
||||
--white: 194deg;
|
||||
--bg-400: var(--white) 10% 95%;
|
||||
--bg-500: var(--white) 5% 90%;
|
||||
--bg-600: var(--white) 5% 76%;
|
||||
--bg-700: var(--white) 5% 56%;
|
||||
--bg-800: var(--white) 5% 36%;
|
||||
--bg-400: var(--white) 10% 98%;
|
||||
--bg-500: var(--white) 10% 95%;
|
||||
--bg-600: var(--white) 8% 88%;
|
||||
--bg-700: var(--white) 8% 78%;
|
||||
--bg-800: var(--white) 5% 56%;
|
||||
--bg-900: var(--white) 5% 16%;
|
||||
|
||||
/* docs */
|
||||
--background: var(--bg-500);
|
||||
--text: var(--white) 0% 0%;
|
||||
--text-dark: var(--white) 0% 18%;
|
||||
--text-darker: var(--white) 0% 30%;
|
||||
--link: var(--green) 48% 40%;
|
||||
--toc-link: var(--green) 74% 30%;
|
||||
--toc-link-active: var(--green) 80% 38%;
|
||||
--prop-color: 350deg 78% 70%;
|
||||
--prop-link-color: 350deg 78% 60%;
|
||||
--func-color: 50deg 68% 50%;
|
||||
--func-link-color: 50deg 58% 55%;
|
||||
--signal-color: 270deg 78% 70%;
|
||||
--signal-link-color: 270deg 85% 60%;
|
||||
--var-color: 190deg 78% 70%;
|
||||
--var-link-color: 190deg 85% 60%;
|
||||
--background: var(--bg-400);
|
||||
--text: var(--white) 0% 10%;
|
||||
--text-dark: var(--white) 0% 25%;
|
||||
--text-darker: var(--white) 0% 40%;
|
||||
--link: var(--green) 60% 35%;
|
||||
--toc-link: var(--white) 0% 40%;
|
||||
--toc-link-active: var(--green) 60% 35%;
|
||||
--prop-color: 350deg 78% 65%;
|
||||
--prop-link-color: 350deg 78% 45%;
|
||||
--func-color: 50deg 78% 45%;
|
||||
--func-link-color: 50deg 85% 30%;
|
||||
--signal-color: 270deg 60% 65%;
|
||||
--signal-link-color: 270deg 75% 45%;
|
||||
--var-color: 190deg 78% 65%;
|
||||
--var-link-color: 190deg 85% 40%;
|
||||
--inner-param-color: 215deg 80% 27%;
|
||||
--inner-param-border-color: 215deg 50% 50%;
|
||||
--nav-hovered-bkg: var(--blue) 100% 87%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 100% 91%;
|
||||
--nav-selected-bkg: var(--blue) 100% 90%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 100% 85%;
|
||||
--nav-selected-text: var(--blue) 60% 60%;
|
||||
--nav-hovered-bkg: var(--blue) 100% 94%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 100% 96%;
|
||||
--nav-selected-bkg: var(--blue) 100% 92%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 100% 88%;
|
||||
--nav-selected-text: var(--blue) 70% 45%;
|
||||
--nav-indicator-bkg: var(--blue) 45% 80%;
|
||||
--toc-hovered-bkg: 0deg 0% 0% / 0.1;
|
||||
--overlay-bkg: var(--blue) 25% 93%;
|
||||
--overlay-bkg-border: var(--blue) 10% 75%;
|
||||
--footer-bkg: var(--blue) 8% 87%;
|
||||
--footer-bkg-border: var(--blue) 32% 84%;
|
||||
--toc-hovered-bkg: 0deg 0% 0% / 0.05;
|
||||
--overlay-bkg: var(--white) 10% 98%;
|
||||
--overlay-bkg-border: var(--white) 10% 85%;
|
||||
--footer-bkg: var(--white) 10% 95%;
|
||||
--footer-bkg-border: var(--white) 10% 88%;
|
||||
}
|
||||
|
||||
html.dark,
|
||||
html:has(input#theme-manual-toggle:checked) {
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
|
|
|
|||
18
src/styles/css-config/normalize.css
vendored
18
src/styles/css-config/normalize.css
vendored
|
|
@ -32,15 +32,15 @@ body {
|
|||
/* aside, */
|
||||
details,
|
||||
/* figcaption, */
|
||||
/* figure, */
|
||||
/* footer, */
|
||||
/* header, */
|
||||
/* hgroup, */
|
||||
/* main, */
|
||||
/* menu, */
|
||||
/* nav, */
|
||||
/* section, */
|
||||
summary {
|
||||
/* figure, */
|
||||
/* footer, */
|
||||
/* header, */
|
||||
/* hgroup, */
|
||||
/* main, */
|
||||
/* menu, */
|
||||
/* nav, */
|
||||
/* section, */
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,4 +77,6 @@ html {
|
|||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
--theme-transition: 0.3s var(--ease-in-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
[data-scope="collapsible"][data-part="content"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: all 300ms;
|
||||
transition: all var(--theme-transition);
|
||||
}
|
||||
|
||||
[data-scope="collapsible"][data-part="content"][data-state="open"] {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,9 @@
|
|||
margin-bottom: 0.618rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.8rem;
|
||||
transition: border 0.3s;
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
}
|
||||
|
||||
& .typedata-details {
|
||||
|
|
@ -164,6 +166,9 @@
|
|||
.typeprops {
|
||||
& .typeprop-root {
|
||||
border: 1px solid hsl(var(--prop-color) / 0.6);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid hsl(var(--prop-color));
|
||||
|
|
@ -175,11 +180,13 @@
|
|||
|
||||
& .typeprop-name {
|
||||
color: hsl(var(--prop-link-color));
|
||||
transition: color var(--theme-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .typeprops {
|
||||
html.dark .typeprops,
|
||||
html:has(input#theme-manual-toggle:checked) .typeprops {
|
||||
& .typeprop-root {
|
||||
border: 1px solid hsl(var(--prop-color) / 0.3);
|
||||
|
||||
|
|
@ -193,6 +200,9 @@ html.dark .typeprops {
|
|||
.typefuncs {
|
||||
& .typefunc-root {
|
||||
border: 1px solid hsl(var(--func-color) / 0.6);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid hsl(var(--func-color));
|
||||
|
|
@ -204,6 +214,7 @@ html.dark .typeprops {
|
|||
|
||||
& .typefunc-name {
|
||||
color: hsl(var(--func-link-color));
|
||||
transition: color var(--theme-transition);
|
||||
}
|
||||
|
||||
& .typefunc-params {
|
||||
|
|
@ -222,7 +233,8 @@ html.dark .typeprops {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark .typefuncs {
|
||||
html.dark .typefuncs,
|
||||
html:has(input#theme-manual-toggle:checked) .typefuncs {
|
||||
& .typefunc-root {
|
||||
border: 1px solid hsl(var(--func-color) / 0.3);
|
||||
|
||||
|
|
@ -236,6 +248,9 @@ html.dark .typefuncs {
|
|||
.typesignals {
|
||||
& .typesignal-root {
|
||||
border: 1px solid hsl(var(--signal-color) / 0.6);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid hsl(var(--signal-color));
|
||||
|
|
@ -249,6 +264,7 @@ html.dark .typefuncs {
|
|||
position: relative;
|
||||
width: max-content;
|
||||
color: hsl(var(--signal-link-color));
|
||||
transition: color var(--theme-transition);
|
||||
|
||||
& .typesignal-doclink {
|
||||
top: -12px;
|
||||
|
|
@ -274,7 +290,8 @@ html.dark .typefuncs {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark .typesignals {
|
||||
html.dark .typesignals,
|
||||
html:has(input#theme-manual-toggle:checked) .typesignals {
|
||||
& .typesignal-root {
|
||||
border: 1px solid hsl(var(--signal-color) / 0.3);
|
||||
|
||||
|
|
@ -288,6 +305,9 @@ html.dark .typesignals {
|
|||
.typevariants {
|
||||
& .typevariant-root {
|
||||
border: 1px solid hsl(var(--var-color) / 0.6);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid hsl(var(--var-color));
|
||||
|
|
@ -301,6 +321,7 @@ html.dark .typesignals {
|
|||
position: relative;
|
||||
width: max-content;
|
||||
color: hsl(var(--var-link-color));
|
||||
transition: color var(--theme-transition);
|
||||
|
||||
& .typevariant-doclink {
|
||||
position: absolute;
|
||||
|
|
@ -313,7 +334,8 @@ html.dark .typesignals {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark .typevariants {
|
||||
html.dark .typevariants,
|
||||
html:has(input#theme-manual-toggle:checked) .typevariants {
|
||||
& .typevariant-root {
|
||||
border: 1px solid hsl(var(--var-color) / 0.3);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@import "./docs-types.css";
|
||||
|
||||
.docslayout {
|
||||
transition: background-color 0.3s;
|
||||
transition: background-color var(--theme-transition);
|
||||
}
|
||||
|
||||
.docslayout-root {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
transition: filter 0.3s;
|
||||
transition: filter var(--theme-transition);
|
||||
}
|
||||
|
||||
.docslayout-inner {
|
||||
|
|
@ -31,9 +31,12 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
:not(html.dark) > .dim-content-toc,
|
||||
:not(html.dark) > .dim-content-nav {
|
||||
html:not(.dark):not(:has(input#theme-manual-toggle:checked)) > .dim-content-toc,
|
||||
|
||||
html:not(.dark):not(:has(input#theme-manual-toggle:checked)) > .dim-content-nav {
|
||||
|
||||
background-color: #909090;
|
||||
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
|
|
@ -66,7 +69,7 @@
|
|||
--color-link-breadcrumbs: hsl(var(--link));
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.318rem;
|
||||
max-width: 100svw;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@
|
|||
.nav-item {
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s ease;
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
padding: 0.4em;
|
||||
font-size: 1rem;
|
||||
|
||||
|
|
@ -39,6 +41,7 @@
|
|||
}
|
||||
|
||||
.fade {
|
||||
mask-image: linear-gradient(to right, #000 80%, transparent);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
#000 80%,
|
||||
|
|
@ -55,7 +58,9 @@
|
|||
& > div {
|
||||
& > .nav-collapse-marker,
|
||||
a {
|
||||
transition: background-color 0.2s ease;
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
}
|
||||
|
||||
& > .nav-collapse-marker {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@
|
|||
|
||||
.nav-icon {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
transition: opacity 0.6s;
|
||||
transition:
|
||||
opacity var(--theme-transition),
|
||||
transform var(--theme-transition);
|
||||
}
|
||||
|
||||
.nav-icon.active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +54,9 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
transition: left 0.3s ease, padding 0.3s ease;
|
||||
transition:
|
||||
left 0.3s ease,
|
||||
padding 0.3s ease;
|
||||
|
||||
&.shown {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,28 @@
|
|||
font-size: 1.614rem;
|
||||
max-height: 500px;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .toc-icon {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
transition:
|
||||
opacity var(--theme-transition),
|
||||
transform var(--theme-transition);
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
|
|
@ -61,7 +83,9 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
transition: width 0.3s ease, padding 0.3s ease;
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
padding 0.3s ease;
|
||||
|
||||
&.shown {
|
||||
& .toc-content {
|
||||
|
|
@ -115,7 +139,7 @@
|
|||
margin-right: 1.272rem;
|
||||
|
||||
& .toc_a {
|
||||
transition: color 0.33s;
|
||||
transition: color var(--theme-transition);
|
||||
color: hsl(var(--toc-link));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@
|
|||
@import "./components/featurelist.css";
|
||||
@import "./components/marquee.css";
|
||||
|
||||
.changing-theme * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
height: 24px;
|
||||
font-size: 1.614rem;
|
||||
|
|
@ -31,17 +27,25 @@
|
|||
.header {
|
||||
background-color: hsl(var(--bg-400));
|
||||
box-shadow: 0 1px 1px 1px hsla(var(--white) 100 0 / 0.1);
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition),
|
||||
box-shadow var(--theme-transition);
|
||||
}
|
||||
|
||||
.baselayout,
|
||||
.docslayout {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--secondary-900));
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
}
|
||||
|
||||
a {
|
||||
color: hsl(var(--link));
|
||||
text-decoration: none;
|
||||
transition: color var(--theme-transition);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
@ -50,12 +54,15 @@ a {
|
|||
}
|
||||
|
||||
html.dark .baselayout,
|
||||
html.dark .docslayout {
|
||||
html.dark .docslayout,
|
||||
html:has(input#theme-manual-toggle:checked) .baselayout,
|
||||
html:has(input#theme-manual-toggle:checked) .docslayout {
|
||||
background-color: hsl(var(--bg-900));
|
||||
color: hsl(var(--secondary-400));
|
||||
}
|
||||
|
||||
html.dark {
|
||||
html.dark,
|
||||
html:has(input#theme-manual-toggle:checked) {
|
||||
& .header {
|
||||
background-color: hsl(var(--secondary-900));
|
||||
color: hsl(var(--secondary-500));
|
||||
|
|
@ -153,6 +160,7 @@ body.overflow-toc {
|
|||
|
||||
footer {
|
||||
position: relative;
|
||||
margin-top: var(--2xl);
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
|
|
@ -160,15 +168,17 @@ footer {
|
|||
padding: 1rem 2rem;
|
||||
flex-shrink: 0;
|
||||
background: hsl(var(--footer-bkg));
|
||||
transition:
|
||||
background-color var(--theme-transition),
|
||||
color var(--theme-transition);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 54%;
|
||||
right: calc(50% + 1.25rem);
|
||||
height: 1px;
|
||||
width: calc(48%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
|
|
@ -181,9 +191,8 @@ footer {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 54%;
|
||||
left: calc(50% + 1.25rem);
|
||||
height: 1px;
|
||||
width: calc(48% - 1rem);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
hsl(var(--footer-bkg-border)) 0%,
|
||||
|
|
@ -195,16 +204,17 @@ footer {
|
|||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: hsl(var(--text-dark));
|
||||
transition: color 0.3s ease;
|
||||
transition: color var(--theme-transition);
|
||||
|
||||
& .hint {
|
||||
transition: color 0.3s ease;
|
||||
transition: color var(--theme-transition);
|
||||
}
|
||||
|
||||
&:nth-child(2) .hint {
|
||||
|
|
|
|||
|
|
@ -40,15 +40,20 @@
|
|||
}
|
||||
|
||||
h1.gradient-text {
|
||||
background: linear-gradient(30deg,
|
||||
hsl(var(--green) 80% 42%),
|
||||
hsl(var(--blue) 80% 49%));
|
||||
background: linear-gradient(
|
||||
30deg,
|
||||
hsl(var(--green) 80% 42%),
|
||||
hsl(var(--blue) 80% 49%)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
html.dark h1.gradient-text {
|
||||
html.dark h1.gradient-text,
|
||||
html:has(input#theme-manual-toggle:checked) h1.gradient-text {
|
||||
background: linear-gradient(30deg, #42b96b, #4281b9);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
@ -70,7 +75,8 @@ html.dark h1.gradient-text {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark .main-page_hero-text {
|
||||
html.dark .main-page_hero-text,
|
||||
html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
|
||||
& h2 {
|
||||
color: hsl(var(--blue) 100% 83%);
|
||||
}
|
||||
|
|
@ -130,9 +136,9 @@ html.dark .main-page_hero-text {
|
|||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
box-shadow 0.3s,
|
||||
border-color 0.3s;
|
||||
background-color var(--theme-transition),
|
||||
box-shadow var(--theme-transition),
|
||||
border-color var(--theme-transition);
|
||||
|
||||
background-color: hsl(var(--green) 38% 30%);
|
||||
color: hsl(194deg 0% 100%);
|
||||
|
|
@ -164,7 +170,8 @@ html.dark .main-page_hero-text {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark .main-page_link-card {
|
||||
html.dark .main-page_link-card,
|
||||
html:has(input#theme-manual-toggle:checked) .main-page_link-card {
|
||||
background-color: hsl(var(--green) 38% 25%);
|
||||
color: hsl(194deg 0% 100%);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue