Add theme: Thin Settings Sidebar

themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/chrome.css

@@ -0,0 +1,77 @@
+
+#preferences-root {
+  @media screen and (max-width: 820px) {
+    --category-icon-size: 20px; /* Taken from browser CSS, don't change here */
+    --category-icon-padding: 10px;
+    --category-icon-padding-total: calc(
+      2 * calc(var(--category-icon-padding) + 2px)
+    );
+    /* This additional 2px is a magic number, that was necessary  */
+    /* even though the icon is 20px * 20px and padding is 10px on both sides. */
+
+--category-sidebar-inline-padding: 2%; /* Default is 4% */
+    --category-sidebar-inline-padding-total: calc(
+      2 * var(--category-sidebar-inline-padding)
+    );
+
+--category-icon-total-width: calc(
+      var(--category-icon-size) + var(--category-icon-padding-total)
+    );
+    --category-sidebar-total-width: calc(
+      var(--category-icon-total-width) +
+        var(--category-sidebar-inline-padding-total)
+    );
+
+/* Reduce sidebar padding */
+    .navigation {
+      padding: 4% var(--category-sidebar-inline-padding) !important;
+    }
+
+/* Reduce icon padding */
+    & #categories > .category {
+      padding-inline: var(--category-icon-padding) !important;
+    }
+
+& .sidebar-footer-link,
+    #categories,
+    #categories > .category {
+      width: fit-content !important;
+    }
+
+/* Hide sidebar button labels */
+    & .category-name,
+    .sidebar-footer-label {
+      display: none !important;
+    }
+
+/* Remove margin that separated icon and title */
+    & .category-icon {
+      margin-right: 0 !important;
+    }
+
+/* Visually separate footer buttons from other buttons */
+    .sidebar-footer-list {
+      margin-top: var(--space-medium) !important;
+    }
+
+/* Push main content down to compensate for the floating search bar */
+    .main-content .pane-container {
+      margin-top: var(--space-xlarge) !important;
+    }
+
+/* Float the search bar in the middle of main content */
+    search-textbox#searchInput {
+      position: fixed;
+      z-index: 2;
+      top: 0;
+      width: min(70%, var(--in-content-sidebar-width)) !important;
+      background: var(--zen-colors-tertiary) !important;
+      box-shadow: var(--zen-big-shadow);
+      translate: -50% 0;
+
+/* compensate for relative location */
+      margin-left: var(--category-sidebar-total-width) !important;
+      left: calc(50% - var(--category-sidebar-inline-padding-total));
+    }
+  }
+}

themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/readme.md

@@ -0,0 +1,11 @@
+
+# Thin Settings Sidebar
+
+Collapse settings sidebar into icons only with a floating search box on smaller screens.
+
+On screens (at least with my scaling) with width less than `820px`, the settings page had a scrollable horizontal overflow.\
+For me, it was a pretty much constant state as I tend to use a two pane vertical split layout in my DE most of the time.
+
+Took inspiration from the way Firefox handles this with the exception of a floating search bar as it better fit Zen's aesthetic.
+
+![Screenshot of collapsed settings sidebar](https://raw.githubusercontent.com/MihkelMK/zen-mods/refs/heads/main/thin_settings_sidebar/image.png)

themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/theme.json

@@ -0,0 +1,14 @@
+{
+    "id": "1d799825-77fb-4a32-9788-b62e3f7a4e12",
+    "name": "Thin Settings Sidebar",
+    "description": "Collapse settings sidebar into icons only with a floating search box on smaller screens.",
+    "homepage": "https://github.com/MihkelMK/zen-mods/tree/main/thin_settings_sidebar",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1d799825-77fb-4a32-9788-b62e3f7a4e12/image.png",
+    "author": "MihkelMK",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2025-03-07",
+    "updatedAt": "2025-03-07"
+}