diff --git a/css/leptonChrome.css b/css/leptonChrome.css index af2e2e9..5ba49b6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7566,6 +7566,11 @@ } } } +:root { + --uc-autohide-toolbar-speed: 0.25s; + --uc-autohide-toolbar-delay: 600ms; +} + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) @@ -7611,10 +7616,6 @@ "userChrome.autohide.bookmarkbar" ) or -moz-bool-pref("userChrome.autohide.infobar") { - :root { - --uc-autohide-toolbar-delay: 600ms; - } - #navigator-toolbox { position: relative; z-index: 2; @@ -7646,19 +7647,22 @@ @supports -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { transition: margin-top 1s ease, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay); } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } #navigator-toolbox[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay); } } @supports not -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay); } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; @@ -7857,18 +7861,21 @@ } @media (prefers-reduced-motion: no-preference) { #titlebar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), background-color 1s var(--animation-easing-function) !important; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; } } @@ -7925,15 +7932,18 @@ } @media (prefers-reduced-motion: no-preference) { #nav-bar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { #nav-bar:not([customizing]) { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } } @@ -7968,9 +7978,10 @@ @media (prefers-reduced-motion: no-preference) { #PersonalToolbar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, - max-height 170ms ease-out, var(--ext-theme-background-transition) !important; + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { @@ -8006,8 +8017,9 @@ } @media (prefers-reduced-motion: no-preference) { #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } @@ -8140,7 +8152,8 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } @@ -8151,7 +8164,8 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } @@ -8163,7 +8177,8 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #urlbar-container { - transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay); } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { @@ -8174,7 +8189,8 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) { #urlbar-container { - transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay); } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss index b3f7c37..081b5b8 100644 --- a/src/autohide/_bookmarkbar.scss +++ b/src/autohide/_bookmarkbar.scss @@ -24,8 +24,8 @@ @include Animate { #PersonalToolbar:not([customizing]) { // --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 93317cb..a34b0f8 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -1,3 +1,8 @@ +:root { + --uc-autohide-toolbar-speed: 0.25s; + --uc-autohide-toolbar-delay: 600ms; +} + @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { :root { --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); @@ -24,10 +29,6 @@ } @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") { - :root { - --uc-autohide-toolbar-delay: 600ms; - } - #navigator-toolbox { position: relative; z-index: 2; diff --git a/src/autohide/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss index 6101b6b..b1cca3f 100644 --- a/src/autohide/_fill_urlbar.scss +++ b/src/autohide/_fill_urlbar.scss @@ -12,7 +12,7 @@ @include Animate { @include OneLiner { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { @@ -22,7 +22,7 @@ @include OneLinerNavbarContent { #urlbar-container { - transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { transition-delay: 0s !important; diff --git a/src/autohide/_infobar.scss b/src/autohide/_infobar.scss index 39c9fb8..65d350a 100644 --- a/src/autohide/_infobar.scss +++ b/src/autohide/_infobar.scss @@ -22,8 +22,8 @@ @include Animate { #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 43a1102..5b7b47b 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -12,14 +12,14 @@ @include Animate { #nav-bar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; @include Option("userChrome.autohide.fill_urlbar") { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index 5781a34..3f2bda9 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -38,13 +38,13 @@ @include Animate { #titlebar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), background-color 1s var(--animation-easing-function) !important; } #TabsToolbar:not([customizing]) { @include _autohide_tabbar { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } } diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index be1ea04..7b19dce 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -5,7 +5,7 @@ @include Animate { @include Option("userChrome.decoration.animate") { transition: margin-top 1s ease, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); &:is(:hover, :focus-within) { transition-delay: 0s !important; @@ -13,11 +13,11 @@ &[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } } @include NotOption("userChrome.decoration.animate") { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); &:is(:hover, :focus-within) { transition-delay: 0s !important;