diff --git a/src/css/custom.css b/src/css/custom.css index c4bc6c8c..40ea7bf5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,3 +1,4 @@ + /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to @@ -20,7 +21,6 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } -/* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='light'] { --ifm-color-primary: #2c2e7f; --ifm-color-primary-dark: #3a48b8; @@ -52,21 +52,23 @@ } [data-theme='light'] .DocSearch { - --docsearch-primary-color: var(--ifm-color-black); - --docsearch-text-color: var(--ifm-font-color-primary); - --docsearch-muted-color: var(--ifm-color-black); - --docsearch-container-background: rgba(94, 100, 112, 0.7); + --docsearch-primary-color: #3a48b8; + --docsearch-text-color: #1a1a2e; + --docsearch-muted-color: #495057; + --docsearch-container-background: rgba(0, 0, 0, 0.6); /* Modal */ - --docsearch-modal-background: var(--ifm-color-black); + --docsearch-modal-background: #ffffff; + --docsearch-modal-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Search box */ - --docsearch-searchbox-background: var(--ifm-background-color); - --docsearch-searchbox-focus-background: var(--ifm-color-white); + --docsearch-searchbox-background: #f1f3f5; + --docsearch-searchbox-focus-background: #ffffff; /* Hit */ - --docsearch-hit-color: var(--ifm-font-color-base); - --docsearch-hit-active-color: var(--ifm-color-white); - --docsearch-hit-background: var(--ifm-color-white); + --docsearch-hit-color: #1a1a2e; + --docsearch-hit-active-color: #ffffff; + --docsearch-hit-background: #ffffff; /* Footer */ - --docsearch-footer-background: var(--ifm-color-white); + --docsearch-footer-background: #ffffff; + --docsearch-footer-shadow: 0 -1px 0 0 #dee2e6; } [data-theme='dark'] .DocSearch { @@ -92,7 +94,69 @@ ); } -/* Header Icons */ +.DocSearch-Modal { + max-width: 800px; + margin: 10vh auto; +} + +.DocSearch-Input { + font-size: 1.2rem; + padding: 0.75rem 1rem; + color: #1a1a2e; + font-weight: 500; +} + +[data-theme='dark'] .DocSearch-Input { + color: #e6edf3; +} + +.navbar .DocSearch-Button { + padding: 0.35rem 1rem; + border-radius: 8px; + border: none; + background: rgba(58, 72, 184, 0.8); + color: #ffffff; + box-shadow: 0 2px 8px rgba(58, 72, 184, 0.2); + transition: all 0.2s ease; +} + +.navbar .DocSearch-Button:hover { + background: rgba(58, 72, 184, 0.9); + box-shadow: 0 4px 12px rgba(58, 72, 184, 0.3); + transform: translateY(-1px); +} + +.navbar .DocSearch-Button-Placeholder { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); +} + +.navbar .DocSearch-Search-Icon { + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.9); +} + +.navbar .DocSearch-Button-Keys kbd { + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); + color: #ffffff; + box-shadow: none; +} + +[data-theme='dark'] .navbar .DocSearch-Button { + background: rgba(58, 72, 184, 0.6); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +[data-theme='dark'] .navbar .DocSearch-Button:hover { + background: rgba(83, 98, 209, 0.75); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +/* ================================= + HEADER ICONS + ================================= */ .github-link { width: 32px; @@ -120,9 +184,9 @@ 0 0 / contain; } -/* =================================>>>>>>> REPLACE +/* ================================= SMART TABLE STYLING - ======================================== */ + ================================= */ /* Smart table container */ .smart-table-container { @@ -614,4 +678,4 @@ [data-theme='dark'] .schema-fields-table .expand-button:hover { background-color: var(--ifm-color-primary-dark); color: var(--ifm-color-primary-lightest); -} +} \ No newline at end of file