ooks/ooknet
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

firefox: fix navbar css

Browse source 
add delay to when navbar collapses
This commit is contained in:
ooks-io 2025-01-09 21:57:59 +11:00
parent 1c29de52d3
commit 35af389158
1 changed files with 131 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

32
modules/home/workstation/browser/firefox/theme/ooksfox.nix
View file

@ -137,9 +137,10 @@ in
}
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/8957a709e3abb7242fa89339c684f8027e66774c/chrome/autohide_main_toolbar.css#L46 */
root{
:root{
--uc-navbar-transform: -40px;
--uc-autohide-toolbar-delay: 1s;
--uc-autohide-toolbar-duration: 100ms;
}
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
@ -154,8 +155,9 @@ in
#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;
z-index: 1;
}
#titlebar{ position: relative; z-index: 3 }
@ -166,34 +168,48 @@ in
#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(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
#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);
}
#mainPopupSet:has(> [role="group"][panelopen]) ~ #navigator-toolbox > .browser-toolbar{
#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;
}
@ -201,8 +217,10 @@ in
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); }
''