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 {

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

@ -1,67 +1,76 @@
/** Style Algolia */
:root {
--docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text);
--docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text);
}
.search-input {
flex-grow: 1;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0.33em 0.5em;
overflow: visible;
font-weight: 500;
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-divider);
border-color: var(--theme-divider);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
outline: 0;
cursor: pointer;
transition-timing-function: ease-out;
transition-duration: 0.2s;
transition-property: border-color, color;
-webkit-font-smoothing: antialiased;
flex-grow: 1;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0.33em 0.5em;
overflow: visible;
font-weight: 500;
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-divider);
border-color: var(--theme-divider);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
outline: 0;
cursor: pointer;
transition-timing-function: ease-out;
transition-duration: 0.2s;
transition-property: border-color, color;
-webkit-font-smoothing: antialiased;
}
.search-input:hover,
.search-input:focus {
color: var(--theme-text);
border-color: var(--theme-text-light);
color: var(--theme-text);
border-color: var(--theme-text-light);
}
.search-input:hover::placeholder,
.search-input:focus::placeholder {
color: var(--theme-text-light);
color: var(--theme-text-light);
}
.search-input::placeholder {
color: var(--theme-text-light);
color: var(--theme-text-light);
}
.search-hint {
position: absolute;
top: 7px;
right: 19px;
padding: 3px 5px;
display: none;
display: none;
align-items: center;
justify-content: center;
letter-spacing: 0.125em;
font-size: 13px;
font-family: var(--font-mono);
pointer-events: none;
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
line-height: 14px;
position: absolute;
top: 7px;
right: 19px;
padding: 3px 5px;
display: none;
display: none;
align-items: center;
justify-content: center;
letter-spacing: 0.125em;
font-size: 13px;
font-family: var(--font-mono);
pointer-events: none;
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
line-height: 14px;
}
@media (min-width: 50em) {
.search-hint {
display: flex;
}
.search-hint {
display: flex;
}
}
/* ------------------------------------------------------------ *\
DocSearch (Algolia)
\* ------------------------------------------------------------ */
.DocSearch-Modal .DocSearch-Hit a {
box-shadow: none;
border: 1px solid var(--theme-accent);
}