diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f19d3f65..fb5cda49 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -10476,11 +10476,17 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10489,11 +10495,17 @@ @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10517,7 +10529,12 @@ var(--ext-theme-background-transition) !important; } } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + #nav-bar:not([customizing]) #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { transition-delay: 0s !important; } } @@ -25434,11 +25451,17 @@ (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -25448,11 +25471,17 @@ screen and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -25483,7 +25512,17 @@ (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference), (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference) { - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + #nav-bar:not([customizing]) #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; + } +} +@media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference) { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { transition-delay: 0s !important; } } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 30d2fa18..c0277870 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -10914,11 +10914,17 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10927,11 +10933,17 @@ @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10955,7 +10967,12 @@ var(--ext-theme-background-transition) !important; } } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + #nav-bar:not([customizing]) #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { transition-delay: 0s !important; } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 5b7b47b0..290de4bf 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,12 +1,19 @@ @include OneLinerNavbar { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); - opacity: 0; - will-change: margin-bottom, opacity; + + // Why use #urlbar? - Prevent URLbar overlay #1028 + &, #urlbar { + opacity: 0; + will-change: margin-bottom, opacity; + } } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; - opacity: 1; + + &, #urlbar { + opacity: 1; + } } } @@ -22,8 +29,14 @@ opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } + + #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - transition-delay: 0s !important; + &, #urlbar { + transition-delay: 0s !important; + } } }