diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 35556dfd9..347309f6f 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -28,17 +28,26 @@ var gZenUIManager = { var gZenVerticalTabsManager = { init() { - Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this)); - Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', this._updateEvent.bind(this)); - Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._updateOnHoverVerticalTabs.bind(this)); - this._updateMaxWidth(); + var updateEvent = this._updateEvent.bind(this); + Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent); + Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent); + Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent); + Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent); + this._updateEvent(); this.initRightSideOrderContextMenu(); - this._updateOnHoverVerticalTabs(); + }, + + get navigatorToolbox() { + if (this._navigatorToolbox) { + return this._navigatorToolbox; + } + this._navigatorToolbox = document.getElementById('navigator-toolbox'); + return this._navigatorToolbox; }, _updateOnHoverVerticalTabs() { let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); - let sidebar = document.getElementById('navigator-toolbox'); + let sidebar = this.navigatorToolbox; if (onHover) { sidebar.setAttribute('zen-user-hover', 'true'); } else { @@ -62,7 +71,19 @@ var gZenVerticalTabsManager = { }, _updateEvent() { + console.log('ZenThemeModifier: update event'); this._updateMaxWidth(); + if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) { + this.navigatorToolbox.setAttribute('zen-expanded', 'true'); + } else { + this.navigatorToolbox.removeAttribute('zen-expanded'); + } + if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) { + this.navigatorToolbox.setAttribute('zen-right-side', 'true'); + } else { + this.navigatorToolbox.removeAttribute('zen-right-side'); + } + this._updateOnHoverVerticalTabs(); }, _updateMaxWidth() { 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 19dc05ef6..f1e433268 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -30,7 +30,7 @@ border: 1px solid var(--zen-colors-border); transition-delay: 200ms; background: var(--zen-colors-tertiary) !important; - padding: 0 5px; + padding: var(--zen-toolbox-padding); border-radius: var(--zen-panel-radius); } @@ -40,13 +40,14 @@ &, & #titlebar { - min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important; + min-width: var(--zen-toolbox-min-width) !important; } } @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') { #navigator-toolbox { width: fit-content !important; + --zen-toolbox-max-width: calc(50px + var(--zen-compact-toolbox-margin-single) * 2) !important; } } @@ -186,33 +187,29 @@ padding-top: var(--zen-element-separation) !important; } - #titlebar { - padding-top: 5px !important; - } - #zen-sidebar-web-panel-wrapper { margin-top: 10px !important; } } - @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') { - #navigator-toolbox { + #navigator-toolbox[zen-right-side='true'] { + & { right: 0 !important; transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important; } - #navigator-toolbox > vbox { + & > vbox { float: right; } - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[zen-user-show], - #navigator-toolbox[flash-popup], - #navigator-toolbox[movingtab], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(.tabbrowser-tab:active), - #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { + &:hover, + &:focus-within, + &[zen-user-show], + &[flash-popup], + &[movingtab], + & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, + &:has(.tabbrowser-tab:active), + &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { transform: none !important; opacity: 1; diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index b0e2cb48a..bef93af65 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -1,117 +1,6 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ -:root { - --sidebar-background-color: var(--toolbar-bgcolor) !important; - --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); -} - -#sidebar-box { - --zen-sidebar-box-border-radius: var(--zen-panel-radius); - margin: var(--zen-element-separation); - border-radius: var(--zen-sidebar-box-border-radius); - overflow: hidden; - transition: 0.2s; - margin-left: 0; - border: var(--zen-appcontent-border); - box-shadow: none; - margin-top: 0; -} - -#sidebar-box[hidden='true'] { - width: 0; - opacity: 0; -} - -#sidebar-box:not([positionend='true']) { - margin-right: 0; -} - -#zen-main-app-wrapper:has(#sidebar-box:not([hidden='true'], [positionend='true'])) #TabsToolbar { - margin-right: 0 !important; - box-shadow: none !important; -} - -#sidebar-splitter { - /* we can still use the splitter but we can't see it */ - background: transparent !important; - border-color: transparent !important; - width: 1px !important; - margin-right: 5px; -} - -#sidebar-box[positionend] { - margin-left: 0; -} - -.zen-sidebar-action-button { - --toolbarbutton-active-background: var(--zen-colors-secondary); - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - padding: 0; - margin: 0; - display: flex; - justify-content: center; - align-items: center; -} - -#TabsToolbar .toolbarbutton-1 { - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - margin-left: auto !important; - margin-right: auto !important; -} - -#TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), -.zen-sidebar-action-button { - border-radius: 8px !important; -} - -:root[customizing] #navigator-toolbox { - display: none; -} - -.zen-sidebar-action-button:hover { - background: var(--toolbarbutton-hover-background) !important; -} - -.zen-sidebar-action-button:hover image { - background: transparent !important; -} - -#sidebar-box[hidden='true'] .zen-sidebar-action-button, -.zen-sidebar-panel-button[animate] { - opacity: 0; - transform: translateX(-110%); - animation: zen-sidebar-button-fadeIn 0.4s forwards; -} - -@keyframes zen-sidebar-button-fadeIn { - 0% { - transform: translateX(-110%); - opacity: 0; - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* Icons */ - -#zen-preferences-button { - list-style-image: url('chrome://global/skin/icons/settings.svg'); -} - -#zen-history-button { - list-style-image: url('chrome://browser/skin/history.svg'); -} - -#zen-bookmark-button { - list-style-image: url(chrome://browser/skin/bookmark-hollow.svg); +toolbar { + min-height: 46px; } #zen-profile-button { @@ -119,136 +8,26 @@ justify-content: center; position: relative; align-items: center; -} - -#zen-profile-button::before { - background-image: var(--avatar-image-url); - border-radius: 50%; - background-size: cover; - background-position: center; - width: 20px; - height: 20px; - border: 2px solid var(--zen-colors-border); - content: ''; - top: 50%; - left: var(--toolbar-start-end-padding); - transform: translateY(-50%); - position: absolute; -} - -/* Ugly code */ - -#TabsToolbar .zen-sidebar-action-button:nth-child(1), -.zen-sidebar-panel-button:nth-child(1) { - animation-delay: 0.1s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(2), -.zen-sidebar-panel-button:nth-child(2) { - animation-delay: 0.2s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(3), -.zen-sidebar-panel-button:nth-child(3) { - animation-delay: 0.3s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(4), -.zen-sidebar-panel-button:nth-child(4) { - animation-delay: 0.4s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(5), -.zen-sidebar-panel-button:nth-child(5) { - animation-delay: 0.5s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(6), -.zen-sidebar-panel-button:nth-child(6) { - animation-delay: 0.6s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(7), -.zen-sidebar-panel-button:nth-child(7) { - animation-delay: 0.7s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(8), -.zen-sidebar-panel-button:nth-child(8) { - animation-delay: 0.8s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(9), -.zen-sidebar-panel-button:nth-child(9) { - animation-delay: 0.9s; -} -#TabsToolbar .zen-sidebar-action-button:nth-child(10), -.zen-sidebar-panel-button:nth-child(10) { - animation-delay: 1s; -} - -#zen-sidebar-icons-wrapper toolbarbutton { + list-style-image: var(--avatar-image-url); position: relative; -} -#zen-sidebar-icons-wrapper { - display: flex; - flex-direction: column; - margin: 0 var(--zen-tabbrowser-padding); - position: relative; - background: transparent !important; - align-items: center; - justify-content: end; - min-height: fit-content; - --zen-sidebar-action-content-separator: calc(5px + var(--zen-tabbrowser-padding)); - padding-top: var(--zen-sidebar-action-content-separator); - color-scheme: inherit !important; -} - -#alltabs-button { - &:hover .toolbarbutton-badge-stack { - background: transparent !important; - } -} - -#zen-sidebar-icons-wrapper::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 60%; - height: 1px; - background: var(--zen-colors-border); -} - -#zen-sidepanel-button[hidden='true'] { - display: none; -} - -#zen-expand-sidebar-button { - display: none; -} - -:root:not([inDOMFullscreen='true']) #zen-sidebar-splitter { - display: block; - width: var(--zen-tabbrowser-padding); - opacity: 0; -} - -:root[inDOMFullscreen='true'] #zen-sidebar-splitter { - display: none; -} - -@media not (-moz-bool-pref: 'zen.view.sidebar-expanded') { - #navigator-toolbox { - width: 0; - padding-right: 2px; - } - - #zen-sidebar-splitter { - display: none !important; - } -} - -@media (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') { - #zen-expand-sidebar-button { + & image { display: flex; + justify-content: center; + align-items: center; + padding: 8px; } } -:root:is([chromehidden~='location'], [chromehidden~='toolbar']) #navigator-toolbox { - display: none !important; -} +/*#zen-profile-button::before { + background: transparent; + border-radius: 50%; + border: 3px solid var(--zen-colors-border); + position: absolute; + content: ""; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding)); + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding)); +}*/ diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css index 12bd7991f..6ac218e66 100644 --- a/src/browser/base/content/zen-styles/zen-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs.css @@ -5,3 +5,9 @@ #zen-tabbox-wrapper { position: relative; } + +@media (-moz-bool-pref: 'zen.workspaces.hide-default-container-indicator') { + .tabbrowser-tab[zenDefaultUserContextId='true'] .tab-context-line { + display: none !important; + } +} diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 645cd6b37..da846d8c2 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -1,481 +1,194 @@ @media (-moz-bool-pref: 'zen.tabs.vertical') { - #titlebar { + + #tabbrowser-tabs, + #TabsToolbar, + #titlebar, + #TabsToolbar-customization-target { + flex-direction: column; height: 100%; } - #vertical-pinned-tabs-container { - padding-inline-end: 0 !important; - max-height: unset !important; - overflow: visible !important; - gap: 4px; + #browser { + --zen-toolbox-padding: 5px; + --zen-toolbox-top-align: var(--zen-toolbox-padding); + } - & .tabbrowser-tab:not(:hover):not([selected]):not([multiselected]) { - background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%); + #navigator-toolbox { + --border-radius-medium: 8px; + --tab-border-radius: var(--border-radius-medium); + --zen-toolbox-min-width: 1px; + + min-width: var(--zen-toolbox-min-width); + + padding: var(--zen-toolbox-padding); + padding-top: var(--zen-toolbox-top-align); + } + + + #TabsToolbar-customization-target { + gap: var(--zen-toolbox-padding); + } + + #tabbrowser-tabs { + margin-inline-start: 0 !important; + padding-inline-start: 0 !important; + grid-gap: 2px !important; + + border-bottom: 1px solid var(--zen-colors-border) !important; + + --tab-block-margin: 2px; + + & .tabbrowser-tab { + max-width: unset !important; + padding: 0 !important; + + & .tab-background { + overflow: hidden; + + & .tab-context-line { + margin: 0 0px !important; + width: 3px !important; + } + } } } - #tabs-newtab-button { - display: none !important; + #zen-sidebar-icons-wrapper { + background: transparent; } #newtab-button-container { margin-inline-end: 0 !important; - margin-top: 0; - margin-bottom: calc(var(--space-small) / 2); - position: relative; padding-top: 0 !important; - - --zen-sidebar-action-button-width: 35px; - :root[uidensity='compact'] & { - --zen-sidebar-action-button-width: 30px; - } + border-top: solid transparent 0px !important; &[showborder] { - margin-top: var(--space-small); - border-top: 0px solid transparent !important; - padding-top: var(--space-small) !important; + padding-top: 4px !important; } } - #navigator-toolbox { - margin-top: 0; /* Issue #156 */ - order: 0 !important; - } + #vertical-pinned-tabs-container { + padding-inline-end: 0 !important; + gap: 3px !important; + max-height: unset !important; + overflow: visible !important; - #zen-sidebar-splitter { - order: 0 !important; - } + & .tab-background:not(:hover):not([selected]):not([multiselected]) { + background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%) !important; + } - #navigator-toolbox { - margin-top: 0 !important; - } - - #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state='dragging'])) #navigator-toolbox { - transition: 0.3s; - } - - #navigator-toolbox toolbar#TabsToolbar { - margin: var(--zen-appcontent-separator-from-window); - overflow: hidden; - transition: 0.2s; - flex-direction: column; - padding: 5px 0; - margin-right: 0; - -moz-window-dragging: no-drag; - --zen-sidebar-action-button-width: 38px; - padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */ - - :root[zen-sidebar-legacy='true'] & { - padding-top: 0 !important; + & .tabbrowser-tab .tab-content { + display: flex; + align-items: center; + justify-content: center; } } - #TabsToolbar-customization-target { - flex-direction: column; - max-width: 100%; - } + /* Mark: toolbox as expanded */ + #navigator-toolbox:is( + #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true']:focus-within, + #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, + #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'])) { + --zen-toolbox-min-width: 150px; - :root[customizing] .customization-target:not(#widget-overflow-fixed-list) { - min-width: 0; - } + & #zen-sidebar-icons-wrapper { + display: grid; + /* Make sure the icons take most of the space, smartly */ + grid-template-columns: repeat(auto-fit, minmax(var(--collapsed-tab-width), auto)); + gap: 4px; - toolbarpaletteitem { - justify-content: center; - } - - toolbarbutton#scrollbutton-down, - toolbarbutton#scrollbutton-up { - display: none; - } - - #toolbar-menubar { - display: none; - } - - .tab-label-container { - display: none; - } - - .tab-icon-stack > .tab-icon-image, - .tab-icon-stack > .tab-throbber { - width: var(--zen-browser-tab-icon-size); - height: var(--zen-browser-tab-icon-size); - margin-inline-end: 0; - } - - .tab-icon-stack .tab-icon-image { - transform: scale(0.5); - opacity: 0; - animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards; - } - - .tab-background { - display: none; - } - - .tabbrowser-tab { - --zen-browser-tab-icon-size: 16px; - --tab-min-width: 36px; - margin: 0 auto; - border-radius: 8px; - position: relative; - color-scheme: var(--tab-selected-color-scheme); - border: 2px solid transparent; - background: transparent; - padding: 0; - align-items: center; - min-height: var(--tab-min-width); /* Make a box */ - animation: zen-slide-in 0.3s; - width: calc(var(--zen-browser-tab-icon-size) + 2px); - transition: - 0.1s background, - 0.1s border-color; - min-width: var(--tab-min-width); - display: flex; - justify-content: center; - align-items: center; - } - - @media (-moz-bool-pref: 'zen.tabs.dim-pending') { - .tabbrowser-tab[pending]:not(:hover) { - opacity: 0.5; + padding-top: calc(var(--zen-toolbox-padding) * 2); } - } - .tabbrowser-tab[hidden='true'] { - display: none; - } - - .tabbrowser-tab:hover { - background: var(--toolbarbutton-hover-background); - } - - .tabbrowser-tab:active, - .zen-sidebar-panel-button:active { - transform: scale(0.9); - } - - .tab-stack { - width: 30px; - height: 30px; - min-width: 30px; - min-height: 30px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - } - - .tabbrowser-tab:not([fadein]) { - display: none; - } - - .tabbrowser-tab:is([multiselected='true'], [selected]) { - background: var(--toolbarbutton-hover-background); - } - - #private-browsing-indicator-with-label { - display: none; - } - - .tabbrowser-tab::before { - /* Containers */ - background: var(--identity-tab-color, transparent); - border-radius: 2px; - height: 80%; - width: 2px; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -2px; - content: ''; - pointer-events: none; - } - - @media (-moz-bool-pref: 'zen.workspaces.hide-default-container-indicator') { - .tabbrowser-tab[zenDefaultUserContextId='true']::before { - display: none; + /* Mark: Fix separator paddings */ + &[zen-right-side='true'] { + padding-left: 0 !important; } - } - .tabbrowser-tab { - margin-inline-start: 0; - margin: 0 auto; - margin-bottom: 1.5px; - } - - .tabbrowser-tab[pinned] { - position: relative; - display: flex; - } - - .tab-close-button { - position: absolute; - display: none; - left: 0; - top: 50%; - } - - .tabbrowser-tab[open='true']:hover .tab-close-button { - /* TODO: fix this */ - /*display: block;*/ - } - - .tab-content { - padding: 0; - width: fit-content; - - &[pinned] { - padding: 0 !important; + &:not([zen-right-side='true']) { + padding-right: 0 !important; } - } - .toolbar-items > toolbartabstop:first-child { - display: none; - } - - #nav-bar > *:not(.titlebar-buttonbox-container) { - padding-top: 3px; - padding-bottom: 3px; - } - - #TabsToolbar-customization-target { - height: 100%; - } - - #tabbrowser-tabs { - margin-inline-start: 0; - padding-inline-start: 0; - border: none; - /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/ - margin: 0; - border: none; - height: 100%; - - border-bottom: 0 !important; - - padding-inline-start: 0 !important; - margin-inline-start: 0 !important; - - grid-gap: 0 !important; - } - - #tabbrowser-arrowscrollbox { - margin-bottom: 3px !important; - } - - #alltabs-button stack { - transform: rotate(-90deg); - } - - .tab-icon-overlay { - margin-inline-end: 0 !important; - display: none; /* TODO: fix this */ - } - - .tab-icon-pending { - margin-inline-end: 0 !important; - } - - @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') and (not (-moz-bool-pref: 'zen.view.sidebar-expanded')) { - .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) { - display: none; - } - } - - @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') { - :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) { - padding-right: 47px !important; - } - } - - @media (-moz-bool-pref: 'zen.view.sidebar-expanded') { - #navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, - #navigator-toolbox[zen-user-hover='true']:focus-within, - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), - :not([zen-user-hover='true']) - ) { - --zen-hover-animation: zen-sidebar-panel-animation-2; - --zen-navigation-toolbar-min-width: 155px; - min-width: var(--zen-navigation-toolbar-min-width) !important; - align-items: start; - transition: 0.2s; - width: 170px; - border: none; - padding-left: 2px; - animation: var(--zen-hover-animation) 0.3s backwards; - - #vertical-pinned-tabs-container { - margin-left: var(--zen-tabbrowser-padding); + & #vertical-tabs-newtab-button { + & label { + display: flex; + text-align: start; + align-items: center; + padding: 0; } - #newtab-button-container { - margin: calc(var(--zen-tabbrowser-padding) - 2px); - margin-bottom: 0; - - & #vertical-tabs-newtab-button { - padding: 0 !important; - - & label { - display: flex; - text-align: start; - align-items: center; - padding: 0; - } - } - } - - & .tab-label-container { - display: block; - } - - & #titlebar, - & #TabsToolbar, - & #TabsToolbar .toolbar-items { - width: 100%; - align-items: flex-start; - } - - & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { - width: 100% !important; - border-radius: 8px; - } - - & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { - background: var(--button-hover-bgcolor); - } - - & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, - & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, - & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { + &:hover * { background: transparent !important; } + } - & #tabbrowser-arrowscrollbox-periphery > toolbarbutton { - display: flex; - justify-content: center; - align-items: center; + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') { + :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) { + padding-right: 47px !important; } + } + } - & #tabbrowser-arrowscrollbox .tabbrowser-tab:first-child:not([hidden]) { - margin-top: var(--space-small) !important; - } + /* Mark: toolbox as collapsed */ + #navigator-toolbox:not(#navigator-toolbox:is( + #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true']:focus-within, + #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, + #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']))) { + --zen-toolbox-max-width: 50px; + max-width: var(--zen-toolbox-max-width) !important; + + #vertical-tabs-newtab-button { + padding: 0 !important; + background: transparent !important; + } + + & #zen-sidebar-icons-wrapper { + display: flex; + flex-direction: column; + padding-top: calc(var(--zen-toolbox-padding) * 2); + } + + :root:has(&) #zen-sidebar-splitter { + display: none !important; + } + + & #tabbrowser-tabs { + --tab-min-width: 36px !important; & .tabbrowser-tab { - max-width: unset !important; + margin: 0 auto; + width: var(--tab-min-width) !important; + height: var(--tab-min-width) !important; - &:not([pinned]) { - width: 100%; - - &:hover .tab-close-button { - display: block !important; - } - - & .tab-content { - position: relative; - width: 100%; - } - - & .tab-stack { - justify-content: start; - padding: 10px; - width: 100% !important; - } + & .tab-content { + display: flex; + align-content: center; + justify-content: center; & .tab-label-container { - #tabbrowser-tabs:not([secondarytext-unsupported]) & { - display: flex; - align-items: center; - padding-left: 10px; - } + display: none; + } + + & .tab-icon-image { + margin-inline-end: 0 !important; } } - - &:active, - .zen-sidebar-panel-button:active { - transform: scale(0.96) !important; - } - - &[pinned] { - margin: 0 !important; - } - } - - & #tabbrowser-arrowscrollbox::part(scrollbox) { - /* We have the pinned tabs on the top, next to each other, - * and the rest of the tabs are below them. */ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); - padding: calc(var(--zen-tabbrowser-padding) / 2); - padding-right: 0; - } - - & .tabbrowser-tab:not([pinned]), - & #tabbrowser-arrowscrollbox-periphery { - grid-column: 1 / -1; - } - - & .tabbrowser-tab[pinned] { - grid-column: span 1; - min-width: 100%; - } - - & #zen-sidebar-icons-wrapper { - width: -moz-available; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); - transition: 0.1s; - } - - & #zen-sidebar-icons-wrapper::before { - width: 100%; } } } - #navigator-toolbox[zen-user-hover='true'] { - width: fit-content !important; - } - - /* Display the vertical tabs on the right side */ - @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') and (not (-moz-bool-pref: 'zen.view.compact')) { - #navigator-toolbox { - order: 8 !important; - padding-left: 0 !important; - --zen-hover-animation: zen-sidebar-panel-animation-right !important; - } - - #tabbrowser-tabpanels { - padding-left: var(--zen-element-separation); - padding-right: 0 !important; - } - - #zen-sidebar-splitter { - order: 7 !important; - } - - #tabbrowser-tabpanels .browserSidebarContainer { - margin-left: 0 !important; - margin-right: 2px !important; - } - - #tabbrowser-tabs { - padding-right: var(--zen-tabbrowser-padding); - } - } - - @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') { - #navigator-toolbox { - width: fit-content !important; - } - - #tabbrowser-tabs { - padding-right: 0 !important; - } + /* Mark: Separator styling */ + #zen-sidebar-splitter { + opacity: 0; + width: var(--zen-toolbox-padding); + height: 100%; } + /* Mark: Expand on hover */ @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) { #zen-sidebar-splitter { display: none !important; @@ -515,6 +228,7 @@ #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { --zen-navigation-toolbar-min-width: 3.3rem !important; + padding: 0 !important; & #TabsToolbar { z-index: 100 !important; @@ -522,8 +236,8 @@ background-color: var(--zen-dialog-background); border-top-color: var(--zen-colors-border); border-right-color: var(--zen-colors-border); - padding-right: 0.1rem !important; position: absolute; + padding: var(--zen-toolbox-padding); } #navigator-toolbox:not(&) @@ -536,19 +250,21 @@ visibility: hidden !important; } - & #tabbrowser-tabs { - --zen-tabbrowser-tabs-on-hover-padding: var(--zen-tabbrowser-padding); - padding: var(--zen-tabbrowser-tabs-on-hover-padding) !important; - } - & #zen-sidebar-icons-wrapper { display: block !important; } & .zen-sidebar-action-button { width: 100%; + border-radius: var(--zen-button-border-radius); - & > * { + &:hover { + background: var(--button-hover-bgcolor); + } + + & > *, + &:hover > * { + background: transparent !important; --toolbarbutton-active-background: transparent; } @@ -559,37 +275,5 @@ } } } - - @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') { - #TabsToolbar { - border-right: 0 !important; - border-left: 1px solid transparent; - border-top-right-radius: 0; - border-top-left-radius: var(--zen-border-radius); - - right: 0; - } - - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[movingtab], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(.tabbrowser-tab:active), - #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - --zen-navigation-toolbar-min-width: 0 !important; - position: relative; - padding: 0 !important; - - & #TabsToolbar { - border-left: 1px solid var(--zen-colors-border); - } - } - } - - @media not (-moz-bool-pref: 'zen.tabs.vertical.right-side') { - #tabbrowser-tabs { - --zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important; - } - } } -} +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index dec76db5e..6724540f2 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -74,8 +74,6 @@ --zen-button-border-radius: 7px; --zen-button-padding: 0.6rem 1.2rem; - --zen-tabbrowser-padding: 5px; - /* Other colors */ --urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important; diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 6f66bb81a..3eb988f52 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -1,18 +1,11 @@ #zen-workspaces-button { - --zen-workspaces-button-vmargin: 0.4rem; border: 1px solid var(--zen-colors-border); border-radius: var(--zen-button-border-radius); - width: calc(var(--zen-sidebar-action-button-width) - 5px) !important; - height: calc(var(--zen-sidebar-action-button-width) - 5px) !important; - margin-bottom: var(--zen-workspaces-button-vmargin) !important; + min-height: 33px; justify-content: center; align-items: center; display: flex; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; - - :root[zen-sidebar-legacy='true'] & { - margin-top: 0 !important; - } } #zen-workspaces-button .zen-workspace-sidebar-name { diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index ff19c6952..f06f81896 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -138,6 +138,7 @@ #appMenu-history-button, #appMenu-library-history-button, #sidebar-switcher-history, +#zen-history-button, #sidebar-box[sidebarcommand='viewHistorySidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { list-style-image: url('history.svg') !important; } @@ -219,6 +220,7 @@ } #preferences-button, +#zen-preferences-button, .search-setting-button > .button-box > .button-icon, #appMenu-settings-button, #PanelUI-zen-profiles-managePrfs, @@ -405,7 +407,8 @@ } #pageAction-panel-bookmark, -#star-button { +#star-button, +#zen-bookmark-button { list-style-image: url('bookmark-hollow.svg') !important; }