midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-11-10 07:22:16 +05:30
Code Issues Packages Projects Releases Wiki Activity

Add styling to search bar on empty home page

Browse Source
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;
}
.navbar > .searchbar {
.searchbar {
flex-grow: 2; /* take double the space of the other items */
}
@ -185,7 +185,7 @@ img.thumbnail {
display: inline;
}
.navbar > .searchbar .pure-form input[type="search"] {
.searchbar .pure-form input[type="search"] {
margin-bottom: 1px;
border-top: 0;
@ -210,12 +210,12 @@ input[type="search"]::-webkit-search-cancel-button {
background-size: 14px;
}
.navbar > .searchbar .pure-form fieldset {
.searchbar .pure-form fieldset {
padding: 0;
}
/* 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;
border-bottom: 2px solid #aaa;
}
@ -586,7 +586,7 @@ body.dark-theme {
color: #f0f0f0;
}
.dark-theme .navbar > .searchbar input {
.dark-theme .searchbar input {
background-color: inherit;
color: inherit;
}
@ -625,7 +625,7 @@ body.dark-theme {
color: #f0f0f0;
}
.no-theme .navbar > .searchbar input {
.no-theme .searchbar input {
background-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>
Invidious
</title>
<link rel="stylesheet" href="/css/empty.css?v=<%= ASSET_COMMIT %>">
<% end %>
<%= rendered "components/feed_menu" %>
<div class="pure-g h-box">
<div class="pure-u-1">
<div class="pure-g h-box" id="search-widget">
<div class="pure-u-1" id="logo">
<h1 href="/" class="pure-menu-heading">Invidious</h1>
</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">
<fieldset>
<input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">