Clean up CSS and add light/dark theme support

assets/css/default.css

@@ -15,6 +15,11 @@ body {
   background-color: rgb(255, 0, 0, 0.5);
 }
 
+.underlined {
+  border-bottom: 1px solid;
+  margin-bottom: 20px;
+}
+
 .channel-profile > * {
   font-size: 1.17em;
   font-weight: bold;
@@ -475,30 +480,6 @@ body.dark-theme {
   }
 }
 
-#filters {
-  display: inline;
-  margin-top: 15px;
-}
-
-#filters > div {
-  display: inline-block;
-}
-
-#filters > summary {
-  display: block;
-  margin-bottom: 15px;
-}
-
-#filters > summary::before {
-  content: "[ + ]";
-  font-size: 1.5em;
-}
-
-#filters[open] > summary::before {
-  content: "[ - ]";
-  font-size: 1.5em;
-}
-
 /*With commit d9528f5 all contents of the page is now within a flexbox. However,
 the hr element is rendered improperly within one.
 See https://stackoverflow.com/a/34372979 for more info */

assets/css/search.css

@@ -23,7 +23,6 @@ details[open] > summary:before { content: "[ ‒ ]"; }
 
 
 #filters-box {
-	background: #373737;
 	padding: 10px 20px 20px 10px;
 	margin: 10px 15px;
 }
@@ -63,13 +62,6 @@ fieldset, legend {
 	text-align: start;
 }
 
-/* TODO: move that to the main file */
-.underlined {
-	border-bottom: 1px solid;
-	margin-bottom: 20px;
-}
-
-
 .filter-options div { margin: 6px 0; }
 .filter-options div * { vertical-align: middle; }
 .filter-options label { margin: 0 10px; }
@@ -77,6 +69,7 @@ fieldset, legend {
 
 #filters-apply { text-align: end; }
 
+/* Responsive rules */
 
 @media only screen and (max-width: 800px) {
 	summary { font-size: 1.30em; }
@@ -89,3 +82,27 @@ fieldset, legend {
 		padding: 15px;
 	}
 }
+
+/* Light theme */
+
+.light-theme #filters-box {
+	background: #dfdfdf;
+}
+
+@media (prefers-color-scheme: light) {
+	.no-theme #filters-box {
+		background: #dfdfdf;
+	}
+}
+
+/* Dark theme */
+
+.dark-theme #filters-box {
+	background: #373737;
+}
+
+@media (prefers-color-scheme: dark) {
+	.no-theme #filters-box {
+		background: #373737;
+	}
+}