From f50d274191331af3f5cedbc079f2e800028b2841 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 10 May 2022 15:57:52 +0900
Subject: [PATCH] Clean: refactoring decoration/animate

---
 css/leptonChrome.css         |  24 +----
 src/decoration/_animate.scss | 175 +++++++++++++++++------------------
 2 files changed, 92 insertions(+), 107 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 5bbcf2b..504703a 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -2768,7 +2768,6 @@
        */
       transition: background-color 0.5s var(--animation-easing-function) !important;
     }
-
     .subviewbutton:hover {
       transition: background-color 0.1s var(--animation-easing-function) !important;
     }
@@ -2779,21 +2778,17 @@
       transition: -moz-box-flex 0.2s var(--animation-easing-function),
         margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
     }
-
     #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
       transition: -moz-box-flex 0.2s var(--animation-easing-function),
         margin-inline-start 0.2s var(--animation-easing-function) !important;
     }
-
     #tabbrowser-tabs:not([movingtab]) .tab-content::before,
     #tabbrowser-tabs:not([movingtab]) .tab-content::after {
       transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
     }
-
     #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
       transition: width 0.3s var(--animation-easing-function) !important;
     }
-
     #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
       transition: all 0.3s var(--animation-easing-function) !important;
     }
@@ -2804,7 +2799,6 @@
       transition: border-color 1s var(--animation-easing-function),
         background-color 1.5s var(--animation-easing-function) !important;
     }
-
     #urlbar-background:hover,
     #searchbar:hover {
       transition: border-color 0.5s var(--animation-easing-function),
@@ -2819,7 +2813,6 @@
     #page-action-buttons > .urlbar-page-action {
       transition: background-color 2.5s var(--animation-easing-function) !important;
     }
-
     #tracking-protection-icon-container:hover,
     #identity-icon-box:hover,
     #identity-permission-box:hover,
@@ -2836,12 +2829,11 @@
     .findbar-container .findbar-textbox:hover {
       transition: border-color 1s var(--animation-easing-function) !important;
     }
-
-    #search-box:hover,
-    xul|search-textbox.tabsFilter:hover,
-    #editBMPanel_namePicker:hover,
-    #editBMPanel_tagsField:hover,
-    .findbar-container .findbar-textbox:hover {
+    #search-box:hover:hover,
+    xul|search-textbox.tabsFilter:hover:hover,
+    #editBMPanel_namePicker:hover:hover,
+    #editBMPanel_tagsField:hover:hover,
+    .findbar-container .findbar-textbox:hover:hover {
       transition: border-color 0.5s var(--animation-easing-function) !important;
     }
 
@@ -2856,7 +2848,6 @@
         transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
           visibility 0s linear !important;
       }
-
       #sidebar-box[hidden="true"] {
         display: -moz-box !important;
         margin-inline-start: -18em;
@@ -2871,7 +2862,6 @@
       transition: margin-top 1s ease;
       transform-origin: top;
     }
-
     #navigator-toolbox[inFullscreen="true"] {
       /* Full screen enter */
       animation-duration: 1s;
@@ -2880,7 +2870,6 @@
       /* Full screen navbar not hover */
       transition: margin-top 1.3s var(--animation-easing-function) 50ms;
     }
-
     #navigator-toolbox[inFullscreen="true"]:hover {
       margin-top: 0 !important;
     }
@@ -2918,12 +2907,10 @@
       #template-container .item.client .item-twisty-container {
         transition: transform 0.1s var(--animation-easing-function) !important;
       }
-
       #template-container .item.client.closed .item-twisty-container {
         transform: rotate(-90deg);
         background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
       }
-
       #template-container .item.client.closed .item-twisty-container:dir(rtl) {
         transform: rotate(90deg);
         background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
@@ -2938,7 +2925,6 @@
     #editBookmarkPanelRows .expander-up {
       list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
     }
-
     #editBookmarkPanelRows .expander-up .button-icon {
       transform: rotate(180deg);
     }
diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss
index 10cbc2c..8c76b34 100644
--- a/src/decoration/_animate.scss
+++ b/src/decoration/_animate.scss
@@ -1,20 +1,16 @@
 /*- Background Color -------------------------------------------------------*/
-button,
-toolbarbutton,
-stack,
-vbox,
-.toolbarbutton-icon,
-#tabs-newtab-button > .toolbarbutton-icon {
-  transition: background-color 1s var(--animation-easing-function) !important;
-}
-button:hover,
-toolbarbutton:hover,
-stack:hover,
-vbox:hover,
-.toolbarbutton-icon:hover,
-#tabs-newtab-button:hover > .toolbarbutton-icon {
-  transition: background-color 0.25s var(--animation-easing-function) !important;
+@mixin _animate_bgColor($duration, $presudo: "") {
+  button#{$presudo},
+  toolbarbutton#{$presudo},
+  stack#{$presudo},
+  vbox#{$presudo},
+  .toolbarbutton-icon#{$presudo},
+  #tabs-newtab-button#{$presudo} > .toolbarbutton-icon {
+    transition: background-color $duration var(--animation-easing-function) !important;
+  }
 }
+@include _animate_bgColor(1s);
+@include _animate_bgColor(0.25s, ":hover");
 @include OS($linux) {
   .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
     transition: background-image 0.25s var(--animation-easing-function) !important;
@@ -26,41 +22,47 @@ vbox:hover,
      menu, menuitem is not apply.
    */
   transition: background-color 0.5s var(--animation-easing-function) !important;
-}
-.subviewbutton:hover {
-  transition: background-color 0.1s var(--animation-easing-function) !important;
+  &:hover {
+    transition: background-color 0.1s var(--animation-easing-function) !important;
+  }
 }
 
 /*- Pinned Tab -------------------------------------------------------------*/
-#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
-  /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
-  transition: -moz-box-flex 0.2s var(--animation-easing-function),
-    margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
-}
-#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
-  transition: -moz-box-flex 0.2s var(--animation-easing-function),
-    margin-inline-start 0.2s var(--animation-easing-function) !important;
-}
+#tabbrowser-tabs:not([movingtab]) {
+  .tabbrowser-tab {
+    &:not([collapsed]) {
+      /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
+      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+        margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
+    }
+    &[pinned] {
+      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+        margin-inline-start 0.2s var(--animation-easing-function) !important;
 
-#tabbrowser-tabs:not([movingtab]) .tab-content::before,
-#tabbrowser-tabs:not([movingtab]) .tab-content::after {
-  transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
-}
-#tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
-  transition: width 0.3s var(--animation-easing-function) !important;
-}
-#tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
-  transition: all 0.3s var(--animation-easing-function) !important;
+    }
+  }
+
+  .tab-content {
+    &::before,
+    &::after {
+      transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
+    }
+    .tab-label-container {
+      transition: width 0.3s var(--animation-easing-function) !important;
+    }
+    .tab-icon-image {
+      transition: all 0.3s var(--animation-easing-function) !important;
+    }
+  }
 }
 
 /*- URL / Search Bar -------------------------------------------------------*/
 #urlbar-background,
 #searchbar {
   transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
-}
-#urlbar-background:hover,
-#searchbar:hover {
-  transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
+  &:hover {
+    transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
+  }
 }
 
 /* Buttons in URL bar */
@@ -70,13 +72,9 @@ vbox:hover,
 #notification-popup-box,
 #page-action-buttons > .urlbar-page-action {
   transition: background-color 2.5s var(--animation-easing-function) !important;
-}
-#tracking-protection-icon-container:hover,
-#identity-icon-box:hover,
-#identity-permission-box:hover,
-#notification-popup-box:hover,
-#page-action-buttons > .urlbar-page-action:hover {
-  transition: background-color 1.25s var(--animation-easing-function) !important;
+  &:hover {
+    transition: background-color 1.25s var(--animation-easing-function) !important;
+  }
 }
 
 /*- Border - Other Fields --------------------------------------------------*/
@@ -86,13 +84,9 @@ xul|search-textbox.tabsFilter:hover,
 #editBMPanel_tagsField:hover,
 .findbar-container .findbar-textbox:hover {
   transition: border-color 1s var(--animation-easing-function) !important;
-}
-#search-box:hover,
-xul|search-textbox.tabsFilter:hover,
-#editBMPanel_namePicker:hover,
-#editBMPanel_tagsField:hover,
-.findbar-container .findbar-textbox:hover {
-  transition: border-color 0.5s var(--animation-easing-function) !important;
+  &:hover {
+    transition: border-color 0.5s var(--animation-easing-function) !important;
+  }
 }
 
 /*- Sidebar ----------------------------------------------------------------*/
@@ -106,13 +100,14 @@ xul|search-textbox.tabsFilter:hover,
     /* Animation */
     transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
       visibility 0s linear !important;
-  }
-  #sidebar-box[hidden="true"] {
-    display: -moz-box !important;
-    margin-inline-start: -18em;
-    opacity: 0;
-    visibility: collapse;
-    transition-delay: 0s, 0s, 0.25s !important;
+
+    &[hidden="true"] {
+      display: -moz-box !important;
+      margin-inline-start: -18em;
+      opacity: 0;
+      visibility: collapse;
+      transition-delay: 0s, 0s, 0.25s !important;
+    }
   }
 }
 
@@ -121,21 +116,23 @@ xul|search-textbox.tabsFilter:hover,
   /* Full screen out */
   transition: margin-top 1s ease;
   transform-origin: top;
-}
-#navigator-toolbox[inFullscreen="true"] {
-  /* Full screen enter */
-  animation-duration: 1s;
-  animation-name: fullscreen;
-  animation-timing-function: ease;
 
-  /* 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;
-}
-#navigator-toolbox[inFullscreen="true"]:hover {
-  // transition-duration: 1.5s; // Not works, because !important
-  // transition-delay: 0.5s;
-  margin-top: 0 !important;
+  &[inFullscreen="true"] {
+    /* Full screen enter */
+    animation-duration: 1s;
+    animation-name: fullscreen;
+    animation-timing-function: ease;
+
+    /* 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;
+    &:hover {
+    // Full screen navbar hover
+    // transition-duration: 1.5s; // Not works, because !important
+    // transition-delay: 0.5s;
+      margin-top: 0 !important;
+    }
+  }
 }
 
 @keyframes fullscreen {
@@ -171,18 +168,20 @@ xul|search-textbox.tabsFilter:hover,
 @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
 {
   /* treechildren::-moz-tree-twisty: Can't apply */
-  #template-container .item.client .item-twisty-container {
-    transition: transform 0.1s var(--animation-easing-function) !important;
-  }
+  #template-container .item.client {
+    .item-twisty-container {
+      transition: transform 0.1s var(--animation-easing-function) !important;
+    }
 
-  #template-container .item.client.closed .item-twisty-container {
-    transform: rotate(-90deg);
-    background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
-  }
+    &.closed .item-twisty-container {
+      transform: rotate(-90deg);
+      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
 
-  #template-container .item.client.closed .item-twisty-container:dir(rtl) {
-    transform: rotate(90deg);
-    background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+      &:dir(rtl) {
+        transform: rotate(90deg);
+        background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+      }
+    }
   }
 }
 
@@ -193,7 +192,7 @@ xul|search-textbox.tabsFilter:hover,
 }
 #editBookmarkPanelRows .expander-up {
   list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-}
-#editBookmarkPanelRows .expander-up .button-icon {
-  transform: rotate(180deg);
+  .button-icon {
+    transform: rotate(180deg);
+  }
 }