Add theme: Sidebery (#529)

* Add theme: Sidebery

* Update readme.md (#530)

* Smaller image (#539)

---------

Co-authored-by: shanto <shanto@users.noreply.github.com>
Co-authored-by: Shaan <yafarhad@gmail.com>

themes/39907934-59e9-4e42-89f0-a254d3c5e280/chrome.css

@@ -0,0 +1,137 @@
+
+@media (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
+  #zen-sidebar-splitter {
+    display: none !important;
+  }
+  #tabbrowser-tabbox,
+  #sidebar-box {
+    margin-left: calc(var(--zen-element-separation) / 2) !important;
+  }
+  #navigator-toolbox {
+    position: absolute !important;
+    top: -9999px;
+    left: -9999px;
+  }
+  html:has(#sidebar-box[hidden='true']) #tabbrowser-tabpanels {
+    padding-left: var(--zen-element-separation) !important;
+    margin-left: -2px;
+  }
+  #sidebar-box {
+    min-width: 34px !important;
+  }
+  #sidebar-splitter {
+    right: -8px;
+    z-index: 999 !important;
+    border: 2px solid transparent !important;
+  }
+}
+@media (-moz-bool-pref: 'theme.sidebery.sidebar.auto-collapse.enable') and (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
+  #sidebar-box {
+    border-left-width: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}
+@media (-moz-bool-pref: 'theme.sidebery.sidebar.auto-collapse.enable') {
+  /* credits: https://canary.discord.com/channels/1088172780480114748/1290440055126495343 */
+  html {
+    --sidebery-width: 36px;
+    --sidebery-hidden-width: 8px;
+    --sidebery-open-width: 256px;
+  }
+  html {
+    #sidebar-box {
+      margin-left: 0 !important;
+      transition:
+        width 100ms,
+        background 400ms,
+        border 200ms;
+      transition-delay: 150ms;
+      z-index: 1;
+      position: absolute;
+      border: 1px solid var(--sidebar-border-color) !important;
+      /*           border-radius: var(--zen-border-radius) !important; */
+      left: 0;
+      top: 0;
+      bottom: 2px;
+      box-shadow: none !important;
+      min-width: var(--sidebery-width) !important;
+      width: var(--sidebery-width) !important;
+      &:hover {
+        background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent) !important;
+        width: var(--sidebery-open-width) !important;
+      }
+      &:not(:hover) #sidebar-header {
+        display: none !important;
+      }
+    }
+    #tabbrowser-tabbox {
+      margin-left: calc(var(--sidebery-width) + var(--zen-element-separation) / 2) !important;
+    }
+  }
+  html[inFullscreen='true'] {
+    #sidebar-box {
+      border-color: transparent !important;
+      opacity: 0;
+      width: var(--sidebery-hidden-width) !important;
+      min-width: var(--sidebery-hidden-width) !important;
+      &:hover {
+        border: 1px solid var(--sidebar-border-color) !important;
+        opacity: 1;
+        width: var(--sidebery-open-width) !important;
+      }
+    }
+    #tabbrowser-tabbox {
+      margin-left: calc(
+        var(--sidebery-hidden-width) + var(--zen-element-separation)
+      ) !important;
+    }
+  }
+}
+@media (-moz-bool-pref: 'browser.tabs.allow_transparent_browser') {
+  html {
+    --lwt-sidebar-background-color: transparent !important;
+    --sidebar-background-color: transparent !important;
+  }
+  window.sidebar-panel,
+  window#webextpanels-window {
+    /*           background: var(--sidebar-background-color) !important; */
+    background: transparent !important;
+  }
+  #sidebar-box {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    #sidebar-header {
+      order: 0;
+      border: none !important;
+      border-bottom: 1px solid var(--sidebar-border-color) !important;
+      font-size: 1em !important;
+    }
+  }
+}
+@media not (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
+  #tabbrowser-tabbox {
+    margin-left: calc(var(--zen-element-separation) / 2) !important;
+  }
+  @media not (-moz-bool-pref: 'browser.tabs.allow_transparent_browser') {
+    #tabbrowser-tabbox {
+      margin-left: calc(var(--zen-element-separation) / 1.5) !important;
+    }
+  }
+}
+@media (-moz-bool-pref: 'theme.sidebery.sidebar-header.bottom-layout') {
+  #sidebar-box #sidebar-header {
+    order: 1;
+    border: none !important;
+    border-top: 1px solid var(--sidebar-border-color) !important;
+    font-size: 1em !important;
+    #sidebar-switcher-arrow {
+      list-style-image: url('chrome://global/skin/icons/arrow-up-12.svg') !important;
+    }
+  }
+}
+@media (-moz-bool-pref: 'theme.sidebery.sidebar-header.hide') {
+  #sidebar-header {
+    display: none !important;
+  }
+}

themes/39907934-59e9-4e42-89f0-a254d3c5e280/preferences.json

@@ -0,0 +1,32 @@
+[
+    {
+        "property": "browser.tabs.allow_transparent_browser",
+        "label": "Allow Transparent Browser Tabs",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "theme.sidebery.hide-zen-tabbar",
+        "label": "Hide Native Zen Tab UI",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "theme.sidebery.sidebar.auto-collapse.enable",
+        "label": "Auto-collapse Browser Sidebar",
+        "type": "checkbox",
+        "defaultValue": false
+    },
+    {
+        "property": "theme.sidebery.sidebar-header.hide",
+        "label": "Hide Browser Sidebar Header",
+        "type": "checkbox",
+        "defaultValue": false
+    },
+    {
+        "property": "theme.sidebery.sidebar-header.bottom-layout",
+        "label": "Push Browser Sidebar Header Down",
+        "type": "checkbox",
+        "defaultValue": true
+    }
+]

themes/39907934-59e9-4e42-89f0-a254d3c5e280/readme.md

@@ -0,0 +1,29 @@
+# Sidebery
+
+Tweaks to support Sidebery as an alternative to Zen's native tabs and workspace implementation.
+
+### Features
+- Hide native Zen Tab controls.
+- Transparent browser sidebar background.
+- Compact mode for browser sidebar.
+- Auto-collapse and show on hover.
+- Hide sidebar in fullscreen mode.
+- Various tweaks to keep everything together.
+
+All features are optional and configurable from the UI.
+
+### Dependencies:
+- **[Sidebery (Zen)](https://addons.mozilla.org/en-US/firefox/addon/sidebery-zen/)** modified build for Zen support.
+- **[SuperGradient](https://zen-browser.app/themes/af7ee14f-e9d4-4806-8438-c59b02b77715)** for gradient browser background.
+
+### Operation Tips
+- You must download, install and activate Sidebery on your own.
+- To bring Sidebery in view or to hide again, press F1 anytime.
+- Some changes, in rare cases, require you toggle Sidebery visibility or restart the browser.
+- Rememeber to clear your userChrome.css entries and Sidebery style customizations if things appear broken. 
+- If you manage to shrink the sidebar too much while playing with settings, you can always drag it back to original size.
+- Feel free to report issues and feature requests.
+
+Author: Shaan | [Discord](https://discord.gg/NAQaFU8e) | [Github](https://github.com/shanto)
+
+Credits: Alexcoder5 (Github), therealmg (Discord), air.king (Discord), mbnuqw (Github) and the entire Sidebery team.

themes/39907934-59e9-4e42-89f0-a254d3c5e280/theme.json

@@ -0,0 +1 @@
+{"id": "39907934-59e9-4e42-89f0-a254d3c5e280", "name": "Sidebery", "description": "Tweaks to support Sidebery as an alternative to Zen's native tabs and workspace implementation.", "homepage": "https://github.com/shanto/sidebery", "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/39907934-59e9-4e42-89f0-a254d3c5e280/chrome.css", "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/39907934-59e9-4e42-89f0-a254d3c5e280/readme.md", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/39907934-59e9-4e42-89f0-a254d3c5e280/image.png", "author": "shanto", "version": "1.0.0", "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/39907934-59e9-4e42-89f0-a254d3c5e280/preferences.json"}