From 37730741f36430547bb989ca575e8891eea42ce0 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 15 Apr 2023 08:27:27 +0900
Subject: [PATCH] Add: Theme - Windows11 transparent(mica) frame

---
 css/leptonChrome.css                | 38 +++++++++++++++----
 src/theme/_index.scss               |  7 +---
 src/theme/_transparent.scss         | 12 ++++++
 src/theme/transparent/_general.scss | 58 -----------------------------
 src/theme/transparent/_linux.scss   | 57 ++++++++++++++++++++++++++++
 src/theme/transparent/_win11.scss   | 19 ++++++++++
 6 files changed, 119 insertions(+), 72 deletions(-)
 create mode 100644 src/theme/_transparent.scss
 create mode 100644 src/theme/transparent/_linux.scss
 create mode 100644 src/theme/transparent/_win11.scss

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 4fce724..13efdb5 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -2175,14 +2175,7 @@
 }
 /*= Transparent ==============================================================*/
 @supports -moz-bool-pref("userChrome.theme.transparent.frame") {
-  @media (-moz-gtk-csd-available) {
-    :root:not(:-moz-lwtheme) {
-      --lwt-accent-color: Window !important;
-      --lwt-text-color: WindowText !important;
-    }
-    :root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
-      --lwt-accent-color: rgb(45, 36, 91) !important;
-    }
+  @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10), (-moz-gtk-csd-available) {
     #main-window,
     #navigator-toolbox-background {
       background-color: transparent !important;
@@ -2205,6 +2198,35 @@
       appearance: auto !important;
       -moz-default-appearance: -moz-win-exclude-glass !important;
     }
+  }
+  @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+    :root,
+    #navigator-toolbox {
+      --lwt-accent-color: transparent !important;
+      --lwt-text-color: WindowText !important;
+    }
+    #titlebar .toolbarbutton-1 {
+      --toolbarbutton-icon-fill: var(--lwt-text-color) !important;
+    }
+    :root:not([sizemode="fullscreen"]) .titlebar-buttonbox-container .titlebar-button:not(.titlebar-close:hover) {
+      list-style-image: none !important;
+    }
+    :root:not([sizemode="fullscreen"])
+      #toolbar-menubar[autohide="true"][inactive="true"]
+      + #TabsToolbar
+      .titlebar-button:is(.titlebar-close:hover)
+      .toolbarbutton-icon {
+      transform: translateY(-7px) !important;
+    }
+  }
+  @media (-moz-gtk-csd-available) {
+    :root:not(:-moz-lwtheme) {
+      --lwt-accent-color: Window !important;
+      --lwt-text-color: WindowText !important;
+    }
+    :root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
+      --lwt-accent-color: rgb(45, 36, 91) !important;
+    }
     #titlebar {
       --uc-frame-element-background: color-mix(in srgb, var(--lwt-accent-color, Window) 60%, transparent);
       --toolbarbutton-hover-background: color-mix(in srgb, var(--lwt-accent-color, Window) 85%, transparent);
diff --git a/src/theme/_index.scss b/src/theme/_index.scss
index b0fea05..bb73f17 100644
--- a/src/theme/_index.scss
+++ b/src/theme/_index.scss
@@ -36,12 +36,7 @@
 
 /*= Transparent ==============================================================*/
 @include Option("userChrome.theme.transparent.frame") {
-  @include OS($linux) {
-    @import "transparent/general";
-  }
-  @include OS($mac) {
-    @import "transparent/mac";
-  }
+  @import "transparent";
 }
 
 /*= Proton Theme Mode ========================================================*/
diff --git a/src/theme/_transparent.scss b/src/theme/_transparent.scss
new file mode 100644
index 0000000..dc8ab1c
--- /dev/null
+++ b/src/theme/_transparent.scss
@@ -0,0 +1,12 @@
+@include OS($win10, $linux) {
+  @import "transparent/general";
+}
+@include OS($win10) {
+  @import "transparent/win11";
+}
+@include OS($linux) {
+  @import "transparent/linux";
+}
+@include OS($mac) {
+  @import "transparent/mac";
+}
diff --git a/src/theme/transparent/_general.scss b/src/theme/transparent/_general.scss
index 54fa5e2..5f8db87 100644
--- a/src/theme/transparent/_general.scss
+++ b/src/theme/transparent/_general.scss
@@ -1,13 +1,3 @@
-// Frame
-:root:not(:-moz-lwtheme) {
-  --lwt-accent-color: Window !important;
-  --lwt-text-color: WindowText !important;
-}
-:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
-  // Alpenglow theme
-  --lwt-accent-color: rgb(45, 36, 91) !important;
-}
-
 #main-window,
 #navigator-toolbox-background {
   background-color: transparent !important;
@@ -35,51 +25,3 @@
   appearance: auto !important;
   -moz-default-appearance: -moz-win-exclude-glass !important;
 }
-
-// Set Colors
-@function frameTransparent($per: 60%, $transparent: transparent) {
-  @return color-mix(
-    in srgb,
-    var(--lwt-accent-color, Window) $per,
-    $transparent
-  );
-}
-
-#titlebar {
-  --uc-frame-element-background: #{ frameTransparent() };
-  --toolbarbutton-hover-background: #{ frameTransparent(85%) };
-
-  @include Dark {
-    --toolbarbutton-hover-background: #{ frameTransparent(40%, rgba(255, 255, 255, 0.25)) };
-  }
-}
-
-#main-menubar:not(:-moz-window-inactive),
-.titlebar-buttonbox-container:not(:-moz-window-inactive) {
-  background-color: var(--uc-frame-element-background);
-  border-radius: 4px;
-}
-
-#TabsToolbar {
-  --toolbarseparator-color: transparent;
-
-  .tabbrowser-tab
-  > .tab-stack
-  > .tab-background:not([selected="true"], [multiselected]) {
-    background-color: var(--uc-frame-element-background);
-  }
-
-  #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
-  .tabbrowser-tab:hover
-  > .tab-stack
-  > .tab-background:not([selected="true"], [multiselected]) {
-    background-color: var(--toolbarbutton-hover-background) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
-  }
-}
-
-#scrollbutton-up,
-#scrollbutton-down,
-#alltabs-button > .toolbarbutton-badge-stack,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
-  background-color: var(--uc-frame-element-background);
-}
diff --git a/src/theme/transparent/_linux.scss b/src/theme/transparent/_linux.scss
new file mode 100644
index 0000000..90eac2b
--- /dev/null
+++ b/src/theme/transparent/_linux.scss
@@ -0,0 +1,57 @@
+// Frame
+:root:not(:-moz-lwtheme) {
+  --lwt-accent-color: Window !important;
+  --lwt-text-color: WindowText !important;
+}
+:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
+  // Alpenglow theme
+  --lwt-accent-color: rgb(45, 36, 91) !important;
+}
+
+// Set Colors
+@function frameTransparent($per: 60%, $transparent: transparent) {
+  @return color-mix(
+    in srgb,
+    var(--lwt-accent-color, Window) $per,
+    $transparent
+  );
+}
+
+#titlebar {
+  --uc-frame-element-background: #{ frameTransparent() };
+  --toolbarbutton-hover-background: #{ frameTransparent(85%) };
+
+  @include Dark {
+    --toolbarbutton-hover-background: #{ frameTransparent(40%, rgba(255, 255, 255, 0.25)) };
+  }
+}
+
+#main-menubar:not(:-moz-window-inactive),
+.titlebar-buttonbox-container:not(:-moz-window-inactive) {
+  background-color: var(--uc-frame-element-background);
+  border-radius: 4px;
+}
+
+#TabsToolbar {
+  --toolbarseparator-color: transparent;
+
+  .tabbrowser-tab
+  > .tab-stack
+  > .tab-background:not([selected="true"], [multiselected]) {
+    background-color: var(--uc-frame-element-background);
+  }
+
+  #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
+  .tabbrowser-tab:hover
+  > .tab-stack
+  > .tab-background:not([selected="true"], [multiselected]) {
+    background-color: var(--toolbarbutton-hover-background) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
+  }
+}
+
+#scrollbutton-up,
+#scrollbutton-down,
+#alltabs-button > .toolbarbutton-badge-stack,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
+  background-color: var(--uc-frame-element-background);
+}
diff --git a/src/theme/transparent/_win11.scss b/src/theme/transparent/_win11.scss
new file mode 100644
index 0000000..73f661b
--- /dev/null
+++ b/src/theme/transparent/_win11.scss
@@ -0,0 +1,19 @@
+// @media (-moz-windows-accent-color-in-titlebar: 0) {
+// }
+
+:root,
+#navigator-toolbox {
+  --lwt-accent-color: transparent !important; // Window
+  --lwt-text-color: WindowText !important;
+}
+
+#titlebar .toolbarbutton-1 {
+  --toolbarbutton-icon-fill: var(--lwt-text-color) !important;
+}
+
+:root:not([sizemode="fullscreen"]) .titlebar-buttonbox-container .titlebar-button:not(.titlebar-close:hover) {
+  list-style-image: none !important;
+}
+:root:not([sizemode="fullscreen"]) #toolbar-menubar[autohide="true"][inactive="true"] + #TabsToolbar .titlebar-button:is(.titlebar-close:hover) .toolbarbutton-icon {
+  transform: translateY(-7px) !important;
+}