DLC: Next Puzzle button & Search functionality, other stuff

src/css/ingame_hud/puzzle_complete_notification.scss

@@ -137,16 +137,20 @@
 
                 button.continue {
                     background: #555;
-                    @include S(margin-right, 10px);
                 }
 
                 button.menu {
+                    background: #555;
+                }
+
+                button.nextPuzzle {
                     background-color: $colorGreenBright;
                 }
 
                 > button {
                     @include S(min-width, 100px);
-                    @include S(padding, 10px, 20px);
+                    @include S(padding, 8px, 16px);
+                    @include S(margin, 0, 6px);
                     @include IncreasedClickArea(0px);
                 }
             }

src/css/ingame_hud/puzzle_next.scss

@@ -0,0 +1,41 @@
+#ingame_HUD_PuzzleNextPuzzle {
+    position: absolute;
+    @include S(top, 17px);
+    @include S(right, 10px);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    backdrop-filter: blur(D(1px));
+    padding: D(3px);
+
+    > .button {
+        @include ButtonText;
+        @include IncreasedClickArea(0px);
+        pointer-events: all;
+        cursor: pointer;
+        position: relative;
+        color: #333438;
+        transition: all 0.12s ease-in-out;
+        text-transform: uppercase;
+        transition-property: opacity, transform;
+        @include PlainText;
+        @include S(padding-right, 25px);
+        opacity: 1;
+
+        @include DarkThemeInvert;
+
+        &:hover {
+            opacity: 0.9 !important;
+        }
+
+        &.pressed {
+            transform: scale(0.95) !important;
+        }
+
+        & {
+            /* @load-async */
+            background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
+        }
+    }
+}

src/css/main.scss

@@ -65,6 +65,7 @@
 @import "ingame_hud/puzzle_play_settings";
 @import "ingame_hud/puzzle_play_metadata";
 @import "ingame_hud/puzzle_complete_notification";
+@import "ingame_hud/puzzle_next";
 
 // prettier-ignore
 $elements:
@@ -83,6 +84,7 @@ ingame_HUD_PinnedShapes,
 ingame_HUD_GameMenu,
 ingame_HUD_KeybindingOverlay,
 ingame_HUD_PuzzleBackToMenu,
+ingame_HUD_PuzzleNextPuzzle,
 ingame_HUD_PuzzleEditorReview,
 ingame_HUD_PuzzleEditorControls,
 ingame_HUD_PuzzleEditorTitle,
@@ -134,6 +136,7 @@ body.uiHidden {
     #ingame_HUD_GameMenu,
     #ingame_HUD_PinnedShapes,
     #ingame_HUD_PuzzleBackToMenu,
+    #ingame_HUD_PuzzleNextPuzzle,
     #ingame_HUD_PuzzleEditorReview,
     #ingame_HUD_Notifications,
     #ingame_HUD_TutorialHints,

src/css/states/puzzle_menu.scss

@@ -15,8 +15,73 @@
     }
 
     > .container {
+        .searchForm {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            color: #333;
+            background: $accentColorBright;
+            @include S(padding, 5px);
+            @include S(border-radius, $globalBorderRadius);
+            flex-wrap: wrap;
+
+            input.search {
+                color: #333;
+                margin: 0;
+                display: inline-block;
+                flex-grow: 1;
+                @include S(padding, 5px, 10px);
+                @include S(min-width, 50px);
+
+                &::placeholder {
+                    color: #aaa;
+                }
+            }
+
+            select {
+                color: #333;
+                border: 0;
+                @include S(padding, 5px);
+                @include S(border-radius, $globalBorderRadius);
+                @include S(padding, 7px, 10px);
+                @include S(margin-left, 5px);
+                @include PlainText;
+            }
+
+            .filterCompleted {
+                @include S(margin-left, 20px);
+                pointer-events: all;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-transform: uppercase;
+                @include PlainText;
+                @include S(margin-right, 10px);
+
+                input {
+                    @include S(width, 15px);
+                    @include S(height, 15px);
+                    @include S(margin-right, 5px);
+                    @include S(border-radius, $globalBorderRadius);
+                    border: 0;
+                }
+            }
+
+            button[type="submit"] {
+                @include S(padding, 7px, 10px, 5px);
+                @include S(margin-left, 20px);
+                @include S(margin-top, 4px);
+                @include S(margin-bottom, 4px);
+                margin-left: auto;
+            }
+        }
+
         > .mainContent {
             overflow: hidden;
+            display: flex;
+            flex-direction: column;
 
             > .categoryChooser {
                 > .categories {
@@ -79,8 +144,8 @@
                 @include S(grid-gap, 7px);
                 @include S(margin-top, 10px);
                 @include S(padding-right, 4px);
-                @include S(height, 320px);
                 overflow-y: scroll;
+                flex-grow: 1;
                 pointer-events: all;
                 position: relative;
 

src/css/states/settings.scss

@@ -50,7 +50,8 @@
             }
 
             button.categoryButton,
-            button.about {
+            button.about,
+            button.privacy {
                 background-color: $colorCategoryButton;
                 color: #777a7f;
 
@@ -68,6 +69,10 @@
                 }
             }
 
+            button.privacy {
+                @include S(margin-top, 4px);
+            }
+
             .versionbar {
                 @include S(margin-top, 10px);
 
@@ -180,7 +185,8 @@
         .container .content {
             .sidebar {
                 button.categoryButton,
-                button.about {
+                button.about,
+                button.privacy {
                     color: #ccc;
                     background-color: darken($darkModeControlsBackground, 5);