Fix: Autohide - Transition delay #871

black7375 · Mar 2, 2024 · e0b9f19 · e0b9f19
1 parent ff92ab0
commit e0b9f19
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 28 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
diff --git 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
@@ -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
@@ -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);