/* Auto-hide address bar (mainbar) and move the page loading progress bar beyond mainbar Author: rafaell0 */ /* Mainbar default position */ #browser.win.address-top .toolbar-mainbar:not(.extensionIconPopupMenu > .toolbar) { position: absolute; top: 0; left: 0; right: 0; transform: translateY(0); transition: transform 600ms; background: var(--colorBg); min-height: 0; } /* Hide mainbar if not focused */ #browser.win.address-top .toolbar-mainbar:not(:hover):not(:focus-within):not(:has(.button-pressed)):not(.extensionIconPopupMenu > .toolbar) { transform: translateY(-102%); } /* Hover area */ .toolbar-mainbar::before { content: ''; position: absolute; inset: 100% 0 -30px 0; background: transparent; } /* Minimize URL bar width relative to sidebar #main > div.mainbar > div > div > div.UrlBar-AddressField.urlfield-anchor.button-textonly.below { max-width: calc(100% - 400px); } */ /* Move the page load progress bar down outside the Mainbar */ .UrlBar-AddressField .pageload .pageload-indicator { position: fixed; transform: translateY(500%); width: 100%; height: 20%; } :root { --tabbarHoveroutTimeout: .5s } /*----- Scrollbar -----*/ /* Wider scrollbar */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar { --scrollbarWidth: 10px !important; border: 1px solid #9fb0cb !important; border-radius: 8px !important; padding: 0 2px !important; } /* No buttons */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button { display: none !important; } /* Scrollbar rounding */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 8px !important; } /*----- Vertical Tabbar -----*/ /* Set z-index and hide when not in use */ #browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper { z-index: 1; position: absolute; transform: translateX(calc(-100% + 3px)); opacity: 0; /*clip-path: inset(0 100% 0 0); */ transition: .1s ease-out .15s !important; --HoverWidth: calc(200%); } /* Right side tab bar fix */ #browser.tabs-right .tabbar-wrapper { right: 0; } /* Show tab bar on inactive windows when moving tabs */ #browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper { clip-path: initial; } #browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) { clip-path: initial; } /* Show tab bar when hovering on left edge and prevent tab bar hiding when in use */ /*#browser:is(.tabs-left, .tabs-right):where(:has(.mainbar:is(:hover))) .tabbar-wrapper,*/ #browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) { opacity: 1; transform: translateX(calc(0%)); /*clip-path: inset(0 100% 0 0); */ transition: .1s ease-out .15s !important; --HoverWidth: calc(100%); } /* Don't hide tab bar when using workspace selector */ #browser.tabs-left:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper, #browser.tabs-right:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper { clip-path: inset(0 -400px 0 -400px); transition: clip-path 0s !important; } #browser:not(.fullscreen) .mainbar > *, .mainbar .window-buttongroup.on-mainbar, .mainbar .window-buttongroup.on-mainbar > button{ min-height: 34px !important; max-height: 34px !important; height: 34px !important; scale: 1 !important; }