diff --git a/css/pagefind.css b/css/pagefind.css index 2a2c1195..91d11b3b 100644 --- a/css/pagefind.css +++ b/css/pagefind.css @@ -21,9 +21,7 @@ margin: 1rem auto 0; } -pagefind-searchbox, -pagefind-modal-trigger, -pagefind-modal { +pagefind-searchbox { /* Shadows */ --pf-scroll-shadow: var(--color-shadow) !important; --pf-shadow-sm: .15rem .15rem 0 var(--color-shadow) !important; @@ -44,9 +42,7 @@ pagefind-modal { --pf-searchbox-max-width: min(550px, 92vw) !important; } -.light pagefind-searchbox, -.light pagefind-modal-trigger, -.light pagefind-modal { +.light pagefind-searchbox { --pf-text: var(--color-dark) !important; --pf-text-secondary: var(--color-dark-alt) !important; --pf-text-muted: var(--color-dark-alt) !important; @@ -58,11 +54,15 @@ pagefind-modal { --pf-hover: var(--color-light) !important; --pf-mark: var(--color-teal-dark) !important; --pf-outline-focus: var(--color-teal-dark) !important; + + /* Error */ + --pf-error-bg: var(--color-light-alt) !important; + --pf-error-border: var(--color-red-dark) !important; + --pf-error-text: var(--color-red-dark) !important; + --pf-error-text-secondary: var(--color-red-dark) !important; } -.dark pagefind-searchbox, -.dark pagefind-modal-trigger, -.dark agefind-modal { +.dark pagefind-searchbox { --pf-text: var(--color-light) !important; --pf-text-secondary: var(--color-light-alt) !important; --pf-text-muted: var(--color-light-alt) !important; @@ -74,6 +74,12 @@ pagefind-modal { --pf-hover: var(--color-dark) !important; --pf-mark: var(--color-teal-light) !important; --pf-outline-focus: var(--color-teal-light) !important; + + /* Error */ + --pf-error-bg: var(--color-dark-alt) !important; + --pf-error-border: var(--color-red-light) !important; + --pf-error-text: var(--color-red-light) !important; + --pf-error-text-secondary: var(--color-red-light) !important; } pagefind-searchbox input { @@ -88,3 +94,7 @@ pagefind-searchbox input:not(:focus-visible) { .pf-searchbox-footer { border-width: .125rem !important; } + +.pf-error { + margin-top: .5rem !important; +}