From 84e325884fb642691839ad2fbdb128b8d6043915 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Thu, 31 Oct 2024 17:20:02 +0800
Subject: [PATCH 01/22] update

---
 src/other/firefox/common/parts/headerbar.css |  2 +-
 src/other/firefox/common/parts/popups.css    | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/other/firefox/common/parts/headerbar.css b/src/other/firefox/common/parts/headerbar.css
index 90c32e37..55669c29 100644
--- a/src/other/firefox/common/parts/headerbar.css
+++ b/src/other/firefox/common/parts/headerbar.css
@@ -12,7 +12,7 @@
 }
 
 /* Headerbar buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button),
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton),
 toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 	border: none !important;
 	box-shadow: none !important;
diff --git a/src/other/firefox/common/parts/popups.css b/src/other/firefox/common/parts/popups.css
index 2b773beb..aa004c21 100644
--- a/src/other/firefox/common/parts/popups.css
+++ b/src/other/firefox/common/parts/popups.css
@@ -179,7 +179,6 @@ panelview {
 
 /* Style popovers menu buttons */
 menuitem, menupopup menu,
-.subviewbutton:not(#appMenu-fxa-label2, #downloadsHistory),
 .toolbarbutton-1,
 .protections-popup-footer-button,
 .protections-popup-category,
@@ -191,6 +190,18 @@ menuitem, menupopup menu,
 	font: menu !important;
 	padding: 0 6px !important;
 	min-height: 28px !important;
+	margin: 0 !important;
+}
+
+.subviewbutton,
+panelview toolbarbutton {
+	-moz-appearance: none !important;
+	border-radius: 6px !important;
+	color: var(--gnome-toolbar-color) !important;
+	font: menu !important;
+	min-height: 28px !important;
+  padding: 3px 6px !important;
+  margin: 0 !important;
 }
 
 #downloadsHistory {
@@ -209,14 +220,13 @@ menuitem, menupopup menu,
 	--button-active-bgcolor: var(--gnome-popover-button-active-background) !important;
 }
 
-.subviewbutton,
 .protections-popup-footer-button,
 .protections-popup-category,
 .identity-popup-content-blocking-category,
 #PlacesToolbar menupopup[placespopup="true"] .bookmark-item,
 .openintabs-menuitem,
 .widget-overflow-list .toolbarbutton-1 {
-	padding: 5px !important;
+	padding: 3px 6px !important;
 	margin: 0 !important;
 }
 

From 2897ffcdf9e5c4fd655c52248b307caf9a2bf7c1 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 2 Nov 2024 16:53:51 +0800
Subject: [PATCH 02/22] Fixed #1164

---
 libs/lib-install.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/lib-install.sh b/libs/lib-install.sh
index ff0a56e2..7a33fea1 100755
--- a/libs/lib-install.sh
+++ b/libs/lib-install.sh
@@ -608,7 +608,7 @@ install_gdm_theme() {
   # Let's go!
   install_theme_deps
   rm -rf "${WHITESUR_GS_DIR}"; install_beggy
-  gtk_base
+  gtk_base && shell_base
 
   if check_theme_file "${COMMON_CSS_FILE}"; then # CSS-based theme
     install_shelly "${colors[0]}" "${opacities[0]}" "${alts[0]}" "${themes[0]}" "${schemes[0]}" "${icon}" "${WHITESUR_GS_DIR}"

From 1a7397066f66d7738e62e53ae150489c53b2262e Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 3 Nov 2024 00:28:26 +0800
Subject: [PATCH 03/22] Update popups.css

---
 src/other/firefox/common/parts/popups.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/other/firefox/common/parts/popups.css b/src/other/firefox/common/parts/popups.css
index aa004c21..d79eaa34 100644
--- a/src/other/firefox/common/parts/popups.css
+++ b/src/other/firefox/common/parts/popups.css
@@ -26,6 +26,10 @@ menupopup {
 	--panel-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-menu-border-color) !important;
 }
 
+.cui-widget-panelview[id^="PanelUI-webext-"] {
+  border-radius: 6px !important;
+}
+
 .panel-arrowcontent {
 	border: none !important;
 }

From 7d9b8ff031a7223d8715c1a0225445dbc38df384 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Wed, 6 Nov 2024 02:46:56 +0800
Subject: [PATCH 04/22] update #1165

---
 .../gnome-shell/widgets-47-0/_dialogs.scss    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
index 78055b57..078794fc 100644
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@@ -2,7 +2,7 @@
 
 %theme_dialogs {
   background-color: $dialog_bg_color;
-  border-radius: $modal_radius;
+  border-radius: $modal_radius + $base_padding;
   border: solid rgba(black, 0.75);
   border-width: if($variant=='light', 0, 1px);
   box-shadow: 0 3px 6px 0 rgba(black, if($variant=='light', 0.25, 0.35));
@@ -45,34 +45,31 @@
   }
 }
 
-.headline {
-  @extend %title_4;
-}
-
 // modal dialog
 .modal-dialog {
   color: $fg_color;
   padding: $base_padding * 3;
-  @extend %theme_dialogs !optional;
+  @extend %theme_dialogs;
 
   .modal-dialog-content-box {
-    margin: 32px 40px;
-    spacing: 32px;
+    padding: 16px 32px 6px;
+    spacing: $base_padding * 3;
     max-width: 28em;
   }
 
   .modal-dialog-button-box {
     padding-top: $base_padding;
-    spacing: 0;
+    spacing: $base_padding;
 
     .modal-dialog-button {
       min-height: 40px;
       padding: 0 16px;
-      margin: 0 !important;
+      margin: 0;
+      margin-right: 6px;
       border: none !important;
       border-radius: $modal_radius - $base_padding * 2;
+      font-weight: bold;
 
-      @include font(button);
       @include button(normal);
       &:hover { @include button(hover); }
       &:active { @include button(active); }
@@ -82,6 +79,7 @@
 
       &:last-child {
         @extend %last_dialog_button;
+        margin-right: 0;
       }
     }
   }
@@ -89,7 +87,7 @@
 
 // End Session Dialog
 .end-session-dialog {
-  width: 30em;
+  width: 28em;
   // border: none;
 
   .end-session-dialog-battery-warning,
@@ -263,3 +261,8 @@
 .access-dialog {
   text-align: center;
 }
+
+// specific label style for restart message
+.restart-message {
+  @extend %title_4;
+}

From dc2e2b7db6c3a4f8e772670299ddfbd54fd78ff2 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Wed, 6 Nov 2024 02:55:41 +0800
Subject: [PATCH 05/22] update

---
 .../gnome-shell/widgets-47-0/_dialogs.scss    | 39 +++++++------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
index 078794fc..cfb934a0 100644
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@@ -139,12 +139,12 @@
 
 // Run Dialog
 .run-dialog {
-  .modal-dialog-content-box {
-    margin-top: 24px;
-    margin-bottom: 14px;
+  width: 24em;
+
+  .run-dialog-entry {
+    padding: $base_padding * 2 $base_padding * 1.5;
   }
 
-  .run-dialog-entry { width: 20em; }
   .run-dialog-description {
     text-align: center;
     color: $alt_fg_color;
@@ -155,25 +155,8 @@
 // Password or Authentication Dialog
 .prompt-dialog {
   //this is the width of the entire modal popup
-  width: 28em;
+  width: 24em;
   // border: none;
-
-  .modal-dialog-content-box {
-    margin-bottom: 24px;
-  }
-}
-
-.prompt-dialog-password-grid {
-  spacing-rows: 8px;
-  spacing-columns: 4px;
-
-  .prompt-dialog-password-entry {
-    width: auto;
-
-    // 4px (spacing) + 16px (spinner-width)
-    &:ltr { margin-left: 20px; }
-    &:rtl { margin-right: 20px; }
-  }
 }
 
 .prompt-dialog-password-grid {
@@ -195,6 +178,7 @@
 
 .prompt-dialog-password-entry {
   width: 20em;
+  padding: $base_padding * 2 $base_padding * 1.5;
 }
 
 .prompt-dialog-error-label,
@@ -219,6 +203,11 @@
   spacing: 8px;
   margin-bottom: 6px;
 
+  .polkit-dialog-user-label,
+  .polkit-dialog-user-root-label {
+    @extend %title_4;
+  }
+
   .polkit-dialog-user-root-label {
     color: $warning_color;
   }
@@ -231,8 +220,10 @@
 }
 
 .audio-selection-device {
+  min-width: 24em;
   border: 1px solid $borders_color;
   border-radius: $bt_radius;
+
   &:hover, &:focus { background-color: $visit_color; }
   &:active {
     background-color: $selected_bg_color;
@@ -241,8 +232,8 @@
 }
 
 .audio-selection-device-box {
-  padding: 20px;
-  spacing: 20px;
+  padding: $base_padding * 2;
+  spacing: $base_padding * 2;
 }
 
 .audio-selection-device-icon {

From 6bb490fb898bdc7f6e512ca2cd0225107255e297 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Wed, 6 Nov 2024 02:56:09 +0800
Subject: [PATCH 06/22] update

---
 src/sass/gnome-shell/common/_dialogs.scss | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/sass/gnome-shell/common/_dialogs.scss b/src/sass/gnome-shell/common/_dialogs.scss
index 3bfe96d4..2ac0ef95 100644
--- a/src/sass/gnome-shell/common/_dialogs.scss
+++ b/src/sass/gnome-shell/common/_dialogs.scss
@@ -166,19 +166,6 @@
   }
 }
 
-.prompt-dialog-password-grid {
-  spacing-rows: 8px;
-  spacing-columns: 4px;
-
-  .prompt-dialog-password-entry {
-    width: auto;
-
-    // 4px (spacing) + 16px (spinner-width)
-    &:ltr { margin-left: 20px; }
-    &:rtl { margin-right: 20px; }
-  }
-}
-
 .prompt-dialog-password-layout {
   spacing: 8px;
 }

From 1cfb473c9e8fa3e96aafacc2f364386bb85b76c9 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Thu, 7 Nov 2024 10:44:13 +0800
Subject: [PATCH 07/22] update

---
 src/main/gtk-3.0/gtk-Dark.scss                |   3 +-
 src/main/gtk-3.0/gtk-Light.scss               |   3 +-
 src/main/gtk-4.0/gtk-Dark.scss                |   2 +-
 src/main/gtk-4.0/gtk-Light.scss               |   2 +-
 src/sass/gnome-shell/common/_calendar.scss    |   2 +-
 .../gnome-shell/widgets-47-0/_dialogs.scss    |   2 -
 .../gnome-shell/widgets-47-0/_switches.scss   |   2 +
 src/sass/gtk/_colors-other.scss               | 122 +++++
 src/sass/gtk/_colors-public.scss              | 128 -----
 src/sass/gtk/_common-3.0.scss                 |   2 +-
 src/sass/gtk/_common-4.0.scss                 |  14 +-
 src/sass/gtk/_drawing-3.0.scss                | 494 ++++++++++++++++++
 .../gtk/{_drawing.scss => _drawing-4.0.scss}  |  80 +--
 src/sass/gtk/apps/_libadwaita.scss            |   4 +
 14 files changed, 640 insertions(+), 220 deletions(-)
 create mode 100644 src/sass/gtk/_colors-other.scss
 create mode 100644 src/sass/gtk/_drawing-3.0.scss
 rename src/sass/gtk/{_drawing.scss => _drawing-4.0.scss} (84%)

diff --git a/src/main/gtk-3.0/gtk-Dark.scss b/src/main/gtk-3.0/gtk-Dark.scss
index 427146a0..94fd2cae 100644
--- a/src/main/gtk-3.0/gtk-Dark.scss
+++ b/src/main/gtk-3.0/gtk-Dark.scss
@@ -2,7 +2,8 @@ $variant: 'dark';
 
 @import '../../sass/variables';
 @import '../../sass/colors';
-@import '../../sass/gtk/drawing';
+@import '../../sass/gtk/drawing-3.0';
 @import '../../sass/gtk/common-3.0';
 @import '../../sass/gtk/apps-3.0';
 @import '../../sass/gtk/colors-public';
+@import '../../sass/gtk/colors-other';
diff --git a/src/main/gtk-3.0/gtk-Light.scss b/src/main/gtk-3.0/gtk-Light.scss
index 1f6667ec..420d0804 100644
--- a/src/main/gtk-3.0/gtk-Light.scss
+++ b/src/main/gtk-3.0/gtk-Light.scss
@@ -2,7 +2,8 @@ $variant: 'light';
 
 @import '../../sass/variables';
 @import '../../sass/colors';
-@import '../../sass/gtk/drawing';
+@import '../../sass/gtk/drawing-3.0';
 @import '../../sass/gtk/common-3.0';
 @import '../../sass/gtk/apps-3.0';
 @import '../../sass/gtk/colors-public';
+@import '../../sass/gtk/colors-other';
diff --git a/src/main/gtk-4.0/gtk-Dark.scss b/src/main/gtk-4.0/gtk-Dark.scss
index df5a6663..ba192c87 100644
--- a/src/main/gtk-4.0/gtk-Dark.scss
+++ b/src/main/gtk-4.0/gtk-Dark.scss
@@ -3,7 +3,7 @@ $variant: 'dark';
 @import '../../sass/variables';
 @import '../../sass/colors';
 @import '../../sass/gtk/colors-libadwaita';
-@import '../../sass/gtk/drawing';
+@import '../../sass/gtk/drawing-4.0';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
diff --git a/src/main/gtk-4.0/gtk-Light.scss b/src/main/gtk-4.0/gtk-Light.scss
index 2bb1c77b..e99bd16b 100644
--- a/src/main/gtk-4.0/gtk-Light.scss
+++ b/src/main/gtk-4.0/gtk-Light.scss
@@ -3,7 +3,7 @@ $variant: 'light';
 @import '../../sass/variables';
 @import '../../sass/colors';
 @import '../../sass/gtk/colors-libadwaita';
-@import '../../sass/gtk/drawing';
+@import '../../sass/gtk/drawing-4.0';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss
index 0e7df707..85fe89ac 100644
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@@ -136,7 +136,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   .calendar-day,
   .calendar-day-base {
     @extend %numeric;
-    // @extend %smaller;
+    @extend %smaller;
     text-align: center;
     width: if($font_size == 'normal', 2.8em, 2.4em);
     height: if($font_size == 'normal', 2.8em, 2.4em);
diff --git a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
index cfb934a0..1d268d42 100644
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@@ -65,7 +65,6 @@
       min-height: 40px;
       padding: 0 16px;
       margin: 0;
-      margin-right: 6px;
       border: none !important;
       border-radius: $modal_radius - $base_padding * 2;
       font-weight: bold;
@@ -79,7 +78,6 @@
 
       &:last-child {
         @extend %last_dialog_button;
-        margin-right: 0;
       }
     }
   }
diff --git a/src/sass/gnome-shell/widgets-47-0/_switches.scss b/src/sass/gnome-shell/widgets-47-0/_switches.scss
index 3c99ef12..cfb25542 100644
--- a/src/sass/gnome-shell/widgets-47-0/_switches.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_switches.scss
@@ -3,6 +3,7 @@
 .toggle-switch {
   width: 40px;
   height: 24px;
+  border-radius: $circular_radius;
   background-gradient-direction: vertical;
   background-gradient-start: rgba($fg_color, 0.25);
   background-gradient-end: rgba($fg_color, 0.35);
@@ -23,6 +24,7 @@
     width: 22px;
     height: 22px;
     background: white;
+    border-radius: $circular_radius;
     box-shadow: 0 2px 4px transparentize(black, .9);
     transition-duration: 100ms;
   }
diff --git a/src/sass/gtk/_colors-other.scss b/src/sass/gtk/_colors-other.scss
new file mode 100644
index 00000000..9348204d
--- /dev/null
+++ b/src/sass/gtk/_colors-other.scss
@@ -0,0 +1,122 @@
+//WM
+$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
+$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
+
+@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
+@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
+
+@define-color wm_bg #{"" + opacify($header_bg, 1)};
+@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
+
+@define-color wm_border_focused #{"" + $wm_borders_focused};
+@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
+
+@define-color wm_highlight alpha(#{white}, 0.12);
+@define-color wm_shadow alpha(#{black}, 0.75);
+
+//WM Buttons
+
+// Close
+@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
+@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
+@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
+
+@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
+
+// Minimize, Maximize
+@define-color wm_button_hover_bg #{"" + $bg_color};
+@define-color wm_button_active_bg #{"" + $bg_color};
+
+@define-color wm_button_hover_border #{"" + $solid_borders_color};
+
+@define-color wm_icon_bg #{"" + $alt_fg_color};
+@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
+@define-color wm_icon_hover_bg #{"" + $fg_color};
+@define-color wm_icon_active_bg #{"" + $fg_color};
+
+// Titlebar
+@define-color titlebar_gradient_a #{"" + $header_bg};
+@define-color titlebar_gradient_b #{"" + $header_bg};
+
+//
+// Budgie-desktop specific indicator colours
+//
+
+// unfocused window 'dot(s)'
+@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
+// focused window 'line'
+@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
+
+// group-ed and unfocused window 'line(s)'
+@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
+
+// attention 'dot'
+// FIXME: we can't fill whole widget backgrounds with our suggestion colour
+//        because of lacking specific style-class on 'needs_attention' state,
+//        so use warning orange dot instead.
+@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
+
+//
+// Color Palette Definitions for compatibility with Granite.
+//
+
+//* Strawberry *
+@define-color STRAWBERRY_100 #{#FF9262};
+@define-color STRAWBERRY_300 #{#FF793E};
+@define-color STRAWBERRY_500 #{#F15D22};
+@define-color STRAWBERRY_700 #{#CF3B00};
+@define-color STRAWBERRY_900 #{#AC1800};
+//* Orange *
+@define-color ORANGE_100 #{#FFDB91};
+@define-color ORANGE_300 #{#FFCA40};
+@define-color ORANGE_500 #{#FAA41A};
+@define-color ORANGE_700 #{#DE8800};
+@define-color ORANGE_900 #{#C26C00};
+//* Banana *
+@define-color BANANA_100 #{#FFFFA8};
+@define-color BANANA_300 #{#FFFA7D};
+@define-color BANANA_500 #{#FFCE51};
+@define-color BANANA_700 #{#D1A023};
+@define-color BANANA_900 #{#A27100};
+//* Lime *
+@define-color LIME_100 #{#A2F3BE};
+@define-color LIME_300 #{#8ADBA6};
+@define-color LIME_500 #{#73C48F};
+@define-color LIME_700 #{#479863};
+@define-color LIME_900 #{#1C6D38};
+//* Blueberry *
+@define-color BLUEBERRY_100 #{#94A6FF};
+@define-color BLUEBERRY_300 #{#6A7CE0};
+@define-color BLUEBERRY_500 #{#3F51B5};
+@define-color BLUEBERRY_700 #{#213397};
+@define-color BLUEBERRY_900 #{#031579};
+//* Grape *
+@define-color GRAPE_100 #{#D25DE6};
+@define-color GRAPE_300 #{#B84ACB};
+@define-color GRAPE_500 #{#9C27B0};
+@define-color GRAPE_700 #{#830E97};
+@define-color GRAPE_900 #{#6A007E};
+//* Cocoa *
+@define-color COCOA_100 #{#9F9792};
+@define-color COCOA_300 #{#7B736E};
+@define-color COCOA_500 #{#574F4A};
+@define-color COCOA_700 #{#463E39};
+@define-color COCOA_900 #{#342C27};
+//* Silver *
+@define-color SILVER_100 #{#EEE};
+@define-color SILVER_300 #{#CCC};
+@define-color SILVER_500 #{#AAA};
+@define-color SILVER_700 #{#888};
+@define-color SILVER_900 #{#666};
+//* Slate *
+@define-color SLATE_100 #{#888};
+@define-color SLATE_300 #{#666};
+@define-color SLATE_500 #{#444};
+@define-color SLATE_700 #{#222};
+@define-color SLATE_900 #{#111};
+//* Black *
+@define-color BLACK_100 #{#474341};
+@define-color BLACK_300 #{#403C3A};
+@define-color BLACK_500 #{#393634};
+@define-color BLACK_700 #{#33302F};
+@define-color BLACK_900 #{#2B2928};
diff --git a/src/sass/gtk/_colors-public.scss b/src/sass/gtk/_colors-public.scss
index 80ab4fa2..70efd48a 100644
--- a/src/sass/gtk/_colors-public.scss
+++ b/src/sass/gtk/_colors-public.scss
@@ -37,131 +37,3 @@ $theme_text: currentColor;
 
 /* Very contrasty background for text views (@theme_text_color foreground) */
 @define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
-
-//WM
-
-$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
-$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
-
-@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
-@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
-
-@define-color wm_bg #{"" + opacify($header_bg, 1)};
-@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
-
-@define-color wm_border_focused #{"" + $wm_borders_focused};
-@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
-
-@define-color wm_highlight alpha(#{white}, 0.12);
-@define-color wm_shadow alpha(#{black}, 0.75);
-
-//WM Buttons
-
-// Close
-@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
-@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
-@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
-
-@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
-
-// Minimize, Maximize
-@define-color wm_button_hover_bg #{"" + $bg_color};
-@define-color wm_button_active_bg #{"" + $bg_color};
-
-@define-color wm_button_hover_border #{"" + $solid_borders_color};
-
-@define-color wm_icon_bg #{"" + $alt_fg_color};
-@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
-@define-color wm_icon_hover_bg #{"" + $fg_color};
-@define-color wm_icon_active_bg #{"" + $fg_color};
-
-// Titlebar
-@define-color titlebar_gradient_a #{"" + $header_bg};
-@define-color titlebar_gradient_b #{"" + $header_bg};
-
-//
-// Budgie-desktop specific indicator colours
-//
-
-// unfocused window 'dot(s)'
-@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
-// focused window 'line'
-@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
-
-// group-ed and unfocused window 'line(s)'
-@if $gnome_version == 'old' {
-  @define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
-} @else {
-  @define-color budgie_tasklist_indicator_color_active_window #{"" + color-mix(in srgb, $selected_bg_color 35%, $header_bg)};
-}
-
-// attention 'dot'
-// FIXME: we can't fill whole widget backgrounds with our suggestion colour
-//        because of lacking specific style-class on 'needs_attention' state,
-//        so use warning orange dot instead.
-@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
-
-//
-// Color Palette Definitions for compatibility with Granite.
-//
-
-//* Strawberry *
-@define-color STRAWBERRY_100 #{#FF9262};
-@define-color STRAWBERRY_300 #{#FF793E};
-@define-color STRAWBERRY_500 #{#F15D22};
-@define-color STRAWBERRY_700 #{#CF3B00};
-@define-color STRAWBERRY_900 #{#AC1800};
-//* Orange *
-@define-color ORANGE_100 #{#FFDB91};
-@define-color ORANGE_300 #{#FFCA40};
-@define-color ORANGE_500 #{#FAA41A};
-@define-color ORANGE_700 #{#DE8800};
-@define-color ORANGE_900 #{#C26C00};
-//* Banana *
-@define-color BANANA_100 #{#FFFFA8};
-@define-color BANANA_300 #{#FFFA7D};
-@define-color BANANA_500 #{#FFCE51};
-@define-color BANANA_700 #{#D1A023};
-@define-color BANANA_900 #{#A27100};
-//* Lime *
-@define-color LIME_100 #{#A2F3BE};
-@define-color LIME_300 #{#8ADBA6};
-@define-color LIME_500 #{#73C48F};
-@define-color LIME_700 #{#479863};
-@define-color LIME_900 #{#1C6D38};
-//* Blueberry *
-@define-color BLUEBERRY_100 #{#94A6FF};
-@define-color BLUEBERRY_300 #{#6A7CE0};
-@define-color BLUEBERRY_500 #{#3F51B5};
-@define-color BLUEBERRY_700 #{#213397};
-@define-color BLUEBERRY_900 #{#031579};
-//* Grape *
-@define-color GRAPE_100 #{#D25DE6};
-@define-color GRAPE_300 #{#B84ACB};
-@define-color GRAPE_500 #{#9C27B0};
-@define-color GRAPE_700 #{#830E97};
-@define-color GRAPE_900 #{#6A007E};
-//* Cocoa *
-@define-color COCOA_100 #{#9F9792};
-@define-color COCOA_300 #{#7B736E};
-@define-color COCOA_500 #{#574F4A};
-@define-color COCOA_700 #{#463E39};
-@define-color COCOA_900 #{#342C27};
-//* Silver *
-@define-color SILVER_100 #{#EEE};
-@define-color SILVER_300 #{#CCC};
-@define-color SILVER_500 #{#AAA};
-@define-color SILVER_700 #{#888};
-@define-color SILVER_900 #{#666};
-//* Slate *
-@define-color SLATE_100 #{#888};
-@define-color SLATE_300 #{#666};
-@define-color SLATE_500 #{#444};
-@define-color SLATE_700 #{#222};
-@define-color SLATE_900 #{#111};
-//* Black *
-@define-color BLACK_100 #{#474341};
-@define-color BLACK_300 #{#403C3A};
-@define-color BLACK_500 #{#393634};
-@define-color BLACK_700 #{#33302F};
-@define-color BLACK_900 #{#2B2928};
diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss
index d9ff850c..4e075786 100644
--- a/src/sass/gtk/_common-3.0.scss
+++ b/src/sass/gtk/_common-3.0.scss
@@ -1531,7 +1531,7 @@ headerbar {
     font-size: smaller;
     padding-left: $container_padding * 2;
     padding-right: $container_padding * 2;
-    margin-top: -3px;
+    // margin-top: -3px;
     @extend %dim-label;
   }
 
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index c7b8f456..82e504d0 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -1548,6 +1548,7 @@ button.link {
 //
 spinbutton {
   background: none;
+  min-height: $small_size;
 
   &:drop(active) { box-shadow: none; }
 
@@ -1599,9 +1600,12 @@ spinbutton {
       padding-top: 2px;
       padding-bottom: 2px;
       min-width: $menuitem_size;
+      min-height: $small_size - 4px;
     }
 
-    > button, > text { @extend %linked; min-height: $small_size; }
+    > button { min-height: $small_size; }
+
+    > button, > text { @extend %linked; }
 
     &:dir(ltr) > text,
     &:dir(rtl) > button.up { border-radius: $bt_radius 0 0 $bt_radius; }
@@ -4024,10 +4028,10 @@ scrolledwindow {
   // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
   // This draws a box on top of the content, the size changes programmatically.
   > overshoot {
-    &.top { @include overshoot_alt(top); }
-    &.bottom { @include overshoot_alt(bottom); }
-    &.left { @include overshoot_alt(left); }
-    &.right { @include overshoot_alt(right); }
+    &.top { @include overshoot(top); }
+    &.bottom { @include overshoot(bottom); }
+    &.left { @include overshoot(left); }
+    &.right { @include overshoot(right); }
   }
 
   // Overflow indication, works similarly to the overshoot, the size if fixed tho.
diff --git a/src/sass/gtk/_drawing-3.0.scss b/src/sass/gtk/_drawing-3.0.scss
new file mode 100644
index 00000000..833eda5e
--- /dev/null
+++ b/src/sass/gtk/_drawing-3.0.scss
@@ -0,0 +1,494 @@
+
+// Solid color image
+@function _solid($c) {
+  @return linear-gradient(to bottom, $c, $c);
+}
+
+// Entries
+
+@mixin entry($t) {
+//
+// Entries drawing function
+//
+// $t: entry type
+//
+
+  @if $t==normal {
+  //
+  // normal entry
+  //
+    color: $text_color;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 2px transparent;
+  }
+
+  @if $t==hover {
+  //
+  // hover entry
+  //
+    color: $text_color;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
+    transition-duration: $shorter_duration * 2;
+  }
+
+  @if $t==focus {
+  //
+  // focused entry
+  //
+    color: $text_color;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 2px $entry_highlight;
+    transition-duration: $longer_duration * 2;
+  }
+
+  @if $t==insensitive {
+  //
+  // insensitive entry
+  //
+    color: $disabled_fg_color;
+    background-color: rgba($entry_bg, 0.02);
+  }
+
+  @if $t==header-normal {
+  //
+  // normal header-bar entry
+  //
+    color: $header_fg;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 2px transparent;
+
+    image, image:hover { color: inherit; }
+  }
+
+  @if $t==header-hover {
+  //
+  // header-hover entry
+  //
+    color: $header_fg;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
+    transition-duration: $shorter_duration * 2;
+  }
+
+  @if $t==header-focus {
+  //
+  // focused header-bar entry
+  //
+    // border-color: $selection_mode_bg;
+    background-image: none;
+    background-color: $entry_bg;
+    box-shadow: inset 0 0 0 2px $entry_highlight;
+  }
+
+  @if $t==header-insensitive {
+  //
+  // insensitive header-bar entry
+  //
+    color: rgba($header_fg, 0.35);
+    background-color: rgba($entry_bg, 0.02);
+  }
+
+  @else if $t==osd {
+  //
+  // normal osd entry
+  //
+    color: $osd_fg_color;
+    border-color: $osd_entry_border;
+    background-color: $osd_entry_bg;
+
+    image, image:hover { color: inherit; }
+  }
+
+  @else if $t==osd-focus {
+  //
+  // active osd entry
+  //
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    border-color: darken($selection_mode_bg, 5%);
+  }
+
+  @else if $t==osd-insensitive {
+  //
+  // insensitive osd entry
+  //
+    color: $osd_disabled_fg_color;
+    background-color: transparentize($osd_entry_bg, 0.15);
+  }
+}
+
+// Buttons
+
+@mixin button($t, $actionb_bg: red, $actionb_fg: green) {
+//
+// Button drawing function
+//
+// $t:    button type,
+// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons
+
+  @if $t==normal {
+  //
+  // normal button
+  //
+    color: $fg_color;
+    border-color: $button_borders;
+    background-color: $button_bg;
+    @if $variant=='light' { box-shadow: $shadow_3; }
+    @if $variant=='dark' {
+      box-shadow: inset 0 1px $button_highlight, inset 0 -1px rgba(white, 0.02), $shadow_3;
+    }
+  }
+
+  @else if $t==hover {
+  //
+  // hovered button
+  //
+    color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
+    border-color: $button_borders;
+    background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
+    @if $variant=='light' { box-shadow: none; }
+    @if $variant=='dark' {
+      box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
+    }
+  }
+
+  @else if $t==active {
+  //
+  // pushed button
+  //
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    border-color: if($variant=='light', $selected_bg_color, $dark_borders_color);
+    @if $variant=='light' { box-shadow: none; }
+  }
+
+  @else if $t==insensitive {
+  //
+  // insensitive button
+  //
+    label, & { color: $disabled_fg_color; }
+
+    border-color: if($variant == 'light', $button_border, $dark_borders_color);
+    background-color: rgba($button_bg, 0.55);
+    box-shadow: none;
+  }
+
+  @else if $t==insensitive-active {
+  //
+  // insensitive pushed button
+  //
+    label, & { color: transparentize($selected_fg_color, 0.45); }
+
+    border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
+    background-color: rgba($selected_bg_color, 0.45);
+    @if $variant=='light' { box-shadow: none; }
+
+    opacity: 0.6;
+  }
+
+  @if $t==flat-normal {
+  //
+  // normal button
+  //
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    background-clip: if($variant=='light', border-box, padding-box);
+  }
+
+  @else if $t==flat-hover {
+  //
+  // hovered button
+  //
+    color: darken($fg_color, 10%);
+    background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
+    background-image: none;
+    box-shadow: none;
+    // border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
+  }
+
+  @else if $t==flat-active {
+  //
+  // pushed button
+  //
+    background-image: none;
+    color: $selected_fg_color;
+    background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
+  }
+
+  @else if $t==flat-checked {
+  //
+  // pushed button
+  //
+    background-image: none;
+    color: $selected_fg_color;
+    background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
+  }
+
+  @else if $t==flat-insensitive {
+  //
+  // insensitive button
+  //
+    label, & { color: $disabled_fg_color; }
+
+    background-color: transparent;
+  }
+
+  @else if $t==flat-insensitive-active {
+  //
+  // insensitive pushed button
+  //
+    label, & { color: transparentize($selected_fg_color, 0.35); }
+
+    background-color: if($variant=='light', rgba(black, 0.3), rgba(white, 0.15));
+    opacity: 0.6;
+  }
+
+  @if $t==header-normal {
+  //
+  // normal header-bar button
+  //
+    color: $header_fg;
+    background-color: transparent;
+    background-image: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  @else if $t==header-hover {
+  //
+  // hovered header-bar button
+  //
+    color: darken($header_fg, 2%);
+    background-color: rgba($header_fg, 0.1);
+    background-image: none;
+    box-shadow: none;
+  }
+
+  @else if $t==header-active {
+  //
+  // pushed header-bar button
+  //
+    color: $header_fg;
+    background-color: rgba($header_fg, 0.25);
+    background-image: none;
+    box-shadow: none;
+  }
+
+  @else if $t==header-checked {
+  //
+  // pushed header-bar button
+  //
+    color: $header_fg;
+    background-color: rgba($header_fg, 0.12);
+    background-image: none;
+    box-shadow: none;
+  }
+
+  @else if $t==header-insensitive {
+  //
+  // insensitive header-bar button
+  //
+    label, & { color: rgba($header_fg, 0.35); }
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  @else if $t==header-insensitive-active {
+  //
+  // header-bar insensitive pushed button
+  //
+    label, & { color: rgba($header_fg, 0.35); }
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  @else if $t==osd {
+  //
+  // normal osd button
+  //
+    color: $osd_fg_color;
+    border-color: $osd_button_border;
+    background-color: rgba(white, 0.08);
+    box-shadow: none;
+  }
+
+  @else if $t==osd-hover {
+  //
+  // active osd button
+  //
+    color: $osd_fg_color;
+    border-color: $osd_button_border;
+    background-color: rgba(white, 0.16);
+    box-shadow: none;
+  }
+
+  @else if $t==osd-active {
+  //
+  // active osd button
+  //
+    color: $selected_fg_color;
+    border-color: $osd_button_border;
+    background-color: rgba(white, 0.25);
+    background-image: none;
+    box-shadow: none;
+    background-clip: padding-box;
+  }
+
+  @else if $t==osd-insensitive {
+  //
+  // insensitive osd button
+  //
+    color: $osd_disabled_fg_color;
+    border-color: $osd_button_border;
+    background-color: rgba(white, 0.03);
+    box-shadow: none;
+  }
+
+  @else if $t==suggested_destructive {
+  //
+  // suggested or destructive action buttons
+  //
+    @if $variant == 'light' { background-clip: border-box; }
+
+    color: $actionb_fg;
+    background-color: $actionb_bg;
+    background-image: none;
+    box-shadow: if($variant=='light', none, (inset 0 1px rgba(white, 0.15), inset 0 -1px rgba(white, 0.03)));
+    border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
+  }
+
+  @else if $t==undecorated {
+  //
+  // reset
+  //
+    border-color: transparent;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+  }
+}
+
+//
+// Overshoot
+//
+@mixin overshoot($p, $t:normal, $c:$fg_color) {
+//
+// overshoot
+//
+// $p: position
+// $t: type
+// $c: base color
+//
+// possible $p values:
+// top, bottom, right, left
+//
+// possible $t values:
+// normal, backdrop
+//
+
+  $_small_gradient_length: 5%;
+  $_big_gradient_length: 100%;
+
+  $_position: center top;
+  $_small_gradient_size: 100% $_small_gradient_length;
+  $_big_gradient_size: 100% $_big_gradient_length;
+
+  @if $p==bottom {
+    $_position: center bottom;
+    $_linear_gradient_direction: to top;
+  }
+
+  @else if $p==right {
+    $_position: right center;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  @else if $p==left {
+    $_position: left center;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  $_small_gradient_color: $c;
+  $_big_gradient_color: $c;
+
+  @if $c==$fg_color {
+    $_small_gradient_color: $borders_color;
+    $_big_gradient_color: $text_color;
+
+    @if $t==backdrop { $_small_gradient_color: $fill_color; }
+  }
+
+  $_small_gradient: -gtk-gradient(radial,
+                                  $_position, 0,
+                                  $_position, 0.5,
+                                  to($_small_gradient_color),
+                                  to(rgba($_small_gradient_color, 0)));
+
+  $_big_gradient: -gtk-gradient(radial,
+                                $_position, 0,
+                                $_position, 0.6,
+                                from(rgba($_big_gradient_color, 0.07)),
+                                to(rgba($_big_gradient_color, 0)));
+
+  @if $t==normal {
+    background-image: $_small_gradient, $_big_gradient;
+    background-size: $_small_gradient_size, $_big_gradient_size;
+  }
+
+  @else if $t==backdrop {
+    background-image: $_small_gradient;
+    background-size: $_small_gradient_size;
+  }
+
+  background-repeat: no-repeat;
+  background-position: $_position;
+
+  background-color: transparent; // reset some properties to be sure to not inherit them somehow
+  border: none;                  //
+  box-shadow: none;              //
+}
+
+@mixin undershoot($p, $c: $wm_shadow, $neighbor: false, $style: default) {
+//
+// undershoot
+//
+// $p: position
+// $c: shade color
+// $neighbor: use ~ instead of >
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_border_pos: '';
+  $_direction: '';
+  $_selector: if($neighbor, '~', '>');
+
+  @if $p==top {
+    $_direction: bottom;
+    $_border_pos: 0 1px;
+  } @else if $p==bottom {
+    $_direction: top;
+    $_border_pos: 0 -1px;
+  } @else if $p==left {
+    $_direction: right;
+    $_border_pos: 1px 0;
+  } @else if $p==right {
+    $_direction: left;
+    $_border_pos: -1px 0;
+  } @else {
+    @error "Unknown position #{$p}"
+  }
+
+  #{$_selector} undershoot.#{$p} {
+    box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
+    background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
+  }
+}
+
diff --git a/src/sass/gtk/_drawing.scss b/src/sass/gtk/_drawing-4.0.scss
similarity index 84%
rename from src/sass/gtk/_drawing.scss
rename to src/sass/gtk/_drawing-4.0.scss
index 561a9dc4..f9b3e008 100644
--- a/src/sass/gtk/_drawing.scss
+++ b/src/sass/gtk/_drawing-4.0.scss
@@ -384,87 +384,9 @@
 
 //
 // Overshoot
-//
-@mixin overshoot($p, $t:normal, $c:$fg_color) {
-//
-// overshoot
-//
-// $p: position
-// $t: type
-// $c: base color
-//
-// possible $p values:
-// top, bottom, right, left
-//
-// possible $t values:
-// normal, backdrop
 //
 
-  $_small_gradient_length: 5%;
-  $_big_gradient_length: 100%;
-
-  $_position: center top;
-  $_small_gradient_size: 100% $_small_gradient_length;
-  $_big_gradient_size: 100% $_big_gradient_length;
-
-  @if $p==bottom {
-    $_position: center bottom;
-    $_linear_gradient_direction: to top;
-  }
-
-  @else if $p==right {
-    $_position: right center;
-    $_small_gradient_size: $_small_gradient_length 100%;
-    $_big_gradient_size: $_big_gradient_length 100%;
-  }
-
-  @else if $p==left {
-    $_position: left center;
-    $_small_gradient_size: $_small_gradient_length 100%;
-    $_big_gradient_size: $_big_gradient_length 100%;
-  }
-
-  $_small_gradient_color: $c;
-  $_big_gradient_color: $c;
-
-  @if $c==$fg_color {
-    $_small_gradient_color: $borders_color;
-    $_big_gradient_color: $text_color;
-
-    @if $t==backdrop { $_small_gradient_color: $fill_color; }
-  }
-
-  $_small_gradient: -gtk-gradient(radial,
-                                  $_position, 0,
-                                  $_position, 0.5,
-                                  to($_small_gradient_color),
-                                  to(rgba($_small_gradient_color, 0)));
-
-  $_big_gradient: -gtk-gradient(radial,
-                                $_position, 0,
-                                $_position, 0.6,
-                                from(rgba($_big_gradient_color, 0.07)),
-                                to(rgba($_big_gradient_color, 0)));
-
-  @if $t==normal {
-    background-image: $_small_gradient, $_big_gradient;
-    background-size: $_small_gradient_size, $_big_gradient_size;
-  }
-
-  @else if $t==backdrop {
-    background-image: $_small_gradient;
-    background-size: $_small_gradient_size;
-  }
-
-  background-repeat: no-repeat;
-  background-position: $_position;
-
-  background-color: transparent; // reset some properties to be sure to not inherit them somehow
-  border: none;                  //
-  box-shadow: none;              //
-}
-
-@mixin overshoot_alt($p) {
+@mixin overshoot($p) {
 //
 // overshoot
 //
diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss
index b920a3ce..0edc3a6a 100644
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/src/sass/gtk/apps/_libadwaita.scss
@@ -116,6 +116,10 @@ preferencesgroup > box {
   > box.single-line {
     min-height: 34px;
   }
+
+  grid > box > switch {
+    margin: 14px 0;
+  }
 }
 
 //

From bef68bd6e39d786b9478e336a6fec12e894f9900 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Fri, 8 Nov 2024 15:40:25 +0800
Subject: [PATCH 08/22] update #1167

---
 src/sass/gnome-shell/common/_calendar.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss
index 85fe89ac..b5631253 100644
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@@ -93,8 +93,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   border: none;
   box-shadow: none !important;
   background-color: transparent;
-  padding: $base_padding !important;
-  margin: 0 !important;
+  padding: $base_padding;
+  margin: 0 $base_padding;
   text-shadow: none;
   // border-radius: $base_border_radius;
 
@@ -138,8 +138,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
     @extend %numeric;
     @extend %smaller;
     text-align: center;
-    width: if($font_size == 'normal', 2.8em, 2.4em);
-    height: if($font_size == 'normal', 2.8em, 2.4em);
+    width: if($font_size == 'normal', 3em, 2.8em);
+    height: if($font_size == 'normal', 3em, 2.8em);
     padding: 0;
     margin: 2px;
     border-radius: $circular_radius;

From 91b28c11b7f8de58a2ed727ca29af765bb4c2c91 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Fri, 8 Nov 2024 15:43:24 +0800
Subject: [PATCH 09/22] update

---
 src/sass/gnome-shell/common/_calendar.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss
index b5631253..19a8622e 100644
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@@ -360,7 +360,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 // Weather
 .weather-button {
   .weather-box {
-    spacing: $base_spacing + $base_margin;
+    spacing: $base_spacing;
   }
 
   .weather-header-box {
@@ -384,15 +384,16 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 
   .weather-forecast-time {
     @extend %numeric;
-    @include fontsize(10pt);
+    @extend %smaller;
     color: $alt_fg_color;
     font-weight: normal;
-    padding-top: 0.2em;
-    padding-bottom: 0.4em;
+    padding-top: $base_padding;
+    padding-bottom: $base_padding;
   }
 
   .weather-forecast-icon {
     icon-size: 32px;
+    margin-bottom: $base_margin;
   }
 
   .weather-forecast-temp {

From 1f605c23397664d3e9d8f7ffb7e659b7f91027f5 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Mon, 18 Nov 2024 00:50:20 +0800
Subject: [PATCH 10/22] update

---
 src/other/firefox/Monterey/parts/tabsbar.css |   4 +
 src/sass/gtk/_common-4.0.scss                |  95 ++++++----------
 src/sass/gtk/apps/_gnome-40.0.scss           |   7 +-
 src/sass/gtk/apps/_libadwaita.scss           | 111 ++++++++++++++++++-
 4 files changed, 146 insertions(+), 71 deletions(-)

diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css
index cdbe3e98..c421aed9 100644
--- a/src/other/firefox/Monterey/parts/tabsbar.css
+++ b/src/other/firefox/Monterey/parts/tabsbar.css
@@ -7,6 +7,10 @@
 	-moz-window-dragging: drag;
 }
 
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
+	margin-inline-start: 6px !important;
+}
+
 tab > stack {
 	margin: 0 3px !important;
 }
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index 82e504d0..e63ee4f0 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -1889,15 +1889,6 @@ searchbar {
   > revealer > box {
     padding: $container_padding;
     border-spacing: $container_padding;
-
-    entry, button { margin: 0; }
-
-   .close {
-      min-width: 18px;
-      min-height: 18px;
-      padding: 4px;
-      border-radius: 50%;
-    }
   }
 
   &:not(.inline) > revealer > box {
@@ -1910,8 +1901,11 @@ searchbar {
   }
 
   // Close button on searchbar
-  button.flat {
-    @extend %circular_button;
+  button.flat, .close {
+    min-width: 18px;
+    min-height: 18px;
+    padding: 4px;
+    border-radius: 50%;
   }
 
   .top-bar &:not(.inline) > revealer > box,
@@ -1928,11 +1922,34 @@ actionbar > revealer > box {
   box-shadow: none;
   color: $text_color;
 
-  entry, button { margin: 0; }
-
   &, > box.start, > box.end {
     border-spacing: $container_padding;
   }
+
+  &:backdrop {
+    background-color: $bg_color;
+
+    > * {
+      filter: opacity(.5);
+    }
+  }
+}
+
+%actionbar-inline > revealer > box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-top: $container_padding;
+
+  &:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > * {
+      filter: none;
+      transition: none;
+    }
+  }
 }
 
 //
@@ -2037,11 +2054,11 @@ actionbar > revealer > box {
 headerbar {
   min-height: $headerbar_size;
   padding: 0;
+  margin: 0;
   color: $header_fg;
   background-color: $header_bg;
   border-bottom: 1px solid $header_border;
   box-shadow: none;
-  margin: 0;
 
   &:backdrop {
     opacity: 1;
@@ -2058,16 +2075,6 @@ headerbar {
       background: none;
     }
 
-    > windowhandle > box {
-      padding: 0 8px;
-  
-      &,
-      > box.start,
-      > box.end {
-        border-spacing: $container_padding;
-      }
-    }
-
     windowcontrols {
       padding: 0 $container_padding / 2;
     }
@@ -2085,7 +2092,7 @@ headerbar {
   }
 
   > windowhandle > box {
-    padding: 0 8px;
+    padding: 8px;
 
     &,
     > box.start,
@@ -2096,6 +2103,7 @@ headerbar {
 
   entry {
     @extend %headerbar_entrys;
+    border-spacing: 4px;
   }
 
   button {
@@ -2108,33 +2116,6 @@ headerbar {
     }
   }
 
-  entry,
-  spinbutton,
-  button,
-  menubutton,
-  splitbutton,
-  stackswitcher,
-  separator:not(.sidebar) {
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
-
-  menubutton > button,
-  spinbutton > button,
-  splitbutton > button,
-  splitbutton > menubutton,
-  entry > menubutton,
-  popover entry,
-  popover spinbutton,
-  popover button,
-  popover menubutton,
-  popover splitbutton,
-  popover stackswitcher,
-  popover separator:not(.sidebar) {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
   // Reset linked buttons
   .linked.raised > & {
     // min-width: 16px;
@@ -2146,7 +2127,6 @@ headerbar {
   }
 
   stackswitcher.linked:not(.vertical) > button {
-    // min-height: $menuitem_size - 8px;
     min-width: $menuitem_size - 4px;
     border-radius: $bt_radius;
   }
@@ -2154,18 +2134,14 @@ headerbar {
   // Reset linking entrys
   .linked:not(.vertical) > entry {
     @include entry(header-normal);
-    // margin: 8px ($container_padding / 2 + 1px);
     padding: 0 $container_padding * 2;
-    // border-radius: $bt_radius;
     border: none;
 
     &:focus {
-      // border-radius: $bt_radius;
       @include entry(header-focus);
     }
 
     &:disabled {
-      // border-radius: $bt_radius;
       @include entry(header-insensitive);
     }
 
@@ -2178,8 +2154,6 @@ headerbar {
     padding: 0;
 
     > button {
-      // min-height: $menuitem_size - 8px;
-      margin: 0;
       font-weight: 500;
 
       &:not(:first-child) {
@@ -2302,7 +2276,7 @@ headerbar {
 
   // Titlebuttons
   windowcontrols {
-    border-spacing: 6px;
+    border-spacing: $container_padding;
     padding: 0 10px;
   
     &:not(.empty) {
@@ -2332,7 +2306,6 @@ headerbar {
       &.close, &.maximize, &.minimize {
         min-width: 16px;
         min-height: 16px;
-        margin: 8px 0;
         padding: ($menuitem_size - 20px) / 2 0;
         background-position: center;
         background-repeat: no-repeat;
diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss
index 99dca378..6c27ce25 100644
--- a/src/sass/gtk/apps/_gnome-40.0.scss
+++ b/src/sass/gtk/apps/_gnome-40.0.scss
@@ -84,8 +84,6 @@ $flap_sidebar_size: 240px;
     }
   }
 
-  headerbar > windowhandle > box { padding: 0 10px; }
-
   flap.unfolded,
   .sidebar-pane {
     &, &:backdrop {
@@ -211,9 +209,8 @@ $flap_sidebar_size: 240px;
 }
 
 #NautilusQueryEditor { // search entry
-  padding: 0 $container_padding;
+  padding: 2px $container_padding;
   border-spacing: 0;
-  margin: 9px 0 8px 0;
 
   > image, > box, > text {
     margin: 0;
@@ -239,7 +236,7 @@ $flap_sidebar_size: 240px;
 #NautilusPathBar {
   background-color: $fill_color;
   border-radius: $bt_radius;
-  margin: 8px 0 8px $container_padding;
+  margin: 0 0 0 $container_padding;
 
   #NautilusPathButton {
     margin: 0 $container_padding / 2;
diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss
index 0edc3a6a..8f8f808b 100644
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/src/sass/gtk/apps/_libadwaita.scss
@@ -239,10 +239,6 @@ viewswitcher {
 
   &.wide {
     border-spacing: 0;
-
-    > button.toggle {
-      margin: 8px 0;
-    }
   }
 
   &.narrow > button.toggle {
@@ -361,7 +357,6 @@ headerbar > windowhandle > box viewswitcher {
     box-shadow: inset 0 0 0 1px $light_borders_color;
     border-radius: $bt_radius;
     padding: 0;
-    margin: 8px 0;
   
     > button.toggle {
       margin: 0;
@@ -855,6 +850,112 @@ dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitb
   }
 }
 
+//
+// AdwToolbarView
+//
+toolbarview {
+  > .top-bar,
+  > .bottom-bar {
+    searchbar,
+    actionbar {
+      > revealer > box {
+        background-color: transparent;
+        border: none;
+        box-shadow: none;
+      }
+    }
+
+    .toolbar  {
+      background-color: transparent;
+    }
+
+    .collapse-spacing {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      headerbar {
+        min-height: $headerbar_size;
+
+        > windowhandle > box {
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+
+        &.default-decoration {
+          min-height: $medium_size;
+
+          > windowhandle > box {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      searchbar,
+      actionbar {
+        > revealer > box {
+          padding-top: $container_padding;
+          padding-bottom: $container_padding;
+        }
+      }
+
+      .toolbar  {
+        padding-top: $container_padding;
+        padding-bottom: $container_padding;
+      }
+
+      tabbar {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    &.raised {
+      background-color: transparent;
+      color: $header_fg;
+
+      &:backdrop {
+        background-color: transparent;
+      }
+    }
+
+    &:backdrop > windowhandle {
+      filter: none;
+    }
+  }
+
+  > .bottom-bar {
+    padding: 0;
+    border-spacing: 0;
+    box-shadow: inset 0 1px $borders_color;
+    background-color: darken($bg_color, 3%);
+    color: $text_color;
+
+    &:backdrop {
+      background-color: $bg_color;
+      color: $disabled_fg_color;
+    }
+
+    actionbar { @extend %actionbar-inline; }
+  }
+
+  > .top-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
+  }
+
+  > .bottom-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
+  }
+}
+
 // ThemeSelector
 themeselector, // Gnome text editor
 panelthemeselector { // Gnome builder

From 1afceb0b311e8a425c5c12ee8b8ac1a79bbc6642 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Mon, 18 Nov 2024 00:52:58 +0800
Subject: [PATCH 11/22] update

---
 .../gnome-shell/widgets-47-0/_dialogs.scss    | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
index 1d268d42..0360926f 100644
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@@ -60,25 +60,26 @@
   .modal-dialog-button-box {
     padding-top: $base_padding;
     spacing: $base_padding;
+  }
 
-    .modal-dialog-button {
-      min-height: 40px;
-      padding: 0 16px;
-      margin: 0;
-      border: none !important;
-      border-radius: $modal_radius - $base_padding * 2;
-      font-weight: bold;
+  .modal-dialog-button,
+  .modal-dialog-linked-button {
+    min-height: 40px;
+    padding: 0 16px;
+    margin: 0;
+    border: none !important;
+    border-radius: $modal_radius - $base_padding * 2;
+    font-weight: bold;
 
-      @include button(normal);
-      &:hover { @include button(hover); }
-      &:active { @include button(active); }
-      &:checked { @include button(checked); }
-      &:insensitive { @include button(insensitive); }
-      &:focus { @include button(focus); }
+    @include button(normal);
+    &:hover { @include button(hover); }
+    &:active { @include button(active); }
+    &:checked { @include button(checked); }
+    &:insensitive { @include button(insensitive); }
+    &:focus { @include button(focus); }
 
-      &:last-child {
-        @extend %last_dialog_button;
-      }
+    &:last-child {
+      @extend %last_dialog_button;
     }
   }
 }

From 4ce80c209b68782ddcc44e80feff86bb72f7e9cf Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 24 Nov 2024 23:59:23 +0800
Subject: [PATCH 12/22] Fixed #1176

---
 README.md                            |  3 +++
 install.sh                           | 12 ++++++++----
 libs/lib-install.sh                  |  4 ++++
 src/sass/_gtk-base.scss              |  3 +++
 src/sass/gnome-shell/_common.scss    |  2 +-
 src/sass/gtk/_colors-libadwaita.scss |  2 +-
 6 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index b8c52cea..254be791 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,9 @@ OPTIONS:
   -l, --libadwaita 
    Install theme into gtk4.0 config for libadwaita. Default is dark version
 
+  -f, --fixed 
+   Install fixed accent color version. Default is adaptive version
+
   -HD, --highdefinition 
    Set to High Definition size. Default is laptop size
 
diff --git a/install.sh b/install.sh
index 54f7a2d9..0332eb56 100755
--- a/install.sh
+++ b/install.sh
@@ -35,6 +35,7 @@ usage() {
   helpify "-m, --monterey"                ""                                                  "  Set to MacOS Monterey style"                     ""
   helpify "-N, --nautilus"                "[$(IFS='|'; echo "${NAUTILUS_STYLE_VARIANTS[*]}")]" "  Set Nautilus style"                             "Default is BigSur-like style (stabled sidebar)"
   helpify "-l, --libadwaita"              ""                                                  "  Install theme into gtk4.0 config for libadwaita" "Default is dark version"
+  helpify "-f, --fixed"                   ""                                                  "  Install fixed accent color version"              "Default is adaptive version"
   helpify "-HD, --highdefinition"         ""                                                  "  Set to High Definition size"                     "Default is laptop size"
 
   helpify "--shell, --gnomeshell"         ""                                                  "  Tweaks for gnome-shell"                          "Options:"
@@ -129,6 +130,8 @@ while [[ $# -gt 0 ]]; do
       monterey="true"; shift ;;
     -l|--libadwaita)
       libadwaita="true"; shift ;;
+    -f|--fixed)
+      accent_type="fixed"; shift ;;
     -r|--remove|-u|-uninstall)
       uninstall='true'; shift ;;
     --silent-mode)
@@ -167,10 +170,11 @@ if [[ "${uninstall}" == 'true' ]]; then
   fi
 else
   if [[ "${interactive}" == 'true' ]]; then
-    show_panel_opacity_dialog; show_sidebar_size_dialog; show_nautilus_style_dialog
-    echo; prompt -w "DIALOG: '--size' and '--panel' parameters are ignored if exist."; echo
-  else
-    show_needed_dialogs
+    show_panel_opacity_dialog
+#    show_sidebar_size_dialog
+    show_nautilus_style_dialog
+#  else
+#    show_needed_dialogs
   fi
 
   prompt -w "Removing the old '${name}' themes...\n"
diff --git a/libs/lib-install.sh b/libs/lib-install.sh
index 7a33fea1..e8ccfedc 100755
--- a/libs/lib-install.sh
+++ b/libs/lib-install.sh
@@ -895,6 +895,10 @@ gtk_base() {
   if [[ "${GNOME_VERSION}" -ge '47-0' && "${libadwaita}" == 'true' ]]; then
     sed $SED_OPT "/\$gnome_version/s/old/new/"                                  "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
   fi
+
+  if [[ "${accent_type}" == 'fixed' ]]; then
+    sed $SED_OPT "/\$accent_type/s/default/fixed/"                              "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
+  fi
 }
 
 shell_base() {
diff --git a/src/sass/_gtk-base.scss b/src/sass/_gtk-base.scss
index 07e2226c..512f2bde 100644
--- a/src/sass/_gtk-base.scss
+++ b/src/sass/_gtk-base.scss
@@ -6,3 +6,6 @@ $scheme: 'standard';
 
 // Gnome version
 $gnome_version: 'old';
+
+// Accent type
+$accent_type: 'default';
diff --git a/src/sass/gnome-shell/_common.scss b/src/sass/gnome-shell/_common.scss
index 1d9576e5..bd29bcb7 100644
--- a/src/sass/gnome-shell/_common.scss
+++ b/src/sass/gnome-shell/_common.scss
@@ -23,7 +23,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-@if $gnome_version == 'new' {
+@if $gnome_version == 'new' and $accent_type == 'default' {
   $selected_bg_color: -st-accent-color;
   $primary_color: -st-accent-color;
 }
diff --git a/src/sass/gtk/_colors-libadwaita.scss b/src/sass/gtk/_colors-libadwaita.scss
index c9d27f8c..d6b75c6f 100644
--- a/src/sass/gtk/_colors-libadwaita.scss
+++ b/src/sass/gtk/_colors-libadwaita.scss
@@ -105,7 +105,7 @@ $dark_5: #000000;
 
 // The main accent color and the matching text value
 
-@if $gnome_version == 'old' {
+@if $gnome_version == 'old' or $accent_type == 'fixed' {
   @define-color accent_bg_color #{$primary_color};
   @define-color accent_fg_color #{$light_fg_color};
 }

From 0d4c85aa39bdaba06631cb5c614c88dfb62bbbbd Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Fri, 29 Nov 2024 19:12:15 +0800
Subject: [PATCH 13/22] Fixed #1180

---
 .../Monterey/parts/headerbar-urlbar.css       |  2 -
 src/other/firefox/Monterey/parts/tabsbar.css  |  6 +++
 .../Monterey/right_header_button_3.css        |  4 +-
 .../Monterey/right_header_button_4.css        |  4 +-
 .../Monterey/right_header_button_5.css        |  4 +-
 .../WhiteSur/parts/headerbar-urlbar.css       |  2 -
 src/other/firefox/WhiteSur/parts/tabsbar.css  |  1 +
 src/other/firefox/common/parts/csd.css        | 39 ++++++++++++++-----
 src/other/firefox/common/parts/headerbar.css  | 16 ++++----
 .../common/parts/titlebutton-dark-alt.css     | 29 +++++++++++++-
 .../firefox/common/parts/titlebutton-dark.css | 25 ++++++++++++
 .../common/parts/titlebutton-light-alt.css    | 32 ++++++++++++---
 .../common/parts/titlebutton-light.css        | 30 ++++++++++++--
 13 files changed, 156 insertions(+), 38 deletions(-)

diff --git a/src/other/firefox/Monterey/parts/headerbar-urlbar.css b/src/other/firefox/Monterey/parts/headerbar-urlbar.css
index e57379b4..ced6279c 100644
--- a/src/other/firefox/Monterey/parts/headerbar-urlbar.css
+++ b/src/other/firefox/Monterey/parts/headerbar-urlbar.css
@@ -45,8 +45,6 @@ toolbarspring {
 }
 
 #urlbar[breakout][breakout-extend] {
-	left: 0 !important;
-	top: 0 !important;
 	width: 360px !important;
 	z-index: 5 !important;
 	padding: 0 !important;
diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css
index c421aed9..925a2f9e 100644
--- a/src/other/firefox/Monterey/parts/tabsbar.css
+++ b/src/other/firefox/Monterey/parts/tabsbar.css
@@ -15,6 +15,12 @@ tab > stack {
 	margin: 0 3px !important;
 }
 
+/* Tabs bar height */
+#tabbrowser-tabs {
+	--tab-min-height: 32px !important;
+	--tabstrip-min-height: 32px !important;
+}
+
 .tabbrowser-tab,
 .tab-background {
 	border: none !important;
diff --git a/src/other/firefox/Monterey/right_header_button_3.css b/src/other/firefox/Monterey/right_header_button_3.css
index 762d01ce..0b182c9b 100644
--- a/src/other/firefox/Monterey/right_header_button_3.css
+++ b/src/other/firefox/Monterey/right_header_button_3.css
@@ -1,10 +1,10 @@
 #TabsToolbar, #urlbar-container {
-	margin-right: 14vw !important;
+	margin-right: 16vw !important;
 }
 
 /* Left window titlebuttons mode */
 @media (-moz-gtk-csd-reversed-placement) {
 	#TabsToolbar, #urlbar-container {
-		margin-right: 10vw !important;
+		margin-right: 12vw !important;
 	}
 }
diff --git a/src/other/firefox/Monterey/right_header_button_4.css b/src/other/firefox/Monterey/right_header_button_4.css
index 0b182c9b..f69712a6 100644
--- a/src/other/firefox/Monterey/right_header_button_4.css
+++ b/src/other/firefox/Monterey/right_header_button_4.css
@@ -1,10 +1,10 @@
 #TabsToolbar, #urlbar-container {
-	margin-right: 16vw !important;
+	margin-right: 18vw !important;
 }
 
 /* Left window titlebuttons mode */
 @media (-moz-gtk-csd-reversed-placement) {
 	#TabsToolbar, #urlbar-container {
-		margin-right: 12vw !important;
+		margin-right: 14vw !important;
 	}
 }
diff --git a/src/other/firefox/Monterey/right_header_button_5.css b/src/other/firefox/Monterey/right_header_button_5.css
index f69712a6..63ff3903 100644
--- a/src/other/firefox/Monterey/right_header_button_5.css
+++ b/src/other/firefox/Monterey/right_header_button_5.css
@@ -1,10 +1,10 @@
 #TabsToolbar, #urlbar-container {
-	margin-right: 18vw !important;
+	margin-right: 20vw !important;
 }
 
 /* Left window titlebuttons mode */
 @media (-moz-gtk-csd-reversed-placement) {
 	#TabsToolbar, #urlbar-container {
-		margin-right: 14vw !important;
+		margin-right: 16vw !important;
 	}
 }
diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
index de2b5181..23ddd5e7 100644
--- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
+++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
@@ -40,8 +40,6 @@ toolbarspring {
 }
 
 #urlbar[breakout][breakout-extend] {
-	left: 0 !important;
-	top: 0 !important;
 	width: 100% !important;
 	z-index: 5 !important;
 	padding: 0 !important;
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css
index 116c3ac6..dd530c0e 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar.css
@@ -9,6 +9,7 @@
 /* Tabs bar height */
 #tabbrowser-tabs {
 	--tab-min-height: 32px !important;
+	--tabstrip-min-height: 32px !important;
 }
 
 #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
diff --git a/src/other/firefox/common/parts/csd.css b/src/other/firefox/common/parts/csd.css
index e70e2881..baa3cf6b 100644
--- a/src/other/firefox/common/parts/csd.css
+++ b/src/other/firefox/common/parts/csd.css
@@ -5,8 +5,8 @@
 /* Headerbar top border corners rounded */
 :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) {
   #nav-bar {
-    border-top-left-radius: 12px !important;
-    border-top-right-radius: 12px !important;
+    border-top-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
+    border-top-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
     box-shadow: var(--gnome-headerbar-box-shadow) !important;
   }
 
@@ -21,16 +21,30 @@
     body::backdrop,
     dialog::backdrop {
       /* Use an uniform clip to allow WebRender to optimize it better */
-      border-radius: 12px !important;
+      border-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
     }
 
     window[role="dialog"] {
-      border-bottom-left-radius: 12px !important;
-      border-bottom-right-radius: 12px !important;
+      border-bottom-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
+      border-bottom-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
     }
   }
 }
 
+:root[tabsintitlebar] {
+	/* Always show nav bar window buttons*/
+	#nav-bar > .titlebar-buttonbox-container {
+		display: flex !important;
+	}
+
+	#toolbar-menubar, #TabsToolbar {
+		/* Always hide menu bar window buttons*/
+		& > .titlebar-buttonbox-container {
+			display: none !important;
+		}
+	}
+}
+
 /* Window buttons: at least 1 button */
 @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
 	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
@@ -58,6 +72,7 @@
 }
 
 /* Window buttons box */
+:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container,
 :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container,
 :root[tabsintitlebar] #titlebar-buttonbox-container,
 :root[tabsintitlebar][inFullscreen] #window-controls {
@@ -68,11 +83,13 @@
 	top: 0;
 	display: block !important;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-buttonbox,
 :root[tabsintitlebar] #titlebar .titlebar-buttonbox {
 	-moz-appearance: none !important;
 }
 
 /* Window buttons style */
+:root[tabsintitlebar] #nav-bar .titlebar-button,
 :root[tabsintitlebar] #titlebar .titlebar-button,
 :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
 	-moz-appearance: none !important;
@@ -82,7 +99,9 @@
 	margin: 16px 4px !important;
 	padding: 2px 0 !important;
 	width: 16px;
+	--inactive-titlebar-opacity: 1 !important;
 }
+:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-button,
 :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button,
 :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
 	height: 24px !important;
@@ -90,10 +109,10 @@
 	margin: 12px 4px !important;
 	padding: 0 !important;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-button .toolbarbutton-icon,
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-button .toolbarbutton-icon,
 :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon,
-:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon {
-	opacity: 0 !important;
-}
+:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon,
 :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon {
 	opacity: 0 !important;
@@ -103,7 +122,9 @@
 :root[tabsintitlebar][inFullscreen] #window-controls #close-button,
 :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button,
 :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close,
-:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min {
+:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min,
+:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-close,
+:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-min {
 	display: none !important;
 }
 
diff --git a/src/other/firefox/common/parts/headerbar.css b/src/other/firefox/common/parts/headerbar.css
index 55669c29..c3e64569 100644
--- a/src/other/firefox/common/parts/headerbar.css
+++ b/src/other/firefox/common/parts/headerbar.css
@@ -12,7 +12,7 @@
 }
 
 /* Headerbar buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton),
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button),
 toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 	border: none !important;
 	box-shadow: none !important;
@@ -27,7 +27,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 	transition: background 200ms;
 }
 
-:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button) {
+:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button) {
 	background: none !important;
 }
 
@@ -43,7 +43,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 }
 
 /* Hover headerbar buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([open]):not([disabled]):not([checked]):hover,
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([open]):not([disabled]):not([checked]):hover,
 #TabsToolbar .toolbarbutton-1:hover,
 #tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover {
 	outline: 0 !important;
@@ -51,16 +51,16 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 }
 
 /* Active headerbar buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]):not(#hack):active,
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[open],
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[checked],
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled]):not(#hack):active,
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[open],
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[checked],
 #TabsToolbar .toolbarbutton-1:active, #TabsToolbar .toolbarbutton-1[open],
 #tabs-newtab-button:active, #TabsToolbar #new-tab-button:active {
 	background: var(--gnome-headerbar-button-active-background) !important;
 }
 
 /* Disabled headerbar buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] {
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button)[disabled] {
 	background: transparent !important;
 	border-color: var(--gnome-button-disabled-border-color) !important;
 	box-shadow: none !important;
@@ -68,7 +68,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 }
 
 /* Inactive window buttons */
-#nav-bar toolbarbutton:not(#urlbar-zoom-button):-moz-window-inactive {
+#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):-moz-window-inactive {
 	background: var(--gnome-inactive-button-background) !important;
 	box-shadow: var(--gnome-inactive-button-box-shadow) !important;
 	border-color: var(--gnome-inactive-button-border-color) !important;
diff --git a/src/other/firefox/common/parts/titlebutton-dark-alt.css b/src/other/firefox/common/parts/titlebutton-dark-alt.css
index c27c7fe1..c4baaf4a 100644
--- a/src/other/firefox/common/parts/titlebutton-dark-alt.css
+++ b/src/other/firefox/common/parts/titlebutton-dark-alt.css
@@ -1,116 +1,141 @@
 @media (prefers-color-scheme: dark) {
+:root[tabsintitlebar] #nav-bar .titlebar-close,
 :root[tabsintitlebar] #titlebar .titlebar-close,
 :root[tabsintitlebar] #titlebar #titlebar-close {
 	background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max,
 :root[tabsintitlebar] #titlebar .titlebar-max,
 :root[tabsintitlebar] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min,
 :root[tabsintitlebar] #titlebar .titlebar-min,
 :root[tabsintitlebar] #titlebar #titlebar-min {
 	background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore,
 :root[tabsintitlebar] #titlebar .titlebar-restore,
 :root[tabsintitlebar] #titlebar #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-hover-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-hover-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-hover-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar #titlebar-close:active {
 	background: url("../titlebuttons/titlebutton-close-active-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-maximize-active-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar #titlebar-min:active {
-	background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat;
+	background: url("../titlebuttons/titlebutton-minimize-active-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar #titlebar-restore:active,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-unmaximize-active-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-backdrop-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-backdrop-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
 :root[tabsintitlebar][inFullscreen] #window-controls #restore-button {
-	background: url("../titlebuttons/titlebutton-unmaximize-dark.svg") no-repeat;
+	background: url("../titlebuttons/titlebutton-unmaximize-dark-alt.svg") no-repeat;
 	background-size: contain;
 }
 :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover {
diff --git a/src/other/firefox/common/parts/titlebutton-dark.css b/src/other/firefox/common/parts/titlebutton-dark.css
index 6d2de623..d1295000 100644
--- a/src/other/firefox/common/parts/titlebutton-dark.css
+++ b/src/other/firefox/common/parts/titlebutton-dark.css
@@ -1,109 +1,134 @@
 @media (prefers-color-scheme: dark) {
+:root[tabsintitlebar] #nav-bar .titlebar-close,
 :root[tabsintitlebar] #titlebar .titlebar-close,
 :root[tabsintitlebar] #titlebar #titlebar-close {
 	background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max,
 :root[tabsintitlebar] #titlebar .titlebar-max,
 :root[tabsintitlebar] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min,
 :root[tabsintitlebar] #titlebar .titlebar-min,
 :root[tabsintitlebar] #titlebar #titlebar-min {
 	background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore,
 :root[tabsintitlebar] #titlebar .titlebar-restore,
 :root[tabsintitlebar] #titlebar #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-hover-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-hover-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-hover-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar #titlebar-close:active {
 	background: url("../titlebuttons/titlebutton-close-active-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-maximize-active-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar #titlebar-min:active {
 	background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar #titlebar-restore:active,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-unmaximize-active-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark.svg") no-repeat;
diff --git a/src/other/firefox/common/parts/titlebutton-light-alt.css b/src/other/firefox/common/parts/titlebutton-light-alt.css
index ec7ceae9..e169c391 100644
--- a/src/other/firefox/common/parts/titlebutton-light-alt.css
+++ b/src/other/firefox/common/parts/titlebutton-light-alt.css
@@ -1,118 +1,140 @@
+:root[tabsintitlebar] #nav-bar .titlebar-close,
 :root[tabsintitlebar] #titlebar .titlebar-close,
 :root[tabsintitlebar] #titlebar #titlebar-close {
 	background: url("../titlebuttons/titlebutton-close.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max,
 :root[tabsintitlebar] #titlebar .titlebar-max,
 :root[tabsintitlebar] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min,
 :root[tabsintitlebar] #titlebar .titlebar-min,
 :root[tabsintitlebar] #titlebar #titlebar-min {
 	background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore,
 :root[tabsintitlebar] #titlebar .titlebar-restore,
 :root[tabsintitlebar] #titlebar #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-hover-alt.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-hover-alt.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-hover-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar #titlebar-close:active {
 	background: url("../titlebuttons/titlebutton-close-active-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-maximize-active-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar #titlebar-min:active {
 	background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar #titlebar-restore:active,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-unmaximize-active-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
-:root[tabsintitlebar] #titlebar:-moz-window-inactive  .titlebar-close:hover,
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
+:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-backdrop-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-backdrop-alt.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-backdrop-alt.svg") no-repeat;
 	background-size: contain;
 }
 :root[tabsintitlebar][inFullscreen] #window-controls #restore-button {
-	background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
+	background: url("../titlebuttons/titlebutton-unmaximize-alt.svg") no-repeat;
 	background-size: contain;
 }
 :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover {
diff --git a/src/other/firefox/common/parts/titlebutton-light.css b/src/other/firefox/common/parts/titlebutton-light.css
index 8364e196..5e9f7e48 100644
--- a/src/other/firefox/common/parts/titlebutton-light.css
+++ b/src/other/firefox/common/parts/titlebutton-light.css
@@ -1,111 +1,133 @@
+:root[tabsintitlebar] #nav-bar .titlebar-close,
 :root[tabsintitlebar] #titlebar .titlebar-close,
 :root[tabsintitlebar] #titlebar #titlebar-close {
 	background: url("../titlebuttons/titlebutton-close.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max,
 :root[tabsintitlebar] #titlebar .titlebar-max,
 :root[tabsintitlebar] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min,
 :root[tabsintitlebar] #titlebar .titlebar-min,
 :root[tabsintitlebar] #titlebar #titlebar-min {
 	background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore,
 :root[tabsintitlebar] #titlebar .titlebar-restore,
 :root[tabsintitlebar] #titlebar #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
 	background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-hover.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-hover.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat;
-	background-color: transparent !important;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-hover.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar .titlebar-close:active,
 :root[tabsintitlebar] #titlebar #titlebar-close:active {
 	background: url("../titlebuttons/titlebutton-close-active.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar .titlebar-max:active,
 :root[tabsintitlebar] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-maximize-active.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar .titlebar-min:active,
 :root[tabsintitlebar] #titlebar #titlebar-min:active {
 	background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar .titlebar-restore:active,
 :root[tabsintitlebar] #titlebar #titlebar-restore:active,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
 	background: url("../titlebuttons/titlebutton-unmaximize-active.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
 	background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
 	background-size: contain;
 }
-:root[tabsintitlebar] #titlebar:-moz-window-inactive  .titlebar-close:hover,
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
+:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
 	background: url("../titlebuttons/titlebutton-close-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-maximize-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
 	background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat;
 	background-size: contain;
 }
+:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
 :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
 	background: url("../titlebuttons/titlebutton-unmaximize-backdrop.svg") no-repeat;

From 328ca7b9d3b78dcdc264859f0bb6bf758a414acf Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 30 Nov 2024 11:49:44 +0800
Subject: [PATCH 14/22] Update csd.css

---
 src/other/firefox/common/parts/csd.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/other/firefox/common/parts/csd.css b/src/other/firefox/common/parts/csd.css
index baa3cf6b..3d2311c5 100644
--- a/src/other/firefox/common/parts/csd.css
+++ b/src/other/firefox/common/parts/csd.css
@@ -135,7 +135,7 @@
 	}
 
 	/* Window buttons box */
-	:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
+	:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container {
 		padding: 0 3px 0 4px;
 		left: 8px;
 		right: auto;

From 8098a8da28471063882829e28518e68a4772c984 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 30 Nov 2024 12:26:45 +0800
Subject: [PATCH 15/22] Fixed issues

---
 src/other/firefox/WhiteSur/parts/headerbar-urlbar.css | 2 +-
 src/other/firefox/common/parts/csd.css                | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
index 23ddd5e7..1ca04602 100644
--- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
+++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
@@ -40,7 +40,7 @@ toolbarspring {
 }
 
 #urlbar[breakout][breakout-extend] {
-	width: 100% !important;
+	width: var(--urlbar-width) !important;
 	z-index: 5 !important;
 	padding: 0 !important;
 	border-radius: 8px !important;
diff --git a/src/other/firefox/common/parts/csd.css b/src/other/firefox/common/parts/csd.css
index 3d2311c5..674f864e 100644
--- a/src/other/firefox/common/parts/csd.css
+++ b/src/other/firefox/common/parts/csd.css
@@ -135,7 +135,8 @@
 	}
 
 	/* Window buttons box */
-	:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container {
+	:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container,
+	:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
 		padding: 0 3px 0 4px;
 		left: 8px;
 		right: auto;

From caceb1d0d6258cd1c051d0d7ff9498d66ac33584 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 30 Nov 2024 21:45:49 +0800
Subject: [PATCH 16/22] Fixed firefox vertical tabs issues

---
 src/other/firefox/Monterey/colors/dark.css    |  23 +-
 .../firefox/Monterey/parts/tabsbar-alt.css    |  94 +++----
 src/other/firefox/Monterey/parts/tabsbar.css  |  31 +--
 .../firefox/Monterey/parts/toolbox-alt.css    |   4 +-
 src/other/firefox/Monterey/parts/toolbox.css  |   4 +-
 src/other/firefox/WhiteSur/colors/dark.css    |  10 +-
 .../WhiteSur/parts/tabsbar-adaptive.css       | 235 ++++++++---------
 src/other/firefox/WhiteSur/parts/tabsbar.css  | 240 +++++++++---------
 src/other/firefox/WhiteSur/parts/toolbox.css  |   5 +-
 .../firefox/common/hide-window-buttons.css    |   1 +
 src/other/firefox/common/parts/popups.css     |   1 -
 src/other/firefox/common/parts/sidebar.css    |  44 +++-
 12 files changed, 370 insertions(+), 322 deletions(-)

diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css
index c0248cdd..e21bc34e 100644
--- a/src/other/firefox/Monterey/colors/dark.css
+++ b/src/other/firefox/Monterey/colors/dark.css
@@ -102,20 +102,17 @@
 	--gnome-private-urlbar-background: #25003e;
 
 	/* Tabs */
-	--gnome-tabbar-tab-background: #404040;
-	--gnome-tabbar-tab-color: rgb(141, 144, 145);
-	--gnome-tabbar-tab-hover-background: #464646;
-	--gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b;
-	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
-	--gnome-tabbar-tab-active-background: #505050;
-	--gnome-tabbar-tab-active-border-bottom-color: #15539e;
+	--gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06);
+	--gnome-tabbar-tab-color: #909090;
+	--gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12);
+	--gnome-tabbar-tab-hover-color: #c8c8c8;
+	--gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16);
 	--gnome-tabbar-tab-active-color: #ffffff;
-	--gnome-tabbar-tab-active-hover-background: #525252;
-	--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145);
-	--gnome-inactive-tabbar-tab-background: #383838;
-	--gnome-inactive-tabbar-tab-active-background: #424242;
-	--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
-	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16);
+	--gnome-inactive-tabbar-tab-color: #686868;
+	--gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03);
+	--gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-tabbar-tab-active-color: #898989;
 	--gnome-tab-attention-icon-color: #718be8;
 
 	/* Switch */
diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css
index 1674b69c..f3663d18 100644
--- a/src/other/firefox/Monterey/parts/tabsbar-alt.css
+++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css
@@ -16,8 +16,8 @@
 	padding-bottom: 6px !important;
 }
 
-#tabbrowser-tabs,
-#tabbrowser-tabs arrowscrollbox {
+#TabsToolbar #tabbrowser-tabs,
+#TabsToolbar #tabbrowser-tabs arrowscrollbox {
 	min-height: 32px !important;
 	--tab-min-height: 32px !important;
 }
@@ -26,12 +26,13 @@
 	max-height: 32px !important;
 }
 
-.tab-background, .tab-stack {
+#TabsToolbar .tab-background,
+#TabsToolbar .tab-stack {
 	height: 32px !important;
 	min-height: 32px !important;
 }
 
-tab > stack {
+#TabsToolbar tab > stack {
 	margin: 0 3px !important;
 }
 
@@ -60,7 +61,7 @@ tab > stack {
 	color: var(--gnome-tabbar-tab-active-color) !important;
 }
 
-.tab-background {
+#TabsToolbar .tab-background {
 	margin: 0 !important;
 	transition: none;
 	margin-block: 0 !important;
@@ -71,16 +72,16 @@ tab > stack {
 	transition: background 200ms;
 }
 
-#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background {
+.tabbrowser-tab:not([selected=true]) .tab-background {
 	background: var(--gnome-tabbar-tab-background) !important;
 }
 
-#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
+.tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
 	background: var(--gnome-inactive-tabbar-tab-background) !important;
 }
 
 /* Tab hover */
-#TabsToolbar .tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background {
+.tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background {
 	background: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
@@ -113,6 +114,7 @@ tab[selected]:-moz-window-inactive .tab-label {
 }
 
 /* Center all inside tab */
+#TabsToolbar {
 .tab-content {
 	display: flex;
 	flex-direction: row;
@@ -126,41 +128,6 @@ tab[selected]:-moz-window-inactive .tab-label {
 	margin-inline: 0 !important;
 }
 
-/* Prevent tab icons size breaking */
-.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
-	min-width: 16px;
-}
-
-.tabbrowser-tab[soundplaying="true"] .tab-icon-image,
-.tabbrowser-tab[muted="true"] .tab-icon-image {
-	margin-top: 3px !important;
-	margin-left: 2px !important;
-}
-
-.tab-icon-overlay {
-	height: 24px !important;
-	width: 24px !important;
-	padding: 4px !important;
-	border-radius: 100px !important;
-}
-
-.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	top: 0 !important;
-	inset-inline-end: 0 !important;
-}
-
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-background) !important;
-}
-
-.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
-}
-
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
-	background-color: var(--gnome-tabbar-tab-hover-background) !important;
-}
-
 /* Adjust tab label width */
 .tab-label-container {
 	min-width: 0 !important;
@@ -210,6 +177,29 @@ tab[selected]:-moz-window-inactive .tab-label {
 	margin-left: 0 !important
 }
 
+/* Prevent tab icons size breaking */
+.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
+	min-width: 16px;
+}
+
+.tabbrowser-tab[soundplaying="true"] .tab-icon-image,
+.tabbrowser-tab[muted="true"] .tab-icon-image {
+	margin-top: 3px !important;
+	margin-left: 2px !important;
+}
+
+.tab-icon-overlay {
+	height: 24px !important;
+	width: 24px !important;
+	padding: 4px !important;
+	border-radius: 100px !important;
+}
+
+.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+	top: 0 !important;
+	inset-inline-end: 0 !important;
+}
+
 /*Align personal bookmarks v89 */
 #personal-bookmarks {
 	-moz-box-align: center !important;
@@ -219,6 +209,19 @@ tab[selected]:-moz-window-inactive .tab-label {
 .tabbrowser-tab {
 	padding-inline: 0px !important;
 }
+}
+
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+	background-color: var(--gnome-tabbar-tab-background) !important;
+}
+
+.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+	background-color: var(--gnome-tabbar-tab-active-background) !important;
+}
+
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
+	background-color: var(--gnome-tabbar-tab-hover-background) !important;
+}
 
 .close-icon {
 	height: 16px !important;
@@ -315,7 +318,8 @@ tab[selected]:-moz-window-inactive .tab-label {
 }
 
 #TabsToolbar .toolbarbutton-1,
-#tabs-newtab-button, #TabsToolbar #new-tab-button {
+#TabsToolbar #tabs-newtab-button,
+#TabsToolbar #new-tab-button {
 	min-height: 32px !important;
 	margin: 0 2px !important;
 	padding: 0 10px !important;
@@ -323,7 +327,7 @@ tab[selected]:-moz-window-inactive .tab-label {
 }
 
 #TabsToolbar .toolbarbutton-1 image,
-#tabs-newtab-button image,
+#TabsToolbar #tabs-newtab-button image,
 #TabsToolbar #new-tab-button image {
 	margin: 0 !important;
 	padding: 0 !important;
diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css
index 925a2f9e..414405b0 100644
--- a/src/other/firefox/Monterey/parts/tabsbar.css
+++ b/src/other/firefox/Monterey/parts/tabsbar.css
@@ -11,33 +11,31 @@
 	margin-inline-start: 6px !important;
 }
 
-tab > stack {
+#TabsToolbar tab > stack {
 	margin: 0 3px !important;
 }
 
 /* Tabs bar height */
-#tabbrowser-tabs {
+#TabsToolbar #tabbrowser-tabs {
 	--tab-min-height: 32px !important;
 	--tabstrip-min-height: 32px !important;
 }
 
+#TabsToolbar .tab-background,
+#TabsToolbar .tab-stack {
+	height: 32px !important;
+	min-height: 32px !important;
+}
+
 .tabbrowser-tab,
 .tab-background {
 	border: none !important;
 	box-shadow: none !important;
 	border-radius: 8px !important;
-	height: 32px !important;
-	min-height: 32px !important;
-	max-height: 32px !important;
 	padding: 0 !important;
 	background-image: none !important;
 }
 
-.tab-content {
-	height: 32px !important;
-	min-height: 32px !important;
-}
-
 .tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme {
 	color: var(--gnome-tabbar-tab-color) !important;
 }
@@ -47,21 +45,24 @@ tab > stack {
 }
 
 .tab-background {
-	margin: 0 !important;
-	background-color: transparent !important;
+	background: transparent !important;
 	transition: background 200ms !important;
 }
 
-#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background {
+#TabsToolbar .tab-background {
+	margin: 0 !important;
+}
+
+.tabbrowser-tab:not([selected=true]) .tab-background {
 	background: var(--gnome-tabbar-tab-background) !important;
 }
 
-#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
+.tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
 	background: var(--gnome-inactive-tabbar-tab-background) !important;
 }
 
 /* Tab hover */
-#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
+.tabbrowser-tab:not([selected=true]):hover .tab-background {
 	background: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
diff --git a/src/other/firefox/Monterey/parts/toolbox-alt.css b/src/other/firefox/Monterey/parts/toolbox-alt.css
index 2f64bca9..296a7a40 100644
--- a/src/other/firefox/Monterey/parts/toolbox-alt.css
+++ b/src/other/firefox/Monterey/parts/toolbox-alt.css
@@ -14,13 +14,12 @@
 #TabsToolbar,
 #navigator-toolbox,
 .notificationbox-stack {
-	border: none !important;
 	color: var(--gnome-toolbar-color);
 	background: var(--gnome-toolbar-background) !important;
 	transition: none !important;
 }
 
-#TabsToolbar {
+#navigator-toolbox {
 	border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
 }
 
@@ -35,7 +34,6 @@
 
 /* Toolbox colors */
 #navigator-toolbox {
-	border: 0 !important;
 	background: none !important;
 }
 
diff --git a/src/other/firefox/Monterey/parts/toolbox.css b/src/other/firefox/Monterey/parts/toolbox.css
index ea014072..94b942f4 100644
--- a/src/other/firefox/Monterey/parts/toolbox.css
+++ b/src/other/firefox/Monterey/parts/toolbox.css
@@ -10,10 +10,9 @@
 #nav-bar, #PersonalToolbar, #toolbar-menubar, #titlebar {
 	color: var(--gnome-toolbar-color);
 	background: var(--gnome-toolbar-background) !important;
-	border: none !important;
 }
 
-#PersonalToolbar {
+#navigator-toolbox {
 	border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
 }
 
@@ -26,7 +25,6 @@
 
 /* Toolbox colors */
 #navigator-toolbox {
-	border: none !important;
 	background: none !important;
 }
 
diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css
index f3c7f74b..670c078d 100644
--- a/src/other/firefox/WhiteSur/colors/dark.css
+++ b/src/other/firefox/WhiteSur/colors/dark.css
@@ -103,20 +103,20 @@
 
 	/* Tabs */
 	--gnome-tabbar-tab-background: #262626;
-	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-color: #909090;
 	--gnome-tabbar-tab-border-color: #070707;
 	--gnome-tabbar-tab-hover-background: #2b2b2b;
-	--gnome-tabbar-tab-hover-border-color: #1b1b1b;
-	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
+	--gnome-tabbar-tab-hover-border-color: #070707;
+	--gnome-tabbar-tab-hover-color: #c8c8c8;
 	--gnome-tabbar-tab-active-background: #373737;
 	--gnome-tabbar-tab-active-border-color: #070707;
 	--gnome-tabbar-tab-active-color: #ffffff;
 	--gnome-tabbar-tab-active-hover-background: #313131;
-	--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-inactive-tabbar-tab-color: #686868;
 	--gnome-inactive-tabbar-tab-background: #202020;
 	--gnome-inactive-tabbar-tab-active-background: #313131;
 	--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
-	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-inactive-tabbar-tab-active-color: #898989;
 	--gnome-tab-attention-icon-color: #718be8;
 
 	/* Switch */
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
index 66889548..44f75611 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
@@ -6,6 +6,16 @@
 	--space-above-tabbar: 0 !important;
 }
 
+.tab-background:is([selected]) {
+	box-shadow: none !important;
+}
+
+#TabsToolbar {
+/* Remove hover effects on tab bar buttons */
+	--toolbarbutton-active-background: transparent !important;
+	--toolbarbutton-hover-background: transparent !important;
+	padding: 0 !important;
+	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
 
 /* Tabs bar height */
 #tabbrowser-tabs {
@@ -16,28 +26,20 @@
 	max-height: 32px !important;
 }
 
-#TabsToolbar .toolbar-items {
+.tab-background, .tab-stack {
+	min-height: 32px !important;
+}
+
+.toolbar-items {
 	margin-bottom: -1px !important;
 }
 
-:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
-	margin-bottom: 0 !important;
-}
-
-/* Remove hover effects on tab bar buttons */
-#TabsToolbar {
-	--toolbarbutton-active-background: transparent !important;
-	--toolbarbutton-hover-background: transparent !important;
-	padding: 0 !important;
-	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
-}
-
 /* New hover effect */
-#TabsToolbar toolbarbutton {
+toolbarbutton {
 	fill-opacity: .6 !important;
 }
-#TabsToolbar toolbarbutton:not([disabled]):hover,
-#TabsToolbar toolbarbutton[open=true] {
+toolbarbutton:not([disabled]):hover,
+toolbarbutton[open=true] {
 	fill-opacity: 1 !important;
 }
 
@@ -77,23 +79,6 @@
 	margin: 0 !important;
 }
 
-/* Tab labels */
-tab {
-	color: var(--gnome-tabbar-tab-color) !important;
-}
-tab:hover {
-	color: var(--gnome-tabbar-tab-hover-color) !important;
-}
-tab[selected] {
-	color: var(--gnome-tabbar-tab-active-color) !important;
-}
-tab:-moz-window-inactive {
-	color: var(--gnome-inactive-tabbar-tab-color) !important;
-}
-tab[selected]:-moz-window-inactive {
-	color: var(--gnome-inactive-tabbar-tab-active-color) !important;
-}
-
 /* Center all inside tab */
 .tab-content {
 	display: flex;
@@ -219,6 +204,107 @@ tab[selected]:-moz-window-inactive {
 	margin-right: auto !important
 }
 
+.tab-background {
+	background-color: transparent !important;
+	transition: background-color 200ms;
+}
+
+/* Tab hover */
+.tabbrowser-tab:not([selected=true]):hover .tab-background {
+	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
+	border-image: none !important;
+	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important;
+}
+
+/* Active tab */
+.tab-background:is([selected]) {
+	background-color: var(--gnome-tabbar-tab-active-background) !important;
+	background-image: none !important;
+	border: none !important;
+	border-image: none !important;
+	transition: none !important;
+	margin-left: -1px !important;
+	margin-right: -1px !important;
+	border-radius: 0 !important;
+	box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
+	            -1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
+	            inset 0 -1px var(--gnome-toolbar-border-color) !important;
+}
+
+.tab-background:is([selected]):-moz-window-inactive {
+	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
+	border-image: none !important;
+}
+
+/* Tabs scroll buttons */
+#scrollbutton-up:not([disabled]):hover,
+#scrollbutton-down:not([disabled]):hover {
+	background: var(--gnome-tabbar-tab-active-hover-background) !important;
+}
+
+/* Full width tabs */
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
+	max-width: 100% !important;
+}
+
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
+	max-width: .1px !important;
+}
+
+/* Remove blank spaces on tabs start and end */
+.titlebar-spacer {
+	display: none !important;
+}
+
+/* TabsToolbar buttons */
+.toolbarbutton-1 {
+	margin: 0 !important;
+	border-radius: 0 !important;
+	min-width: 32px !important;
+	min-height: 32px !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-text,
+.toolbarbutton-1 > .toolbarbutton-badge-stack {
+	padding: 8px !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon {
+	width: 32px !important;
+	height: 32px !important;
+}
+
+#alltabs-button {
+	display: none !important;
+}
+}
+
+:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
+	margin-bottom: 0 !important;
+}
+
+/* Tab labels */
+tab {
+	color: var(--gnome-tabbar-tab-color) !important;
+}
+tab:hover {
+	color: var(--gnome-tabbar-tab-hover-color) !important;
+}
+tab[selected] {
+	color: var(--gnome-tabbar-tab-active-color) !important;
+}
+tab:-moz-window-inactive {
+	color: var(--gnome-inactive-tabbar-tab-color) !important;
+}
+tab[selected]:-moz-window-inactive {
+	color: var(--gnome-inactive-tabbar-tab-active-color) !important;
+}
+
 /* Close tab button */
 .close-icon {
 	height: 16px !important;
@@ -331,89 +417,6 @@ tab[selected]:-moz-window-inactive {
 	display: flex;
 }
 
-.tab-background {
-	background-color: transparent !important;
-	transition: background-color 200ms;
-}
-
-.tab-background, .tab-stack {
-	min-height: 32px !important;
-}
-
-/* Tab hover */
-#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
-	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
-	border-image: none !important;
-	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important;
-}
-
-/* Active tab */
-.tab-background:is([selected]) {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
-	background-image: none !important;
-	border: none !important;
-	border-image: none !important;
-	transition: none !important;
-	margin-left: -1px !important;
-	margin-right: -1px !important;
-	border-radius: 0 !important;
-	box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-	            -1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
-	            inset 0 -1px var(--gnome-toolbar-border-color) !important;
-}
-
-.tab-background:is([selected]):-moz-window-inactive {
-	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
-	border-image: none !important;
-}
-
-/* Tabs scroll buttons */
-#TabsToolbar #scrollbutton-up:not([disabled]):hover,
-#TabsToolbar #scrollbutton-down:not([disabled]):hover {
-	background: var(--gnome-tabbar-tab-active-hover-background) !important;
-}
-
-/* Full width tabs */
-.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
-.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
-	max-width: 100% !important;
-}
-
-.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
-.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
-	max-width: .1px !important;
-}
-
-/* Remove blank spaces on tabs start and end */
-#TabsToolbar .titlebar-spacer {
-	display: none !important;
-}
-
-/* TabsToolbar buttons */
-#TabsToolbar .toolbarbutton-1 {
-	margin: 0 !important;
-	border-radius: 0 !important;
-	min-width: 32px !important;
-	min-height: 32px !important;
-	padding: 0 !important;
-	border: none !important;
-}
-
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
-	padding: 8px !important;
-}
-
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
-	width: 32px !important;
-	height: 32px !important;
-}
-
-#TabsToolbar #alltabs-button {
-	display: none !important;
-}
-
 /* firefox-view-button */
 :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
 :root[privatebrowsingmode]:not([firefoxviewhidden]) :is(
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css
index dd530c0e..b027d7a8 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar.css
@@ -6,41 +6,43 @@
 	--space-above-tabbar: 0 !important;
 }
 
+.tab-background:is([selected]) {
+	box-shadow: none !important;
+}
+
+#TabsToolbar {
+/* Remove hover effects on tab bar buttons */
+	--toolbarbutton-active-background: transparent !important;
+	--toolbarbutton-hover-background: transparent !important;
+	padding: 0 !important;
+	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+
+/* New hover effect */
+toolbarbutton {
+	fill-opacity: .6 !important;
+}
+toolbarbutton:not([disabled]):hover,
+toolbarbutton[open=true] {
+	fill-opacity: 1 !important;
+}
 /* Tabs bar height */
 #tabbrowser-tabs {
 	--tab-min-height: 32px !important;
 	--tabstrip-min-height: 32px !important;
 }
 
+.tab-background, .tab-stack {
+	min-height: 32px !important;
+}
+
 #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
 	max-height: 32px !important;
 }
 
-#TabsToolbar .toolbar-items {
+.toolbar-items {
 	margin-bottom: -1px !important;
 }
 
-:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
-	margin-bottom: 0 !important;
-}
-
-/* Remove hover effects on tab bar buttons */
-#TabsToolbar {
-	--toolbarbutton-active-background: transparent !important;
-	--toolbarbutton-hover-background: transparent !important;
-	padding: 0 !important;
-	box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
-}
-
-/* New hover effect */
-#TabsToolbar toolbarbutton {
-	fill-opacity: .6 !important;
-}
-#TabsToolbar toolbarbutton:not([disabled]):hover,
-#TabsToolbar toolbarbutton[open=true] {
-	fill-opacity: 1 !important;
-}
-
 /* Remove shadow next to tab scroll buttons */
 .arrowscrollbox-overflow-start-indicator,
 .arrowscrollbox-overflow-end-indicator {
@@ -77,23 +79,6 @@
 	margin: 0 !important;
 }
 
-/* Tab labels */
-tab {
-	color: var(--gnome-tabbar-tab-color) !important;
-}
-tab:hover {
-	color: var(--gnome-tabbar-tab-hover-color) !important;
-}
-tab[selected] {
-	color: var(--gnome-tabbar-tab-active-color) !important;
-}
-tab:-moz-window-inactive {
-	color: var(--gnome-inactive-tabbar-tab-color) !important;
-}
-tab[selected]:-moz-window-inactive {
-	color: var(--gnome-inactive-tabbar-tab-active-color) !important;
-}
-
 /* Center all inside tab */
 .tab-content {
 	display: flex;
@@ -219,6 +204,102 @@ tab[selected]:-moz-window-inactive {
 	margin-right: auto !important
 }
 
+/* Tab hover */
+.tabbrowser-tab:not([selected=true]):hover .tab-background {
+	background-color: var(--gnome-tabbar-tab-hover-background) !important;
+	border-image: none !important;
+	box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important;
+}
+
+/* Active tab */
+.tab-background:is([selected]) {
+	background-color: var(--gnome-tabbar-tab-active-background) !important;
+	background-image: none !important;
+	border: none !important;
+	border-image: none !important;
+	transition: none !important;
+	margin-left: -1px !important;
+	margin-right: -1px !important;
+	border-radius: 0 !important;
+	box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
+	            -1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
+	            inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important;
+}
+
+.tab-background:is([selected]):-moz-window-inactive {
+	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
+	border-image: none !important;
+}
+
+/* Tabs scroll buttons */
+#scrollbutton-up:not([disabled]):hover,
+#scrollbutton-down:not([disabled]):hover {
+	background: var(--gnome-tabbar-tab-active-hover-background) !important;
+}
+
+/* Full width tabs */
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
+	max-width: 100% !important;
+}
+
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
+	max-width: .1px !important;
+}
+
+/* Remove blank spaces on tabs start and end */
+.titlebar-spacer {
+	display: none !important;
+}
+
+/* TabsToolbar buttons */
+.toolbarbutton-1 {
+	margin: 0 !important;
+	border-radius: 0 !important;
+	min-width: 32px !important;
+	min-height: 32px !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-text,
+.toolbarbutton-1 > .toolbarbutton-badge-stack {
+	padding: 8px !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon {
+	width: 32px !important;
+	height: 32px !important;
+}
+
+#alltabs-button {
+	display: none !important;
+}
+}
+
+:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
+	margin-bottom: 0 !important;
+}
+
+/* Tab labels */
+tab {
+	color: var(--gnome-tabbar-tab-color) !important;
+}
+tab:hover {
+	color: var(--gnome-tabbar-tab-hover-color) !important;
+}
+tab[selected] {
+	color: var(--gnome-tabbar-tab-active-color) !important;
+}
+tab:-moz-window-inactive {
+	color: var(--gnome-inactive-tabbar-tab-color) !important;
+}
+tab[selected]:-moz-window-inactive {
+	color: var(--gnome-inactive-tabbar-tab-active-color) !important;
+}
+
 /* Close tab button */
 .close-icon {
 	height: 16px !important;
@@ -326,86 +407,7 @@ tab[selected]:-moz-window-inactive {
 }
 
 .tab-background {
-	background-color: transparent !important;
-	transition: background-color 200ms;
-}
-
-.tab-background, .tab-stack {
-	min-height: 32px !important;
-}
-
-/* Tab hover */
-#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
-	background-color: var(--gnome-tabbar-tab-hover-background) !important;
-	border-image: none !important;
-	box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important;
-}
-
-/* Active tab */
-.tab-background:is([selected]) {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
-	background-image: none !important;
-	border: none !important;
-	border-image: none !important;
-	transition: none !important;
-	margin-left: -1px !important;
-	margin-right: -1px !important;
-	border-radius: 0 !important;
-	box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-	            -1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
-	            inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important;
-}
-
-.tab-background:is([selected]):-moz-window-inactive {
-	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
-	border-image: none !important;
-}
-
-/* Tabs scroll buttons */
-#TabsToolbar #scrollbutton-up:not([disabled]):hover,
-#TabsToolbar #scrollbutton-down:not([disabled]):hover {
-	background: var(--gnome-tabbar-tab-active-hover-background) !important;
-}
-
-/* Full width tabs */
-.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
-.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
-	max-width: 100% !important;
-}
-
-.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
-.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
-	max-width: .1px !important;
-}
-
-/* Remove blank spaces on tabs start and end */
-#TabsToolbar .titlebar-spacer {
-	display: none !important;
-}
-
-/* TabsToolbar buttons */
-#TabsToolbar .toolbarbutton-1 {
-	margin: 0 !important;
-	border-radius: 0 !important;
-	min-width: 32px !important;
-	min-height: 32px !important;
-	padding: 0 !important;
-	border: none !important;
-}
-
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
-	padding: 8px !important;
-}
-
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
-	width: 32px !important;
-	height: 32px !important;
-}
-
-#TabsToolbar #alltabs-button {
-	display: none !important;
+	transition: background 200ms;
 }
 
 /* firefox-view-button */
diff --git a/src/other/firefox/WhiteSur/parts/toolbox.css b/src/other/firefox/WhiteSur/parts/toolbox.css
index 7e816029..6dbfd4d8 100644
--- a/src/other/firefox/WhiteSur/parts/toolbox.css
+++ b/src/other/firefox/WhiteSur/parts/toolbox.css
@@ -14,6 +14,10 @@
 	background: var(--gnome-toolbar-background) !important;
 }
 
+#navigator-toolbox {
+	border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
+}
+
 #nav-bar {
 	border: none !important;
 	color: var(--gnome-toolbar-color);
@@ -41,7 +45,6 @@ findbar:-moz-window-inactive label,
 #TabsToolbar {
 	border: none !important;
 	background: var(--gnome-tabstoolbar-background) !important;
-	border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
 	box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important;
 }
 
diff --git a/src/other/firefox/common/hide-window-buttons.css b/src/other/firefox/common/hide-window-buttons.css
index 2859cebd..d4e8b046 100644
--- a/src/other/firefox/common/hide-window-buttons.css
+++ b/src/other/firefox/common/hide-window-buttons.css
@@ -1,5 +1,6 @@
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-buttonbox-container,
 :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
     display: none !important;
 }
diff --git a/src/other/firefox/common/parts/popups.css b/src/other/firefox/common/parts/popups.css
index d79eaa34..4144ad42 100644
--- a/src/other/firefox/common/parts/popups.css
+++ b/src/other/firefox/common/parts/popups.css
@@ -183,7 +183,6 @@ panelview {
 
 /* Style popovers menu buttons */
 menuitem, menupopup menu,
-.toolbarbutton-1,
 .protections-popup-footer-button,
 .protections-popup-category,
 .identity-popup-content-blocking-category,
diff --git a/src/other/firefox/common/parts/sidebar.css b/src/other/firefox/common/parts/sidebar.css
index 627455e7..f55001a5 100644
--- a/src/other/firefox/common/parts/sidebar.css
+++ b/src/other/firefox/common/parts/sidebar.css
@@ -1,10 +1,52 @@
 /* Sidebar */
+#sidebar-main,
 #sidebar-box, #sidebar,
 .sidebar-panel[lwt-sidebar] {
 	color: var(--gnome-toolbar-color) !important;
 	background: var(--gnome-sidebar-background) !important;
 }
 
+#sidebar-main {
+	padding: 8px 0;
+}
+
+@media (-moz-bool-pref: "sidebar.revamp") {
+	#tabbrowser-tabbox {
+		outline: none !important;
+		box-shadow: none !important;
+	}
+	
+	#sidebar {
+		border-radius: 12px !important;
+		box-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-popover-border-color) !important;
+		border: 1px solid rgba(255, 255, 255, 0.06) !important;
+		color: var(--gnome-toolbar-color) !important;
+		background: var(--gnome-menu-background) !important;
+		margin: 6px 6px 0 0 !important;
+	}
+}
+
+.search-container {
+	border-radius: 1000px;
+	background-color: var(--gnome-urlbar-background) !important;
+	border: 1px solid var(--gnome-urlbar-border-color) !important;
+	outline: 2px solid transparent !important;
+	box-shadow: none !important;
+}
+
+.search-container:focus-within {
+	border: 1px solid transparent !important;
+	outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
+	outline-offset: -2px;
+	transition: outline 100ms ease-out;
+}
+
+fxview-search-textbox {
+  &::part(input) {
+    border: var(--sidebar-box-border) !important;
+  }
+}
+
 #sidebar-header {
 	padding: 8px;
 	border-bottom: 1px solid var(--gnome-sidebar-border-color) !important;
@@ -13,7 +55,7 @@
 
 .sidebar-splitter {
 	width: 1px !important;
-	background-color: var(--gnome-sidebar-border-color, var(--gnome-toolbar-background)) !important;
+	background-color: var(--gnome-toolbar-border-color, var(--gnome-toolbar-background)) !important;
 	background-image: linear-gradient(to top, var(--sidebar-background-color) 0%, var(--sidebar-background-color) 100%);
 	border: none !important;
 }

From 05a40f8c5ef3a056ec3ffbdb868998b62c09a269 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 1 Dec 2024 00:04:30 +0800
Subject: [PATCH 17/22] update

update
---
 .../firefox/Monterey/parts/tabsbar-alt.css    | 13 ++++-----
 src/other/firefox/common/hide-single-tab.css  | 29 ++++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css
index f3663d18..ecb13806 100644
--- a/src/other/firefox/Monterey/parts/tabsbar-alt.css
+++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css
@@ -12,10 +12,6 @@
 	min-height: 32px !important;
 }
 
-#TabsToolbar-customization-target {
-	padding-bottom: 6px !important;
-}
-
 #TabsToolbar #tabbrowser-tabs,
 #TabsToolbar #tabbrowser-tabs arrowscrollbox {
 	min-height: 32px !important;
@@ -33,7 +29,7 @@
 }
 
 #TabsToolbar tab > stack {
-	margin: 0 3px !important;
+	margin: 6px 3px !important;
 }
 
 :root:not([sizemode="normal"]) .titlebar-spacer[type="pre-tabs"], :root[gtktiledwindow="true"] .titlebar-spacer[type="pre-tabs"] { /* reset */
@@ -44,10 +40,13 @@
 	width: 8px !important;
 }
 
-.tabbrowser-tab,
 .tab-background {
 	border: none !important;
 	box-shadow: none !important;
+}
+
+#TabsToolbar .tabbrowser-tab,
+#TabsToolbar .tab-background {
 	border-radius: 8px !important;
 	padding: 0 !important;
 	background-image: none !important;
@@ -321,7 +320,7 @@ tab[selected]:-moz-window-inactive .tab-label {
 #TabsToolbar #tabs-newtab-button,
 #TabsToolbar #new-tab-button {
 	min-height: 32px !important;
-	margin: 0 2px !important;
+	margin: 6px 2px !important;
 	padding: 0 10px !important;
 	border-radius: 8px !important;
 }
diff --git a/src/other/firefox/common/hide-single-tab.css b/src/other/firefox/common/hide-single-tab.css
index d79e905b..189bb5c5 100644
--- a/src/other/firefox/common/hide-single-tab.css
+++ b/src/other/firefox/common/hide-single-tab.css
@@ -1,20 +1,21 @@
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#tabbrowser-tabs tab:only-of-type,
-#TabsToolbar #alltabs-button {
-	display: none !important;
-}
-
-.tab-background, .tab-stack {
-	min-height: 0 !important;
-}
-
 #TabsToolbar {
 	min-height: 0 !important;
-}
 
-#tabbrowser-tabs,
-#tabbrowser-tabs arrowscrollbox {
-	min-height: 0 !important;
-	--tab-min-height: 0 !important;
+	#tabbrowser-tabs tab:only-of-type,
+	#alltabs-button {
+		display: none !important;
+	}
+
+	.tab-background,
+	.tab-stack {
+		min-height: 0 !important;
+	}
+
+	#tabbrowser-tabs,
+	#tabbrowser-tabs arrowscrollbox {
+		min-height: 0 !important;
+		--tab-min-height: 0 !important;
+	}
 }

From 8b22fbefe7bd351ff1d9f1139a63113d64ab8b74 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 1 Dec 2024 00:16:01 +0800
Subject: [PATCH 18/22] Update headerbar.css

---
 src/other/firefox/common/parts/headerbar.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/other/firefox/common/parts/headerbar.css b/src/other/firefox/common/parts/headerbar.css
index c3e64569..24af11dd 100644
--- a/src/other/firefox/common/parts/headerbar.css
+++ b/src/other/firefox/common/parts/headerbar.css
@@ -6,6 +6,10 @@
 	padding: 8px !important;
 }
 
+.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
+	width: 0 !important;
+}
+
 /* Headerbar CSD colors */
 :root[tabsintitlebar] #nav-bar {
 	border: none !important;

From f86c2261731e263835ada57fc6398a5fff10f6d0 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 1 Dec 2024 11:49:13 +0800
Subject: [PATCH 19/22] Fixed #1072

---
 .../firefox/Monterey/parts/tabsbar-alt.css    | 17 ++++---
 src/other/firefox/Monterey/parts/tabsbar.css  | 12 +++++
 .../WhiteSur/parts/tabsbar-adaptive.css       | 45 +++++--------------
 src/other/firefox/WhiteSur/parts/tabsbar.css  | 45 +++++--------------
 4 files changed, 48 insertions(+), 71 deletions(-)

diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css
index ecb13806..d70bc8c4 100644
--- a/src/other/firefox/Monterey/parts/tabsbar-alt.css
+++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css
@@ -276,6 +276,18 @@ tab[selected]:-moz-window-inactive .tab-label {
 	display: none;
 }
 
+/* tab-context-line above tabs */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+	height: 2px;
+	border-radius: 2px;
+	margin: 0 12px !important;
+}
+
+/* Remove alt colours references for multi tabs*/
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
+	display: none;
+}
+
 /* Remove tab separators */
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
@@ -302,11 +314,6 @@ tab[selected]:-moz-window-inactive .tab-label {
 	max-width: .1px !important;
 }
 
-/* Remove alt colours references for multi tabs*/
-.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
-	display: none;
-}
-
 .tabbrowser-tab[class*="identity-color-"][pinned] {
 	display: flex;
 }
diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css
index 414405b0..2ca0836e 100644
--- a/src/other/firefox/Monterey/parts/tabsbar.css
+++ b/src/other/firefox/Monterey/parts/tabsbar.css
@@ -175,6 +175,18 @@ tab[selected]:-moz-window-inactive .tab-label {
 	display: none;
 }
 
+/* tab-context-line above tabs */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+	height: 2px;
+	border-radius: 2px;
+	margin: 0 12px !important;
+}
+
+/* Remove alt colours references for multi tabs*/
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
+	display: none;
+}
+
 /* Tab attention dot */
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
 	background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
index 44f75611..6125a2a7 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
@@ -400,6 +400,18 @@ tab[selected]:-moz-window-inactive {
 	display: none;
 }
 
+/* tab-context-line above tabs */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+	height: 2px;
+	border-radius: 0 !important;
+	margin: 0 !important;
+}
+
+/* Remove alt colours references for multi tabs*/
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
+	display: none;
+}
+
 /* Tab attention dot */
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
 	background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
@@ -408,11 +420,6 @@ tab[selected]:-moz-window-inactive {
 	background-repeat: no-repeat;
 }
 
-/* Remove alt colours references for multi tabs*/
-.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-	display: none;
-}
-
 .tabbrowser-tab[class*="identity-color-"][pinned] {
 	display: flex;
 }
@@ -446,34 +453,6 @@ tab[selected]:-moz-window-inactive {
 	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
 }
 
-/* Create new container tab indicator */
-.tabbrowser-tab[class*="identity-color-"] .tab-content::before {
-	content: "";
-	display: block;
-	background-image: var(#userContext-icons:--identity-icon);
-	background: var( --identity-tab-color);
-	-moz-context-properties: fill;
-	fill: var(--identity-icon-color);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center center;
-	min-width: 10px;
-	height: 10px;
-	margin-right: 5px;
-	margin-left: auto !important;
-	border-radius: 100%;
-}
-
-.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before {
-	right: -10px;
-	top: -8px;
-	position: relative;
-	margin-right: -10px;
-}
-
 /* fix pip on small displays */
 .tab-icon-overlay[pictureinpicture] {
 	top: 3px !important;
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css
index b027d7a8..92adcd1a 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar.css
@@ -389,6 +389,18 @@ tab[selected]:-moz-window-inactive {
 	display: none;
 }
 
+/* tab-context-line above tabs */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+	height: 2px;
+	border-radius: 0 !important;
+	margin: 0 !important;
+}
+
+/* Remove alt colours references for multi tabs*/
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
+	display: none;
+}
+
 /* Tab attention dot */
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
 	background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
@@ -397,11 +409,6 @@ tab[selected]:-moz-window-inactive {
 	background-repeat: no-repeat;
 }
 
-/* Remove alt colours references for multi tabs*/
-.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-	display: none;
-}
-
 .tabbrowser-tab[class*="identity-color-"][pinned] {
 	display: flex;
 }
@@ -439,34 +446,6 @@ tab[selected]:-moz-window-inactive {
 	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
 }
 
-/* Create new container tab indicator */
-.tabbrowser-tab[class*="identity-color-"] .tab-content::before {
-	content: "";
-	display: block;
-	background-image: var(#userContext-icons:--identity-icon);
-	background: var( --identity-tab-color);
-	-moz-context-properties: fill;
-	fill: var(--identity-icon-color);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center center;
-	min-width: 10px;
-	height: 10px;
-	margin-right: 5px;
-	margin-left: auto !important;
-	border-radius: 100%;
-}
-
-.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before,
-.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before {
-	right: -10px;
-	top: -8px;
-	position: relative;
-	margin-right: -10px;
-}
-
 /* fix pip on small displays */
 .tab-icon-overlay[pictureinpicture] {
 	top: 3px !important;

From 9c4050dfc800f0d6b3a0b104bdbde8438213e7d5 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 1 Dec 2024 13:01:00 +0800
Subject: [PATCH 20/22] update

---
 src/other/firefox/common/icons/briefcase.svg  |  3 ++
 src/other/firefox/common/icons/cart.svg       |  3 ++
 .../firefox/common/icons/container-openin.svg |  3 ++
 src/other/firefox/common/icons/dollar.svg     |  3 ++
 .../firefox/common/icons/fingerprint.svg      |  3 ++
 .../common/icons/multi-account-container.svg  |  3 ++
 src/other/firefox/common/parts/icons.css      | 38 +++++++++++++++++++
 7 files changed, 56 insertions(+)
 create mode 100644 src/other/firefox/common/icons/briefcase.svg
 create mode 100644 src/other/firefox/common/icons/cart.svg
 create mode 100644 src/other/firefox/common/icons/container-openin.svg
 create mode 100644 src/other/firefox/common/icons/dollar.svg
 create mode 100644 src/other/firefox/common/icons/fingerprint.svg
 create mode 100644 src/other/firefox/common/icons/multi-account-container.svg

diff --git a/src/other/firefox/common/icons/briefcase.svg b/src/other/firefox/common/icons/briefcase.svg
new file mode 100644
index 00000000..77cd0df0
--- /dev/null
+++ b/src/other/firefox/common/icons/briefcase.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m6 1c-1.108 0-2 0.892-2 2v2h-2c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h12c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-2v-2c0-1.108-0.892-2-2-2h-4zm0 1h4c0.554 0 1 0.446 1 1v2h-6v-2c0-0.554 0.446-1 1-1zm-4 4h1v8h-1c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm2 0h1 6 1v8h-8v-8zm9 0h1c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-1v-8z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/cart.svg b/src/other/firefox/common/icons/cart.svg
new file mode 100644
index 00000000..fada5cf5
--- /dev/null
+++ b/src/other/firefox/common/icons/cart.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m0.5 1a0.5 0.5 0 0 0-0.5 0.5 0.5 0.5 0 0 0 0.5 0.5h1.6152l1.9023 7.1289a0.50005 0.50005 0 0 0 0.48242 0.37109h9a0.50005 0.50005 0 0 0 0.47461-0.3418l1.5-4.5a0.50005 0.50005 0 0 0-0.47461-0.6582h-11.316l-0.70117-2.6289a0.50005 0.50005 0 0 0-0.48242-0.37109h-2zm3.4512 4h10.355l-1.168 3.5h-8.2539l-0.93359-3.5zm0.54883 6c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h9c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5h-9zm1.75 1.5a1.25 1.25 0 0 0-1.25 1.25 1.25 1.25 0 0 0 1.25 1.25 1.25 1.25 0 0 0 1.25-1.25 1.25 1.25 0 0 0-1.25-1.25zm5.5 0a1.25 1.25 0 0 0-1.25 1.25 1.25 1.25 0 0 0 1.25 1.25 1.25 1.25 0 0 0 1.25-1.25 1.25 1.25 0 0 0-1.25-1.25zm-5.5 1a0.25 0.25 0 0 1 0.25 0.25 0.25 0.25 0 0 1-0.25 0.25 0.25 0.25 0 0 1-0.25-0.25 0.25 0.25 0 0 1 0.25-0.25zm5.5 0a0.25 0.25 0 0 1 0.25 0.25 0.25 0.25 0 0 1-0.25 0.25 0.25 0.25 0 0 1-0.25-0.25 0.25 0.25 0 0 1 0.25-0.25z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/container-openin.svg b/src/other/firefox/common/icons/container-openin.svg
new file mode 100644
index 00000000..6acd5e39
--- /dev/null
+++ b/src/other/firefox/common/icons/container-openin.svg
@@ -0,0 +1,3 @@
+<svg data-name="icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m2 1c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm7.5 0c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h3.791l-4.1445 4.1465c-0.19587 0.19587-0.19587 0.51116 0 0.70703s0.51116 0.19587 0.70703 0l4.1465-4.1445v3.791c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-5c0-0.277-0.223-0.5-0.5-0.5h-5zm-7.5 1h4v4h-4v-4zm0 7c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm8 0c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm-8 1h4v4h-4v-4zm8 0h4v4h-4v-4z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/dollar.svg b/src/other/firefox/common/icons/dollar.svg
new file mode 100644
index 00000000..094e578b
--- /dev/null
+++ b/src/other/firefox/common/icons/dollar.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 1a7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7zm0 1c-0.277 0-0.5 0.223-0.5 0.5v0.92188c-1.2706 0.16126-2.4004 0.9536-2.4004 2.3789 0 1.3329 0.77308 2.0292 2.4004 2.2656v3.4141c-0.91099-0.10544-1.2653-0.55323-1.4492-1.3809-0.1-0.25-0.30078-0.34961-0.55078-0.34961h-0.19922c-0.25 0-0.45117 0.19922-0.45117 0.44922v0.20117c0.24465 1.2232 1.1139 2.0136 2.6504 2.1406v0.95898c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-0.95703c1.4181-0.068444 2.6504-0.871 2.6504-2.543 0-1.6641-1.1031-2.2249-2.6504-2.5762v-3.0098c0.82889 0.12188 1.2081 0.56323 1.4004 1.2363 0.1 0.25 0.24922 0.34961 0.44922 0.34961h0.20117c0.15-0.1 0.34961-0.19922 0.34961-0.44922v-0.20117c-0.29241-1.0234-1.1092-1.7121-2.4004-1.9316v-0.91797c0-0.277-0.223-0.5-0.5-0.5zm-0.5 2.3555v2.9336c-1.2073-0.25207-1.5508-0.6996-1.5508-1.4883-1e-7 -0.78559 0.62862-1.3313 1.5508-1.4453zm1 4.1289c0.93622 0.16145 1.5529 0.49238 1.5996 1.5664 0 0.94045-0.5746 1.4389-1.5996 1.5781v-3.1445z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/fingerprint.svg b/src/other/firefox/common/icons/fingerprint.svg
new file mode 100644
index 00000000..fe7246c0
--- /dev/null
+++ b/src/other/firefox/common/icons/fingerprint.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path transform="matrix(-.46973 .46973 -.46973 -.46973 21.705 6.5082)" d="m6.8081 20.663c2.6543 2.6482 6.3446 3.8716 9.9604 3.4324a0.75267 0.75267 0 0 0 0.65696-0.83991 0.75267 0.75267 0 0 0-0.83991-0.65696c-3.1617 0.38403-6.3866-0.68021-8.7109-2.9979-2.1069-2.1192-3.2141-5.0329-3.0478-8.0165a0.75267 0.75267 0 0 0-0.71101-0.79417 0.75267 0.75267 0 0 0-0.79417 0.71101c-0.19 3.409 1.0771 6.7387 3.4844 9.16a0.75274 0.75274 0 0 0 0.002079 0.002079zm2.1684-2.1018c2.8534 2.693 7.4695 3.0316 10.522 0.33887 2.8395-2.5051 3.3354-7.0148 0.72764-9.9042-2.2328-2.474-6.2159-2.8926-8.7379-0.54677-2.1078 1.9605-2.4478 5.4209-0.35966 7.5737 1.6885 1.7408 4.6315 2.0041 6.4116 0.16632 1.3725-1.417 1.5583-3.8579-0.043659-5.2577-0.5738-0.50142-1.3132-0.76106-2.0644-0.74635-0.7512 0.0147-1.5447 0.34549-2.0436 1.0457-0.31848 0.44694-0.45717 0.98131-0.39501 1.5384s0.42442 1.1915 1.0748 1.4366c0.48444 0.18256 0.78262 0.095159 1.1601-0.099791 0.18872-0.09747 0.42044-0.25774 0.54053-0.58627 0.12009-0.32853 0.008268-0.73533-0.1684-0.97088-0.24939-0.33187-0.71962-0.39845-1.052-0.14969 0 0-0.008203-0.19035 0.066527-0.29521 0.20438-0.28681 0.48511-0.41081 0.84614-0.41787 0.36103-0.0071 0.76765 0.14109 1.0416 0.38045 0.88618 0.7744 0.77507 2.2296-0.043659 3.0748-1.1405 1.1774-3.12 1.0023-4.2515-0.16424-1.4606-1.5058-1.2155-4.0133 0.30353-5.4261 1.8706-1.7398 4.905-1.4232 6.5966 0.45114 2.017 2.2349 1.6244 5.7984-0.60706 7.7671-2.5989 2.2928-6.6866 1.829-8.9313-0.7609-2.5679-2.9628-2.0303-7.5838 0.91891-10.104 3.3265-2.8423 8.4754-2.2261 11.27 1.0831 3.1164 3.6901 2.4286 9.3652-1.2411 12.434-0.31945 0.26635-0.36224 0.74104-0.095633 1.0603 0.26635 0.31945 0.74104 0.36224 1.0603 0.095633 4.2979-3.5945 5.1007-10.214 1.4262-14.565-1.6611-1.9668-4.0132-3.1289-6.449-3.3763-2.4358-0.24736-4.9548 0.42167-6.9479 2.1247-3.5692 3.0498-4.2175 8.6094-1.079 12.231 0.17359 0.20028 0.35446 0.39011 0.54469 0.56964zm17.769-2.4553a0.75267 0.75267 0 0 0 0.26819 0.1185 0.75267 0.75267 0 0 0 0.90228-0.56964c0.91298-4.0285-0.30614-8.247-3.2245-11.17a0.75274 0.75274 0 0 0-0.002079-0.002079c-2.4214-2.4087-5.7519-3.6765-9.162-3.4864a0.75267 0.75267 0 0 0-0.71101 0.79417 0.75267 0.75267 0 0 0 0.79417 0.71101c2.9836-0.16629 5.8975 0.94101 8.0165 3.0478 2.5549 2.5592 3.6163 6.2465 2.817 9.7733a0.75267 0.75267 0 0 0 0.30145 0.78377z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/multi-account-container.svg b/src/other/firefox/common/icons/multi-account-container.svg
new file mode 100644
index 00000000..f4a187f1
--- /dev/null
+++ b/src/other/firefox/common/icons/multi-account-container.svg
@@ -0,0 +1,3 @@
+<svg fill="context-fill" fill-opacity="context-fill-opacity" data-name="icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2 1c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm10 0c-0.277 0-0.5 0.223-0.5 0.5v2h-2c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h2v2c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-2h2c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5h-2v-2c0-0.277-0.223-0.5-0.5-0.5zm-10 1h4v4h-4v-4zm0 7c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm8 0c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm-8 1h4v4h-4v-4zm8 0h4v4h-4v-4z"/>
+</svg>
diff --git a/src/other/firefox/common/parts/icons.css b/src/other/firefox/common/parts/icons.css
index e66a5b9c..49ef70e7 100644
--- a/src/other/firefox/common/parts/icons.css
+++ b/src/other/firefox/common/parts/icons.css
@@ -665,6 +665,44 @@ toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
 	list-style-image: url("../icons/tool-profiler.svg") !important;
 }
 
+/* page action */
+.urlbar-page-action {
+	list-style-image: url("../icons/container-openin.svg") !important;
+
+	> .urlbar-icon {
+		filter: none !important;
+	}
+}
+
+#_testpilot-containers-BAP .toolbarbutton-icon {
+	list-style-image: url("../icons/multi-account-container.svg") !important;
+}
+
+.userContext-icon, .subviewbutton[usercontextid] > .toolbarbutton-icon, #userContext-indicator {
+	background-image: var(--identity-icon) !important;
+	-moz-context-properties: fill;
+	fill: var(--identity-icon-color) !important;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+.identity-icon-briefcase {
+	--identity-icon: url("../icons/briefcase.svg") !important;
+}
+
+.identity-icon-fingerprint {
+	--identity-icon: url("../icons/fingerprint.svg") !important;
+}
+
+.identity-icon-cart {
+	--identity-icon: url("../icons/cart.svg") !important;
+}
+
+.identity-icon-dollar {
+	--identity-icon: url("../icons/dollar.svg") !important;
+}
+
 /* Fix flat buttons icons aproach */
 button.close::before {
 	content: "";

From e36a97939eca4cc0d18d7c71c26383b4371afba4 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 1 Dec 2024 19:52:19 +0800
Subject: [PATCH 21/22] update

---
 .../firefox/Monterey/parts/tabsbar-alt.css    | 10 ++---
 src/other/firefox/Monterey/parts/tabsbar.css  | 10 ++---
 .../WhiteSur/parts/headerbar-urlbar.css       |  2 +-
 .../WhiteSur/parts/tabsbar-adaptive.css       |  6 +--
 src/other/firefox/WhiteSur/parts/tabsbar.css  |  6 +--
 src/other/firefox/common/icons/side-view.svg  |  3 ++
 .../common/icons/universal-notepad.svg        |  3 ++
 src/other/firefox/common/parts/icons.css      | 41 +++++++++++++++----
 8 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/other/firefox/common/icons/side-view.svg
 create mode 100644 src/other/firefox/common/icons/universal-notepad.svg

diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css
index d70bc8c4..c0c016b3 100644
--- a/src/other/firefox/Monterey/parts/tabsbar-alt.css
+++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css
@@ -210,15 +210,15 @@ tab[selected]:-moz-window-inactive .tab-label {
 }
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-background) !important;
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+	background-color: transparent !important;
 }
 
-.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
+.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+	background-color: transparent !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
 	background-color: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css
index 2ca0836e..c78db6a0 100644
--- a/src/other/firefox/Monterey/parts/tabsbar.css
+++ b/src/other/firefox/Monterey/parts/tabsbar.css
@@ -158,15 +158,15 @@ tab[selected]:-moz-window-inactive .tab-label {
 	inset-inline-end: 0 !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-background) !important;
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+	background-color: transparent !important;
 }
 
-.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
+.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+	background-color: transparent !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
 	background-color: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
index 1ca04602..ec994e19 100644
--- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
+++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
@@ -209,7 +209,7 @@ toolbarspring {
 	border-radius: 5px !important;
 }
 
-#star-button-box.urlbar-page-action {
+.urlbar-page-action {
 	padding: 5px 6px !important;
 }
 
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
index 6125a2a7..c6090622 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
@@ -383,15 +383,15 @@ tab[selected]:-moz-window-inactive {
 	display: none !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
 	background-color: var(--gnome-tabbar-tab-background) !important;
 }
 
-.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
 	background-color: var(--gnome-tabbar-tab-active-background) !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
 	background-color: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css
index 92adcd1a..7b445528 100644
--- a/src/other/firefox/WhiteSur/parts/tabsbar.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar.css
@@ -372,15 +372,15 @@ tab[selected]:-moz-window-inactive {
 	display: none !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
 	background-color: var(--gnome-tabbar-tab-background) !important;
 }
 
-.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
 	background-color: var(--gnome-tabbar-tab-active-background) !important;
 }
 
-.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
+.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
 	background-color: var(--gnome-tabbar-tab-hover-background) !important;
 }
 
diff --git a/src/other/firefox/common/icons/side-view.svg b/src/other/firefox/common/icons/side-view.svg
new file mode 100644
index 00000000..857946d1
--- /dev/null
+++ b/src/other/firefox/common/icons/side-view.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m3 1c-1.662 0-3 1.338-3 3v8c0 1.662 1.338 3 3 3h10c1.662 0 3-1.338 3-3v-8c0-1.662-1.338-3-3-3h-10zm0 1h4.5v5h1v-5h4.5c1.108 0 2 0.892 2 2v8c0 1.108-0.892 2-2 2h-4.5v-4h-1v4h-4.5c-1.108 0-2-0.892-2-2v-8c0-1.108 0.892-2 2-2zm2.4004 3.9492c-0.15 0-0.30039 0.050391-0.40039 0.15039l-1.9004 2c-0.2 0.2-0.2 0.60078 0 0.80078l1.9004 1.9004c0.2 0.2 0.60078 0.2 0.80078 0 0.2-0.2 0.2-0.60078 0-0.80078l-1-1h6.3984l-1 1.0996c-0.2 0.2-0.2 0.60078 0 0.80078 0.2 0.2 0.60078 0.2 0.80078 0l1.9004-1.9004c0.2-0.2 0.2-0.60078 0-0.80078l-1.9004-2.0996c-0.2-0.2-0.60078-0.2-0.80078 0-0.2 0.2-0.2 0.60078 0 0.80078l1 1.0996h-6.3984l1-1.0996c0.2-0.2 0.2-0.60078 0-0.80078-0.1-0.1-0.25039-0.15039-0.40039-0.15039z"/>
+</svg>
diff --git a/src/other/firefox/common/icons/universal-notepad.svg b/src/other/firefox/common/icons/universal-notepad.svg
new file mode 100644
index 00000000..4854308d
--- /dev/null
+++ b/src/other/firefox/common/icons/universal-notepad.svg
@@ -0,0 +1,3 @@
+<svg fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.4746 0c-0.26491 0.013342-0.47461 0.23166-0.47461 0.5v0.5h-2c-1.108 0-2 0.892-2 2v11c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-11c0-1.108-0.892-2-2-2h-2v-0.5c0-0.277-0.223-0.5-0.5-0.5s-0.5 0.223-0.5 0.5v0.5h-4v-0.5c0-0.277-0.223-0.5-0.5-0.5-0.0086562 0-0.016845-4.3039e-4 -0.02539 0zm-2.4746 2h9.9999c0.554 0 1 0.446 1 1v11c0 0.554-0.446 1-1 1h-10c-0.554 0-1-0.446-1-1v-11c0-0.554 0.446-1 1-1zm1.4982 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5zm0 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5zm0 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5z"/>
+</svg>
diff --git a/src/other/firefox/common/parts/icons.css b/src/other/firefox/common/parts/icons.css
index 49ef70e7..9fc754fc 100644
--- a/src/other/firefox/common/parts/icons.css
+++ b/src/other/firefox/common/parts/icons.css
@@ -266,16 +266,19 @@ menu[disabled] > .menu-right {
 }
 
 /* Sound icons */
-.tab-icon-overlay[soundplaying] {
+.tab-icon-overlay:not([crashed])[soundplaying] {
 	list-style-image: url("../icons/audio-playing-symbolic.svg") !important;
+	background-image: none !important;
 }
 
-.tab-icon-overlay[muted] {
+.tab-icon-overlay:not([crashed])[muted] {
 	list-style-image: url("../icons/audio-muted-symbolic.svg") !important;
+	background-image: none !important;
 }
 
 .tab-icon-overlay[activemedia-blocked] {
 	list-style-image: url("../icons/tab-audio-blocked-small.svg") !important;
+	background-image: none !important;
 }
 
 .tab-icon-stack[activemedia-blocked="true"] .tab-icon-image {
@@ -357,7 +360,8 @@ menu[disabled] > .menu-right {
 #add-ons-button,
 #unified-extensions-button,
 #addons-notification-icon,
-.install-icon {
+.install-icon,
+#identity-box[pageproxystate="valid"].extensionPage #identity-icon {
 	list-style-image: url("../icons/application-x-addon-symbolic.svg") !important;
 }
 /* Find button */
@@ -665,13 +669,13 @@ toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
 	list-style-image: url("../icons/tool-profiler.svg") !important;
 }
 
-/* page action */
-.urlbar-page-action {
-	list-style-image: url("../icons/container-openin.svg") !important;
+/* containers extension */
+.urlbar-page-action > .urlbar-icon {
+	filter: none !important;
+}
 
-	> .urlbar-icon {
-		filter: none !important;
-	}
+#pageAction-urlbar-_testpilot-containers {
+	list-style-image: url("../icons/container-openin.svg") !important;
 }
 
 #_testpilot-containers-BAP .toolbarbutton-icon {
@@ -703,6 +707,25 @@ toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
 	--identity-icon: url("../icons/dollar.svg") !important;
 }
 
+/* side view extension */
+#pageAction-urlbar-side-view_mozilla_org,
+#sidebarswitcher_menu_side-view_mozilla_org-sidebar-action,
+#side-view_mozilla_org-BAP .toolbarbutton-icon,
+#sidebar-box[sidebarcommand="side-view_mozilla_org-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+	list-style-image: url("../icons/side-view.svg") !important;
+}
+
+#side-view_mozilla_org-menuitem-_open-in-sidebar .menu-iconic-icon {
+	background-image: url("../icons/side-view.svg") !important;
+}
+
+/* Firefox note extension */
+#notes_mozilla_com-BAP .toolbarbutton-icon,
+#sidebarswitcher_menu_notes_mozilla_com-sidebar-action,
+#sidebar-box[sidebarcommand="notes_mozilla_com-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+	list-style-image: url("../icons/universal-notepad.svg") !important;
+}
+
 /* Fix flat buttons icons aproach */
 button.close::before {
 	content: "";

From 04790fc2c2f000c34adb0eb9ea04c1e7b533122c Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Mon, 2 Dec 2024 21:54:38 +0800
Subject: [PATCH 22/22] Fixed #877

---
 README.md                                     |   4 +-
 libs/lib-install.sh                           |   9 +-
 .../firefox/Monterey/colors/dark-nord.css     | 172 +++++++++++++++++
 src/other/firefox/Monterey/colors/dark.css    |   5 +-
 src/other/firefox/Monterey/colors/darker.css  |   5 +-
 .../Monterey/colors/light-adaptive.css        |   4 +
 .../firefox/Monterey/colors/light-nord.css    | 169 +++++++++++++++++
 src/other/firefox/Monterey/colors/light.css   |   5 +-
 .../firefox/WhiteSur/colors/dark-adaptive.css |   4 +
 .../firefox/WhiteSur/colors/dark-nord.css     | 176 ++++++++++++++++++
 src/other/firefox/WhiteSur/colors/dark.css    |   4 +
 src/other/firefox/WhiteSur/colors/darker.css  |   4 +
 .../WhiteSur/colors/light-adaptive.css        |   4 +
 .../firefox/WhiteSur/colors/light-nord.css    | 173 +++++++++++++++++
 src/other/firefox/WhiteSur/colors/light.css   |   4 +
 src/other/firefox/WhiteSur/theme-nord.css     |  36 ++++
 src/other/firefox/common/pages/common.css     |  17 +-
 .../firefox/userChrome-WhiteSur-nord.css      |  42 +++++
 .../firefox/userContent-WhiteSur-nord.css     |   7 +
 tweaks.sh                                     |   7 +-
 20 files changed, 836 insertions(+), 15 deletions(-)
 create mode 100644 src/other/firefox/Monterey/colors/dark-nord.css
 create mode 100644 src/other/firefox/Monterey/colors/light-nord.css
 create mode 100644 src/other/firefox/WhiteSur/colors/dark-nord.css
 create mode 100644 src/other/firefox/WhiteSur/colors/light-nord.css
 create mode 100644 src/other/firefox/WhiteSur/theme-nord.css
 create mode 100644 src/other/firefox/userChrome-WhiteSur-nord.css
 create mode 100644 src/other/firefox/userContent-WhiteSur-nord.css

diff --git a/README.md b/README.md
index 254be791..738ed63b 100644
--- a/README.md
+++ b/README.md
@@ -240,7 +240,9 @@ OPTIONS:
 
       4. darker         Darker Firefox theme version    Darker Firefox theme version
 
-      5. adaptive       Adaptive color version   You need install adaptive-tab-bar-colour plugin first   https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
+      5. nord           Nord Firefox colorscheme version    Nord Firefox colorscheme version
+
+      6. adaptive       Adaptive color version   You need install adaptive-tab-bar-colour plugin first   https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
 
   -e, --edit-firefox [(monterey|flat)|alt|(darker|adaptive)]
    Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles. 
diff --git a/libs/lib-install.sh b/libs/lib-install.sh
index e8ccfedc..04f6da8e 100755
--- a/libs/lib-install.sh
+++ b/libs/lib-install.sh
@@ -670,7 +670,10 @@ install_firefox_theme() {
     local TARGET_DIR="${FIREFOX_THEME_DIR}"
   fi
 
+  local theme_type="${darker}${adaptive}${colorscheme}"
+
   remove_firefox_theme
+
   udo mkdir -p                                                                                "${TARGET_DIR}"
   udo cp -rf "${FIREFOX_SRC_DIR}"/customChrome.css                                            "${TARGET_DIR}"
 
@@ -682,12 +685,12 @@ install_firefox_theme() {
   cp -rf "${FIREFOX_SRC_DIR}"/common/*.css                                                    "${TARGET_DIR}/${theme_name}"
   cp -rf "${FIREFOX_SRC_DIR}"/common/parts/*.css                                              "${TARGET_DIR}/${theme_name}"/parts
   [[ -f "${TARGET_DIR}"/userChrome.css ]] && mv "${TARGET_DIR}"/userChrome.css                "${TARGET_DIR}"/userChrome.css.bak
-  cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${darker}${adaptive}".css              "${TARGET_DIR}"/userChrome.css
+  cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${theme_type}".css                     "${TARGET_DIR}"/userChrome.css
   [[ -f "${TARGET_DIR}"/userContent.css ]] && mv "${TARGET_DIR}"/userContent.css              "${TARGET_DIR}"/userContent.css.bak
-  cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${darker}${adaptive}".css             "${TARGET_DIR}"/userContent.css
+  cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${theme_type}".css                    "${TARGET_DIR}"/userContent.css
 
   if [[ "${firefoxtheme}" == 'Flat' && "${theme_name}" == 'Monterey' ]]; then
-    cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${darker}${adaptive}".css             "${TARGET_DIR}"/userChrome.css
+    cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${theme_type}".css                    "${TARGET_DIR}"/userChrome.css
     cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/parts/headerbar-urlbar.css                           "${TARGET_DIR}"/Monterey/parts/headerbar-urlbar-alt.css
   fi
 
diff --git a/src/other/firefox/Monterey/colors/dark-nord.css b/src/other/firefox/Monterey/colors/dark-nord.css
new file mode 100644
index 00000000..0d896c47
--- /dev/null
+++ b/src/other/firefox/Monterey/colors/dark-nord.css
@@ -0,0 +1,172 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #252932;
+	--gnome-content-page-dialog-background: #313742;
+	--gnome-content-page-background: #15181d;
+	--gnome-content-box-background: #20242b;
+	--gnome-content-page-color: #eef3fd;
+	--theme-primary-color: #5271ad;
+	--theme-primary-hover-color: #6085cc;
+	--theme-primary-active-color: #73a0f5;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #2e3440;
+	--gnome-tabstoolbar-background: #191c23;
+	--gnome-findbar-background: #2b303b;
+	--gnome-toolbar-color: #fbfcfd;
+	--gnome-toolbar-icon-fill: #fbfcfd;
+	--gnome-toolbar-border-color: #0e0f0f;
+	--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
+	--gnome-inactive-toolbar-background: #242931;
+	--gnome-inactive-toolbar-border-color: #0d0f12;
+
+	/* Sidebar */
+	--sidebar-background-color: #252932;
+	--gnome-sidebar-background: #2c313b;
+	--gnome-inactive-sidebar-background: #2f343f;
+	--gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(43, 48, 59, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: rgba(43, 48, 59, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
+	--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
+	--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
+
+	/* Header bar */
+	--gnome-headerbar-background: #2e3440;
+	--gnome-headerbar-border-color: #0e0f0f;
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: #242931;
+	--gnome-inactive-headerbar-border-color: #0d0f12;
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08););
+
+	/* Buttons */
+	--gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%);
+	--gnome-button-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
+	--gnome-button-active-color: rgba(255, 255, 255, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%);
+	--gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%);
+	--gnome-button-active-border-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%);
+	--gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: linear-gradient(#292e38, #292e38);
+	--gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
+	--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
+	--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
+	--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
+	--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #323946;
+	--gnome-urlbar-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--gnome-urlbar-color: #f0f5ff;
+	--gnome-hover-urlbar-border-color: #414958;
+	--gnome-inactive-urlbar-background: #292e38;
+	--gnome-inactive-urlbar-border-color: #1e2128;
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: #c9cdd6;
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: #25003e;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06);
+	--gnome-tabbar-tab-color: #828690;
+	--gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12);
+	--gnome-tabbar-tab-hover-color: #b4bbc8;
+	--gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16);
+	--gnome-tabbar-tab-active-color: #fbfcfd;
+	--gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16);
+	--gnome-inactive-tabbar-tab-color: #5e6168;
+	--gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03);
+	--gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-tabbar-tab-active-color: #7b8089;
+	--gnome-tab-attention-icon-color: #8694c4;
+
+	/* Switch */
+	--gnome-switch-background: #343a46;
+	--gnome-switch-hover-background: #3d4452;
+	--gnome-switch-active-background: #474f60;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #fbfcfd;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-pressed-background: var(--theme-primary-color);
+	--gnome-switch-pressed-hover-background: var(--theme-primary-hover-color);
+	--gnome-switch-pressed-active-background: var(--theme-primary-active-color);
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
+	--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
+	--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
+
+	/* Private window colors */
+	--gnome-private-accent: #78aeed;
+
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #292e38;
+	/* Header bar */
+	--gnome-private-headerbar-background: #252F49;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #FBFBFE;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #1b1e24;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}
diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css
index e21bc34e..488841c7 100644
--- a/src/other/firefox/Monterey/colors/dark.css
+++ b/src/other/firefox/Monterey/colors/dark.css
@@ -9,7 +9,10 @@
   :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #242424;
-	--gnome-browser-content-box-background: #323232;
+	--gnome-content-page-dialog-background: #424242;
+	--gnome-content-page-background: #1d1d1d;
+	--gnome-content-box-background: #2b2b2b;
+	--gnome-content-page-color: #fdfdfd;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/Monterey/colors/darker.css b/src/other/firefox/Monterey/colors/darker.css
index 6aee5e72..5ae8beaa 100644
--- a/src/other/firefox/Monterey/colors/darker.css
+++ b/src/other/firefox/Monterey/colors/darker.css
@@ -9,7 +9,10 @@
   :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #1f1f1f;
-	--gnome-browser-content-box-background: #323232;
+	--gnome-content-page-dialog-background: #242424;
+	--gnome-content-page-background: #101010;
+	--gnome-content-box-background: #1b1b1b;
+	--gnome-content-page-color: #dddddd;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/Monterey/colors/light-adaptive.css b/src/other/firefox/Monterey/colors/light-adaptive.css
index 4c49eaa1..b0a374a7 100644
--- a/src/other/firefox/Monterey/colors/light-adaptive.css
+++ b/src/other/firefox/Monterey/colors/light-adaptive.css
@@ -9,6 +9,10 @@
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff);
 	--gnome-browser-content-box-background: var(--lwt-accent-color, #ffffff);
+	--gnome-content-page-dialog-background: #ffffff;
+	--gnome-content-page-background: #f2f2f2;
+	--gnome-content-box-background: #ffffff;
+	--gnome-content-page-color: #242424;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/Monterey/colors/light-nord.css b/src/other/firefox/Monterey/colors/light-nord.css
new file mode 100644
index 00000000..45deecc4
--- /dev/null
+++ b/src/other/firefox/Monterey/colors/light-nord.css
@@ -0,0 +1,169 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+:root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #f3f4f6;
+	--gnome-content-page-dialog-background: #fbfcfd;
+	--gnome-content-page-background: #e3e8f2;
+	--gnome-content-box-background: #fbfcfd;
+	--gnome-content-page-color: #1b1e24;
+	--theme-primary-color: #5271ad;
+	--theme-primary-hover-color: #6085cc;
+	--theme-primary-active-color: #73a0f5;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #fbfcfd;
+	--gnome-tabstoolbar-background: #d7dce5;
+	--gnome-findbar-background: #f3f4f6;
+	--gnome-toolbar-color: #22262e;
+	--gnome-toolbar-icon-fill: #22262e;
+	--gnome-toolbar-border-color: #c3c7cf;
+	--gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45);
+	--gnome-inactive-toolbar-background: #f6f5f4;
+	--gnome-inactive-toolbar-border-color: #cdd1da;
+
+	/* Sidebar */
+	--gnome-sidebar-background: #f3f4f6;
+	--gnome-inactive-sidebar-background: #f2f4f9;
+	--gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(255, 255, 255, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-background: rgba(255, 255, 255, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
+	--gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1);
+	--gnome-popover-button-active-background: rgba(0, 0, 0, 0.2);
+	--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
+
+	/* Header bar */
+	--gnome-headerbar-background: #fbfcfd;
+	--gnome-headerbar-border-color: #c3c7cf;
+	--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
+	--gnome-inactive-headerbar-background: #f3f4f6;
+	--gnome-inactive-headerbar-border-color: #cdd1da;
+	--gnome-inactive-headerbar-box-shadow: 0 1px #fff inset;
+
+	/* Buttons */
+	--gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%);
+	--gnome-button-border-color: #c3c7cf;
+	--gnome-button-border-bottom-color: #c3c7cf;
+	--gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03);
+	--gnome-button-hover-color: rgba(0, 0, 0, 0.1);
+	--gnome-button-active-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%);
+	--gnome-button-active-background: #c3c7cf;
+	--gnome-button-active-border-color: #a7abb2;
+	--gnome-button-active-border-bottom-color: #a7abb2;
+	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
+	--gnome-button-disabled-background: #faf9f8;
+	--gnome-button-disabled-border-color: #c3c7cf;
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-inactive-button-background: #f6f5f4;
+	--gnome-inactive-button-border-color: #cdd1da;
+	--gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4);
+	--gnome-button-suggested-action-border-color: #1b6acb;
+	--gnome-button-suggested-action-border-bottom-color: #15539e;
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px);
+	--gnome-button-suggested-action-active-border-color: #1b6acb;
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24);
+	--gnome-button-destructive-action-border-color: #b2161d;
+	--gnome-button-destructive-action-border-bottom-color: #851015;
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px);
+	--gnome-button-destructive-action-active-border-color: #b2161d;
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1);
+	--gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #f3f4f6;
+	--gnome-urlbar-border-color: #abafb6;
+	--gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12);
+	--gnome-urlbar-color: #020202;
+	--gnome-hover-urlbar-border-color: #d7dce5;
+	--gnome-inactive-urlbar-background: #e9ebf0;
+	--gnome-inactive-urlbar-border-color: #cdd1da;
+	--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+	--gnome-inactive-urlbar-color: #252932;
+	--gnome-focused-urlbar-border-color: #5683DA;
+	--gnome-focused-urlbar-highlight-color: #6592E9;
+	--gnome-private-urlbar-background: #e6c2ff;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: #e6ebf5;
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-hover-background: #f0f0f0;
+	--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
+	--gnome-tabbar-tab-active-background: #e8e8e8;
+	--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
+	--gnome-tabbar-tab-active-hover-background: #f0f0f0;
+	--gnome-inactive-tabbar-tab-color: #8b8e8f;
+	--gnome-inactive-tabbar-tab-background: #f0f0f0;
+	--gnome-inactive-tabbar-tab-active-background: #eeeeee;
+	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-tab-attention-icon-color: #718be8;
+
+	/* Switch */
+	--gnome-switch-background: #a7abb2;
+	--gnome-switch-hover-background: #969aa0;
+	--gnome-switch-active-background: #7b8292;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #fbfcfd;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+	--gnome-switch-pressed-background: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
+	--gnome-icons-hack-filter: none;
+	--gnome-window-icons-hack-filter: invert(30%);
+
+	/* Private window colors */
+	--gnome-private-accent: #1c71d8;
+
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #fbfcfd;
+	/* Header bar */
+	--gnome-private-headerbar-background: #D7E3F0;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #20123A;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #ebf0fa;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #15141A;
+}
diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css
index 09331b77..2b55a020 100644
--- a/src/other/firefox/Monterey/colors/light.css
+++ b/src/other/firefox/Monterey/colors/light.css
@@ -8,7 +8,10 @@
 :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #f5f5f5;
-	--gnome-browser-content-box-background: #ffffff;
+	--gnome-content-page-dialog-background: #ffffff;
+	--gnome-content-page-background: #f2f2f2;
+	--gnome-content-box-background: #ffffff;
+	--gnome-content-page-color: #242424;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/colors/dark-adaptive.css b/src/other/firefox/WhiteSur/colors/dark-adaptive.css
index d67e64cb..c849d3f7 100644
--- a/src/other/firefox/WhiteSur/colors/dark-adaptive.css
+++ b/src/other/firefox/WhiteSur/colors/dark-adaptive.css
@@ -9,6 +9,10 @@
   :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: var(--lwt-accent-color, #282828);
+	--gnome-content-page-dialog-background: #424242;
+	--gnome-content-page-background: #1d1d1d;
+	--gnome-content-box-background: #2b2b2b;
+	--gnome-content-page-color: #fdfdfd;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/colors/dark-nord.css b/src/other/firefox/WhiteSur/colors/dark-nord.css
new file mode 100644
index 00000000..35dc5ef1
--- /dev/null
+++ b/src/other/firefox/WhiteSur/colors/dark-nord.css
@@ -0,0 +1,176 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #252932;
+	--gnome-content-page-dialog-background: #313742;
+	--gnome-content-page-background: #15181d;
+	--gnome-content-box-background: #20242b;
+	--gnome-content-page-color: #eef3fd;
+	--theme-primary-color: #5271ad;
+	--theme-primary-hover-color: #6085cc;
+	--theme-primary-active-color: #73a0f5;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #2e3440;
+	--gnome-tabstoolbar-background: #191c23;
+	--gnome-findbar-background: #2b303b;
+	--gnome-toolbar-color: #fbfcfd;
+	--gnome-toolbar-icon-fill: #fbfcfd;
+	--gnome-toolbar-border-color: #0e0f0f;
+	--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
+	--gnome-inactive-toolbar-background: #242931;
+	--gnome-inactive-toolbar-border-color: #0d0f12;
+
+	/* Sidebar */
+	--sidebar-background-color: #252932;
+	--gnome-sidebar-background: #2c313b;
+	--gnome-inactive-sidebar-background: #2f343f;
+	--gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(43, 48, 59, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: rgba(43, 48, 59, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
+	--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
+	--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
+
+	/* Header bar */
+	--gnome-headerbar-background: #2e3440;
+	--gnome-headerbar-border-color: #0e0f0f;
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: #242931;
+	--gnome-inactive-headerbar-border-color: #0d0f12;
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%);
+	--gnome-button-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
+	--gnome-button-active-color: rgba(255, 255, 255, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%);
+	--gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%);
+	--gnome-button-active-border-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%);
+	--gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: linear-gradient(#292e38, #292e38);
+	--gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
+	--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
+	--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
+	--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
+	--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #323946;
+	--gnome-urlbar-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--gnome-urlbar-color: #f0f5ff;
+	--gnome-hover-urlbar-border-color: #414958;
+	--gnome-inactive-urlbar-background: #292e38;
+	--gnome-inactive-urlbar-border-color: #1e2128;
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: #c9cdd6;
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: #25003e;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: #1c1f26;
+	--gnome-tabbar-tab-color: #828690;
+	--gnome-tabbar-tab-border-color: #0b0c0f;
+	--gnome-tabbar-tab-hover-background: #20242b;
+	--gnome-tabbar-tab-hover-border-color: #0b0c0f;
+	--gnome-tabbar-tab-hover-color: #b4bbc8;
+	--gnome-tabbar-tab-active-background: #2e3440;
+	--gnome-tabbar-tab-active-border-color: #0e0f0f;
+	--gnome-tabbar-tab-active-color: #fbfcfd;
+	--gnome-tabbar-tab-active-hover-background: #242931;
+	--gnome-inactive-tabbar-tab-color: #5e6168;
+	--gnome-inactive-tabbar-tab-background: #181a20;
+	--gnome-inactive-tabbar-tab-active-background: #242931;
+	--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--gnome-inactive-tabbar-tab-active-color: #657189;
+	--gnome-tab-attention-icon-color: #8694c4;
+
+	/* Switch */
+	--gnome-switch-background: #343a46;
+	--gnome-switch-hover-background: #3d4452;
+	--gnome-switch-active-background: #474f60;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #fbfcfd;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-pressed-background: var(--theme-primary-color);
+	--gnome-switch-pressed-hover-background: var(--theme-primary-hover-color);
+	--gnome-switch-pressed-active-background: var(--theme-primary-active-color);
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
+	--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
+	--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
+
+	/* Private window colors */
+	--gnome-private-accent: #78aeed;
+
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #292e38;
+	/* Header bar */
+	--gnome-private-headerbar-background: #252F49;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #FBFBFE;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #1b1e24;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}
diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css
index 670c078d..7afec300 100644
--- a/src/other/firefox/WhiteSur/colors/dark.css
+++ b/src/other/firefox/WhiteSur/colors/dark.css
@@ -9,6 +9,10 @@
   :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #242424;
+	--gnome-content-page-dialog-background: #424242;
+	--gnome-content-page-background: #1d1d1d;
+	--gnome-content-box-background: #2b2b2b;
+	--gnome-content-page-color: #fdfdfd;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/colors/darker.css b/src/other/firefox/WhiteSur/colors/darker.css
index c86ac329..df518dd3 100644
--- a/src/other/firefox/WhiteSur/colors/darker.css
+++ b/src/other/firefox/WhiteSur/colors/darker.css
@@ -9,6 +9,10 @@
   :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #1f1f1f;
+	--gnome-content-page-dialog-background: #242424;
+	--gnome-content-page-background: #101010;
+	--gnome-content-box-background: #1b1b1b;
+	--gnome-content-page-color: #dddddd;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/colors/light-adaptive.css b/src/other/firefox/WhiteSur/colors/light-adaptive.css
index 34488a94..cfbbe45c 100644
--- a/src/other/firefox/WhiteSur/colors/light-adaptive.css
+++ b/src/other/firefox/WhiteSur/colors/light-adaptive.css
@@ -8,6 +8,10 @@
 :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff);
+	--gnome-content-page-dialog-background: #ffffff;
+	--gnome-content-page-background: #f2f2f2;
+	--gnome-content-box-background: #ffffff;
+	--gnome-content-page-color: #242424;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/colors/light-nord.css b/src/other/firefox/WhiteSur/colors/light-nord.css
new file mode 100644
index 00000000..8a0ed6cd
--- /dev/null
+++ b/src/other/firefox/WhiteSur/colors/light-nord.css
@@ -0,0 +1,173 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+:root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #f3f4f6;
+	--gnome-content-page-dialog-background: #fbfcfd;
+	--gnome-content-page-background: #e3e8f2;
+	--gnome-content-box-background: #fbfcfd;
+	--gnome-content-page-color: #1b1e24;
+	--theme-primary-color: #5271ad;
+	--theme-primary-hover-color: #6085cc;
+	--theme-primary-active-color: #73a0f5;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #fbfcfd;
+	--gnome-tabstoolbar-background: #d7dce5;
+	--gnome-findbar-background: #f3f4f6;
+	--gnome-toolbar-color: #22262e;
+	--gnome-toolbar-icon-fill: #22262e;
+	--gnome-toolbar-border-color: #c3c7cf;
+	--gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45);
+	--gnome-inactive-toolbar-background: #f6f5f4;
+	--gnome-inactive-toolbar-border-color: #cdd1da;
+
+	/* Sidebar */
+	--gnome-sidebar-background: #f3f4f6;
+	--gnome-inactive-sidebar-background: #f2f4f9;
+	--gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(255, 255, 255, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-background: rgba(255, 255, 255, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
+	--gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1);
+	--gnome-popover-button-active-background: rgba(0, 0, 0, 0.2);
+	--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
+
+	/* Header bar */
+	--gnome-headerbar-background: #fbfcfd;
+	--gnome-headerbar-border-color: #c3c7cf;
+	--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
+	--gnome-inactive-headerbar-background: #f3f4f6;
+	--gnome-inactive-headerbar-border-color: #cdd1da;
+	--gnome-inactive-headerbar-box-shadow: 0 1px #fff inset;
+
+	/* Buttons */
+	--gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%);
+	--gnome-button-border-color: #c3c7cf;
+	--gnome-button-border-bottom-color: #c3c7cf;
+	--gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03);
+	--gnome-button-hover-color: rgba(0, 0, 0, 0.1);
+	--gnome-button-active-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%);
+	--gnome-button-active-background: #c3c7cf;
+	--gnome-button-active-border-color: #a7abb2;
+	--gnome-button-active-border-bottom-color: #a7abb2;
+	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
+	--gnome-button-disabled-background: #faf9f8;
+	--gnome-button-disabled-border-color: #c3c7cf;
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-inactive-button-background: #f6f5f4;
+	--gnome-inactive-button-border-color: #cdd1da;
+	--gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4);
+	--gnome-button-suggested-action-border-color: #1b6acb;
+	--gnome-button-suggested-action-border-bottom-color: #15539e;
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px);
+	--gnome-button-suggested-action-active-border-color: #1b6acb;
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24);
+	--gnome-button-destructive-action-border-color: #b2161d;
+	--gnome-button-destructive-action-border-bottom-color: #851015;
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px);
+	--gnome-button-destructive-action-active-border-color: #b2161d;
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1);
+	--gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #f3f4f6;
+	--gnome-urlbar-border-color: #abafb6;
+	--gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12);
+	--gnome-urlbar-color: #020202;
+	--gnome-hover-urlbar-border-color: #d7dce5;
+	--gnome-inactive-urlbar-background: #e9ebf0;
+	--gnome-inactive-urlbar-border-color: #cdd1da;
+	--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+	--gnome-inactive-urlbar-color: #252932;
+	--gnome-focused-urlbar-border-color: #5683DA;
+	--gnome-focused-urlbar-highlight-color: #6592E9;
+	--gnome-private-urlbar-background: #e6c2ff;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: #d7dce5;
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-border-color: #c3c7cf;
+	--gnome-tabbar-tab-hover-background: #c8ccd5;
+	--gnome-tabbar-tab-hover-border-color: #c3c7cf;
+	--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
+	--gnome-tabbar-tab-active-background: #fbfcfd;
+	--gnome-tabbar-tab-active-border-color: #c3c7cf;
+	--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
+	--gnome-tabbar-tab-active-hover-background: #f3f4f6;
+	--gnome-inactive-tabbar-tab-color: #8b8c8f;
+	--gnome-inactive-tabbar-tab-background: #dfdfdf;
+	--gnome-inactive-tabbar-tab-active-background: #f3f4f6;
+	--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-tab-attention-icon-color: #718be8;
+
+	/* Switch */
+	--gnome-switch-background: #a7abb2;
+	--gnome-switch-hover-background: #969aa0;
+	--gnome-switch-active-background: #7b8292;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #fbfcfd;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+	--gnome-switch-pressed-background: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
+	--gnome-icons-hack-filter: none;
+	--gnome-window-icons-hack-filter: invert(30%);
+
+	/* Private window colors */
+	--gnome-private-accent: #1c71d8;
+	
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #fbfcfd;
+	/* Header bar */
+	--gnome-private-headerbar-background: #D7E3F0;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #20123A;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #ebf0fa;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #15141A;
+}
diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css
index 71e3214d..2db4a115 100644
--- a/src/other/firefox/WhiteSur/colors/light.css
+++ b/src/other/firefox/WhiteSur/colors/light.css
@@ -8,6 +8,10 @@
 :root {
 	/* Browser area before a page starts loading */
 	--gnome-browser-before-load-background: #f5f5f5;
+	--gnome-content-page-dialog-background: #ffffff;
+	--gnome-content-page-background: #f2f2f2;
+	--gnome-content-box-background: #ffffff;
+	--gnome-content-page-color: #242424;
 	--theme-primary-color: #315bef;
 	--theme-primary-hover-color: #5073f1;
 	--theme-primary-active-color: #6584f3;
diff --git a/src/other/firefox/WhiteSur/theme-nord.css b/src/other/firefox/WhiteSur/theme-nord.css
new file mode 100644
index 00000000..2c3b66b8
--- /dev/null
+++ b/src/other/firefox/WhiteSur/theme-nord.css
@@ -0,0 +1,36 @@
+@import "parts/toolbox.css";
+@import "parts/buttons.css";
+@import "parts/entries.css";
+@import "parts/controls.css";
+@import "parts/headerbar-urlbar.css";
+@import "parts/headerbar-private-urlbar.css";
+@import "parts/headerbar.css";
+@import "parts/csd.css";
+@import "parts/titlebutton-light.css";
+@import "parts/titlebutton-dark.css";
+@import "parts/popups.css";
+@import "parts/tabsbar.css";
+@import "parts/findbar.css";
+@import "parts/sidebar.css";
+@import "parts/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/icons.css";
+@import "colors/light-nord.css";
+@import "colors/dark-nord.css";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Set theme version text in customization panel */
+#customization-footer::before {
+	background: url("icons/icon.svg") no-repeat;
+	background-size: contain;
+	content: "Firefox WhiteSur theme";
+	padding: 10px 10px 10px 50px;
+}
+
+#customization-container {
+	background-color: var(--gnome-browser-before-load-background) !important;
+	color: var(--gnome-toolbar-color) !important;
+	background-image: none !important;
+}
diff --git a/src/other/firefox/common/pages/common.css b/src/other/firefox/common/pages/common.css
index 6acd186e..49ba8c98 100644
--- a/src/other/firefox/common/pages/common.css
+++ b/src/other/firefox/common/pages/common.css
@@ -1,24 +1,26 @@
 @media (prefers-color-scheme: dark) {
   :host,
+  :host(.anonymous-content-host),
   :root {
-    --in-content-page-background: rgb(29,29,29) !important;
-    --in-content-page-color: rgb(253,253,253) !important;
+    --color-accent-primary: var(--theme-primary-active-color) !important;
+    --in-content-page-color: var(--gnome-content-page-color) !important;
+    --in-content-page-background: var(--gnome-content-page-background) !important;
 
-    --in-content-box-background: rgb(36, 36, 36) !important;
+    --in-content-box-background: var(--gnome-browser-before-load-background) !important;
     --in-content-box-background-odd: rgba(250,250,250,0.05) !important;
     --in-content-box-info-background: rgba(250,250,250,0.15) !important;
 
     --in-content-border-color: rgba(250,250,250,0.2) !important;
     --in-content-border-hover: rgba(250,250,250,0.3) !important;
 
-    --in-content-icon-color: rgb(252,252,252) !important;
+    --in-content-icon-color: var(--gnome-content-page-color) !important;
 
-    --in-content-primary-button-text-color: rgb(255,255,255) !important;
+    --in-content-primary-button-text-color: var(--gnome-toolbar-color) !important;
     --in-content-primary-button-background: var(--theme-primary-color) !important;
     --in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important;
     --in-content-primary-button-background-active: var(--theme-primary-active-color) !important;
 
-    --in-content-table-background: rgb(35, 35, 35) !important;
+    --in-content-table-background: var(--gnome-browser-before-load-background) !important;
 
     --newtab-background-color: var(--gnome-browser-before-load-background) !important;
     --newtab-background-color-secondary: var(--gnome-menu-background) !important;
@@ -26,12 +28,13 @@
     --fxview-background-color: var(--gnome-browser-before-load-background) !important;
     --fxview-background-color-secondary: var(--gnome-menu-background) !important;
     scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important;
+    --background-color-box: var(--gnome-content-box-background) !important;
   }
 
   @media not (prefers-contrast) {
     :root[dialogroot],
     :host(dialog) {
-      --in-content-page-background: #424242 !important;
+      --in-content-page-background: var(--gnome-content-page-dialog-background) !important;
     }
   }
 }
diff --git a/src/other/firefox/userChrome-WhiteSur-nord.css b/src/other/firefox/userChrome-WhiteSur-nord.css
new file mode 100644
index 00000000..61a86263
--- /dev/null
+++ b/src/other/firefox/userChrome-WhiteSur-nord.css
@@ -0,0 +1,42 @@
+/*------------------------USAGE----------------------------
+ * Remove "/*" at the begining of "@import" line to ENABLE.
+ * Add "/*" at the begining of "@import" line to DISABLE.
+ */
+
+@import "WhiteSur/theme-nord.css"; /**/
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "WhiteSur/left-tab-close-button.css"; /**/
+
+/* Hide the tab bar when only one tab is open (GNOMISH)
+ * You should move the new tab button somewhere else for this to work, because by
+ * default it is on the tab bar too. */
+/*@import "WhiteSur/hide-single-tab.css"; /**/
+
+/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH) 
+ * This feature is included by default for Firefox 70+ */
+/*@import "WhiteSur/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "WhiteSur/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "WhiteSur/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "WhiteSur/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "WhiteSur/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "WhiteSur/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "WhiteSur/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/
diff --git a/src/other/firefox/userContent-WhiteSur-nord.css b/src/other/firefox/userContent-WhiteSur-nord.css
new file mode 100644
index 00000000..f6c47ddd
--- /dev/null
+++ b/src/other/firefox/userContent-WhiteSur-nord.css
@@ -0,0 +1,7 @@
+@import "WhiteSur/colors/light-nord.css";
+@import "WhiteSur/colors/dark-nord.css";
+
+@import "WhiteSur/pages/common.css";
+@import "WhiteSur/pages/newtab.css";
+@import "WhiteSur/pages/reader.css";
+@import "WhiteSur/pages/privatebrowsing.css";
diff --git a/tweaks.sh b/tweaks.sh
index 1914d698..9307ca2a 100755
--- a/tweaks.sh
+++ b/tweaks.sh
@@ -51,7 +51,8 @@ usage() {
   sec_helpify "2. flat" "          Monterey alt version"                            ""                                                                              "  Flat round tabs..."
   sec_helpify "3. alt" "           Alt windows button version"                      ""                                                                              "  Alt windows button style like gtk theme"
   sec_helpify "4. darker" "        Darker Firefox theme version"                    ""                                                                              "  Darker Firefox theme version"
-  sec_helpify "5. adaptive" "      Adaptive color version"                          "  You need install adaptive-tab-bar-colour plugin first"                       "  https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/"
+  sec_helpify "5. nord" "          Nord Firefox colorscheme version"                ""                                                                              "  Nord Firefox colorscheme version"
+  sec_helpify "6. adaptive" "      Adaptive color version"                          "  You need install adaptive-tab-bar-colour plugin first"                       "  https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/"
 
   helpify "-e, --edit-firefox"  "[(monterey|flat)|alt|(darker|adaptive)]"           "  Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" ""
 
@@ -174,6 +175,10 @@ while [[ $# -gt 0 ]]; do
             darker="-darker"
             prompt -i "Darker Firefox theme version...\n"
             shift ;;
+          nord)
+            colorscheme="-nord"
+            prompt -i "Nord Firefox colorscheme version...\n"
+            shift ;;
           adaptive)
             adaptive="-adaptive"
             prompt -i "Firefox adaptive color version...\n"