Merge pull request #1146 from rsiebertdev/create-theme-1085

Update theme `better-toolbar-margins` to 1.1.0
This commit is contained in:
mr. m 2025-02-25 07:22:26 +01:00 committed by GitHub
commit d457cb7949
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 106 additions and 12 deletions

View file

@ -1,22 +1,115 @@
:root {
/* Adjust the outline to the outside of the tabs so they don't look smaller than buttons without it */
--tab-outline-offset: 0 !important;
&:not([zen-single-toolbar="true"]) {
/* Adjust the toolbar height. */
--zen-toolbar-height: calc(38px + var(--zen-element-separation) * 2) !important;
/* Adjust window control size to be inline with the modified sidebar width. */
.titlebar-button {
padding: calc(17px + var(--zen-element-separation)) !important;
padding: calc(16px + var(--zen-element-separation)) !important;
}
}
&:not([zen-sidebar-expanded="true"]) {
/* Adjust the regular sidebar width */
--tab-min-width: calc(36px + var(--zen-element-separation) * 2) !important;
/* Adjust the padding below the tab tray in the collapsed sidebar. */
#TabsToolbar-customization-target {
padding-bottom: calc(var(--zen-element-separation) * 1.5) !important;
}
/* Adjust the padding above the footer icons wrapper below the tab tray. */
#zen-sidebar-icons-wrapper {
padding-top: calc(var(--zen-element-separation) * 1.5) !important;
}
/* Fixes a bug where the navbar is 1px shorter than it should be. */
#nav-bar {
margin-bottom: 0 !important; /* Remove the original fix. */
margin-top: 1px !important;
}
}
&[zen-right-side="true"] #zen-sidebar-top-buttons .titlebar-buttonbox-container {
/* Remove the top margin that prevents the window control icons from being centered. */
margin-top: 0 !important;
/* Keep the window control height inline with the toolbar height. */
height: var(--zen-toolbar-height) !important;
}
/* Adjust the compact sidebar width */
&[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"]) {
@media (-moz-bool-pref: "zen.view.compact.hide-tabbar"), (-moz-bool-pref: "zen.view.use-single-toolbar") {
#navigator-toolbox {
--zen-toolbox-max-width: calc(64px + var(--zen-element-separation)) !important;
}
}
}
}
/* Adjust tab tray containers top margin to prevent clipping. */
#tabbrowser-tabs {
margin-top: 0 !important;
}
[zen-sidebar-expanded="true"] #tabbrowser-tabs {
margin-top: -1px !important;
}
/* Adjust the padding of the standard sidebar containers. */
#navigator-toolbox, :root:not([zen-compact-mode="true"]) #TabsToolbar {
padding-bottom: var(--zen-element-separation) !important;
}
/* Adjust the padding of the compact sidebar container. */
#browser {
--zen-toolbox-padding: calc(var(--zen-element-separation) * 1.5) !important;
}
/* Adjust the padding below the tab tray in the expanded sidebar. */
#TabsToolbar-customization-target {
padding-bottom: var(--zen-element-separation) !important;
}
/* Adjust the margin of the new-tab button to match tab margins. */
#navigator-toolbox:not([zen-sidebar-expanded="true"]) #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
margin: auto !important;
margin-block: var(--tab-block-margin) !important;
}
/* Adjust the gap between sidebar footer icons. */
#zen-sidebar-icons-wrapper {
padding-top: calc(var(--zen-element-separation) * 2) !important;
gap: var(--zen-element-separation) !important;
}
#zen-essentials-container {
/* Remove the fixed gap inside the essential tabs container to match the sidebar tabs tray
by relying on tab-block-margin. */
gap: 0 !important;
}
.tabbrowser-tab {
/* Remove redundant min-width that breaks the center alignment within the compact sidebar. */
min-width: auto !important;
/* Adjust the outlines of 'essential' tabs inside the 'essentials' container. */
&[visuallyselected] {
@media (-moz-bool-pref: "zen.theme.essentials-favicon-bg") {
.tab-background::before {
/* Reduce by 1px to be inline with the modified tab-outline-offset. */
margin: 1px !important;
border-radius: var(--border-radius-medium) !important;
}
}
}
}
/* Ensure the window control icons are always centered. */
.titlebar-button {
align-items: center !important;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 179 KiB

Before After
Before After

View file

@ -1,6 +1,7 @@
# Better Toolbar Margins
By default, the toolbar margins in Zen Browser are very tight. This mod improves both the toolbar and sidebar margins.
Unlike other mods, this one has been extensively tested and works with any layout.
Zen Browser uses very tight margins. This mod improves both the toolbar and sidebar margins, and fixes various other margins.
Unlike other mods, this has been extensively tested and aims to work with any layout.
Made with 💖 by Roman.
> Mods may break in later versions. I use these mods myself, and keep them up-to-date with the latest versions of Zen. If something doesn't work as intended, feel free to [reach out](mailto:roman@rsiebert.dev).

View file

@ -1,14 +1,14 @@
{
"id": "b4332738-1824-4ab7-b32e-dfeda244bc00",
"name": "Better Toolbar Margins",
"description": "This mod has been extensively tested, and improves the margins on both the toolbar and sidebar.",
"description": "This mod improves both the toolbar and sidebar margins, and fixes various other margins in Zen.",
"homepage": "",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b4332738-1824-4ab7-b32e-dfeda244bc00/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b4332738-1824-4ab7-b32e-dfeda244bc00/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b4332738-1824-4ab7-b32e-dfeda244bc00/image.png",
"author": "rsiebertdev",
"version": "1.0.0",
"version": "1.1.0",
"tags": [],
"createdAt": "2025-02-17",
"updatedAt": "2025-02-17"
"updatedAt": "2025-02-25"
}