Improve styling for search filters

assets/css/search.css

@@ -1,12 +1,7 @@
 #filters {
-  display: inline;
   margin-top: 15px;
 }
 
-#filters > div {
-  display: inline-block;
-}
-
 #filters > summary {
   display: block;
   margin-bottom: 15px;
@@ -22,6 +17,20 @@
   font-size: 1.5em;
 }
 
+#filters .pure-menu-item {
+  margin-top: 10px;
+}
+
+#filters hr {
+  width: 80%;
+  margin: 10px 0 15px 0 !important
+}
+
+.filter-catagory {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
 .remove-filter {
   margin-left: 6px;
   vertical-align: middle;
@@ -30,3 +39,9 @@
 .dark-theme .remove-filter {
   color: #CAC5BE
 }
+
+@media (prefers-color-scheme: dark) {
+  .no-theme .remove-filter {
+    color: #CAC5BE
+  }
+}

src/invidious/views/components/channel-information.ecr

@@ -119,7 +119,7 @@
 
         <div class="pure-u-1-3"> <!-- Sort by -->
             <div class="pure-menu pure-menu-horizontal" style="">
-                <ul class="pure-menu-list", style="float: right">
+                <ul class="pure-menu-list" style="float: right">
                     <% sort_options.each do |sort| %>
                         <% if sort_by == sort %>
                             <li class="pure-menu-item pure-menu-selected">

src/invidious/views/search.ecr

@@ -19,11 +19,12 @@
       <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&|$)/, "") %>
       <% base_url = "/search?q=#{HTML.escape(query.not_nil!)}" %>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-date">
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-date">
           <b><%= translate(locale, "date") %></b>
           <hr/>
+          <ul class="pure-menu-list">
               <% ["hour", "today", "week", "month", "year"].each do |date| %>
-                <div class="pure-u-1 pure-md-1-5">
+                  <li class="pure-menu-item">
                       <% if operator_hash.fetch("date", "all") == date %>
                           <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}"%>">
                               <b><%= translate(locale, date) %></b>
@@ -34,15 +35,17 @@
                               <%= translate(locale, date) %>
                           </a>
                       <% end %>
-                </div>
+                  </li>
               <% end %>
+          </ul>
       </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-content_type">
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-content_type">
           <b><%= translate(locale, "content_type") %></b>
           <hr/>
+          <ul class="pure-menu-list">
               <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
-                <div class="pure-u-1 pure-md-1-5">
+                  <li class="pure-menu-item">
                       <% if operator_hash.fetch("content_type", "all") == content_type %>
                           <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}"%>">
                               <b><%= translate(locale, content_type) %></b>
@@ -53,15 +56,17 @@
                               <%= translate(locale, content_type) %>
                           </a>
                       <% end %>
-                </div>
+                  </li>
               <% end %>
+          </ul>
       </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-duration">
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-duration">
           <b><%= translate(locale, "duration") %></b>
           <hr/>
+          <ul class="pure-menu-list">
               <% ["short", "long"].each do |duration| %>
-                <div class="pure-u-1 pure-md-1-5">
+                  <li class="pure-menu-item">
                       <% if operator_hash.fetch("duration", "all") == duration %>
                           <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}"%>">
                               <b><%= translate(locale, duration) %></b>
@@ -72,15 +77,17 @@
                               <%= translate(locale, duration) %>
                           </a>
                       <% end %>
-                </div>
+                  </li>
               <% end %>
+          </ul>
       </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-features">
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-features">
           <b><%= translate(locale, "features") %></b>
           <hr/>
+          <ul class="pure-menu-list">
               <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
-                <div class="pure-u-1 pure-md-1-5">
+                  <li class="pure-menu-item">
                       <% if operator_hash.fetch("features", "all").includes?(feature) %>
                           <% if operator_hash["features"].split(",").size == 1 %>
                               <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&features=[a-z]+/, "")}"%>">
@@ -106,11 +113,12 @@
                               <%= translate(locale, feature) %>
                           </a>
                       <% end %>
-                </div>
+                  </li>
               <% end %>
+          </ul>
       </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-sort">
+        <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-sort">
             <b><%= translate(locale, "sort") %></b>
             <hr/>
             <% ["relevance", "rating", "date", "views"].each do |sort| %>