219 lines
6.7 KiB
CSS
219 lines
6.7 KiB
CSS
/* Most of this is from MrOtherGuy */
|
|
/* Make main toolbar autohide */
|
|
|
|
:root{
|
|
--uc-navbar-transform: -40px;
|
|
--uc-autohide-toolbar-delay: 1.8s;
|
|
--uc-autohide-toolbar-duration: 400ms;
|
|
}
|
|
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
|
|
|
|
#navigator-toolbox > div{ display: contents; }
|
|
:root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
|
transform: translateY(var(--uc-navbar-transform))
|
|
}
|
|
:root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#nav-bar:not([customizing]){
|
|
opacity: 0;
|
|
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
#titlebar{ position: relative; z-index: 3 }
|
|
|
|
#navigator-toolbox,
|
|
#sidebar-box,
|
|
#sidebar-main,
|
|
#sidebar-splitter,
|
|
#tabbrowser-tabbox{
|
|
z-index: auto !important;
|
|
}
|
|
/* Show when toolbox is focused, like when urlbar has received focus */
|
|
#navigator-toolbox:focus-within > .browser-toolbar{
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
/* Show when toolbox is hovered */
|
|
#titlebar:hover ~ .browser-toolbar,
|
|
.browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
|
|
#nav-bar:hover,
|
|
#nav-bar:hover + #PersonalToolbar{
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
:root[sessionrestored] #urlbar[popover]{
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
|
|
transform: translateY(var(--uc-navbar-transform));
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ toolbox #urlbar[popover],
|
|
.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
|
|
#nav-bar:is(:hover,:focus-within) #urlbar[popover],
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition-delay: 0ms;
|
|
transform: translateY(0);
|
|
}
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
transition-duration: 100ms; /* Faster when focused */
|
|
}
|
|
/* This ruleset is separate, because not having :has support breaks other selectors as well */
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ #navigator-toolbox > .browser-toolbar{
|
|
transition-delay: 33ms !important;
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
/* If tabs are in sidebar then nav-bar doesn't normally have its own background - so we nee to add it back */
|
|
#nav-bar.browser-titlebar{
|
|
background: inherit;
|
|
}
|
|
#toolbar-menubar:not([autohide="true"]) ~ #nav-bar.browser-titlebar{
|
|
background-position-y: -28px; /* best guess, could vary */
|
|
border-top: none !important;
|
|
}
|
|
|
|
/* Bookmarks toolbar needs so extra rules */
|
|
#PersonalToolbar{ transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important; position: relative; z-index: 1 }
|
|
|
|
/* Move up the content view */
|
|
:root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
|
|
.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important }
|
|
|
|
|
|
/* Make tab content centered and more compact */
|
|
.tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
|
|
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container{
|
|
padding-inline-end: 6px !important;
|
|
}
|
|
.tab-icon-stack{
|
|
margin-inline-start: auto
|
|
}
|
|
.tab-label-container{
|
|
max-width: min-content;
|
|
margin-inline-end: auto;
|
|
}
|
|
|
|
|
|
/* Make tabs slimmer */
|
|
/*.tabbrowser-tab[fadein]:not([style^="max-height"]), .tab-background, .tab-content, .tab-stack, .tabbrowser-tab { max-height: 5vw !important }
|
|
|
|
|
|
/* Make urlbar appear more compact */
|
|
#urlbar[breakout][breakout-extend] {
|
|
margin-left: 0 !important;
|
|
width: var(--urlbar-width) !important;
|
|
margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) + 2 !important;
|
|
}
|
|
.urlbarView{
|
|
margin-inline: 0 !important;
|
|
width: 80% !important;
|
|
}
|
|
.urlbarView-row{
|
|
padding: 0 2px !important;
|
|
}
|
|
.urlbarView-row-inner{
|
|
padding-inline-start: 4px !important;
|
|
}
|
|
#urlbar-background{
|
|
animation: none !important;
|
|
}
|
|
.urlbar-input-container{
|
|
padding: 0px 1px !important;
|
|
height: initial !important;
|
|
}
|
|
#identity-icon{
|
|
margin-block: var(--urlbar-icon-padding);
|
|
}
|
|
.urlbarView > .search-one-offs:not([hidden]){
|
|
padding-block: 0px !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Make extensions panel more compact */
|
|
#unified-extensions-view{
|
|
--uei-icon-size: 16px;
|
|
}
|
|
.unified-extensions-item-menu-button.subviewbutton{
|
|
padding: 0px !important;
|
|
margin-inline-end: 0 !important;
|
|
}
|
|
.unified-extensions-item-action-button.subviewbutton{
|
|
padding-block: 6px !important;
|
|
}
|
|
.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon{
|
|
padding: 4px !important;
|
|
}
|
|
.unified-extensions-item-message-deck{
|
|
display: none
|
|
}
|
|
#unified-extensions-view > vbox > vbox > .unified-extensions-item{
|
|
padding-block: 0px !important;
|
|
}
|
|
#unified-extensions-panel .unified-extensions-item{
|
|
margin-block: 0 !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Make bunch of things in the main UI round */
|
|
|
|
:root{ --toolbarbutton-border-radius: 24px !important }
|
|
.urlbar-input-container > box:hover,
|
|
.urlbar-input-container > box[open],
|
|
#main-menubar > menu,
|
|
.titlebar-button:hover,
|
|
#scrollbutton-up,
|
|
#scrollbutton-down,
|
|
.tab-close-button,
|
|
.close-icon > image,
|
|
#page-action-buttons > :hover,
|
|
.panel-arrowcontent,
|
|
.urlbarView-row-inner,
|
|
.search-one-offs button,
|
|
.subviewbutton-back,
|
|
.toolbaritem-combined-buttons > toolbarbutton,
|
|
#PopupSearchAutoComplete,
|
|
menupopup{ border-radius: 18px }
|
|
|
|
button,
|
|
.tab-background{ border-radius: 30px !important; }
|
|
|
|
.panel-arrowcontent{ margin-inline-end: 0 !important; }
|
|
.panel-arrow{ margin-inline: 17px !important; }
|
|
|
|
menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; }
|
|
|
|
.tabbrowser-tab[selected]::after,
|
|
.tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; }
|
|
|
|
.urlbar-icon,
|
|
toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() }
|
|
|
|
menugroup:hover > menuitem{ clip-path: circle() }
|