michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Styled the dark version of the search bar. (#1041)

Browse source 
* Styled the dark version for the search bar. Changed some stlyes for both themes.

* Adjusted the SearchFooter glow.

Co-authored-by: Peter Singh <drgaud@hotmail.com>

* Removed search footer glow.

* Added inset shadow for the search modal.

Co-authored-by: V. Tinev <vtinev@2create.studio>
Co-authored-by: Peter Singh <drgaud@hotmail.com>
This commit is contained in:
V. Tinev 2021-08-06 21:54:42 +03:00 • committed by GitHub
parent 50fed4902b
commit 57328fc056
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/public/theme.css
View file

@ -94,6 +94,7 @@ body {
--theme-divider: hsla(var(--color-gray-10), 1);
--theme-text: hsla(var(--color-gray-90), 1);
--theme-text-light: hsla(var(--color-gray-80), 1);
/* @@@: not used anywhere */
--theme-text-lighter: hsla(var(--color-gray-40), 1);
--theme-bg: hsla(215, 28%, 17%, 1);
@ -106,6 +107,17 @@ body {
--theme-navbar-bg: hsla(215, 28%, 17%, 1);
--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
/* DocSearch [Algolia] */
--docsearch-modal-background: var(--theme-bg);
--docsearch-searchbox-focus-background: var(--theme-divider);
--docsearch-footer-background: var(--theme-divider);
--docsearch-text-color: var(--theme-text);
--docsearch-hit-background: var(--theme-divider);
--docsearch-hit-shadow: none;
--docsearch-hit-color: var(--theme-text);
--docsearch-footer-shadow: inset 0 2px 10px #000;
--docsearch-modal-shadow: inset 0 0 8px #000;
}
::selection {

9
docs/src/components/Header/Search.css
View file

@ -65,3 +65,12 @@
display: flex;
}
}
/* ------------------------------------------------------------ *\
DocSearch (Algolia)
\* ------------------------------------------------------------ */
.DocSearch-Modal .DocSearch-Hit a {
box-shadow: none;
border: 1px solid var(--theme-accent);
}