Merge pull request #2956 from SamantazFox/search-filters

Overhaul search filters

2 files changed, 122 insertions, 24 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 8b2b3578..49069c92 100644
--- a/assets/css/default.css
+++ b/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 */
diff --git a/assets/css/search.css b/assets/css/search.css
new file mode 100644
index 00000000..a5996362
--- /dev/null
+++ b/assets/css/search.css
@@ -0,0 +1,117 @@
+summary {
+	/* This should hide the marker */
+	display: block;
+
+	font-size: 1.17em;
+	font-weight: bold;
+	margin: 0 auto 10px auto;
+}
+
+summary::-webkit-details-marker,
+summary::marker { display: none; }
+
+summary:before {
+	border-radius: 5px;
+	content: "[ + ]";
+	margin: -2px 10px 0 10px;
+	padding: 1px 0 3px 0;
+	text-align: center;
+	width: 40px;
+}
+
+details[open] > summary:before { content: "[ ‒ ]"; }
+
+
+#filters-box {
+	padding: 10px 20px 20px 10px;
+	margin: 10px 15px;
+}
+#filters-flex {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	align-items: flex-start;
+	align-content: flex-start;
+	justify-content: flex-start;
+}
+
+
+fieldset, legend {
+	display: contents !important;
+	border: none !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+
+.filter-column {
+	display: inline-block;
+	display: inline-flex;
+	width: max-content;
+	min-width: max-content;
+	max-width: 16em;
+	margin: 15px;
+	flex-grow: 2;
+	flex-basis: auto;
+	flex-direction: column;
+}
+.filter-name, .filter-options {
+	display: block;
+	padding: 5px 10px;
+	margin: 0;
+	text-align: start;
+}
+
+.filter-options div { margin: 6px 0; }
+.filter-options div * { vertical-align: middle; }
+.filter-options label { margin: 0 10px; }
+
+
+#filters-apply { text-align: end; }
+
+/* Error message */
+
+.no-results-error {
+	text-align: center;
+	line-height: 180%;
+	font-size: 110%;
+	padding: 15px 15px 125px 15px;
+}
+
+/* Responsive rules */
+
+@media only screen and (max-width: 800px) {
+	summary { font-size: 1.30em; }
+	#filters-box {
+		margin: 10px 0 0 0;
+		padding: 0;
+	}
+	#filters-apply {
+		text-align: center;
+		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;
+	}
+}