/* All overrides for compact mode go here */ @media not (-moz-bool-pref: "zen.view.compact") { #sidebar-box { margin-top: 0 !important; } } @media (-moz-bool-pref: "zen.view.compact") { :root[sizemode="fullscreen"], #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; } #navigator-toolbox { --zen-compact-toolbox-margin-single: 15px; --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); position: absolute; display: block; transition: 200ms ease-in-out !important; transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px)); opacity: 0; line-height: 0; z-index: 1; height: 100%; margin: 0; padding: var(--zen-compact-toolbox-margin) !important; padding-top: calc(var(--zen-compact-toolbox-margin-single) - 5px) !important; & #titlebar { border: 1px solid var(--zen-colors-border); transition-delay: 200ms; background: var(--zen-colors-tertiary) !important; padding: 0 5px; border-radius: var(--zen-panel-radius); } } @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { #navigator-toolbox { width: fit-content !important; } } @media (-moz-bool-pref: "zen.view.sidebar-expanded") { #navigator-toolbox { min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important; } } #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])), #sidebar-box:not([positionend="true"]) { margin-right: 0 !important; margin-left: var(--zen-sidebar-web-panel-spacing) !important; } #sidebar-box[positionend="true"] { margin-left: 0 !important; margin-right: var(--zen-sidebar-web-panel-spacing) !important; } #sidebar-splitter { margin: 0 !important; } @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") { #navigator-toolbox { /* Remove the top margin */ --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); } #zen-sidebar-web-panel-wrapper, #sidebar-box { margin-top: 0 !important; } } #navigator-toolbox:hover, #navigator-toolbox:focus-within, #navigator-toolbox[zen-user-show], #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { transition-delay: 33ms !important; transform: none !important; opacity: 1; & #titlebar { min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important; } } #navigator-toolbox > *{ line-height: normal; pointer-events: auto } #navigator-toolbox, #navigator-toolbox > *{ -moz-appearance: none !important; } #zen-sidebar-splitter { display: none !important; } /* Don't apply transform before window has been fully created */ :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important } :root[customizing] #navigator-toolbox{ position: relative !important; transform: none !important; opacity: 1 !important; } #navigator-toolbox[inFullscreen] > #PersonalToolbar, #PersonalToolbar[collapsed="true"]{ display: none } :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { margin-left: var(--zen-element-separation) !important; } @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") { #navigator-toolbox { padding-top: var(--zen-compact-toolbox-margin); } #zen-appcontent-navbar-container { --urlbar-height: unset; transition: .2s ease-in-out; transform: translateY(calc(-100% + 5px)); opacity: 0; position: absolute; width: 100%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--zen-colors-border); top: 0; background: var(--zen-colors-tertiary); z-index: 2; transition: .2s ease-in-out; } #zen-appcontent-navbar-container:hover, #zen-appcontent-navbar-container:focus-within, #zen-appcontent-navbar-container[zen-user-show], #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container, #zen-appcontent-navbar-container:has(*[open="true"]) { transform: translateY(0); opacity: 1; } :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { margin-top: var(--zen-element-separation) !important; } #titlebar { padding-top: 5px !important; } #zen-sidebar-web-panel-wrapper { margin-top: 10px !important; } } }