From 34e47d79ddd25fdca261b54f60050fd964ef2eb2 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Thu, 10 Oct 2024 13:54:37 +0200 Subject: [PATCH 1/3] Fix floating compact mode: revert logic in ZenCompactMode.mjs, use invisible padding. --- .../content/zen-styles/zen-compact-mode.css | 46 ++++++++++++++----- 1 file changed, 35 insertions(+), 11 deletions(-) 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))); } } } From dadc13a2df4a9ec459c39dbaa058d5ee31c33aef Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Thu, 10 Oct 2024 15:49:03 +0200 Subject: [PATCH 2/3] Remove unnecessary checks to see if toolbox collapsed in zen-compact-mode.css --- .../base/content/zen-styles/zen-compact-mode.css | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) 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 ecbbbe3ed..57c9829b5 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -57,17 +57,7 @@ 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']) - ) - ) { + #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='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; } From d043ea25d8a4c410882e2a8c1ec2e8819b9ab2dc Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:28:17 +0200 Subject: [PATCH 3/3] Use var for zen compact float. --- .../base/content/zen-styles/zen-compact-mode.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 57c9829b5..bb7d2e3aa 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -28,21 +28,22 @@ #navigator-toolbox { --zen-toolbox-max-width: 54px !important; + --zen-compact-float: calc(var(--zen-element-separation) + 1px); 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); + bottom: var(--zen-element-separation); opacity: 0; - padding-left: calc(var(--zen-element-separation) + 2px) !important; + padding-left: var(--zen-compact-float) !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); + padding-right: var(--zen-compact-float) !important; + left: calc(100% - var(--zen-element-separation)); right: unset; } } @@ -52,14 +53,13 @@ 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; position: relative; } /* Mark: toolbox as collapsed */ #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='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; + max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; + min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; } #navigator-toolbox:hover,