diff --git a/browser/components/sidebar/sidebar-main.css b/browser/components/sidebar/sidebar-main.css index e01431e0a97d..2c05866d5790 100644 --- a/browser/components/sidebar/sidebar-main.css +++ b/browser/components/sidebar/sidebar-main.css @@ -8,8 +8,10 @@ box-sizing: border-box; height: 100%; min-width: 50px; - padding: var(--space-small); - padding-inline-end: 0; + padding-block: var(--space-small); + padding-inline: 0; + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); /* stylelint-disable-next-line media-query-no-invalid */ @media (-moz-bool-pref: "sidebar.verticalTabs") { @@ -22,8 +24,20 @@ .actions-list { display: flex; flex-direction: column; - padding-inline-end: var(--space-small); + justify-content: center; align-items: center; + + > moz-button { + --button-outer-padding-inline: var(--space-medium); + } +} + +.tools-and-extensions > moz-button:first-of-type { + --button-outer-padding-block-start: var(--space-small); +} + +.bottom-actions > moz-button:last-of-type { + --button-outer-padding-block-end: var(--space-small); } @media (prefers-reduced-motion: no-preference) { diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css index d2eb4259d25c..8e5c97955d97 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -12,7 +12,7 @@ --tab-min-height: 41px; } --collapsed-tab-width: 40px; - --inline-tab-padding: 8px; + --inline-tab-padding: var(--space-medium); --tab-border-radius: 4px; --tab-shadow-max-size: 6px; --tab-block-margin: 4px; @@ -807,7 +807,6 @@ tab-group { min-height: var(--tab-min-height); border-radius: var(--border-radius-medium); padding: 0 var(--inline-tab-padding); - margin-inline-end: var(--space-medium); #tabbrowser-tabs:not([orient="vertical"]) > & { display: none; @@ -837,11 +836,15 @@ sidebar-main:not([expanded]) > #vertical-tabs > #tabbrowser-tabs[orient="vertica sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab { min-width: calc(100% - var(--space-medium)); flex: none; + max-width: none; + padding: 0; } #vertical-tabs { overflow: hidden; display: none; + padding-inline: var(--space-medium); + padding-block-start: var(--space-medium); &[visible] { display: flex; @@ -858,7 +861,6 @@ sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] .t max-height: 244px; column-gap: 4px; padding-bottom: var(--space-small); - margin-inline-end: var(--space-medium); sidebar-main:not([expanded]) &:not(:empty) { border-bottom: var(--tabstrip-inner-border);