web: mobile improvements

- all buttons now reflect that they're pressed or hovered
- settings feel way better on mobile
- settings header has been completely remade

web/src/components/buttons/SettingsCheckbox.svelte

@@ -52,10 +52,10 @@
         flex-direction: row;
         align-items: center;
         gap: 12px;
-
         justify-content: start;
         text-align: left;
         transform: none;
+        padding: 6px 12px;
     }
 
     .checkbox-text {

web/src/components/settings/SettingsSection.svelte

@@ -30,6 +30,18 @@
         #settings-section-categories {
             background: var(--button);
             border-radius: var(--border-radius);
+            box-shadow: var(--button-box-shadow);
+        }
+
+        #settings-section-categories > :global(:not(.settings-tab:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            box-shadow: 0 3px 0px -1.2px var(--button-stroke);
+        }
+
+        #settings-section-categories > :global(:not(.settings-tab:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
         }
     }
 </style>

web/src/components/settings/SettingsTab.svelte

@@ -95,6 +95,7 @@
     @media screen and (max-width: 750px) {
         .settings-tab {
             background: none;
+            padding: 9px;
             --small-padding: 5px;
         }
 

web/src/components/sidebar/SidebarTab.svelte

@@ -70,9 +70,15 @@
         opacity: 1;
     }
 
+    .sidebar-tab:active:not(.active) {
+        opacity: 1;
+        background-color: var(--sidebar-hover);
+    }
+
     @media (hover: hover) {
-        .sidebar-tab:hover {
+        .sidebar-tab:hover:not(.active) {
             opacity: 1;
+            background-color: var(--sidebar-hover);
         }
     }