diff --git a/themes/ab733376-611d-448f-a507-577f9bfe1412/chrome.css b/themes/ab733376-611d-448f-a507-577f9bfe1412/chrome.css new file mode 100644 index 00000000..68bf4976 --- /dev/null +++ b/themes/ab733376-611d-448f-a507-577f9bfe1412/chrome.css @@ -0,0 +1,193 @@ + +/* Overhauled extensions menu, much more compact */ + +#unified-extensions-panel { + --button-size: 40px; + --gap-size: 10px; + --max-number-of-buttons-in-row: 8; + --panel-max-width: calc( + var(--button-size) * var(--max-number-of-buttons-in-row) + var(--gap-size) * + (var(--max-number-of-buttons-in-row) - 1) + ); + +/* Remove border around panel */ + --zen-appcontent-border: transparent; + +/* Make panel background match browser background */ + @media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.enabled') { + --panel-background: var(--zen-main-browser-background) !important; + } + +@media not (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.enabled') and (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.backgroundColorNative.parallax.enabled') { + --panel-background: transparent !important; + } + +/* TODO: Change to calc x8 */ + max-height: 600px !important; + +/* Detach slightly panel from the top */ + margin-top: 3px !important; + +& panelmultiview { + /* Take outside margins into account */ + max-width: calc(var(--panel-max-width) + (var(--gap-size) * 2)) !important; + +position: relative !important; + } + +/* & panelmultiview::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--zen-main-browser-background); + z-index: -1; + background-size: 100vw 100vh; */ + /* Example values, should be somewhat extracted from browser */ + /* background-position: -1533px -30px; + } */ +} + +/* Hide unnecessary elements */ +#unified-extensions-view { + width: fit-content !important; + +& .panel-header, + toolbarseparator, + #unified-extensions-manage-extensions, + #unified-extensions-description, + #unified-extensions-messages-container, + #overflowed-extensions-list, + /* Hide extension settings buttons */ + .unified-extensions-item-menu-button, + /* Hide text label of extension */ + .unified-extensions-item-contents { + display: none !important; + } + +& .panel-subview-body { + padding-top: 0 !important; + gap: var(--gap-size); + margin: var(--gap-size); + +overflow: visible !important; + } +} + +:root:has(#unified-extensions-area:empty) #unified-extensions-area, +:root:has(.unified-extensions-list:empty) .unified-extensions-list { + display: none !important; +} + +/* List of active extensions */ +#unified-extensions-area, +/* List of passive extensions */ +.unified-extensions-list { + flex-direction: row; + flex-wrap: wrap; + width: fit-content; + max-width: var(--panel-max-width); + gap: var(--gap-size); + +/* Extension button */ + & .unified-extensions-item { + width: var(--button-size); + height: var(--button-size); + +margin: 0 !important; + transition: transform 150ms !important; + +/* Remove default hover effect */ + &:hover { + background-color: initial !important; + } + +& .unified-extensions-item-action-button { + /* Center extension icon */ + align-items: center; + justify-content: center !important; + +/* Make extension icon square */ + aspect-ratio: 1 / 1; + +transition: background-color 150ms, transform 150ms !important; + +@media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.buttons.background.enabled') { + background-color: light-dark( + rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.1) + ) !important; + } + +&:hover { + background-color: light-dark( + rgba(0, 0, 0, 0.1), + rgba(0, 0, 0, 0.2) + ) !important; + } + +&:active { + background-color: light-dark( + rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.25) + ) !important; + +transform: scale(1.2); + } + +@media (-moz-bool-pref: 'zen.mods.ExtensionMenuEnhanced.buttons.disabledBackground.color') { + &[disabled] { + --slash-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05)); + +background: linear-gradient( + 45deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0) 9%, + var(--slash-color) 10%, + var(--slash-color) 19%, + rgba(0, 0, 0, 0) 20%, + rgba(0, 0, 0, 0) 29%, + var(--slash-color) 30%, + var(--slash-color) 39%, + rgba(0, 0, 0, 0) 40%, + rgba(0, 0, 0, 0) 49%, + var(--slash-color) 50%, + var(--slash-color) 59%, + rgba(0, 0, 0, 0) 60%, + rgba(0, 0, 0, 0) 69%, + var(--slash-color) 70%, + var(--slash-color) 79%, + rgba(0, 0, 0, 0) 80%, + rgba(0, 0, 0, 0) 89%, + var(--slash-color) 90%, + var(--slash-color) 99%, + rgba(0, 0, 0, 0) 100% + ); + } + } + } + +& .toolbarbutton-badge-stack, + .unified-extensions-item-icon { + /* Remove some margin causing icon to not be centered */ + margin-inline-end: 0 !important; + } + +/* Style extension number badge */ + & .toolbarbutton-badge { + position: absolute !important; + top: -5px; + right: -6px; + max-width: 40px !important; + padding: 3px !important; + box-shadow: none !important; + /* opacity: 0.6; */ + border-radius: 4px !important; + align-content: center; + /* text-align: center; + line-height: normal !important; */ + } + } +} diff --git a/themes/ab733376-611d-448f-a507-577f9bfe1412/image.png b/themes/ab733376-611d-448f-a507-577f9bfe1412/image.png new file mode 100644 index 00000000..cbf1b00f Binary files /dev/null and b/themes/ab733376-611d-448f-a507-577f9bfe1412/image.png differ diff --git a/themes/ab733376-611d-448f-a507-577f9bfe1412/preferences.json b/themes/ab733376-611d-448f-a507-577f9bfe1412/preferences.json new file mode 100644 index 00000000..28644bd3 --- /dev/null +++ b/themes/ab733376-611d-448f-a507-577f9bfe1412/preferences.json @@ -0,0 +1,38 @@ +[ + { + "property": "zen.mods.ExtensionMenuEnhanced.backgroundColorNative.enabled", + "label": "Follows background color of Zen main browser (Workspaces included)", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "zen.mods.ExtensionMenuEnhanced.backgroundColorNative.parallax.enabled", + "label": "Matches background gradient of Zen main browser to extension panel (Experiment: Requires manual positioning & breaks on resizing window) (Unused for now)", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "zen.mods.ExtensionMenuEnhanced.backgroundColorNative.parallax.positionX", + "label": "Horizontal position of background gradient (Unused for now)", + "type": "string", + "defaultValue": "-1533px" + }, + { + "property": "zen.mods.ExtensionMenuEnhanced.backgroundColorNative.parallax.positionY", + "label": "Vertical position of background gradient (Unused for now)", + "type": "string", + "defaultValue": "-30px" + }, + { + "property": "zen.mods.ExtensionMenuEnhanced.buttons.background.enabled", + "label": "Show background behind extension buttons", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen.mods.ExtensionMenuEnhanced.buttons.disabledBackground.color", + "label": "Show special background behind passive extension buttons (Ones at the bottom(", + "type": "checkbox", + "defaultValue": true + } +] \ No newline at end of file diff --git a/themes/ab733376-611d-448f-a507-577f9bfe1412/readme.md b/themes/ab733376-611d-448f-a507-577f9bfe1412/readme.md new file mode 100644 index 00000000..76a550c6 --- /dev/null +++ b/themes/ab733376-611d-448f-a507-577f9bfe1412/readme.md @@ -0,0 +1,4 @@ + +Extension menu redefined, alternative, compact look for your extensions. You will never have to scroll again. + +For bugs and discussion, go to project github. diff --git a/themes/ab733376-611d-448f-a507-577f9bfe1412/theme.json b/themes/ab733376-611d-448f-a507-577f9bfe1412/theme.json new file mode 100644 index 00000000..1d4f4a04 --- /dev/null +++ b/themes/ab733376-611d-448f-a507-577f9bfe1412/theme.json @@ -0,0 +1,15 @@ +{ + "id": "ab733376-611d-448f-a507-577f9bfe1412", + "name": "Extension Menu Enhanced", + "description": "Enhanced extension panel, providing alternative look and respecting user background color and padding", + "homepage": "https://github.com/Kaedriz/ZenMods", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ab733376-611d-448f-a507-577f9bfe1412/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ab733376-611d-448f-a507-577f9bfe1412/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ab733376-611d-448f-a507-577f9bfe1412/image.png", + "author": "Kaedriz", + "version": "1.0.0", + "tags": [], + "createdAt": "2025-02-15", + "updatedAt": "2025-02-15", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ab733376-611d-448f-a507-577f9bfe1412/preferences.json" +} \ No newline at end of file