Redesign and fix search, add custom timeline tab

src/sass/general.scss

@@ -35,106 +35,3 @@
         margin-right: 8px;
     }
 }
-
-.search-field {
-    margin: 2px 5px;
-
-    .pref-group.pref-input {
-        display: inline-block;
-        width: calc(90% - 11px);
-    }
-
-    input[type="text"] {
-        width: calc(100% - 8px);
-    }
-
-    .panel-label {
-        background-color: #121212;
-        color: #F8F8F2;
-        border: 1px solid #FF6C6091;
-        padding: 1px 6px 2px 6px;
-        font-size: 14px;
-        cursor: pointer;
-        margin-left: -2px;
-    }
-
-    .panel-label:hover {
-        border: 1px solid #FF6C60;
-    }
-}
-
-
-#panel-toggle {
-    display: none;
-
-    &:checked ~ .search-panel {
-        max-height: 180px;
-    }
-}
-
-.pannel-label {
-    display: inline;
-}
-
-.search-panel {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.4s;
-
-    margin: 5px;
-    font-weight: initial;
-    text-align: left;
-
-    > div {
-        line-height: 1.7em;
-    }
-
-    .checkbox-container {
-        display: inline;
-        padding-right: unset;
-        margin-left: 23px;
-    }
-
-    .checkbox {
-        right: unset;
-        left: -22px;
-    }
-
-    .checkbox-container .checkbox:after {
-        top: -4px;
-    }
-
-    .search-title {
-        font-weight: bold;
-        min-width: 60px;
-        display: inline-block;
-    }
-
-    .exclude-extras {
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.4s;
-    }
-
-    #exclude-toggle {
-        display: none;
-
-        &:checked ~ .exclude-extras {
-            max-height: 50px;
-        }
-    }
-
-    .filter-extras {
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.4s;
-    }
-
-    #filter-toggle {
-        display: none;
-
-        &:checked ~ .filter-extras {
-            max-height: 50px;
-        }
-    }
-}

src/sass/include/_mixins.css

@@ -58,3 +58,29 @@
         border-color: $accent_light;
     }
 }
+
+@mixin search-resize($width, $rows, $height) {
+    @media(max-width: $width) {
+        .search-toggles {
+            grid-template-columns: repeat($rows, auto);
+        }
+
+        #search-panel-toggle:checked ~ .search-panel {
+            max-height: $height !important;
+        }
+    }
+}
+
+@mixin create-toggle($elem, $height) {
+    ##{$elem}-toggle {
+        display: none;
+
+        &:checked ~ .#{$elem} {
+            max-height: $height;
+        }
+
+        &:checked ~ label .icon-down:before {
+            transform: rotate(180deg) translateY(-1px);
+        }
+    }
+}

src/sass/index.scss

@@ -6,6 +6,7 @@
 @import 'navbar';
 @import 'inputs';
 @import 'timeline';
+@import 'search';
 
 body {
     background-color: $bg_color;

src/sass/profile/photo-rail.scss

@@ -16,13 +16,9 @@
     &-header-mobile {
         padding: 5px 12px 0;
         display: none;
-    }
-
-    &-label {
-        width: 100%;
+        width: calc(100% - 24px);
         float: unset;
         color: $accent;
-        display: flex;
         justify-content: space-between;
     }
 
@@ -57,13 +53,9 @@
     }
 }
 
-#photo-rail-toggle {
-    display: none;
-
-    &:checked ~ .photo-rail-grid {
-        max-height: 600px;
-        padding-bottom: 12px;
-    }
+@include create-toggle(photo-rail-grid, 640px);
+#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
+    padding-bottom: 12px;
 }
 
 @media(max-width: 600px) {
@@ -72,7 +64,7 @@
     }
 
     .photo-rail-header-mobile {
-        display: block;
+        display: flex;
     }
 
     .photo-rail-grid {

src/sass/search.scss

@@ -0,0 +1,83 @@
+@import '_variables';
+@import '_mixins';
+
+.search-title {
+    font-weight: bold;
+    display: inline-block;
+    margin-top: 4px;
+}
+
+.search-field {
+    display: flex;
+    flex-wrap: wrap;
+
+    button {
+        margin: 0 2px 2px 0;
+    }
+
+    .pref-input {
+        margin: 0 4px 2px 0;
+        flex-grow: 1;
+    }
+
+    input[type="text"] {
+        height: 20px;
+        width: calc(100% - 8px);
+    }
+
+    > label {
+        display: inline;
+        background-color: #121212;
+        color: #F8F8F2;
+        border: 1px solid #FF6C6091;
+        padding: 1px 6px 2px 6px;
+        font-size: 14px;
+        cursor: pointer;
+        margin-bottom: 2px;
+
+        @include input-colors;
+    }
+
+    @include create-toggle(search-panel, 140px);
+}
+
+.search-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s;
+
+    flex-grow: 1;
+    font-weight: initial;
+    text-align: left;
+
+    > div {
+        line-height: 1.7em;
+    }
+
+    .checkbox-container {
+        display: inline;
+        padding-right: unset;
+        margin-bottom: unset;
+        margin-left: 23px;
+    }
+
+    .checkbox {
+        right: unset;
+        left: -22px;
+    }
+
+    .checkbox-container .checkbox:after {
+        top: -4px;
+    }
+}
+
+.search-toggles {
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: repeat(6, auto);
+    grid-column-gap: 10px;
+}
+
+@include search-resize(530px, 5, 185px);
+@include search-resize(475px, 4, 185px);
+@include search-resize(406px, 3, 250px);

src/sass/timeline.scss

@@ -10,21 +10,16 @@
     > div:not(:last-child) {
         border-bottom: 1px solid $border_grey;
     }
-
 }
 
 .timeline-header {
     background-color: $bg_panel;
     text-align: center;
-    padding: 10px;
+    padding: 8px;
     display: block;
     font-weight: bold;
     margin-bottom: 5px;
 
-    input[type="text"] {
-        height: 20px;
-    }
-
     button {
         float: unset;
     }
@@ -74,11 +69,6 @@
     padding: 6px 0;
 }
 
-.timeline-header {
-    background-color: $bg_panel;
-    padding: 6px 0;
-}
-
 .timeline-protected {
     text-align: center;