From 7609e718afbb628d580b42a7f3ecc8478f5576e5 Mon Sep 17 00:00:00 2001 From: mohvn Date: Thu, 5 Sep 2024 09:02:46 -0300 Subject: [PATCH 1/3] fix: Adjusted the responsiveness of the Toolbar when resizing. --- .../base/content/zen-styles/zen-urlbar.css | 42 +++++++++++++++---- src/browser/themes/shared/zen-icons/icons.css | 9 +++- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index 7ce64d857..b25681c75 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -23,20 +23,22 @@ box-shadow: var(--panel-shadow) !important; } -#urlbar[focused="true"] > #urlbar-background { +#urlbar[focused="true"]>#urlbar-background { background: var(--zen-dialog-background) !important; } -#urlbar-background { border: transparent !important; } +#urlbar-background { + border: transparent !important; +} -#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, +#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background, #searchbar:focus-within { outline: none !important; outline-offset: none !important; outline-color: none !important; } -#urlbar .urlbar-page-action, +#urlbar .urlbar-page-action, #urlbar #tracking-protection-icon-container, #urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box { border-radius: 999px; @@ -63,7 +65,8 @@ background: var(--zen-colors-border) !important; } -#urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within { +#urlbar:is([focused], [open])>#urlbar-background, +#searchbar:focus-within { background: var(--urlbar-box-bgcolor); } @@ -79,7 +82,9 @@ border-radius: 20px 10px 10px 20px !important; } -#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative; } +#urlbar:not([extend="true"]) #identity-box #identity-icon-box { + position: relative; +} #urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box { margin-right: 5px; @@ -141,7 +146,7 @@ height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important; } -#notification-popup-box > image { +#notification-popup-box>image { margin: 0; padding: 0; } @@ -166,3 +171,26 @@ button.popup-notification-dropmarker { #downloadsHistory { margin-top: 5px } + +@media (max-width: 550px) { + #urlbar-container { + width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); + } + + #nav-bar[downloadsbuttonshown] #urlbar-container, + #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { + width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } + + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 176px; + } + + #identity-icon-box { + max-width: 70px; + } + + #urlbar-zoom-button { + display: none; + } +} \ No newline at end of file diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index 28f88c5aa..c64cd501a 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -24,7 +24,7 @@ #zen-sidebar-web-panel-forward { list-style-image: url("forward.svg") !important; - @media (max-width: 600px) { + @media (max-width: 650px) { display: none; } } @@ -33,7 +33,7 @@ #zen-sidebar-web-panel-reload { list-style-image: url("reload.svg") !important; - @media (max-width: 650px) { + @media (max-width: 700px) { display: none; } } @@ -164,6 +164,11 @@ #appMenu-extensions-themes-button, #unified-extensions-button { list-style-image: url("extension.svg") !important; + + @media (max-width: 700px) { + display: none; + } + } #zoom-out-button, From 6e6aef15cbf205848a25415e02aba81cbb9a451e Mon Sep 17 00:00:00 2001 From: mohvn Date: Thu, 5 Sep 2024 11:45:35 -0300 Subject: [PATCH 2/3] fix: responsiviness in both legacy and main mode --- .../base/content/zen-styles/zen-urlbar.css | 59 ++++++++++++++----- src/browser/themes/shared/zen-icons/icons.css | 31 +++++++--- 2 files changed, 65 insertions(+), 25 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index b25681c75..75953d09a 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -172,25 +172,52 @@ button.popup-notification-dropmarker { margin-top: 5px } -@media (max-width: 550px) { - #urlbar-container { - width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); - } +:root:not([zen-sidebar-legacy="true"]) { + @media (max-width: 650px) { + #urlbar-container { + width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); + } - #nav-bar[downloadsbuttonshown] #urlbar-container, - #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { - width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); - } + #nav-bar[downloadsbuttonshown] #urlbar-container, + #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { + width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } - #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { - width: 176px; - } + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 176px; + } - #identity-icon-box { - max-width: 70px; - } + #identity-icon-box { + max-width: 70px; + } - #urlbar-zoom-button { - display: none; + #urlbar-zoom-button { + display: none; + } + } +} + +:root[zen-sidebar-legacy="true"] { + @media (max-width: 550px) { + #urlbar-container { + width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); + } + + #nav-bar[downloadsbuttonshown] #urlbar-container, + #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { + width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } + + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 176px; + } + + #identity-icon-box { + max-width: 70px; + } + + #urlbar-zoom-button { + display: none; + } } } \ No newline at end of file diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index c64cd501a..e49412899 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -20,8 +20,8 @@ } -#forward-button, -#zen-sidebar-web-panel-forward { +:root[zen-sidebar-legacy="true"] #forward-button, +:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-forward { list-style-image: url("forward.svg") !important; @media (max-width: 650px) { @@ -29,8 +29,26 @@ } } -#reload-button, -#zen-sidebar-web-panel-reload { +:root:not([zen-sidebar-legacy="true"]) #forward-button, +:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-forward { + list-style-image: url("forward.svg") !important; + + @media (max-width: 650px) { + display: none; + } +} + +:root[zen-sidebar-legacy="true"] #reload-button, +:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-reload { + list-style-image: url("reload.svg") !important; + + @media (max-width: 650px) { + display: none; + } +} + +:root:not([zen-sidebar-legacy="true"]) #reload-button, +:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-reload { list-style-image: url("reload.svg") !important; @media (max-width: 700px) { @@ -164,11 +182,6 @@ #appMenu-extensions-themes-button, #unified-extensions-button { list-style-image: url("extension.svg") !important; - - @media (max-width: 700px) { - display: none; - } - } #zoom-out-button, From 851de67432a6ec9de97e493602bc88019cf93133 Mon Sep 17 00:00:00 2001 From: Damian Fijorek Date: Thu, 5 Sep 2024 19:24:40 +0000 Subject: [PATCH 3/3] Fix vertical tabs on the right overflow. --- src/browser/base/content/zen-styles/zen-compact-mode.css | 4 ++++ 1 file changed, 4 insertions(+) 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 e83ff0a1d..1e86b1c29 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -179,6 +179,10 @@ transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;; } + #navigator-toolbox > vbox { + float: right; + } + #navigator-toolbox:hover, #navigator-toolbox:focus-within, #navigator-toolbox[zen-user-show],