From 2903e46f18de2fd8f6e9288c693c4747e8558bdf Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 2 Jul 2021 14:50:00 +0900
Subject: [PATCH 01/12] Add: Proton Style - Unnecessary codes from Lepton

---
 userChrome.css | 120 -------------------------------------------------
 1 file changed, 120 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 547e561..043fffb 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -69,8 +69,6 @@
   /** Root - Reduce Padding ***************************************************/
   :root {
     /* Tab Bar */
-    --proton-tab-block-margin: 2px !important; /* Original: 4px */
-    --tab-block-margin:        2px !important; /* New version of --proton-tab-block-margin */
     --inline-tab-padding:      6px !important; /* Original: 8px */
 
     /* Panel */
@@ -207,34 +205,7 @@
     background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important;
   }
 
-  /** Tab Bar - Connect to window *********************************************/
-  .tab-background {
-    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
-    margin-bottom: 0px !important;
-  }
-
-  .tab-content {
-    margin-top: var(--tab-block-margin);
-  }
-
-  .tab-stack {
-    margin-top:    0px !important;
-    margin-bottom: 0px !important;
-  }
-
   /** Selected Tab - Color like toolbar ***************************************/
-  :root:not(:-moz-lwtheme) {
-    /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
-    --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
-  }
-#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
-    /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
- */
-    background-image: linear-gradient(transparent, transparent),
-                      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
-                      var(--lwt-header-image, none) !important;
-  }
-
   /* Multi Selected Color */
   #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme {
     background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
@@ -250,60 +221,6 @@
     opacity: .15;
   }
 
-  /** Selected Tab - Box Shadow ***********************************************/
-  #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus) > .tab-stack > .tab-background:-moz-lwtheme {
-    /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
-       Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
-    box-shadow: 0 0 1px var(--toolbar-color) !important;
-  }
-  #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme {
-    box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent)  !important;
-  }
-
-  /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
-  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
-    z-index: 0 !important;
-  }
-
-  /** Selected Tab - Bottom Rounded Corner ************************************/
-  #tabbrowser-tabs {
-    --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
-    --tab-corner-padding:  1px;
-  }
-
-  :root[lwtheme="true"] tab[visuallyselected] > stack::before,
-  :root[lwtheme="true"] tab[visuallyselected] > stack::after {
-    /* Box */
-    content: "" !important;
-    display: block !important;
-    position: absolute !important;
-    z-index: 1 !important;
-
-    /* Shape */
-    width:  var(--tab-corner-rounding) !important;
-    height: 100% !important;
-
-    /* Color */
-    fill:   var(--toolbar-bgcolor) !important;
-    stroke: var(--tabs-border-color, transparent) !important;
-    -moz-context-properties: fill, stroke !important;
-
-    /* Image */
-    background-size:   var(--tab-corner-rounding);
-    background-repeat: no-repeat;
-    background-position-y: bottom;
-  }
-
-  :root[lwtheme="true"] tab[visuallyselected] > stack::before {
-    left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important;
-    background-image: url(./icons/tab-bottom-corner-left.svg);
-  }
-  :root[lwtheme="true"] tab[visuallyselected] > stack::after {
-    left:  auto;
-    right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
-    background-image: url(./icons/tab-bottom-corner-right.svg);
-  }
-
   /** Unselected Tab - Divide line ********************************************/
   #tabbrowser-arrowscrollbox {
     position: absolute;
@@ -344,43 +261,6 @@
   }
 
   /* New tab button - Looks like tab ******************************************/
-  #tabs-newtab-button {
-    /* Original:
-    margin: 0 0 var(--tabs-navbar-shadow-size) !important
-    => Can't ovrride style. Therefore, we should approach it by bypass.
-    */
-    --tabs-navbar-shadow-size: -1px; /* Original: 1px */
-    --tabs-navbar-original-shadow-size: 1px;
-
-    /* Size */
-    -moz-box-align: stretch !important;
-    padding-top: var(--tab-block-margin) !important;
-  }
-
-  #tabs-newtab-button > .toolbarbutton-icon {
-    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
-  }
-
-  /* Coner Rounding */
-  #tabs-newtab-button:hover {
-    /* Color */
-    fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */
-    -moz-context-properties: fill !important;
-
-    /* Corner Image */
-    --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
-    background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
-    background-repeat: no-repeat;
-    background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),  right var(--newtab-position)  bottom var(--tabs-navbar-original-shadow-size);
-    background-size: var(--tab-corner-rounding);
-  }
-
-  #tabs-newtab-button .toolbarbutton-icon {
-    padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
-    -moz-context-properties: fill, fill-opacity;
-    fill: var(--toolbarbutton-icon-fill);
-    fill-opacity: var(--toolbarbutton-icon-fill-opacity);
-  }
 
   /** Clipped tabs - Letters cleary *******************************************/
   #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {

From 412f1fd87eb5b76a0f7968d9ff8c45711d41f839 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 2 Jul 2021 14:55:29 +0900
Subject: [PATCH 02/12] Add: Proton Style - Adjust lepton codes

---
 userChrome.css | 53 ++++++++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 043fffb..03036f0 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -159,14 +159,11 @@
     --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
   }
 
-  .toolbar-items, .tabbrowser-tab {
-    max-height: 38px;
+  :root:not([uidensity]) #TabsToolbar {
+    --tab-min-height: 38px !important;
   }
-  :root[uidensity=compact] .toolbar-items, .tabbrowser-tab {
-    max-height: 36px;
-  }
-  :root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
-    max-height: unset;
+  :root[uidensity=compact] #TabsToolbar {
+    --tab-min-height: 36px !important;
   }
 
   /* Scroll Button - Size Fix */
@@ -205,8 +202,7 @@
     background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important;
   }
 
-  /** Selected Tab - Color like toolbar ***************************************/
-  /* Multi Selected Color */
+  /** Multi Selected Color - More Contrast ************************************/
   #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme {
     background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
                       linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
@@ -222,20 +218,14 @@
   }
 
   /** Unselected Tab - Divide line ********************************************/
-  #tabbrowser-arrowscrollbox {
-    position: absolute;
-  }
-
+  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
   .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
-  #tabs-newtab-button:not(:hover)::before {
+  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
     /* Box Model */
     content:  "";
-    display: block;
+    display:  block;
     position: absolute;
-
-    /* Position */
-    top:       50%;
-    transform: translateX(-2.5px) translateY(calc(-50% + 1px));
+    top:   50%;
 
     /* Bar shape */
     width:     1px;
@@ -244,12 +234,19 @@
 
     /* Bar Color */
     opacity: var(--tab-separator-opacity);
-    transition: opacity .2s var(--ease-basic);
-    background-color: color-mix(in srgb, currentColor 20%, transparent); /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
+    transition: opacity .2s var(--ease-basic) !important;
+    background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
+  }
+
+  .tab-background::before {
+    transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
+  }
+  .tabbrowser-tab[last-visible-tab] .tab-background::after {
+    right: 0;
+    transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
   }
 
   .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before,
-  .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabs-newtab-button::before,
   .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before,
   #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
     opacity: 0 !important;
@@ -260,7 +257,17 @@
     margin-inline-end: 1px !important;
   }
 
-  /* New tab button - Looks like tab ******************************************/
+  /* New tab button - Smaller button ******************************************/
+  :root:not([uidensity=touch]) #tabs-newtab-button > .toolbarbutton-icon {
+    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
+  }
+
+  :root:not([uidensity=compact]) #tabs-newtab-button > .toolbarbutton-icon {
+    margin-left: 2px;
+  }
+  :root[uidensity=compact] #tabs-newtab-button > .toolbarbutton-icon {
+    margin-left: 1px;
+  }
 
   /** Clipped tabs - Letters cleary *******************************************/
   #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {

From c75ed1e422a81d9589aa6df8b22fb027960ab79d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 29 Jul 2021 10:33:41 +0900
Subject: [PATCH 03/12] Fix: LEPTON file info

---
 LEPTON | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LEPTON b/LEPTON
index 4a109d0..1984390 100644
--- a/LEPTON
+++ b/LEPTON
@@ -1,2 +1,2 @@
 [Info]
-Branch=master
+Branch=proton-style

From dfca40924a915aedd7fd9edb76dbdba37f4cc2d8 Mon Sep 17 00:00:00 2001
From: MS_Y <alstjr7375@daum.net>
Date: Thu, 5 Aug 2021 07:21:14 +0000
Subject: [PATCH 04/12] Doc: README for proton-style

---
 README.org | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/README.org b/README.org
index ebc4d1c..d4523ca 100644
--- a/README.org
+++ b/README.org
@@ -27,7 +27,7 @@
   | *Wiki*      |                               |      | |
   | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |
 
-  [[https://user-images.githubusercontent.com/25581533/119774062-20942280-beb1-11eb-80aa-c18dd52f18d7.png]]
+  [[https://user-images.githubusercontent.com/25581533/127980993-5c532856-0c1c-4548-b310-9495df246d16.png]]
 
  (Lepton's design :arrow_up:)
 
@@ -48,11 +48,6 @@
     - Density
     - Others...
   - *Tab Design*
-    - General:
-      - Connect with toolbar(Buttons like tabs)
-    - Selected:
-      - Box Shadow: Highlight the selected tab
-      - Bottom Rounding: Natural
     - MultiSelected
       - Adjust Color: Easily recognizable.
     - Unselect:
@@ -65,8 +60,6 @@
       - Show Favicon: Always show favicon
     - Container Tab:
       - Highlight line position: Displayed under favicon.
-  - *Button Design*
-    - New tab: Looks like tab
   - *Activity Stream Design*
     - Search Bar:
       - Focused Shadow: Same as the accent color
@@ -109,9 +102,8 @@
   4. Restart Firefox
      - Click the =Clear startup cache...= at the top of =about:support=
 
-  If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].\\
-  If you prefer Proton, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]].
-
+  If you prefer Connected Tab, see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
+  If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].
 
 ** WHY Proton?
    I think a lot has improved.

From 04f0cf96cc897d98c1207d5260001f01c70e5076 Mon Sep 17 00:00:00 2001
From: MS_Y <alstjr7375@daum.net>
Date: Mon, 27 Sep 2021 23:52:33 +0000
Subject: [PATCH 05/12] Fix: Proton style - Reduce Tab min height

---
 userChrome.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index c402088..eba9e92 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -764,10 +764,10 @@
   }
 
   :root:not([uidensity]) #TabsToolbar {
-    --tab-min-height: 38px !important;
+    --tab-min-height: 36px !important; /* 38px -> 36px */
   }
   :root[uidensity="compact"] #TabsToolbar {
-    --tab-min-height: 36px !important;
+    --tab-min-height: 29px !important; /* 36px -> 29px */
   }
 
   /* Scroll Button - Size Fix */

From 084d534c89ab5f583ba89ef6aa4929ac8c44ee59 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 4 Nov 2021 08:28:23 +0000
Subject: [PATCH 06/12] Revert "Fix: Remove Tab Border - At nightly 96 #259"

This reverts commit 5d9c20be6a72e052c20caddb34e2b5431ca25916.
---
 userChrome.css | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 87ccb60..0b32c7b 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -47,25 +47,6 @@
     --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
   }
 
-  /*= Remove Tab Border ======================================================*/
-  /* Light Theme */
-  #TabsToolbar:not([brighttext])
-    #tabbrowser-tabs:not([noshadowfortests])
-    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
-    > .tab-stack
-    > .tab-background {
-    border: unset !important; /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
-  }
-
-  /* Dark Theme */
-  #TabsToolbar[brighttext]
-    #tabbrowser-tabs:not([noshadowfortests])
-    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
-    > .tab-stack
-    > .tab-background:-moz-lwtheme {
-    border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
-  }
-
   /*= Light Weight Theme =====================================================*/
   /* Header Image */
   :root[lwtheme-image] {

From 893cd241ff2fa601008577fd4a78b04aaebc18a2 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 16 Nov 2021 13:21:34 +0900
Subject: [PATCH 07/12] Fix: System Default Theme - `proton-style`'s seleected
 tab

---
 userChrome.css | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index bd8e351..edd2fc7 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -440,6 +440,18 @@
       --panel-separator-color: var(--win-border-color) !important;
     }
 
+    /*- Proton Tab Selected --------------------------------------------------*/
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
+    }
+    :root:not(:-moz-lwtheme) {
+      --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
+    }
+    :root[lwt-default-theme-in-dark-mode] {
+      --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
+    }
+
     /*- Menu -----------------------------------------------------------------*/
     html#main-window menupopup:not(:-moz-lwtheme) {
       --menu-color: var(--win-text-color) !important;
@@ -711,6 +723,18 @@
       }
     }
 
+    /*- Proton Tab Selected --------------------------------------------------*/
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog);
+    }
+    :root:not(:-moz-lwtheme) {
+      --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important;
+    }
+    :root[lwt-default-theme-in-dark-mode] {
+      --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important;
+    }
+
     /*- Toolbar --------------------------------------------------------------*/
     :root:not(:-moz-lwtheme) #navigator-toolbox,
     :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
@@ -768,15 +792,6 @@
     }
 
     /* Hard Coded */
-    :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
-      #tabbrowser-tabs:not([movingtab])
-      > #tabbrowser-arrowscrollbox
-      > .tabbrowser-tab
-      > .tab-stack
-      > .tab-background[selected="true"] {
-      background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-    }
-
     :root:not(:-moz-lwtheme) #tabs-newtab-button:hover,
     :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
     :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,

From 13acf49ac8ea21e0ad480ab24c051de29266d8ab Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 23 Dec 2021 13:41:31 +0900
Subject: [PATCH 08/12] Add: Option - Original

---
 user.js        |  6 ++++-
 userChrome.css | 59 ++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/user.js b/user.js
index e526e39..706f186 100644
--- a/user.js
+++ b/user.js
@@ -1,4 +1,4 @@
-// ** Theme Related Options ****************************************************
+// ** Theme Default Options ****************************************************
 // userchrome.css usercontent.css activate
 user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
 
@@ -26,6 +26,10 @@ user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar"
 // Browser Theme Based Scheme - Will be activate 95 Above
 // user_pref("layout.css.prefers-color-scheme.content-override", 3);
 
+// ** Theme Related Options ****************************************************
+user_pref("userChrome.tab.original",          true); // Original
+user_pref("userChrome.tab.connect_to_window", true); // Original, Photon
+
 // ** Useful Options ***********************************************************
 // Integrated calculator at urlbar
 user_pref("browser.urlbar.suggest.calculator", true);
diff --git a/userChrome.css b/userChrome.css
index ed92ad8..71518f3 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -55,6 +55,8 @@
 }
 
 /*= Remove Tab Border ========================================================*/
+@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
+  /* TARGET: original, photon */
 /* Light Theme */
 #TabsToolbar:not([brighttext])
   #tabbrowser-tabs:not([noshadowfortests])
@@ -72,6 +74,7 @@
   > .tab-background:-moz-lwtheme {
   border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
 }
+}
 
 /*= Light Weight Theme =======================================================*/
 /* Header Image */
@@ -819,6 +822,7 @@
   }
 
   /* Hard Coded */
+  @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
   :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
     #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
@@ -833,6 +837,7 @@
     > .tab-background[selected="true"] {
     background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
   }
+  }
 
   :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
   :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
@@ -2702,10 +2707,14 @@ menuitem.openintabs-menuitem,
 
 /** Reduce Padding ************************************************************/
 /*= Root - Reduce Padding ====================================================*/
+@supports -moz-bool-pref("userChrome.tab.original") {
 :root {
   /* Tab Bar */
   --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
   --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
+}
+}
+:root {
   --inline-tab-padding: 6px !important; /* Original: 8px */
 
   /* Panel */
@@ -2825,6 +2834,7 @@ menuitem.openintabs-menuitem,
   --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
 }
 
+@supports -moz-bool-pref("userChrome.tab.original") {
 .toolbar-items,
 .tabbrowser-tab {
   --tabbar-max-height: 38px;
@@ -2838,6 +2848,7 @@ menuitem.openintabs-menuitem,
 :root[uidensity="touch"] .tabbrowser-tab {
   --tabbar-max-height: 45px;
 }
+}
 
 /* Scroll Button - Size Fix */
 :root #tabbrowser-arrowscrollbox {
@@ -3127,6 +3138,7 @@ menupopup > menu {
 }
 
 /** Tab Bar - Connect to window ***********************************************/
+@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
 .tab-background {
   border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
   margin-bottom: 0px !important;
@@ -3148,8 +3160,10 @@ menupopup > menu {
 #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
   overflow: hidden;
 }
+}
 
 /** Selected Tab - Color like toolbar *****************************************/
+@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
 :root:not(:-moz-lwtheme) {
   /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
   --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
@@ -3164,8 +3178,9 @@ menupopup > menu {
   background-image: linear-gradient(transparent, transparent),
     linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
 }
+}
 
-/* Multi Selected Color */
+/** Multi Selected Color - More Contrast **************************************/
 #tabbrowser-tabs:not([movingtab])
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
@@ -3186,6 +3201,7 @@ menupopup > menu {
 }
 
 /** Selected Tab - Box Shadow *************************************************/
+@supports -moz-bool-pref("userChrome.tab.original") {
 #TabsToolbar[brighttext]
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab[visuallyselected="true"]:not(:focus)
@@ -3207,8 +3223,10 @@ menupopup > menu {
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
   z-index: 0 !important;
 }
+}
 
 /** Selected Tab - Bottom Rounded Corner **************************************/
+@supports -moz-bool-pref("userChrome.tab.original") {
 #tabbrowser-tabs {
   --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
   --tab-corner-padding: 0px;
@@ -3270,12 +3288,16 @@ tab[visuallyselected] > stack::after {
     stroke: transparent !important;
   }
 }
+}
 
 /** Unselected Tab - Divide line **********************************************/
+@supports -moz-bool-pref("userChrome.tab.original") {
 #tabbrowser-arrowscrollbox {
   position: absolute;
 }
+}
 
+@supports -moz-bool-pref("userChrome.tab.original") {
 .tab-background::before,
 #tabs-newtab-button::before {
   /* Box Model */
@@ -3295,12 +3317,27 @@ tab[visuallyselected] > stack::after {
   opacity: 0;
   background-color: var(--toolbarseparator-color);
 }
+}
 
-.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
+.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
+  opacity: var(--tab-separator-opacity);
+}
+@supports -moz-bool-pref("userChrome.tab.original") {
 #tabs-newtab-button:not(:hover, [open])::before {
   opacity: var(--tab-separator-opacity);
 }
+}
 
+#navigator-toolbox:not([movingtab])
+  .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
+  .tab-background::before,
+#navigator-toolbox:not([movingtab])
+  #tabbrowser-arrowscrollbox[overflowing]
+  tab.tabbrowser-tab[first-visible-unpinned-tab]
+  .tab-background::before {
+  opacity: 0 !important;
+}
+@supports -moz-bool-pref("userChrome.tab.original") {
 #navigator-toolbox:not([movingtab])
   .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
   + .tabbrowser-tab
@@ -3311,23 +3348,21 @@ tab[visuallyselected] > stack::after {
   .tab-background::before,
 #navigator-toolbox:not([movingtab])
   .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
-  ~ #tabs-newtab-button::before,
-#navigator-toolbox:not([movingtab])
-  .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
-  .tab-background::before,
-#navigator-toolbox:not([movingtab])
-  #tabbrowser-arrowscrollbox[overflowing]
-  tab.tabbrowser-tab[first-visible-unpinned-tab]
-  .tab-background::before {
+  ~ #tabs-newtab-button::before {
   opacity: 0 !important;
 }
+}
 
 /* Animate */
 @media (prefers-reduced-motion: no-preference) {
-  .tab-background::before,
+  .tab-background::before {
+    transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
+  }
+  @supports -moz-bool-pref("userChrome.tab.original") {
   #tabs-newtab-button::before {
     transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
   }
+  }
 }
 
 /* Latest Tab & New tab margin */
@@ -3336,6 +3371,7 @@ tab[visuallyselected] > stack::after {
 }
 
 /* New tab button - Looks like tab ********************************************/
+@supports -moz-bool-pref("userChrome.tab.original") {
 #tabs-newtab-button {
   /* Original:
     margin: 0 0 var(--tabs-navbar-shadow-size) !important
@@ -3398,6 +3434,7 @@ tab[visuallyselected] > stack::after {
   fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
+}
 
 /* Unloaded Tab - Contents Opacity ********************************************/
 #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {

From a4d980ecd7d6ee8fcd5a89001dffabda0efe928f Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 23 Dec 2021 13:46:23 +0900
Subject: [PATCH 09/12] Clean: Option - Original Indent

---
 userChrome.css | 458 +++++++++++++++++++++++++------------------------
 1 file changed, 232 insertions(+), 226 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 71518f3..41966b5 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -57,23 +57,23 @@
 /*= Remove Tab Border ========================================================*/
 @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
   /* TARGET: original, photon */
-/* Light Theme */
-#TabsToolbar:not([brighttext])
-  #tabbrowser-tabs:not([noshadowfortests])
-  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
-  > .tab-stack
-  > .tab-background {
-  border: unset !important; /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
-}
+  /* Light Theme */
+  #TabsToolbar:not([brighttext])
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background {
+    border: unset !important; /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
+  }
 
-/* Dark Theme */
-#TabsToolbar[brighttext]
-  #tabbrowser-tabs:not([noshadowfortests])
-  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
-  > .tab-stack
-  > .tab-background:-moz-lwtheme {
-  border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
-}
+  /* Dark Theme */
+  #TabsToolbar[brighttext]
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background:-moz-lwtheme {
+    border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
+  }
 }
 
 /*= Light Weight Theme =======================================================*/
@@ -823,7 +823,7 @@
 
   /* Hard Coded */
   @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
-  :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
+    :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
     #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -835,8 +835,8 @@
     > .tabbrowser-tab
     > .tab-stack
     > .tab-background[selected="true"] {
-    background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-  }
+      background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
+    }
   }
 
   :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
@@ -2708,11 +2708,11 @@ menuitem.openintabs-menuitem,
 /** Reduce Padding ************************************************************/
 /*= Root - Reduce Padding ====================================================*/
 @supports -moz-bool-pref("userChrome.tab.original") {
-:root {
-  /* Tab Bar */
-  --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
-  --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
-}
+  :root {
+    /* Tab Bar */
+    --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
+    --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
+  }
 }
 :root {
   --inline-tab-padding: 6px !important; /* Original: 8px */
@@ -2835,19 +2835,19 @@ menuitem.openintabs-menuitem,
 }
 
 @supports -moz-bool-pref("userChrome.tab.original") {
-.toolbar-items,
-.tabbrowser-tab {
-  --tabbar-max-height: 38px;
-  max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
-}
-:root[uidensity="compact"] .toolbar-items,
-:root[uidensity="compact"] .tabbrowser-tab {
-  --tabbar-max-height: 36px;
-}
-:root[uidensity="touch"] .toolbar-items,
-:root[uidensity="touch"] .tabbrowser-tab {
-  --tabbar-max-height: 45px;
-}
+  .toolbar-items,
+  .tabbrowser-tab {
+    --tabbar-max-height: 38px;
+    max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
+  }
+  :root[uidensity="compact"] .toolbar-items,
+  :root[uidensity="compact"] .tabbrowser-tab {
+    --tabbar-max-height: 36px;
+  }
+  :root[uidensity="touch"] .toolbar-items,
+  :root[uidensity="touch"] .tabbrowser-tab {
+    --tabbar-max-height: 45px;
+  }
 }
 
 /* Scroll Button - Size Fix */
@@ -3139,45 +3139,45 @@ menupopup > menu {
 
 /** Tab Bar - Connect to window ***********************************************/
 @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
-.tab-background {
-  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
-  margin-bottom: 0px !important;
-}
+  .tab-background {
+    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
+    margin-bottom: 0px !important;
+  }
 
-.tab-content {
-  margin-top: var(--tab-block-margin);
-}
+  .tab-content {
+    margin-top: var(--tab-block-margin);
+  }
 
-.tab-stack {
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-}
+  .tab-stack {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
 
-/* Remove line at Toolbar's top */
-#tabbrowser-tabs {
-  z-index: 1 !important;
-}
-#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
-  overflow: hidden;
-}
+  /* Remove line at Toolbar's top */
+  #tabbrowser-tabs {
+    z-index: 1 !important;
+  }
+  #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
+    overflow: hidden;
+  }
 }
 
 /** Selected Tab - Color like toolbar *****************************************/
 @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
-:root:not(:-moz-lwtheme) {
-  /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
-  --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
-}
-#tabbrowser-tabs:not([movingtab])
-  > #tabbrowser-arrowscrollbox
-  > .tabbrowser-tab
-  > .tab-stack
-  > .tab-background[selected="true"]:-moz-lwtheme {
-  /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
+  :root:not(:-moz-lwtheme) {
+    /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
+    --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
+  }
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected="true"]:-moz-lwtheme {
+    /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
  */
-  background-image: linear-gradient(transparent, transparent),
-    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
-}
+    background-image: linear-gradient(transparent, transparent),
+      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
+  }
 }
 
 /** Multi Selected Color - More Contrast **************************************/
@@ -3202,130 +3202,136 @@ menupopup > menu {
 
 /** Selected Tab - Box Shadow *************************************************/
 @supports -moz-bool-pref("userChrome.tab.original") {
-#TabsToolbar[brighttext]
-  #tabbrowser-tabs:not([noshadowfortests])
-  .tabbrowser-tab[visuallyselected="true"]:not(:focus)
-  > .tab-stack
-  > .tab-background:-moz-lwtheme {
-  /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
+  #TabsToolbar[brighttext]
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab[visuallyselected="true"]:not(:focus)
+    > .tab-stack
+    > .tab-background:-moz-lwtheme {
+    /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
        Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
-  box-shadow: 0 0 1px var(--toolbar-color) !important;
-}
-#TabsToolbar[brighttext]
-  #tabbrowser-tabs:not([noshadowfortests])
-  .tabbrowser-tab[multiselected]:not([visuallyselected])
-  > .tab-stack
-  > .tab-background:-moz-lwtheme {
-  box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
-}
+    box-shadow: 0 0 1px var(--toolbar-color) !important;
+  }
+  #TabsToolbar[brighttext]
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab[multiselected]:not([visuallyselected])
+    > .tab-stack
+    > .tab-background:-moz-lwtheme {
+    box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
+  }
 
-/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
-#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
-  z-index: 0 !important;
-}
+  /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
+  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+    z-index: 0 !important;
+  }
 }
 
 /** Selected Tab - Bottom Rounded Corner **************************************/
 @supports -moz-bool-pref("userChrome.tab.original") {
-#tabbrowser-tabs {
-  --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
-  --tab-corner-padding: 0px;
-  --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
-}
+  #tabbrowser-tabs {
+    --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
+    --tab-corner-padding: 0px;
+    --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
+  }
 
-:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
-:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
-  content: "" !important;
+  :root:not([customizing="true"]) tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"]) tab[visuallyselected] > stack::after {
+    content: "" !important;
 
-  /* Box */
-  display: block !important;
-  position: absolute !important;
-  z-index: 1 !important;
+    /* Box */
+    display: block !important;
+    position: absolute !important;
+    z-index: 1 !important;
 
-  /* Shape */
-  width: var(--tab-corner-rounding) !important;
-  height: 100% !important;
+    /* Shape */
+    width: var(--tab-corner-rounding) !important;
+    height: 100% !important;
 
-  /* Color */
-  fill: var(--toolbar-bgcolor) !important;
-  stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important;
-  -moz-context-properties: fill, stroke !important;
+    /* Color */
+    fill: var(--toolbar-bgcolor) !important;
+    stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important;
+    -moz-context-properties: fill, stroke !important;
 
-  /* Image */
-  background-size: var(--tab-corner-rounding);
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-}
-:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
-:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
-  /* As Selected Tab - Box Shadow */
-  stroke: var(--toolbar-color) !important;
-}
+    /* Image */
+    background-size: var(--tab-corner-rounding);
+    background-repeat: no-repeat;
+    background-position-y: bottom;
+  }
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+    /* As Selected Tab - Box Shadow */
+    stroke: var(--toolbar-color) !important;
+  }
 
-tab[visuallyselected] > stack::before {
-  left: var(--tab-corner-position) !important;
-  background-image: url("./icons/tab-bottom-corner-left.svg");
-}
-tab[visuallyselected] > stack::after {
-  left: auto;
-  right: var(--tab-corner-position);
-  background-image: url("./icons/tab-bottom-corner-right.svg");
-}
+  tab[visuallyselected] > stack::before {
+    left: var(--tab-corner-position) !important;
+    background-image: url("./icons/tab-bottom-corner-left.svg");
+  }
+  tab[visuallyselected] > stack::after {
+    left: auto;
+    right: var(--tab-corner-position);
+    background-image: url("./icons/tab-bottom-corner-right.svg");
+  }
 
-@media (-moz-gtk-csd-available) {
-  /* Fill color for GTK */
-  :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
-  :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
-    /* As GTK Toolbar's background-color + backround-image
+  @media (-moz-gtk-csd-available) {
+    /* Fill color for GTK */
+    :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
+    :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
+      /* As GTK Toolbar's background-color + backround-image
        * --toolbar-non-lwt-bgcolor: -moz-dialog;
        * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
        */
-    fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-    stroke: transparent !important;
+      fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
+      stroke: transparent !important;
+    }
+    :root:not([customizing="true"]):not([lwtheme="true"])
+      #TabsToolbar[brighttext]
+      tab[visuallyselected]
+      > stack::before,
+    :root:not([customizing="true"]):not([lwtheme="true"])
+      #TabsToolbar[brighttext]
+      tab[visuallyselected]
+      > stack::after {
+      stroke: transparent !important;
+    }
   }
-  :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
-  :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
-    stroke: transparent !important;
-  }
-}
 }
 
 /** Unselected Tab - Divide line **********************************************/
 @supports -moz-bool-pref("userChrome.tab.original") {
-#tabbrowser-arrowscrollbox {
-  position: absolute;
-}
+  #tabbrowser-arrowscrollbox {
+    position: absolute;
+  }
 }
 
 @supports -moz-bool-pref("userChrome.tab.original") {
-.tab-background::before,
-#tabs-newtab-button::before {
-  /* Box Model */
-  content: "";
-  display: block;
-  position: absolute;
+  .tab-background::before,
+  #tabs-newtab-button::before {
+    /* Box Model */
+    content: "";
+    display: block;
+    position: absolute;
 
-  /* Position */
-  top: 50%;
-  transform: translateX(-2.5px) translateY(calc(-50% + 1px));
+    /* Position */
+    top: 50%;
+    transform: translateX(-2.5px) translateY(calc(-50% + 1px));
 
-  /* Bar shape */
-  width: 1px;
-  height: 20px;
+    /* Bar shape */
+    width: 1px;
+    height: 20px;
 
-  /* Bar Color */
-  opacity: 0;
-  background-color: var(--toolbarseparator-color);
-}
+    /* Bar Color */
+    opacity: 0;
+    background-color: var(--toolbarseparator-color);
+  }
 }
 
 .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
   opacity: var(--tab-separator-opacity);
 }
 @supports -moz-bool-pref("userChrome.tab.original") {
-#tabs-newtab-button:not(:hover, [open])::before {
-  opacity: var(--tab-separator-opacity);
-}
+  #tabs-newtab-button:not(:hover, [open])::before {
+    opacity: var(--tab-separator-opacity);
+  }
 }
 
 #navigator-toolbox:not([movingtab])
@@ -3338,19 +3344,19 @@ tab[visuallyselected] > stack::after {
   opacity: 0 !important;
 }
 @supports -moz-bool-pref("userChrome.tab.original") {
-#navigator-toolbox:not([movingtab])
-  .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
-  + .tabbrowser-tab
-  .tab-background::before,
-#navigator-toolbox:not([movingtab])
-  .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
-  ~ .tabbrowser-tab[afterhovered]
-  .tab-background::before,
-#navigator-toolbox:not([movingtab])
-  .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
-  ~ #tabs-newtab-button::before {
-  opacity: 0 !important;
-}
+  #navigator-toolbox:not([movingtab])
+    .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+    + .tabbrowser-tab
+    .tab-background::before,
+  #navigator-toolbox:not([movingtab])
+    .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+    ~ .tabbrowser-tab[afterhovered]
+    .tab-background::before,
+  #navigator-toolbox:not([movingtab])
+    .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
+    ~ #tabs-newtab-button::before {
+    opacity: 0 !important;
+  }
 }
 
 /* Animate */
@@ -3359,9 +3365,9 @@ tab[visuallyselected] > stack::after {
     transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
   }
   @supports -moz-bool-pref("userChrome.tab.original") {
-  #tabs-newtab-button::before {
-    transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
-  }
+    #tabs-newtab-button::before {
+      transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
+    }
   }
 }
 
@@ -3372,68 +3378,68 @@ tab[visuallyselected] > stack::after {
 
 /* New tab button - Looks like tab ********************************************/
 @supports -moz-bool-pref("userChrome.tab.original") {
-#tabs-newtab-button {
-  /* Original:
+  #tabs-newtab-button {
+    /* Original:
     margin: 0 0 var(--tabs-navbar-shadow-size) !important
     => Can't ovrride style. Therefore, we should approach it by bypass.
     */
-  --tabs-navbar-shadow-size: -1px; /* Original: 1px */
-  --tabs-navbar-original-shadow-size: 1px;
-  --tab-corner-rounding: 4px; /* Hardcorded */
+    --tabs-navbar-shadow-size: -1px; /* Original: 1px */
+    --tabs-navbar-original-shadow-size: 1px;
+    --tab-corner-rounding: 4px; /* Hardcorded */
 
-  /* Size */
-  -moz-box-align: stretch !important;
-  padding-top: var(--tab-block-margin) !important;
+    /* Size */
+    -moz-box-align: stretch !important;
+    padding-top: var(--tab-block-margin) !important;
 
-  /* Corner Rounding Image */
-  --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
-  background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
-  background-repeat: no-repeat;
-  background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
-    right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
-  background-size: var(--tab-corner-rounding);
+    /* Corner Rounding Image */
+    --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
+    background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
+    background-repeat: no-repeat;
+    background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
+      right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
+    background-size: var(--tab-corner-rounding);
+
+    /* Corner Rounding Color */
+    fill: transparent !important;
+    -moz-context-properties: fill !important;
+  }
 
   /* Corner Rounding Color */
-  fill: transparent !important;
-  -moz-context-properties: fill !important;
-}
-
-/* Corner Rounding Color */
-#tabs-newtab-button:hover {
-  fill: var(--toolbarbutton-hover-background) !important;
-}
-#tabs-newtab-button:hover:active {
-  fill: var(--toolbarbutton-active-background) !important;
-}
-@media (-moz-windows-accent-color-in-titlebar) {
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
-    fill: color-mix(
-      in srgb,
-      -moz-accent-color-foreground 10%,
-      transparent
-    ) !important; /* Hardcorded for compatibility */
+  #tabs-newtab-button:hover {
+    fill: var(--toolbarbutton-hover-background) !important;
   }
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
-    fill: color-mix(
-      in srgb,
-      -moz-accent-color-foreground 15%,
-      transparent
-    ) !important; /* Hardcorded for compatibility */
+  #tabs-newtab-button:hover:active {
+    fill: var(--toolbarbutton-active-background) !important;
+  }
+  @media (-moz-windows-accent-color-in-titlebar) {
+    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
+    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
+      fill: color-mix(
+        in srgb,
+        -moz-accent-color-foreground 10%,
+        transparent
+      ) !important; /* Hardcorded for compatibility */
+    }
+    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
+    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
+      fill: color-mix(
+        in srgb,
+        -moz-accent-color-foreground 15%,
+        transparent
+      ) !important; /* Hardcorded for compatibility */
+    }
   }
-}
 
-/* '+'Icon */
-#tabs-newtab-button .toolbarbutton-icon {
-  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
+  /* '+'Icon */
+  #tabs-newtab-button .toolbarbutton-icon {
+    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
 
-  padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
-    calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
-  -moz-context-properties: fill, fill-opacity;
-  fill: var(--toolbarbutton-icon-fill);
-  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
-}
+    padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
+      calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
+    -moz-context-properties: fill, fill-opacity;
+    fill: var(--toolbarbutton-icon-fill);
+    fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+  }
 }
 
 /* Unloaded Tab - Contents Opacity ********************************************/

From 432bbc8cca2358f3cc5cd44cb183bc8d07d1a71c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 24 Dec 2021 09:14:58 +0900
Subject: [PATCH 10/12] Clean: Option - Proton Indent

---
 userChrome.css | 66 +++++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 40e1cf3..75c33b7 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2873,12 +2873,12 @@ menuitem.openintabs-menuitem,
   }
 }
 @supports -moz-bool-pref("userChrome.tab.proton") {
-:root:not([uidensity]) #TabsToolbar {
-  --tab-min-height: 36px !important; /* 38px -> 36px */
-}
-:root[uidensity="compact"] #TabsToolbar {
-  --tab-min-height: 29px !important; /* 36px -> 29px */
-}
+  :root:not([uidensity]) #TabsToolbar {
+    --tab-min-height: 36px !important; /* 38px -> 36px */
+  }
+  :root[uidensity="compact"] #TabsToolbar {
+    --tab-min-height: 29px !important; /* 36px -> 29px */
+  }
 }
 
 /* Scroll Button - Size Fix */
@@ -3378,13 +3378,13 @@ menupopup > menu {
 }
 
 @supports -moz-bool-pref("userChrome.tab.proton") {
-.tab-background::before {
-  transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
-}
-.tabbrowser-tab[last-visible-tab] .tab-background::after {
-  right: 0;
-  transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
-}
+  .tab-background::before {
+    transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
+  }
+  .tabbrowser-tab[last-visible-tab] .tab-background::after {
+    right: 0;
+    transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
+  }
 }
 
 .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
@@ -3396,12 +3396,12 @@ menupopup > menu {
   }
 }
 @supports -moz-bool-pref("userChrome.tab.proton") {
-#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
-#tabbrowser-arrowscrollbox:not([overflowing])
-  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
-  .tab-background::after {
-  opacity: var(--tab-separator-opacity);
-}
+  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
+  #tabbrowser-arrowscrollbox:not([overflowing])
+    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
+    .tab-background::after {
+    opacity: var(--tab-separator-opacity);
+  }
 }
 
 #navigator-toolbox:not([movingtab])
@@ -3430,8 +3430,8 @@ menupopup > menu {
 }
 @supports -moz-bool-pref("userChrome.tab.proton") {
   .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
-  + .tabbrowser-tab:not([visuallyselected])
-  .tab-background::before {
+    + .tabbrowser-tab:not([visuallyselected])
+    .tab-background::before {
     opacity: 0 !important;
   }
 }
@@ -3447,9 +3447,9 @@ menupopup > menu {
     }
   }
   @supports -moz-bool-pref("userChrome.tab.proton") {
-  #tabbrowser-arrowscrollbox:not([overflowing])
-    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
-    .tab-background::after {
+    #tabbrowser-arrowscrollbox:not([overflowing])
+      .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
+      .tab-background::after {
       transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
     }
   }
@@ -3528,16 +3528,16 @@ menupopup > menu {
 
 /* New tab button - Smaller button ********************************************/
 @supports -moz-bool-pref("userChrome.tab.proton") {
-:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
-  --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
-}
+  :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
+    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
+  }
 
-:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
-  margin-left: 2px;
-}
-:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
-  margin-left: 1px;
-}
+  :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
+    margin-left: 2px;
+  }
+  :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
+    margin-left: 1px;
+  }
 }
 
 /* Unloaded Tab - Contents Opacity ********************************************/

From 87f3f28cfb2d34bcfee9fb451c77e450e5074445 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 24 Dec 2021 14:59:33 +0900
Subject: [PATCH 11/12] Clean: comment lines

---
 userChrome.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 75c33b7..4d41c23 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1033,7 +1033,7 @@
   }
 }
 
-/*== Menu color =============================================================*/
+/*== Menu Color =============================================================*/
 html#main-window menupopup {
   /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
   --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important;
@@ -2157,7 +2157,7 @@ browser[type="content"] > html {
       }
     }
 
-    /*- Toolbar & Menus ----------------------------------------------------*/
+    /*- Toolbar & Menus ------------------------------------------------------*/
     #placesToolbar {
       appearance: none !important;
       background-color: var(--organizer-toolbar-background) !important;
@@ -3983,7 +3983,7 @@ menupopup > menu {
   list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
 }
 
-/*= Menubar - Icons ===========================================*/
+/*= Menubar - Icons ==========================================================*/
 @-moz-document url("chrome://browser/content/places/places.xhtml")
 {
   @media (-moz-gtk-csd-available) {

From e92996c3edbcf9af0c75cb2deac42662349e73bf Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 24 Dec 2021 15:05:01 +0900
Subject: [PATCH 12/12] Fix: Proton tab option

---
 userChrome.css | 40 ++++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 4d41c23..9085141 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -487,15 +487,17 @@
   }
 
   /*- Proton Tab Selected ----------------------------------------------------*/
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
-  }
-  :root:not(:-moz-lwtheme) {
-    --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
-  }
-  :root[lwt-default-theme-in-dark-mode] {
-    --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
+  @supports -moz-bool-pref("userChrome.tab.proton") {
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
+    }
+    :root:not(:-moz-lwtheme) {
+      --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
+    }
+    :root[lwt-default-theme-in-dark-mode] {
+      --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
+    }
   }
 
   /*- Menu -------------------------------------------------------------------*/
@@ -778,15 +780,17 @@
   }
 
   /*- Proton Tab Selected ----------------------------------------------------*/
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog);
-  }
-  :root:not(:-moz-lwtheme) {
-    --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important;
-  }
-  :root[lwt-default-theme-in-dark-mode] {
-    --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important;
+  @supports -moz-bool-pref("userChrome.tab.proton") {
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog);
+    }
+    :root:not(:-moz-lwtheme) {
+      --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important;
+    }
+    :root[lwt-default-theme-in-dark-mode] {
+      --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important;
+    }
   }
 
   /*- Toolbar ----------------------------------------------------------------*/