From 06946feaec87edd4db8128281ff8f4b2cd40a15e Mon Sep 17 00:00:00 2001 From: Ethan Yoo Date: Thu, 29 Dec 2022 09:50:53 -0500 Subject: [PATCH] Move styling to new CSS stylesheet --- themes/geronimo/layouts/partials/search.html | 153 +------------------ themes/geronimo/static/css/search.css | 122 +++++++++++++++ 2 files changed, 123 insertions(+), 152 deletions(-) create mode 100644 themes/geronimo/static/css/search.css diff --git a/themes/geronimo/layouts/partials/search.html b/themes/geronimo/layouts/partials/search.html index b205d37..f1adc25 100644 --- a/themes/geronimo/layouts/partials/search.html +++ b/themes/geronimo/layouts/partials/search.html @@ -6,156 +6,5 @@ - + - - \ No newline at end of file diff --git a/themes/geronimo/static/css/search.css b/themes/geronimo/static/css/search.css new file mode 100644 index 0000000..fe0ffb0 --- /dev/null +++ b/themes/geronimo/static/css/search.css @@ -0,0 +1,122 @@ +#search-form { + display: block; + position: fixed; + top: 0; + right: 0; + margin: 0; + padding: 0; + min-width: var(--icon-size, 1.2rem); + max-width: 15rem; + max-height: 100vh; + z-index: 1000; +} +#search-form.search--display, +#search-form[data-focus='false'] .search--display { + display: none; +} +#search-form[data-focus='true'] .search--display { + display: block; +} +#search-form .search-bar { + display: flex; + height: 1.4rem; + align-items: center; +} +#search-form .search-bar { + background: rgb(var(--page-color, '240,240,240')); + color: rgb(var(--text-color, '3,3,3')); +} +#search-form[data-focus='true'] .search-bar { + border: 2.5px solid rgb(var(--accent-color, '0,0,255')); +} +#search-form[data-focus='true'] .search-bar:not(:focus-within) { + background: rgb(var(--text-color, '3,3,3')); + color: rgb(var(--page-color, '240,240,240')); + border-color: rgb(var(--text-color, '3,3,3')); +} +#search-input { + display: block; + padding: 0.3rem; + width: 15rem; + max-width: 100vw; + height: 100%; + background: inherit; + border: none; + color: inherit; + outline: none; + text-align: left; + font-size: var(--s-2, 0.8rem); +} +#search-submit { + display: block; + margin: 0 var(--icon-pad, 0.1rem) 0 0; + padding: 0; + width: var(--icon-size, 1.2rem); + height: var(--icon-size, 1.2rem); + line-height: var(--icon-size, 1.2rem); + background: inherit; + color: inherit; +} +#search-submit:hover, +#search-submit:focus { + color: rgb(var(--accent-color, '0,0,255')); +} +#search-results { + display: block; + flex-grow: 2; + margin: 0.5px 0 0 0; + padding: 0; + max-height: calc(100vh - 1.4rem - 0.5px); + width: 100%; + overflow-x: hidden; + overflow-y: auto; + backdrop-filter: blur(var(--page-color-blur, 2px)); + border: 2.5px solid; + color: rgb(var(--text-color, '3,3,3')); + font-size: var(--s-2, 0.8rem); + scrollbar-color: rgb(var(--text-color, '3,3,3')) rgb(var(--page-color, '240,240,240')) !important; + scrollbar-width: thin !important; +} +#search-results:empty { + display: none; + opacity: 0; +} +#search-results li { + margin: 0; + width: 100%; + background-color: rgba(var(--page-color, '240,240,240'), var(--page-color-transparency, 0.89)); + border-top: 0.5px dashed; + list-style: none; +} + #search-results li:first-child { + border: none; + } +#search-results a { + display: block; + padding: 0.3rem; + display: block; + text-decoration: none; +} +#search-results a:hover, +#search-results a:focus { + background: rgb(var(--text-color, '3,3,3')); + color: rgb(var(--page-color, '240,240,240')); + outline: 0; +} +#search-results a:active { + background: rgb(var(--accent-color, '0,0,255')); + color: rgb(var(--page-color, '240,240,240')); +} +#search-results li span:empty { + display: none; +} +#search-results li span:not(:last-child)::after { + content: ' – '; +} +#search-results li .title { + display: block; + margin-bottom: calc(var(--line-height, 1.4em)/3); +} +#search-results li .title::after { + display: none; +} \ No newline at end of file