Merge pull request #1533 from KiKaraage/main

themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css

@@ -1,48 +1,143 @@
-#unified-extensions-view box.panel-header,
+@media not (-moz-bool-pref: "mod.extension.viewgrid") {
-#unified-extensions-description,
+  /* Hide header, description, extension captions */
-#unified-extensions-messages-container,
+  #unified-extensions-view box.panel-header,
-.unified-extensions-item-message-deck {
+  #unified-extensions-description,
-  display: none !important;
+  #unified-extensions-messages-container,
-}
+  .unified-extensions-item-message-deck {
-#unified-extensions-view {
+    display: none !important;
-  width: var(--menu-panel-width) !important;
+  }
-}
+  /* Reduce the panel size and padding */
-panelview .unified-extensions-item-action-button {
+  #unified-extensions-view {
-  padding-inline: 10px !important;
+    width: var(--menu-panel-width) !important;
-  padding-block: 0px !important;
+  }
-}
+  panelview .unified-extensions-item-action-button {
-#unified-extensions-manage-extensions {
+    padding-inline: 10px !important;
-  padding-inline: 10px !important;
+    padding-block: 0px !important;
-}
+  }
-#unified-extensions-panel .unified-extensions-item {
+  #unified-extensions-manage-extensions {
-  margin-block: 2px !important;
+    padding-inline: 10px !important;
-}
+  }
-#unified-extensions-view .unified-extensions-item-action-button:hover {
+  #unified-extensions-panel .unified-extensions-item {
-  background-color: transparent !important;
+    margin-block: 2px !important;
-}
+  }
-#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
+  #unified-extensions-view .unified-extensions-item-action-button:hover {
-.unified-extensions-item-row-wrapper {
+    background-color: transparent !important;
-  padding: 0 !important;
+  }
-}
+  #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
-#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
+  .unified-extensions-item-row-wrapper {
-  opacity: 0 !important;
+    padding: 0 !important;
-  transition: 0.2s ease !important;
+  }
-}
+  #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
-#unified-extensions-panel .unified-extensions-item:hover {
+    opacity: 0 !important;
-  .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
+    transition: 0.2s ease !important;
-    opacity: 0.85 !important;
+  }
+  #unified-extensions-panel .unified-extensions-item:hover {
+    .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
+      opacity: 0.85 !important;
+    }
+  }
+  #unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action {
+    padding: 0 !important;
+  }
+  #unified-extensions-view .toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
+    max-height: 3em !important;
+  }
+  #unified-extensions-view .subviewbutton-iconic {
+  & > .toolbarbutton-icon {
+    width: 1.2em !important;
+    height: 1.2em !important;
+    padding: 0.7em !important;
+    }
   }
 }
-#unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action {
+
-  padding: 0 !important;
+@media (-moz-bool-pref: "mod.extension.viewgrid") {
-}
+  /* Set width of Unified Extension View */
-#unified-extensions-view .toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
+  #unified-extensions-view {
-  max-height: 3em !important;
+    width: calc(var(--menu-panel-width) - 75px) !important;
-}
+  }
-#unified-extensions-view .subviewbutton-iconic {
+  
-& > .toolbarbutton-icon {
+  /* Hide the header as well as texts and settings icon for each extension, so only icons are visible */
-  width: 1.2em !important;
+  #unified-extensions-description,
-  height: 1.2em !important;
+  #unified-extensions-view .panel-header,
-  padding: 0.7em !important;
+  .unified-extensions-item-name,
+  .unified-extensions-item-message,
+  .unified-extensions-item-message-hover,
+  .unified-extensions-item-message-hover-menu-button,
+  .unified-extensions-item-menu-button {
+    display: none !important;
+  }
+  
+  /* Arrange extensions in a properly centered 4-column grid */
+  #unified-extensions-area, .unified-extensions-list {
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */
+    justify-content: left !important;
+    align-items: center !important;
+    margin-inline: 7px !important;
+    width: 0px !important;
+    gap: 7px 0px;
+  }
+  
+  #unified-extensions-area {
+    padding-block: 7px !important;
+  }
+  
+  /* Ensure the extensions are fully centered with squircle hover shape, and reduce unneeded margins/paddings  */
+  .unified-extensions-item {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding-block: 4px !important;
+    border-radius: 12px !important;
+  }
+  .unified-extensions-item-icon, .unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack {
+    margin: 0px !important;
+  }
+  panelview .unified-extensions-item-action-button {
+    padding: 5px 10px !important;
+  }
+  .unified-extensions-item-row-wrapper .unified-extensions-item-action-button {
+    &:not([disabled]):hover {
+      color: inherit;
+      background-color: transparent !important;
+    }
+  }
+  
+  /* Set lighter opacity for passive extension buttons */
+  .unified-extensions-item-icon {
+    opacity: 0.3;
+  }
+  .unified-extensions-list .unified-extensions-item:hover {
+    background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
+  }
+  
+  /* Set proper padding for the Manage Extensions button */
+  #unified-extensions-manage-extensions {
+    padding: 8px 16px !important;
+  }
+  #unified-extensions-view toolbarseparator {
+    margin-top: 12px !important;
+  }
+}
+
+@media (-moz-bool-pref: "mod.extension.hide") {
+  :root:not([customizing]){
+    #unified-extensions-button {
+      opacity: 0 !important;
+      transition: opacity 0.2s ease;
+    }
+
+    #unified-extensions-button:hover {
+      opacity: 1 !important;
+    }
+  }
+}
+
+@media (-moz-bool-pref: "mod.extension.remove") {
+  :root:not([customizing]){
+    #unified-extensions-button {
+      display: none !important;
+    }
   }
 }

themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/preferences.json

@@ -0,0 +1,17 @@
+[
+  {
+    "property": "mod.extension.viewgrid",
+    "label": "Xtra Clean mode: Present the extensions as grid (credits to Perseus333 and Fushiguro)",
+    "type": "checkbox"
+  },
+  {
+    "property": "mod.extension.hide",
+    "label": "Hyper Clean mode: Hide the extension button unless hovered",
+    "type": "checkbox"
+  },
+  {
+    "property": "mod.extension.remove",
+    "label": "Way Too Clean mode: Remove the extension button",
+    "type": "checkbox"
+  }
+]

themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/theme.json

@@ -1,14 +1,15 @@
 {
     "id": "1e86cf37-a127-4f24-b919-d265b5ce29a0",
-    "name": "Cleaner Extension Menu",
+    "name": "Cleaner Extensions",
     "description": "Remove header and reduce width of the Unified Extension Menu in Zen",
     "homepage": "",
     "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css",
     "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/readme.md",
     "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/image.png",
     "author": "KiKaraage",
-    "version": "1.0.0",
+    "version": "2.1.0",
+    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/preferences.json",
     "tags": [],
     "createdAt": "2024-09-03",
-    "updatedAt": "2025-02-09"
+    "updatedAt": "2025-05-21"
 }

themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json

@@ -8,7 +8,7 @@
     "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png",
     "author": "ahmaadaziz",
     "createdAt": "2024-10-12",
-    "updatedAt": "2025-05-20",
+    "updatedAt": "2025-05-21",
     "version": "2.0.0",
     "tags": []
 }

themes/642854b5-88b4-4c40-b256-e035532109df/theme.json

@@ -10,6 +10,6 @@
     "version": "1.12.0",
     "tags": [],
     "createdAt": "2025-02-04",
-    "updatedAt": "2025-05-11",
+    "updatedAt": "2025-05-21",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
 }

themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/theme.json

@@ -11,5 +11,5 @@
     "version": "1.2.1",
     "tags": [],
     "createdAt": "2025-04-08",
-    "updatedAt": "2025-05-13"
+    "updatedAt": "2025-05-21"
 }

themes/e51b85e6-cef5-45d4-9fff-6986637974e1/theme.json

@@ -11,5 +11,5 @@
     "version": "1.1.1",
     "tags": [],
     "createdAt": "2025-05-09",
-    "updatedAt": "2025-05-20"
+    "updatedAt": "2025-05-21"
 }