improve filter sort, stay open and categories

1 files changed, 59 insertions, 0 deletions

diff --git a/web/style/forms.css b/web/style/forms.css
index 5e5319d..48a7dba 100644
--- a/web/style/forms.css
+++ b/web/style/forms.css
@@ -83,3 +83,62 @@ form.account h1 {
 form.account p {
     color: var(--font-dark);
 }
+
+legend {
+    font-size: 1.5em;
+}
+input[type="radio"] {
+    appearance: none;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    padding: 2px;
+    background-clip: content-box;
+    border: 2px solid var(--font);
+    background-color: transparent;
+    transition: background-color 0.3s;
+}
+input[type="radio"]:checked {
+    background-color: var(--accent-light);
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    padding: 2px;
+    background-clip: content-box;
+    border: 2px solid var(--font);
+    background-color: transparent;
+    transition: background-color 0.3s;
+}
+input[type="checkbox"]:checked {
+    background-color: var(--accent-light);
+}
+
+fieldset label {
+    transition: color 0.2s;
+}
+fieldset label:hover {
+    color: var(--accent-light);
+}
+
+fieldset .categories {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+fieldset .categories .category {
+    margin-right: 2em;
+    margin-left: 2em;
+    min-width: max-content;
+    flex-basis: auto;
+    display: inline-flex;
+    flex-direction: column;
+}
+fieldset .categories .category h3 {
+    margin: 0px;
+}