91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
|
/* Handle color schemes */
|
||
|
|
:root:has(#theme-light:checked) .dark {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
:root:has(#theme-dark:checked) .light {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root:not(:has(#theme-dark:checked)) .dark {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root:not(:has(#theme-light:checked)) .light {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchbox {
|
||
|
|
margin: 1rem auto 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
pagefind-searchbox,
|
||
|
|
pagefind-modal-trigger,
|
||
|
|
pagefind-modal {
|
||
|
|
/* Shadows */
|
||
|
|
--pf-scroll-shadow: var(--color-shadow) !important;
|
||
|
|
--pf-shadow-sm: .15rem .15rem 0 var(--color-shadow) !important;
|
||
|
|
--pf-shadow-md: .25rem .25rem 0 var(--color-shadow) !important;
|
||
|
|
--pf-shadow-lg: 1rem 1rem 0 var(--color-shadow) !important;
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
--pf-font: var(--font-family) !important;
|
||
|
|
|
||
|
|
/* Border */
|
||
|
|
--pf-border-radius: 1.5rem !important;
|
||
|
|
|
||
|
|
/* Focus */
|
||
|
|
--pf-outline-width: .125rem !important;
|
||
|
|
--pf-outline-offset: 0 !important;
|
||
|
|
|
||
|
|
/* Width */
|
||
|
|
--pf-searchbox-max-width: min(550px, 92vw) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.light pagefind-searchbox,
|
||
|
|
.light pagefind-modal-trigger,
|
||
|
|
.light pagefind-modal {
|
||
|
|
--pf-text: var(--color-dark) !important;
|
||
|
|
--pf-text-secondary: var(--color-dark-alt) !important;
|
||
|
|
--pf-text-muted: var(--color-dark-alt) !important;
|
||
|
|
--pf-background: var(--color-light-alt) !important;
|
||
|
|
--pf-border: var(--color-pink-dark) !important;
|
||
|
|
--pf-border-focus: var(--color-pink-dark) !important;
|
||
|
|
--pf-skeleton: var(--color-light) !important;
|
||
|
|
--pf-skeleton-shine: var(--color-dark) !important;
|
||
|
|
--pf-hover: var(--color-light) !important;
|
||
|
|
--pf-mark: var(--color-teal-dark) !important;
|
||
|
|
--pf-outline-focus: var(--color-teal-dark) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark pagefind-searchbox,
|
||
|
|
.dark pagefind-modal-trigger,
|
||
|
|
.dark agefind-modal {
|
||
|
|
--pf-text: var(--color-light) !important;
|
||
|
|
--pf-text-secondary: var(--color-light-alt) !important;
|
||
|
|
--pf-text-muted: var(--color-light-alt) !important;
|
||
|
|
--pf-background: var(--color-dark-alt) !important;
|
||
|
|
--pf-border: var(--color-pink-light) !important;
|
||
|
|
--pf-border-focus: var(--color-pink-light) !important;
|
||
|
|
--pf-skeleton: var(--color-dark) !important;
|
||
|
|
--pf-skeleton-shine: var(--color-dark) !important;
|
||
|
|
--pf-hover: var(--color-dark) !important;
|
||
|
|
--pf-mark: var(--color-teal-light) !important;
|
||
|
|
--pf-outline-focus: var(--color-teal-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
pagefind-searchbox input {
|
||
|
|
border-width: .125rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
pagefind-searchbox input:not(:focus-visible) {
|
||
|
|
box-shadow: var(--pf-shadow-md) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pf-searchbox-dropdown,
|
||
|
|
.pf-searchbox-footer {
|
||
|
|
border-width: .125rem !important;
|
||
|
|
}
|
