From 0a7be879e3efbfaea1f615efff09676b6ceba69d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 31 May 2022 14:32:01 +0900
Subject: [PATCH] Clean: Proton - common others

---
 css/leptonChrome.css                         |  38 ++----
 src/theme/proton_chrome/_proton_commons.scss | 133 +++++++++----------
 2 files changed, 78 insertions(+), 93 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 68bfee1..9c97dc3 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -1509,15 +1509,13 @@
       margin-inline: 4px !important;
       min-width: 6.3em !important;
     }
-
-    /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
-       * the 1px border): */
     button.medium {
+      /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
+       * the 1px border): */
       padding: 6px 13px !important;
       min-height: 28px !important;
       font-size: 0.95em !important;
     }
-
     button.small {
       padding: 5px 11px !important;
       min-height: 24px !important;
@@ -1529,15 +1527,6 @@
       margin: 0 !important;
     }
 
-    button:-moz-focusring,
-    xul|menulist:-moz-focusring,
-    xul|checkbox:-moz-focusring > .checkbox-check,
-    xul|radio[focused="true"]:-moz-focusring {
-      box-shadow: none !important;
-      outline: 2px solid var(--in-content-focus-outline-color) !important;
-      outline-offset: 2px !important;
-    }
-
     button:not([disabled="true"]):hover {
       background-color: var(--in-content-button-background-hover) !important;
       color: var(--in-content-button-text-color-hover) !important;
@@ -1591,6 +1580,15 @@
         color: var(--in-content-primary-button-text-color) !important;
       }
     }
+    button:-moz-focusring,
+    xul|menulist:-moz-focusring,
+    xul|checkbox:-moz-focusring > .checkbox-check,
+    xul|radio[focused="true"]:-moz-focusring {
+      box-shadow: none !important;
+      outline: 2px solid var(--in-content-focus-outline-color) !important;
+      outline-offset: 2px !important;
+    }
+
     /*- Radio Button -----------------------------------------------------------*/
     xul|radio {
       /* margin-inline-start: 0 !important; */
@@ -1763,25 +1761,20 @@
       padding-inline: 12px 8px !important;
       margin: 5px 2px 3px !important;
     }
-
     xul|menulist[size="medium"] {
       padding-block: 6px !important;
       padding-inline: 16px 10px !important;
     }
-
     xul|menulist[size="large"] {
       padding-block: 8px !important;
       padding-inline: 16px 12px !important;
     }
-
     xul|menulist:hover {
       background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
     }
-
     xul|menulist:hover:active {
       background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
     }
-
     xul|menulist:-moz-focusring {
       outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
       outline-offset: var(--focus-outline-offset, 2px) !important;
@@ -1799,11 +1792,10 @@
       width: 12px !important;
       height: 12px !important;
     }
-
-    /* dropmarker::part(icon)
-     * ::part is not apply chrome
-     */
     dropmarker[exportparts="icon: dropmarker-icon"] {
+      /* dropmarker::part(icon)
+       * ::part is not apply chrome
+       */
       list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
       -moz-context-properties: fill !important;
       fill: currentColor !important;
@@ -1844,13 +1836,11 @@
       color: var(--in-content-item-hover-text) !important;
       background-color: var(--in-content-item-hover) !important;
     }
-
     xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
     xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
       color: var(--in-content-item-selected-text) !important;
       background-color: var(--in-content-item-selected) !important;
     }
-
     xul|menulist > xul|menupopup > xul|menu[disabled="true"],
     xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
       color: #999 !important;
diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss
index 3b3d60a..a3c31e5 100644
--- a/src/theme/proton_chrome/_proton_commons.scss
+++ b/src/theme/proton_chrome/_proton_commons.scss
@@ -56,19 +56,19 @@
     /* Use the same margin of other elements for the alignment */
     margin-inline: 4px !important;
     min-width: 6.3em !important;
-  }
 
-  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
-     * the 1px border): */
-  button.medium {
-    padding: 6px 13px !important;
-    min-height: 28px !important;
-    font-size: 0.95em !important;
-  }
-  button.small {
-    padding: 5px 11px !important;
-    min-height: 24px !important;
-    font-size: 0.9em !important;
+    &.medium {
+      /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
+       * the 1px border): */
+      padding: 6px 13px !important;
+      min-height: 28px !important;
+      font-size: 0.95em !important;
+    }
+    &.small {
+      padding: 5px 11px !important;
+      min-height: 24px !important;
+      font-size: 0.9em !important;
+    }
   }
 
   /* Remove margin added by button.css */
@@ -76,20 +76,11 @@
     margin: 0 !important;
   }
 
-  button:-moz-focusring,
-    xul|menulist:-moz-focusring,
-    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
-    xul|radio[focused="true"]:-moz-focusring {
-    box-shadow: none !important;
-    outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: 2px !important;
-  }
   button:not([disabled="true"]):hover {
     background-color: var(--in-content-button-background-hover) !important;
     color: var(--in-content-button-text-color-hover) !important;
     border-color: transparent !important;
   }
-
   xul|button:not([disabled="true"]):hover:active,
   xul|button[open],
   xul|button[open]:hover,
@@ -135,6 +126,15 @@
     }
   }
 
+  button:-moz-focusring,
+  xul|menulist:-moz-focusring,
+  xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
+  xul|radio[focused="true"]:-moz-focusring {
+    box-shadow: none !important;
+    outline: 2px solid var(--in-content-focus-outline-color) !important;
+    outline-offset: 2px !important;
+  }
+
   /*- Radio Button -----------------------------------------------------------*/
   xul|radio {
     @include Proton.RadioGlobal;
@@ -252,29 +252,26 @@
     padding-block: 4px !important;
     padding-inline: 12px 8px !important;
     margin: 5px 2px 3px !important;
-  }
 
-  xul|menulist[size="medium"] {
-    padding-block: 6px !important;
-    padding-inline: 16px 10px !important;
-  }
+    &[size="medium"] {
+      padding-block: 6px !important;
+      padding-inline: 16px 10px !important;
+    }
+    &[size="large"] {
+      padding-block: 8px !important;
+      padding-inline: 16px 12px !important;
+    }
 
-  xul|menulist[size="large"] {
-    padding-block: 8px !important;
-    padding-inline: 16px 12px !important;
-  }
-
-  xul|menulist:hover {
-    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
-  }
-
-  xul|menulist:hover:active {
-    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
-  }
-
-  xul|menulist:-moz-focusring {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
+    &:hover {
+      background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
+    }
+    &:hover:active {
+      background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
+    }
+    &:-moz-focusring {
+      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline-offset: var(--focus-outline-offset, 2px) !important;
+    }
   }
 
   #label-box {
@@ -288,15 +285,15 @@
     appearance: none !important;
     width: 12px !important;
     height: 12px !important;
-  }
 
-  /* dropmarker::part(icon)
-   * ::part is not apply chrome
-   */
-  dropmarker[exportparts="icon: dropmarker-icon"] {
-    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
+    &[exportparts="icon: dropmarker-icon"] {
+      /* dropmarker::part(icon)
+       * ::part is not apply chrome
+       */
+      list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+    }
   }
 
   #highlightable-label:not([highlightable="true"]),
@@ -330,25 +327,23 @@
     padding-block: 0.2em !important;
     padding-inline: 10px 30px !important;
   }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
-    color: var(--in-content-item-selected-text) !important;
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
-  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
-    color: #999 !important;
-    /* override the [_moz-menuactive="true"] background color from
-         global/menu.css */
-    background-color: transparent !important;
+  
+  xul|menulist > xul|menupopup > xul|menu,
+  xul|menulist > xul|menupopup > xul|menuitem {
+    &:not([disabled="true"])[_moz-menuactive="true"] {
+      color: var(--in-content-item-hover-text) !important;
+      background-color: var(--in-content-item-hover) !important;
+    }
+    &:not([disabled="true"])[selected="true"] {
+      color: var(--in-content-item-selected-text) !important;
+      background-color: var(--in-content-item-selected) !important;
+    }
+    &[disabled="true"] {
+      color: #999 !important;
+      /* override the [_moz-menuactive="true"] background color from
+           global/menu.css */
+      background-color: transparent !important;
+    }
   }
 
   xul|menulist > xul|menupopup xul|menuseparator {