diff --git a/themes/a291d86f-b913-4b80-9249-67390b4958ee/chrome.css b/themes/a291d86f-b913-4b80-9249-67390b4958ee/chrome.css new file mode 100644 index 00000000..80a6474e --- /dev/null +++ b/themes/a291d86f-b913-4b80-9249-67390b4958ee/chrome.css @@ -0,0 +1,56 @@ + +/* Space Icon Boost */ + +:root { + --space-icon-boost-icon-size: var(--mod-space_icon_boost-icon_size, 22px); + --space-icon-boost-hit-area: var(--mod-space_icon_boost-hit_area, 31px); + --space-icon-boost-gap: var(--mod-space_icon_boost-gap, 4px); + --space-icon-boost-radius: var(--mod-space_icon_boost-radius, 8px); +} + +#zen-workspaces-button { + gap: var(--space-icon-boost-gap) !important; + align-items: center !important; + justify-content: center !important; + padding-block: 4px !important; + padding-inline: 0 !important; +} + +#zen-workspaces-button > toolbarbutton, +#zen-workspaces-button > .subviewbutton, +#zen-workspaces-button toolbarbutton.subviewbutton { + min-inline-size: var(--space-icon-boost-hit-area) !important; + inline-size: var(--space-icon-boost-hit-area) !important; + min-block-size: var(--space-icon-boost-hit-area) !important; + block-size: var(--space-icon-boost-hit-area) !important; + padding: 0 !important; + margin: 0 !important; + border-radius: var(--space-icon-boost-radius) !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + box-sizing: border-box !important; +} + +#zen-workspaces-button > toolbarbutton > .toolbarbutton-badge-stack, +#zen-workspaces-button > .subviewbutton > .toolbarbutton-badge-stack, +#zen-workspaces-button > toolbarbutton > .toolbarbutton-icon, +#zen-workspaces-button > .subviewbutton > .toolbarbutton-icon { + min-inline-size: var(--space-icon-boost-hit-area) !important; + min-block-size: var(--space-icon-boost-hit-area) !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0 !important; + margin: 0 !important; +} + +#zen-workspaces-button .zen-workspace-icon, +#zen-workspaces-button .toolbarbutton-icon, +#zen-workspaces-button image.toolbarbutton-icon { + inline-size: var(--space-icon-boost-icon-size) !important; + block-size: var(--space-icon-boost-icon-size) !important; + font-size: var(--space-icon-boost-icon-size) !important; + line-height: 1 !important; + flex: 0 0 auto !important; +} diff --git a/themes/a291d86f-b913-4b80-9249-67390b4958ee/image.png b/themes/a291d86f-b913-4b80-9249-67390b4958ee/image.png new file mode 100644 index 00000000..a6b9795f Binary files /dev/null and b/themes/a291d86f-b913-4b80-9249-67390b4958ee/image.png differ diff --git a/themes/a291d86f-b913-4b80-9249-67390b4958ee/preferences.json b/themes/a291d86f-b913-4b80-9249-67390b4958ee/preferences.json new file mode 100644 index 00000000..f76d8116 --- /dev/null +++ b/themes/a291d86f-b913-4b80-9249-67390b4958ee/preferences.json @@ -0,0 +1,26 @@ +[ + { + "property": "mod.space_icon_boost.icon_size", + "label": "Space icon size", + "type": "string", + "defaultValue": "22px" + }, + { + "property": "mod.space_icon_boost.hit_area", + "label": "Space button size", + "type": "string", + "defaultValue": "31px" + }, + { + "property": "mod.space_icon_boost.gap", + "label": "Space button gap", + "type": "string", + "defaultValue": "4px" + }, + { + "property": "mod.space_icon_boost.radius", + "label": "Space button radius", + "type": "string", + "defaultValue": "8px" + } +] \ No newline at end of file diff --git a/themes/a291d86f-b913-4b80-9249-67390b4958ee/readme.md b/themes/a291d86f-b913-4b80-9249-67390b4958ee/readme.md new file mode 100644 index 00000000..3f6ccdfd --- /dev/null +++ b/themes/a291d86f-b913-4b80-9249-67390b4958ee/readme.md @@ -0,0 +1,25 @@ + +# Space Icon Boost + +`Space Icon Boost` is a small Zen Browser mod that makes the Space icons at the bottom of the sidebar larger and easier to hit. + +## What This Mod Changes + +- Increases the visible size of Space icons. +- Keeps each Space button centered and balanced inside its hit area. +- Preserves a comfortable click target by enlarging the button container, not just the glyph. + +## Files + +- `chrome.css`: applies the Workspace icon sizing and layout rules. +- `preferences.json`: exposes Zen mod settings for icon size, button size, spacing, and corner radius. +- `screenshot.png`: a 600x400 Zen Mod Store screenshot. + +## Customization + +You can change the defaults from Zen's mod preferences: + +- `Space icon size`: default `22px` +- `Space button size`: default `31px` +- `Space button gap`: default `4px` +- `Space button radius`: default `8px` diff --git a/themes/a291d86f-b913-4b80-9249-67390b4958ee/theme.json b/themes/a291d86f-b913-4b80-9249-67390b4958ee/theme.json new file mode 100644 index 00000000..a8535f53 --- /dev/null +++ b/themes/a291d86f-b913-4b80-9249-67390b4958ee/theme.json @@ -0,0 +1,15 @@ +{ + "id": "a291d86f-b913-4b80-9249-67390b4958ee", + "name": "Space Icon Boost", + "description": "Space Icon Boost is a small mod that makes the Space icons at the bottom of the sidebar larger and easier to hit.", + "homepage": "https://github.com/sergiubacioiu/zen-mods/", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a291d86f-b913-4b80-9249-67390b4958ee/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a291d86f-b913-4b80-9249-67390b4958ee/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a291d86f-b913-4b80-9249-67390b4958ee/image.png", + "author": "sergiubacioiu", + "version": "1.0.0", + "tags": [], + "createdAt": "2026-04-03", + "updatedAt": "2026-04-03", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a291d86f-b913-4b80-9249-67390b4958ee/preferences.json" +} \ No newline at end of file