diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 8aadd98b8..ecbbbe3ed 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -31,21 +31,45 @@ position: absolute; height: calc(100% - var(--zen-element-separation) * 2); z-index: 9; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + right: calc(100% - var(--zen-element-separation)); + top: var(--zen-element-separation); + opacity: 0; + padding-left: calc(var(--zen-element-separation) + 2px) !important; + padding-bottom: 0 !important; + padding-top: 0 !important; + + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + padding-left: unset !important; + padding-right: calc(var(--zen-element-separation) + 2px) !important; + left: calc(100% - var(--zen-element-separation) + 1px); + right: unset; + } + } + + #titlebar { background: var(--zen-themed-toolbar-bg) !important; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); border-radius: calc(var(--zen-border-radius) + 2px); border: 1px solid var(--zen-colors-border); border-left-width: 0; padding: var(--zen-toolbox-padding) !important; - transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - right: calc(100% - var(--zen-element-separation) - 2px); - top: var(--zen-element-separation); - opacity: 0; - - #browser:has(#navigator-toolbox[zen-right-side='true']) & { - left: calc(100% - var(--zen-element-separation) + 2px); - right: unset; - } + position: relative; + } + /* Mark: toolbox as collapsed */ + #navigator-toolbox:not( + #navigator-toolbox:is( + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], + #navigator-toolbox[zen-user-hover='true']:focus-within, + #navigator-toolbox[zen-user-hover='true'][movingtab], + #navigator-toolbox[zen-user-hover='true'][flash-popup], + #navigator-toolbox[zen-user-hover='true'][has-popup-menu], + #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), + #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']) + ) + ) { + max-width: calc(var(--zen-toolbox-max-width) + var(--zen-element-separation) + 2px) !important; + min-width: calc(var(--zen-toolbox-max-width) + var(--zen-element-separation) + 2px) !important; } #navigator-toolbox:hover, @@ -60,9 +84,9 @@ #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { opacity: 1; - transform: translateX(100%); + transform: translateX(calc(100% - var(--zen-element-separation))); #browser:has(#navigator-toolbox[zen-right-side='true']) & { - transform: translateX(-100%); + transform: translateX(calc(-100% + var(--zen-element-separation))); } } }