Fixed Workspace button selection boxes have no top and bottom padding when placed on the toolbar (closes https://github.com/zen-browser/desktop/issues/2184)

This commit is contained in:
mr. M
2024-10-18 17:30:51 +02:00
parent 2287aa9a06
commit 1ad7055fbe
3 changed files with 6 additions and 36 deletions

View File

@@ -234,7 +234,7 @@
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container) {
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button) {
width: 100%;
border-radius: var(--tab-border-radius);
@@ -363,31 +363,6 @@
}
}
& #zen-workspaces-button[as-button='true']::after {
content: '';
display: block;
height: 80%;
width: 3px;
background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%);
position: absolute;
left: calc(-1 * var(--zen-toolbox-padding) - 1px);
top: 50%;
transform: translateY(-50%);
border-top-right-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
}
&[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after {
left: unset;
right: calc(-1 * var(--zen-toolbox-padding) - 1px);
border-top-left-radius: var(--zen-border-radius);
border-bottom-left-radius: var(--zen-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
@@ -669,7 +644,7 @@
}
& toolbarbutton {
height: 100%;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
padding: 0 var(--toolbarbutton-outer-padding) !important;
}
}

View File

@@ -17,7 +17,7 @@
gap: 3px;
& toolbarbutton {
margin: 0 !important;
margin: auto;
width: 25px;
display: flex;
justify-content: center;
@@ -80,7 +80,7 @@
}
:root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] {
margin: 0 !important;
margin: auto;
padding: var(--toolbarbutton-inner-padding) !important;
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
@@ -121,15 +121,10 @@
:not([zen-user-hover='true'])
) {
& #zen-workspaces-button[as-button='true'] {
width: 100% !important;
width: calc(100% - var(--toolbarbutton-outer-padding));
margin: 2px;
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
& .zen-workspace-sidebar-wrapper {
left: calc(var(--toolbarbutton-outer-padding) + 5px);
width: calc(100% - (var(--toolbarbutton-outer-padding) * 3));
}
}
& #zen-workspaces-button .zen-workspace-sidebar-name {