nakidai
/
whoogle-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove gap between input and result types 

Enforces 0 margin for the search input form on the result page, which
removes the weird gap that is seen by default.

Also made minor changes to the border styling. Desktop searches now have
a single bottom border in dark mode rather than an all around border,
and the border around the mobile search result input was removed
entirely.
main
Ben Busby 2021-04-22 16:23:00 -04:00
parent 5b963b441c
commit f56e913521
No known key found for this signature in database
GPG Key ID: 3B08611DF6E62ED2
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/css/dark-theme.css
View File

@ -70,7 +70,7 @@ select {
} }
#search-bar { #search-bar {
border: 2px solid var(--whoogle-dark-element-bg) !important; border-color: var(--whoogle-dark-element-bg) !important;
color: var(--whoogle-dark-text) !important; color: var(--whoogle-dark-text) !important;
} }

7
app/static/css/header.css
View File

@ -27,6 +27,11 @@ header {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
.search-bar-desktop {
border-radius: 8px 8px 0 0;
height: 40px !important;
}
.search-div { .search-div {
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
@ -37,6 +42,7 @@ header {
height: 39px; height: 39px;
display: flex; display: flex;
width: 100%; width: 100%;
margin: 0px;
} }
.search-input { .search-input {
@ -61,7 +67,6 @@ header {
display: block; display: block;
} }
#main>div:focus-within { #main>div:focus-within {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 6px 1px #2375e8; box-shadow: 0 0 6px 1px #2375e8;

9
app/templates/header.html
View File

@ -1,7 +1,7 @@
{% if mobile %} {% if mobile %}
<header> <header>
<div class="bz1lBb"> <div style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;" class="bz1lBb">
<form class="Pg70bf" id="search-form" method="POST"> <form class="search-form Pg70bf" id="search-form" method="POST">
<a class="logo-link mobile-logo" <a class="logo-link mobile-logo"
href="/" href="/"
style="display:flex; justify-content:center; align-items:center;"> style="display:flex; justify-content:center; align-items:center;">
@ -21,7 +21,6 @@
name="q" name="q"
style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
type="text" type="text"
value="{{ query }}"> value="{{ query }}">
<input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x"> <input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
@ -51,14 +50,14 @@
autocapitalize="none" autocapitalize="none"
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="noHIxc" class="search-bar-desktop noHIxc"
name="q" name="q"
spellcheck="false" spellcheck="false"
type="text" type="text"
value="{{ query }}" value="{{ query }}"
style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;"> border-bottom: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }};">
<input name="tbm" value="{{ search_type }}" style="display: none"> <input name="tbm" value="{{ search_type }}" style="display: none">
<input type="submit" style="display: none;"> <input type="submit" style="display: none;">
<div class="sc"></div> <div class="sc"></div>