139 lines
3.5 KiB
Plaintext
139 lines
3.5 KiB
Plaintext
/*
|
|
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;
|
|
}
|
|
|
|
|