iv-org
/
invidious
mirror of https://github.com/iv-org/invidious.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add styling to search bar on empty home page

This commit is contained in:
syeopite 2021-04-04 00:48:14 -07:00
parent e1af3d9bf3
commit 555108c7fd
No known key found for this signature in database
GPG Key ID: 6FA616E5A5294A82
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/default.css
View File

@ -172,7 +172,7 @@ img.thumbnail {
flex: 1; flex: 1;
} }
.navbar > .searchbar { .searchbar {
flex-grow: 2; /* take double the space of the other items */ flex-grow: 2; /* take double the space of the other items */
} }
@ -185,7 +185,7 @@ img.thumbnail {
display: inline; display: inline;
} }
.navbar > .searchbar .pure-form input[type="search"] { .searchbar .pure-form input[type="search"] {
margin-bottom: 1px; margin-bottom: 1px;
border-top: 0; border-top: 0;
@ -210,12 +210,12 @@ input[type="search"]::-webkit-search-cancel-button {
background-size: 14px; background-size: 14px;
} }
.navbar > .searchbar .pure-form fieldset { .searchbar .pure-form fieldset {
padding: 0; padding: 0;
} }
/* attract focus to the searchbar by adding a subtle transition */ /* attract focus to the searchbar by adding a subtle transition */
.navbar > .searchbar .pure-form input[type="search"]:focus { .searchbar .pure-form input[type="search"]:focus {
margin-bottom: 0px; margin-bottom: 0px;
border-bottom: 2px solid #aaa; border-bottom: 2px solid #aaa;
} }
@ -586,7 +586,7 @@ body.dark-theme {
color: #f0f0f0; color: #f0f0f0;
} }
.dark-theme .navbar > .searchbar input { .dark-theme .searchbar input {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
} }
@ -625,7 +625,7 @@ body.dark-theme {
color: #f0f0f0; color: #f0f0f0;
} }
.no-theme .navbar > .searchbar input { .no-theme .searchbar input {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
} }

10
assets/css/empty.css Normal file
View File

@ -0,0 +1,10 @@
#search-widget {
text-align: center;
margin: 50px auto;
}
#logo > h1 {
font-size: 3.5em;
padding-bottom: 0;
margin-bottom: 0;
}

7
src/invidious/views/empty.ecr
View File

@ -3,16 +3,17 @@
<title> <title>
Invidious Invidious
</title> </title>
<link rel="stylesheet" href="/css/empty.css?v=<%= ASSET_COMMIT %>">
<% end %> <% end %>
<%= rendered "components/feed_menu" %> <%= rendered "components/feed_menu" %>
<div class="pure-g h-box"> <div class="pure-g h-box" id="search-widget">
<div class="pure-u-1"> <div class="pure-u-1" id="logo">
<h1 href="/" class="pure-menu-heading">Invidious</h1> <h1 href="/" class="pure-menu-heading">Invidious</h1>
</div> </div>
<div class="pure-u-1-4"></div> <div class="pure-u-1-4"></div>
<div class="pure-u-1-2 searchbar"> <div class="pure-u-1 pure-u-md-12-24 searchbar">
<form class="pure-form" action="/search" method="get"> <form class="pure-form" action="/search" method="get">
<fieldset> <fieldset>
<input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">