From e0b9f198926b024a6f21af95b6d98eaff8d87fe7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 2 Mar 2024 23:03:16 +0900 Subject: [PATCH] Fix: Autohide - Transition delay #871 --- css/leptonChrome.css | 46 ++++++++++++++++++++++++----- css/leptonChromeESR.css | 24 ++++++++++++--- src/autohide/_toolbar_overlap.scss | 29 +++++++++++++----- src/decoration/_animate.scss | 20 +++++++------ src/decoration/_animate_common.scss | 5 ++++ 5 files changed, 96 insertions(+), 28 deletions(-) create mode 100644 src/decoration/_animate_common.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 375aeb07..05fa9b81 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -9916,23 +9916,39 @@ @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { + will-change: margin-top, margin-bottom, background-color !important; transition: margin-top 1s ease, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox:-moz-window-inactive { + transition: margin-top 1s ease, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { - transition-delay: 0s !important; + transition-delay: 0s, 0s, 0.2s !important; } #navigator-toolbox[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + background-color 0.5s var(--animation-easing-function) !important; } } @supports not -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; @@ -24215,15 +24231,28 @@ (-moz-bool-pref: "userChrome.autohide.bookmarkbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate"), (-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { #navigator-toolbox { + will-change: margin-top, margin-bottom, background-color !important; + transition: margin-top 1s ease, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox:-moz-window-inactive { transition: margin-top 1s ease, - margin-bottom 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), + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { - transition-delay: 0s !important; + transition-delay: 0s, 0s, 0.2s !important; } #navigator-toolbox[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, - margin-bottom 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), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + background-color 0.5s var(--animation-easing-function) !important; } } @media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")), @@ -24232,7 +24261,8 @@ (-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")) { #navigator-toolbox { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 2e41d683..163550c1 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -10351,23 +10351,39 @@ @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { + will-change: margin-top, margin-bottom, background-color !important; transition: margin-top 1s ease, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox:-moz-window-inactive { + transition: margin-top 1s ease, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { - transition-delay: 0s !important; + transition-delay: 0s, 0s, 0.2s !important; } #navigator-toolbox[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + background-color 0.5s var(--animation-easing-function) !important; } } @supports not -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) - var(--uc-autohide-toolbar-delay); + var(--uc-autohide-toolbar-delay), + background-color 0.2s var(--animation-easing-function) !important; } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index 7b19dcee..e8468594 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -1,23 +1,38 @@ +@import "../decoration/animate_common"; + #navigator-toolbox { --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); margin-bottom: var(--uc-toolbar-hide-height) !important; @include Animate { @include Option("userChrome.decoration.animate") { - transition: margin-top 1s ease, - margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - + will-change: margin-top, margin-bottom, background-color !important; + transition: $toolbox-transition-margin-top, + $toolbox-transition-margin-bottom, + $toolbox-transition-background-color !important; + &:-moz-window-inactive { + transition: $toolbox-transition-margin-top, + $toolbox-transition-margin-bottom, + $toolbox-transition-background-color-inactive !important; + } &:is(:hover, :focus-within) { - transition-delay: 0s !important; + transition-delay: 0s, 0s, 0.2s !important; } &[inFullscreen="true"] { - transition: margin-top 1.3s var(--animation-easing-function) 50ms, - margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: $toolbox-transition-margin-top-fullscreen, + $toolbox-transition-margin-bottom, + $toolbox-transition-background-color !important; + &:-moz-window-inactive { + transition: $toolbox-transition-margin-top-fullscreen, + $toolbox-transition-margin-bottom, + $toolbox-transition-background-color-inactive !important; + } } } @include NotOption("userChrome.decoration.animate") { - transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: $toolbox-transition-margin-bottom, + $toolbox-transition-background-color !important; &:is(:hover, :focus-within) { transition-delay: 0s !important; diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 8136471d..d8a06a52 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -1,4 +1,6 @@ /*- Background Color -------------------------------------------------------*/ +@import "./animate_common"; + //-- Mixin --------------------------------------------------------------------- @mixin _animate_bgColor($duration, $presudo: "") { button#{$presudo}, @@ -127,7 +129,7 @@ xul|search-textbox.tabsFilter, /*- Titlebar & Full Screen -------------------------------------------------*/ #titlebar { will-change: background-color !important; - transition: background-color 0.2s var(--animation-easing-function) !important; + transition: $toolbox-transition-background-color !important; &:-moz-window-inactive { transition: background-color 0.5s var(--animation-easing-function) !important; @@ -136,13 +138,13 @@ xul|search-textbox.tabsFilter, #navigator-toolbox { /* Full screen out */ will-change: margin-top, background-color !important; - transition: margin-top 1s ease, - background-color 0.2s var(--animation-easing-function) !important; + transition: $toolbox-transition-margin-top, + $toolbox-transition-background-color !important; transform-origin: top; &:-moz-window-inactive { - transition: margin-top 1s ease, - background-color 0.5s var(--animation-easing-function) !important; + transition: $toolbox-transition-margin-top, + $toolbox-transition-background-color-inactive !important; } &[inFullscreen="true"] { @@ -153,11 +155,11 @@ xul|search-textbox.tabsFilter, /* Full screen navbar not hover */ // transition: margin-top 0.3s var(--animation-easing-function) 50ms; - transition: margin-top 1.3s var(--animation-easing-function) 50ms, - background-color 0.2s var(--animation-easing-function) !important; + transition: $toolbox-transition-margin-top-fullscreen, + $toolbox-transition-background-color !important; &:-moz-window-inactive { - transition: margin-top 1.3s var(--animation-easing-function) 50ms, - background-color 0.5s var(--animation-easing-function) !important; + transition: $toolbox-transition-margin-top-fullscreen, + $toolbox-transition-background-color-inactive !important; } &:hover { diff --git a/src/decoration/_animate_common.scss b/src/decoration/_animate_common.scss new file mode 100644 index 00000000..dfe79274 --- /dev/null +++ b/src/decoration/_animate_common.scss @@ -0,0 +1,5 @@ +$toolbox-transition-margin-top: margin-top 1s ease; +$toolbox-transition-margin-top-fullscreen: margin-top 1.3s var(--animation-easing-function) 50ms; +$toolbox-transition-margin-bottom: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); +$toolbox-transition-background-color: background-color 0.2s var(--animation-easing-function); +$toolbox-transition-background-color-inactive: background-color 0.5s var(--animation-easing-function);