diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/default.css | 34 | ||||
| -rw-r--r-- | src/invidious/views/components/search_box.ecr | 9 | ||||
| -rw-r--r-- | src/invidious/views/search_homepage.ecr | 6 | ||||
| -rw-r--r-- | src/invidious/views/template.ecr | 6 |
4 files changed, 25 insertions, 30 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 95c1f55c..2cda980c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -192,20 +192,24 @@ img.thumbnail { display: inline; } -.searchbar .pure-form input[type="search"] { - margin-bottom: 1px; +.searchbar .pure-form fieldset { padding: 0; } - border-top: 0; - border-left: 0; - border-right: 0; - border-bottom: 1px solid #ccc; - border-radius: 0; +.searchbar input[type="search"] { + width: 100%; + margin: 1px; - padding: initial 0; + border: 1px solid; + border-color: #0000 #0000 #CCC #0000; + border-radius: 0; - box-shadow: none; + box-shadow: none; + -webkit-appearance: none; +} - -webkit-appearance: none; +.searchbar input[type="search"]:focus { + margin: 0 0 0.5px 0; + border: 2px solid; + border-color: #0000 #0000 #FED #0000; } /* https://stackoverflow.com/a/55170420 */ @@ -217,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button { background-size: 14px; } -.searchbar .pure-form fieldset { - padding: 0; -} - -/* attract focus to the searchbar by adding a subtle transition */ -.searchbar .pure-form input[type="search"]:focus { - margin-bottom: 0px; - border-bottom: 2px solid #aaa; -} - .user-field { display: flex; flex-direction: row; diff --git a/src/invidious/views/components/search_box.ecr b/src/invidious/views/components/search_box.ecr new file mode 100644 index 00000000..4144d161 --- /dev/null +++ b/src/invidious/views/components/search_box.ecr @@ -0,0 +1,9 @@ +<form class="pure-form" action="/search" method="get"> + <fieldset> + <input type="search" id="searchbox" autocomplete="off" autocorrect="off" + autocapitalize="none" spellcheck="false" autofocus name="q" + placeholder="<%= translate(locale, "search") %>" + title="<%= translate(locale, "search") %>" + value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> + </fieldset> +</form> diff --git a/src/invidious/views/search_homepage.ecr b/src/invidious/views/search_homepage.ecr index 7d2dab83..45561d1e 100644 --- a/src/invidious/views/search_homepage.ecr +++ b/src/invidious/views/search_homepage.ecr @@ -14,11 +14,7 @@ </div> <div class="pure-u-1-4"></div> <div class="pure-u-1 pure-u-md-12-24 searchbar"> - <form class="pure-form" action="/search" method="get"> - <fieldset> - <input autofocus type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> - </fieldset> - </form> + <%= rendered "components/search_box" %> </div> <div class="pure-u-1-4"></div> </div> diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 5b6e6ab8..efa434bf 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -35,11 +35,7 @@ <a href="/" class="index-link pure-menu-heading">Invidious</a> </div> <div class="pure-u-1 pure-u-md-12-24 searchbar"> - <form class="pure-form" action="/search" method="get"> - <fieldset> - <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> - </fieldset> - </form> + <%= rendered "components/search_box" %> </div> <% end %> |