Fixed #1116, update #1066

2026-05-30 07:58:33 +00:00 · 2024-08-31 16:58:31 +08:00
parent 83038956a6
commit 9b1032cb42
31 changed files with 1720 additions and 226 deletions
--- a/src/other/firefox/Monterey/colors/dark-adaptive.css
+++ b/src/other/firefox/Monterey/colors/dark-adaptive.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. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: color-mix(in srgb, #000000 6%, var(--lwt-accent-color, #282828));
+	--gnome-browser-content-box-background: var(--lwt-accent-color, #323232);
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Browser colors */
+	--in-content-link-color: var(--theme-primary-color) !important;
+	--in-content-link-color-hover: var(--theme-primary-color-hover) !important;
+
+	/* Toolbars */
+	--gnome-toolbar-background: var(--lwt-accent-color, #363636);
+	--gnome-tabstoolbar-background: var(--lwt-accent-color, #363636);
+	--gnome-findbar-background: var(--lwt-accent-color, #363636);
+	--gnome-toolbar-color: var(--toolbar-color);
+	--gnome-toolbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-toolbar-background: var(--lwt-accent-color, #363636);
+	--gnome-inactive-toolbar-border-color: var(--chrome-content-separator-color);
+
+	/* Sidebar */
+	--gnome-sidebar-background: var(--lwt-accent-color, #282828);
+	--gnome-inactive-sidebar-background: var(--lwt-accent-color, #282828);
+
+	/* Popups */
+	--gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--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: var(--lwt-accent-color);
+	--gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: var(--lwt-accent-color);
+	--gnome-inactive-headerbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: color-mix(in srgb, #ffffff 15%, var(--toolbar-field-background-color));
+	--gnome-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-border-bottom-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color));
+	--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: color-mix(in srgb, #ffffff 25%, var(--toolbar-field-background-color));
+	--gnome-button-active-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color));
+	--gnome-button-active-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-active-bottom-border-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color));
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: color-mix(in srgb, #ffffff 5%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: color-mix(in srgb, #ffffff 5%, var(--toolbar-field-background-color));
+	--gnome-inactive-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--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: #0f3b71;
+	--gnome-button-suggested-action-border-accent-color: #092444;
+	--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: #103e75;
+	--gnome-button-suggested-action-active-border-color: #0f3b71;
+	--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: #851015;
+	--gnome-button-destructive-action-border-accent-color: #570b0e;
+	--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: #8a1116;
+	--gnome-button-destructive-action-active-border-color: #851015;
+	--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: rgba(255, 255, 255, 0.1);
+	--gnome-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--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: var(--toolbar-field-color);
+	--gnome-hover-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-urlbar-background: var(--toolbar-field-background-color);
+	--gnome-inactive-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: var(--toolbar-field-color);
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: var(--toolbar-field-background-color);
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: var(--lwt-accent-color, #363636);
+	--gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color, #dfdfdf));
+	--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--lwt-accent-color, #363636));
+	--gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 15%, var(--lwt-accent-color, #363636));
+	--gnome-tabbar-tab-active-border-color: color-mix(in srgb, var(--gnome-tabbar-tab-color) 12%, var(--lwt-accent-color, #363636));
+	--gnome-tabbar-tab-active-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-hover-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 20%, var(--lwt-accent-color, #363636));
+	--gnome-inactive-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-inactive-tabbar-tab-background: var(--gnome-tabstoolbar-background);
+	--gnome-inactive-tabbar-tab-active-background: color-mix(in srgb, var(--gnome-tabbar-tab-color) 8%, var(--lwt-accent-color, #363636));
+	--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: #464646;
+	--gnome-switch-hover-background: #525252;
+	--gnome-switch-active-background: #606060;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--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: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+	--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: #383838;
+	/* 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: #242424;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}
--- a/src/other/firefox/Monterey/colors/dark.css
+++ b/src/other/firefox/Monterey/colors/dark.css
@@ -48,14 +48,14 @@
 	/* Buttons */
 	--gnome-button-background: linear-gradient(to top, #636363 0%, #696969 100%);
 	--gnome-button-border-color: #282828;
-	--gnome-button-border-accent-color: #282828;
+	--gnome-button-border-bottom-color: #282828;
 	--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, #707070 0%, #737373 100%);
 	--gnome-button-active-background: linear-gradient(to top, #464646 0%, #525252 100%);
 	--gnome-button-active-border-color: #1b1b1b;
-	--gnome-button-active-border-accent-color: #1b1b1b;
+	--gnome-button-active-border-bottom-color: #1b1b1b;
 	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 	--gnome-button-disabled-background: linear-gradient(to top, #434343 0%, #494949 100%);
 	--gnome-button-disabled-border-color: #282828;
--- a/src/other/firefox/Monterey/colors/light-adaptive.css
+++ b/src/other/firefox/Monterey/colors/light-adaptive.css
@@ -0,0 +1,166 @@
+@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: #f5f5f5;
+	--gnome-browser-content-box-background: #ffffff;
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #ffffff;
+	--gnome-tabstoolbar-background: #E5E5E5;
+	--gnome-findbar-background: #ffffff;
+	--gnome-toolbar-color: rgb(46, 52, 54);
+	--gnome-toolbar-border-color: #cfcfcf;
+	--gnome-inactive-toolbar-color: rgba(46, 52, 54, 0.35);
+	--gnome-inactive-toolbar-background: #f6f5f4;
+	--gnome-inactive-toolbar-border-color: #dadada;
+
+	/* Sidebar */
+	--gnome-sidebar-background: #f5f5f5;
+	--gnome-inactive-sidebar-background: #f9f9f8;
+
+	/* Popups */
+	--gnome-menu-background: rgba(255, 255, 255, 0.95);
+	--gnome-menu-border-color: #cdc7c2;
+	--gnome-popover-background: rgba(255, 255, 255, 0.95);
+	--gnome-popover-border-color: #cdc7c2;
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12);
+	--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: #ffffff;
+	--gnome-headerbar-border-color: #bdb7b0;
+	--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
+	--gnome-inactive-headerbar-background: #f5f5f5;
+	--gnome-inactive-headerbar-border-color: #dadada;
+	--gnome-inactive-headerbar-box-shadow: 0 1px #fff inset;
+
+	/* Buttons */
+	--gnome-button-background: linear-gradient(to top, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%);
+	--gnome-button-border-color: #cdc7c2;
+	--gnome-button-border-accent-color: #b2b2b1;
+	--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, #fdfdfd 0%, #ffffff 100%);
+	--gnome-button-active-background: #cfcfcf;
+	--gnome-button-active-border-color: #b2b2b1;
+	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
+	--gnome-button-disabled-background: #faf9f8;
+	--gnome-button-disabled-border-color: #cdc7c2;
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-inactive-button-background: #f6f5f4;
+	--gnome-inactive-button-border-color: #dadada;
+	--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-accent-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: #1961b9;
+	--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-accent-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: #a0131a;
+	--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: #e8e8e8;
+	--gnome-urlbar-border-color: #b6b6b6;
+	--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: #dddddd;
+	--gnome-inactive-urlbar-background: #eeeeee;
+	--gnome-inactive-urlbar-border-color: #dadada;
+	--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+	--gnome-inactive-urlbar-color: #323232;
+	--gnome-focused-urlbar-border-color: #5683DA;
+	--gnome-focused-urlbar-highlight-color: #6592E9;
+	--gnome-private-urlbar-background: #e6c2ff;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: #f5f5f5;
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-hover-background: #f0f0f0;
+	--gnome-tabbar-tab-hover-border-bottom-color: #b6b6b3;
+	--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
+	--gnome-tabbar-tab-active-background: #e8e8e8;
+	--gnome-tabbar-tab-active-border-bottom-color: #4a90d9;
+	--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-border-bottom-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: #b2b2b2;
+	--gnome-switch-hover-background: #a0a0a0;
+	--gnome-switch-active-background: #929292;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--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: #ffffff;
+	/* 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: #FAFAFA;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #15141A;
+}
--- a/src/other/firefox/Monterey/colors/light.css
+++ b/src/other/firefox/Monterey/colors/light.css
@@ -48,13 +48,14 @@
 	/* Buttons */
 	--gnome-button-background: linear-gradient(to top, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%);
 	--gnome-button-border-color: #cdc7c2;
-	--gnome-button-border-accent-color: #b2b2b1;
+	--gnome-button-border-bottom-color: #b2b2b1;
 	--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, #fdfdfd 0%, #ffffff 100%);
 	--gnome-button-active-background: #cfcfcf;
 	--gnome-button-active-border-color: #b2b2b1;
+	--gnome-button-active-border-bottom-color: #b2b2b1;
 	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
 	--gnome-button-disabled-background: #faf9f8;
 	--gnome-button-disabled-border-color: #cdc7c2;
--- a/src/other/firefox/Monterey/parts/tabsbar-alt.css
+++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css
@@ -49,10 +49,15 @@ tab > stack {

 .tab-background {
 	margin: 0 !important;
-	transition: background 200ms;
+	transition: none;
 	margin-block: 0 !important;
 }

+.tab-background:hover,
+.tab-background:is([selected]) {
+	transition: background 200ms;
+}
+
 #TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background {
 	background: var(--gnome-tabbar-tab-background) !important;
 }
--- a/src/other/firefox/Monterey/theme-adaptive.css
+++ b/src/other/firefox/Monterey/theme-adaptive.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/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/custom-icons.css";
+@import "parts/icons.css";
+@import "colors/light-adaptive.css";
+@import "colors/dark-adaptive.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 Monterey 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;
+}
--- a/src/other/firefox/Monterey/theme-alt-adaptive.css
+++ b/src/other/firefox/Monterey/theme-alt-adaptive.css
@@ -0,0 +1,36 @@
+@import "parts/toolbox-alt.css";
+@import "parts/buttons.css";
+@import "parts/entries.css";
+@import "parts/controls.css";
+@import "parts/headerbar-urlbar-alt.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-alt.css";
+@import "parts/findbar.css";
+@import "parts/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/custom-icons.css";
+@import "parts/icons.css";
+@import "colors/light-adaptive.css";
+@import "colors/dark-adaptive.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 Monterey 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;
+}
--- a/src/other/firefox/WhiteSur/colors/dark-adaptive.css
+++ b/src/other/firefox/WhiteSur/colors/dark-adaptive.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. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: color-mix(in srgb, #000000 6%, var(--lwt-accent-color, #282828));
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Browser colors */
+	--in-content-link-color: var(--theme-primary-color) !important;
+	--in-content-link-color-hover: var(--theme-primary-color-hover) !important;
+
+	/* Toolbars */
+	--gnome-toolbar-background: var(--lwt-accent-color, #363636);
+	--gnome-tabstoolbar-background: color-mix(in srgb, #ffffff 6%, var(--lwt-accent-color));
+	--gnome-findbar-background: var(--lwt-accent-color, #282828);
+	--gnome-toolbar-color: var(--toolbar-color);
+	--gnome-toolbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-toolbar-color: color-mix(in srgb, var(--gnome-toolbar-color) 45%, var(--gnome-toolbar-background));
+	--gnome-inactive-toolbar-background: var(--lwt-accent-color, #282828);
+	--gnome-inactive-toolbar-border-color: var(--chrome-content-separator-color);
+
+	/* Sidebar */
+	--gnome-sidebar-background: var(--lwt-accent-color, #282828);
+	--gnome-inactive-sidebar-background: var(--lwt-accent-color, #282828);
+
+	/* Popups */
+	--gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--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: var(--lwt-accent-color);
+	--gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: var(--lwt-accent-color);
+	--gnome-inactive-headerbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: color-mix(in srgb, #ffffff 15%, var(--toolbar-field-background-color));
+	--gnome-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-border-bottom-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color));
+	--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: color-mix(in srgb, #ffffff 25%, var(--toolbar-field-background-color));
+	--gnome-button-active-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color));
+	--gnome-button-active-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-active-bottom-border-color: color-mix(in srgb, #000000 45%, var(--toolbar-field-background-color));
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: color-mix(in srgb, #ffffff 5%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: color-mix(in srgb, #ffffff 5%, var(--toolbar-field-background-color));
+	--gnome-inactive-button-border-color: color-mix(in srgb, #000000 35%, var(--toolbar-field-background-color));
+	--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: #0f3b71;
+	--gnome-button-suggested-action-border-accent-color: #092444;
+	--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: #103e75;
+	--gnome-button-suggested-action-active-border-color: #0f3b71;
+	--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: #851015;
+	--gnome-button-destructive-action-border-accent-color: #570b0e;
+	--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: #8a1116;
+	--gnome-button-destructive-action-active-border-color: #851015;
+	--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: rgba(255, 255, 255, 0.1);
+	--gnome-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--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: var(--toolbar-field-color);
+	--gnome-hover-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-urlbar-background: var(--toolbar-field-background-color);
+	--gnome-inactive-urlbar-border-color: rgba(255, 255, 255, 0.1);
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: var(--toolbar-field-color);
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: var(--toolbar-field-background-color);
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: var(--gnome-tabstoolbar-background);
+	--gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--lwt-accent-color));
+	--gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-background: var(--gnome-headerbar-background);
+	--gnome-tabbar-tab-active-border-color: color-mix(in srgb, var(--toolbar-color) 12%, var(--gnome-headerbar-background));
+	--gnome-tabbar-tab-active-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--lwt-accent-color));
+	--gnome-inactive-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-inactive-tabbar-tab-background: var(--gnome-tabstoolbar-background);
+	--gnome-inactive-tabbar-tab-active-background: var(--gnome-headerbar-background);
+	--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: #464646;
+	--gnome-switch-hover-background: #525252;
+	--gnome-switch-active-background: #606060;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--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: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+	--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: #383838;
+	/* 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: #242424;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}
--- a/src/other/firefox/WhiteSur/colors/dark.css
+++ b/src/other/firefox/WhiteSur/colors/dark.css
@@ -53,7 +53,7 @@
 	--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, #707070 0%, #737373 100%);
-	--gnome-button-active-background: linear-gradient(to top, #464646 0%, #525252 100%);
+	--gnome-button-active-background: linear-gradient(to top, #808080 0%, #858585 100%);
 	--gnome-button-active-border-color: #1b1b1b;
 	--gnome-button-active-border-accent-color: #1b1b1b;
 	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -101,16 +101,18 @@
 	/* Tabs */
 	--gnome-tabbar-tab-background: #262626;
 	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-border-color: #070707;
 	--gnome-tabbar-tab-hover-background: #2b2b2b;
-	--gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b;
+	--gnome-tabbar-tab-hover-border-color: #1b1b1b;
 	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
 	--gnome-tabbar-tab-active-background: #373737;
-	--gnome-tabbar-tab-active-border-bottom-color: #15539e;
+	--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-background: #202020;
 	--gnome-inactive-tabbar-tab-active-background: #313131;
-	--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--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;

--- a/src/other/firefox/WhiteSur/colors/light-adaptive.css
+++ b/src/other/firefox/WhiteSur/colors/light-adaptive.css
@@ -0,0 +1,171 @@
+@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: color-mix(in srgb, #000000 8%, var(--lwt-accent-color, #ffffff));
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Browser colors */
+	--in-content-link-color: var(--theme-primary-color) !important;
+	--in-content-link-color-hover: var(--theme-primary-color-hover) !important;
+
+	/* Toolbars */
+	--gnome-toolbar-background: var(--lwt-accent-color, #ffffff);
+	--gnome-tabstoolbar-background: color-mix(in srgb, #000000 8%, var(--lwt-accent-color, #ffffff));
+	--gnome-findbar-background: var(--lwt-accent-color, #ffffff);
+	--gnome-toolbar-color: var(--toolbar-color, #323232);
+	--gnome-toolbar-border-color: rgba(0, 0, 0, 0.1);
+	--gnome-inactive-toolbar-color: color-mix(in srgb, var(--gnome-toolbar-color) 45%, var(--gnome-toolbar-background));
+	--gnome-inactive-toolbar-background: var(--lwt-accent-color, #ffffff);
+	--gnome-inactive-toolbar-border-color: var(--chrome-content-separator-color);
+
+	/* Sidebar */
+	--gnome-sidebar-background: var(--lwt-accent-color, #ffffff);
+	--gnome-inactive-sidebar-background: var(--lwt-accent-color, #ffffff);
+
+	/* Popups */
+	--gnome-menu-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 95%, transparent);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12);
+	--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: var(--lwt-accent-color);
+	--gnome-headerbar-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
+	--gnome-inactive-headerbar-background: var(--lwt-accent-color);
+	--gnome-inactive-headerbar-border-color: rgba(0, 0, 0, 0.12);
+	--gnome-inactive-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset;
+
+	/* Buttons */
+	--gnome-button-background: color-mix(in srgb, #ffffff 35%, var(--toolbar-field-background-color));
+	--gnome-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color));
+	--gnome-button-border-bottom-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color));
+	--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.75), 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: #ffffff;
+	--gnome-button-active-background: color-mix(in srgb, #000000 10%, var(--toolbar-field-background-color));
+	--gnome-button-active-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color));
+	--gnome-button-active-bottom-border-color: color-mix(in srgb, #000000 20%, var(--toolbar-field-background-color));
+	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
+	--gnome-button-disabled-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color));
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+	--gnome-inactive-button-background: color-mix(in srgb, #000000 5%, var(--toolbar-field-background-color));
+	--gnome-inactive-button-border-color: color-mix(in srgb, #000000 15%, var(--toolbar-field-background-color));
+	--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-accent-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: #1961b9;
+	--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-accent-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: #a0131a;
+	--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: rgba(0, 0, 0, 0.1);
+	--gnome-urlbar-border-color: rgba(0, 0, 0, 0.1);
+	--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: var(--toolbar-field-color);
+	--gnome-hover-urlbar-border-color: rgba(0, 0, 0, 0.1);
+	--gnome-inactive-urlbar-background: var(--toolbar-field-background-color);
+	--gnome-inactive-urlbar-border-color: rgba(0, 0, 0, 0.1);
+	--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+	--gnome-inactive-urlbar-color: var(--toolbar-field-color);
+	--gnome-focused-urlbar-border-color: #5683DA;
+	--gnome-focused-urlbar-highlight-color: #6592E9;
+	--gnome-private-urlbar-background: var(--toolbar-field-background-color);
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: var(--gnome-tabstoolbar-background);
+	--gnome-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--lwt-accent-color));
+	--gnome-tabbar-tab-hover-border-color: var(--gnome-toolbar-border-color);
+	--gnome-tabbar-tab-hover-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-background: var(--gnome-headerbar-background);
+	--gnome-tabbar-tab-active-border-color: color-mix(in srgb, var(--toolbar-color) 12%, var(--gnome-headerbar-background));
+	--gnome-tabbar-tab-active-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-tabbar-tab-active-hover-background: color-mix(in srgb, var(--toolbar-color) 12%, var(--lwt-accent-color));
+	--gnome-inactive-tabbar-tab-color: var(--lwt-tab-text, var(--toolbar-color));
+	--gnome-inactive-tabbar-tab-background: var(--gnome-tabstoolbar-background);
+	--gnome-inactive-tabbar-tab-active-background: var(--gnome-headerbar-background);
+	--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: #b2b2b2;
+	--gnome-switch-hover-background: #a0a0a0;
+	--gnome-switch-active-background: #929292;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--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: #ffffff;
+	/* 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: #FAFAFA;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #15141A;
+}
--- a/src/other/firefox/WhiteSur/colors/light.css
+++ b/src/other/firefox/WhiteSur/colors/light.css
@@ -28,9 +28,9 @@

 	/* Popups */
 	--gnome-menu-background: rgba(255, 255, 255, 0.95);
-	--gnome-menu-border-color: #cdc7c2;
+	--gnome-menu-border-color: #cfcfcf;
 	--gnome-popover-background: rgba(255, 255, 255, 0.95);
-	--gnome-popover-border-color: #cdc7c2;
+	--gnome-popover-border-color: #cfcfcf;
 	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12);
 	--gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1);
 	--gnome-popover-button-active-background: rgba(0, 0, 0, 0.2);
@@ -38,7 +38,7 @@

 	/* Header bar */
 	--gnome-headerbar-background: #ffffff;
-	--gnome-headerbar-border-color: #bdb7b0;
+	--gnome-headerbar-border-color: #cfcfcf;
 	--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
 	--gnome-inactive-headerbar-background: #f5f5f5;
 	--gnome-inactive-headerbar-border-color: #dadada;
@@ -46,8 +46,8 @@

 	/* Buttons */
 	--gnome-button-background: linear-gradient(to top, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%);
-	--gnome-button-border-color: #cdc7c2;
-	--gnome-button-border-accent-color: #b2b2b1;
+	--gnome-button-border-color: #cfcfcf;
+	--gnome-button-border-accent-color: #cfcfcf;
 	--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);
@@ -56,7 +56,7 @@
 	--gnome-button-active-border-color: #b2b2b1;
 	--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
 	--gnome-button-disabled-background: #faf9f8;
-	--gnome-button-disabled-border-color: #cdc7c2;
+	--gnome-button-disabled-border-color: #cfcfcf;
 	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
 	--gnome-inactive-button-background: #f6f5f4;
 	--gnome-inactive-button-border-color: #dadada;
@@ -97,18 +97,20 @@
 	--gnome-private-urlbar-background: #e6c2ff;

 	/* Tabs */
-	--gnome-tabbar-tab-background: #E5E5E5;
+	--gnome-tabbar-tab-background: #e5e5e5;
 	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-border-color: #cfcfcf;
 	--gnome-tabbar-tab-hover-background: #d5d5d5;
-	--gnome-tabbar-tab-hover-border-bottom-color: #b6b6b3;
+	--gnome-tabbar-tab-hover-border-color: #cfcfcf;
 	--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
 	--gnome-tabbar-tab-active-background: #ffffff;
-	--gnome-tabbar-tab-active-border-bottom-color: #4a90d9;
+	--gnome-tabbar-tab-active-border-color: #cfcfcf;
 	--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
 	--gnome-tabbar-tab-active-hover-background: #f5f5f5;
 	--gnome-inactive-tabbar-tab-color: #8b8e8f;
+	--gnome-inactive-tabbar-tab-background: #dfdfdf;
 	--gnome-inactive-tabbar-tab-active-background: #f5f5f5;
-	--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--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;

--- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
+++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css
@@ -124,7 +124,7 @@ toolbarspring {
 	box-shadow: var(--gnome-button-box-shadow) !important;
 	border: 1px solid var(--gnome-button-border-color) !important;
 	border-left-width: 0 !important;
-	border-bottom-color: var(--gnome-button-border-accent-color) !important;
+	border-bottom-color: var(--gnome-button-border-bottom-color) !important;
 	padding: 0 2px !important;
 	min-height: 34px !important;
 	min-width: 34px !important;
@@ -148,7 +148,7 @@ toolbarspring {
 #urlbar-anon-search-settings-compact,
 .search-setting-button {
 	border-left-width: 1px !important;
-	border-bottom: 1px solid var(--gnome-button-border-accent-color) !important;
+	border-bottom: 1px solid var(--gnome-button-border-bottom-color) !important;
 	border-radius: 5px !important;
 	margin-left: 6px !important;
 }
--- a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css
@@ -0,0 +1,488 @@
+/* Tabs bar  */
+
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+:root {
+	--space-above-tabbar: 0 !important;
+}
+
+
+/* Tabs bar height */
+#tabbrowser-tabs {
+	--tab-min-height: 32px !important;
+}
+
+#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
+	max-height: 32px !important;
+}
+
+#TabsToolbar .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 {
+	display: none;
+}
+
+/* Remove tab separators */
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+	border-color: transparent !important;
+	border-image: none !important;
+}
+
+/* Tabs separators */
+.tabbrowser-tab {
+	border-left: 1px solid transparent !important;
+}
+
+.tabbrowser-tab + .tabbrowser-tab:not([selected], :hover) {
+	border-color: var(--gnome-toolbar-border-color) !important;
+}
+
+.tabbrowser-tab[selected] + .tabbrowser-tab,
+.tabbrowser-tab:hover + .tabbrowser-tab {
+	border-color: transparent !important;
+}
+
+.tabbrowser-tab:first-of-type {
+	border-left: none !important;
+}
+
+/* Space between tabs */
+.tabbrowser-tab:not([pinned]) {
+	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;
+	flex-direction: row;
+	justify-content: center !important;
+	align-items: center !important;
+	min-width: 44px !important;
+	min-height: 32px !important;
+	padding: 0 8px !important;
+}
+
+/* Fix custom info tab icon */
+.tabbrowser-tab[image="chrome://global/skin/icons/info.svg"]:not([pinned]):not([busy]):not([progress]) .tab-icon-stack::before {
+	margin-inline-end: 5.5px;
+}
+
+/* Prevent tab icons size breaking */
+.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
+	min-width: 16px;
+}
+
+/* Center tab text */
+.tab-label {
+	margin-inline: 0 !important;
+}
+
+/* Adjust tab label width */
+.tab-label-container {
+	min-width: 0 !important;
+}
+
+.tabbrowser-tab:not([pinned]) .tab-label-container {
+	max-width: min-content !important;
+}
+
+.tabbrowser-tab[pinned] .tab-label-container {
+	display: none !important;
+}
+
+.tab-throbber:not([pinned]), .tab-icon-pending:not([pinned]), .tab-icon-image:not([pinned]), .tab-sharing-icon-overlay:not([pinned]), .tab-icon-overlay:not([pinned]) {
+	margin-inline-end: 0 !important;
+}
+
+.tabbrowser-tab:not([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-icon-stack {
+	padding: 6px;
+}
+
+/* Hide secondary label about muting */
+.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-secondary-label {
+	display: none;
+}
+
+/* Put tab close button and icon sound to the right */
+.tab-icon-sound[soundplaying="true"], .tab-icon-sound[muted="true"],
+.tab-icon-sound[activemedia-blocked="true"] {
+	margin-left: auto !important;
+}
+/*.tabbrowser-tab:not([soundplaying]):not([muted]):not([activemedia-blocked]) .tab-close-button {*/
+/*	margin-left: auto !important;*/
+/*}*/
+.tab-icon-sound {
+	margin-right: 6px;
+}
+
+/* Force tab favicon to the center */
+.tab-throbber, .tab-throbber-fallback,
+.tabbrowser-tab:not([busy]):not([muted="true"]) .tab-icon-image,
+.tabbrowser-tab .tab-icon-stack {
+	margin-left: auto !important;
+}
+
+.tabbrowser-tab:is([pinned]) .tab-icon-stack {
+	margin-left: 0 !important;
+}
+
+.tabbrowser-tab:not([busy]):not([muted="true"]) .tab-icon-stack .tab-icon-image {
+	margin: auto !important;
+}
+
+/* If tab favicon is not present, force tab label to the center */
+.tabbrowser-tab .tab-label-container {
+	margin-left: 0 !important;
+	margin-right: auto !important;
+}
+
+.tabbrowser-tab:not([image]):not([busy]):not([progress]) .tab-label-container {
+	margin-left: auto !important;
+}
+
+/* Fix website with no favicon centred text */
+.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) .tab-icon-stack {
+	margin-left: 0 !important
+}
+
+.tabbrowser-tab:not([image], [busy]) .tab-icon-stack {
+	margin-left: 0 !important
+}
+
+.tab-background {
+	border-radius: 0 !important;
+	margin-block: 0 !important;
+}
+
+/*Align personal bookmarks v89 */
+#personal-bookmarks {
+	-moz-box-align: center !important;
+}
+
+/* fix misc spacing between tabs */
+.tabbrowser-tab {
+	padding-inline: 0 !important;
+	padding: 0 !important;
+}
+
+.tabbrowser-tab[selected="true"] > .tab-stack > .tab-background {
+	margin-left: 0px !important;
+	margin-right: 0px !important;
+}
+
+/* centre text when audio is playing */
+.tabbrowser-tab:is([soundplaying]) .tab-label-container {
+	margin-left: 0 !important;
+	margin-right: auto !important
+}
+
+/* Close tab button */
+.close-icon {
+	height: 16px !important;
+	padding: 0 !important;
+	width: 16px !important;
+}
+
+.tab-close-button {
+	-moz-appearance: none !important;
+	margin-inline-end: 0 !important;
+	border: none !important;
+	box-sizing: content-box; /* Avoid deformation on flexbox */
+	border-radius: 3px !important;
+	list-style-image: url("../icons/window-close-symbolic.svg") !important;
+	height: 16px;
+	opacity: .3;
+	padding: 0;
+	width: 16px;
+}
+
+.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
+	visibility: hidden;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-content > .tab-close-button {
+	visibility: visible;
+}
+
+@media (prefers-color-scheme: dark) {
+	.tab-close-button {
+		list-style-image: url("../icons/window-close-symbolic-light.svg") !important;
+	}
+}
+
+:root:-moz-window-inactive .tab-close-button:not(#hack) {
+	opacity: .18 !important;
+}
+:root:not(:-moz-window-inactive) .tab-close-button:hover {
+	background-color: var(--gnome-button-hover-color) !important;
+	border: none !important;
+	opacity: 1;
+}
+:root:not(:-moz-window-inactive) .tab-close-button:active {
+	background-color: var(--gnome-button-active-color) !important;
+}
+
+.tab-close-button:active:not(:hover) {
+	background-image: none !important;
+	box-shadow: none !important;
+}
+
+/* Tab close button etc. positioning */
+.tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button {
+	margin-top: 0 !important;
+}
+
+.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:not(:hover) .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+	display: none !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;
+}
+
+/* Remove blue line above tabs */
+.tab-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;
+	background-position: center bottom 3px !important;
+	background-size: 4px 4px;
+	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;
+}
+
+.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(
+  toolbarbutton:not(#firefox-view-button),
+  toolbarpaletteitem:not(#wrapper-firefox-view-button)
+) + #tabbrowser-tabs {
+  border-inline-start: 1px solid var(--gnome-toolbar-border-color) !important;
+  padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width)) !important;
+  margin-inline-start: 0 !important;
+}
+
+#TabsToolbar #firefox-view-button {
+	border-radius: 0 !important;
+	padding: 0 4px !important;
+}
+
+#firefox-view-button > .toolbarbutton-icon {
+	box-shadow: none !important;
+}
+
+#TabsToolbar #firefox-view-button[open] {
+	background-color: var(--gnome-tabbar-tab-active-background) !important;
+	box-shadow: inset 0 -1px var(--gnome-toolbar-border-color) !important;
+}
+
+#TabsToolbar #firefox-view-button[open]:-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;
+	inset-inline-end: 13px !important;
+	z-index: 1 !important;
+	max-width: 10px;
+	max-height: 10px;
+}
+
+/* fix spacing on too many tabs */
+.tab-icon-overlay:not([pinned], [sharing]),
+[pictureinpicture] {
+	margin-inline-end: 4px !important;
+	margin-inline-start: 4px !important;
+}
--- a/src/other/firefox/WhiteSur/parts/tabsbar.css
+++ b/src/other/firefox/WhiteSur/parts/tabsbar.css
@@ -6,10 +6,6 @@
 	--space-above-tabbar: 0 !important;
 }

-#TabsToolbar:not([inFullscreen]) > .toolbar-items {
-	margin-bottom: -1px !important;
-}
-
 /* Tabs bar height */
 #tabbrowser-tabs {
 	--tab-min-height: 32px !important;
@@ -63,7 +59,7 @@
 }

 .tabbrowser-tab + .tabbrowser-tab:not([selected], :hover) {
-	border-color: var(--gnome-toolbar-border-color) !important;
+	border-color: var(--gnome-tabbar-tab-border-color) !important;
 }

 .tabbrowser-tab[selected] + .tabbrowser-tab,
@@ -345,9 +341,9 @@ tab[selected]:-moz-window-inactive {

 /* Tab hover */
 #TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
-	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
+	background-color: var(--gnome-tabbar-tab-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;
+	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 */
@@ -360,9 +356,9 @@ tab[selected]:-moz-window-inactive {
 	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;
+	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 {
--- a/src/other/firefox/WhiteSur/theme-adaptive.css
+++ b/src/other/firefox/WhiteSur/theme-adaptive.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/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/custom-icons.css";
+@import "parts/icons.css";
+@import "colors/light-adaptive.css";
+@import "colors/dark-adaptive.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;
+}
--- a/src/other/firefox/common/parts/buttons.css
+++ b/src/other/firefox/common/parts/buttons.css
@@ -47,7 +47,7 @@ button.customizationmode-button {
 	background: var(--gnome-button-background) !important;
 	box-shadow: var(--gnome-button-box-shadow) !important;
 	border: 1px solid var(--gnome-button-border-color) !important;
-	border-bottom-color: var(--gnome-button-border-accent-color) !important;
+	border-bottom-color: var(--gnome-button-border-bottom-color) !important;
 	border-radius: 8px !important;
 	padding: 0 4px !important;
 	height: 28px !important;
@@ -68,7 +68,7 @@ menulist {
 	background: var(--gnome-button-background) !important;
 	box-shadow: var(--gnome-button-box-shadow) !important;
 	border: 1px solid var(--gnome-button-border-color) !important;
-	border-bottom-color: var(--gnome-button-border-accent-color) !important;
+	border-bottom-color: var(--gnome-button-border-bottom-color) !important;
 	border-radius: 8px !important;
 	color: var(--gnome-toolbar-color) !important;
 }
@@ -261,7 +261,7 @@ button.close:not(.ghost-button):not(:active):hover,
 	background: var(--gnome-headerbar-button-hover-background) !important;
 	box-shadow: none !important;
 	border-color: var(--gnome-button-border-color) !important;
-	border-bottom-color: var(--gnome-button-border-accent-color) !important;
+	border-bottom-color: var(--gnome-button-border-bottom-color) !important;
 }

 .subviewbutton-back:not(#hack):active,
--- a/src/other/firefox/userChrome-Monterey-adaptive.css
+++ b/src/other/firefox/userChrome-Monterey-adaptive.css
@@ -0,0 +1,58 @@
+/*------------------------USAGE----------------------------
+ * Remove "/*" at the begining of "@import" line to ENABLE.
+ * Add "/*" at the begining of "@import" line to DISABLE.
+ */
+
+@import "Monterey/theme-adaptive.css"; /**/
+
+/*--------------Configure your Monterey theme--------------
+ * ONLY for Monterey theme
+ * Enable one of these options and disable the other ones.
+ */
+
+/* How many buttons on left headerbar */
+@import "Monterey/left_header_button_3.css"; /**/
+/*@import "Monterey/left_header_button_4.css"; /**/
+/*@import "Monterey/left_header_button_5.css"; /**/
+
+/* How many buttons on right headerbar */
+@import "Monterey/right_header_button_3.css"; /**/
+/*@import "Monterey/right_header_button_4.css"; /**/
+/*@import "Monterey/right_header_button_5.css"; /**/
+
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "Monterey/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 "Monterey/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 "Monterey/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "Monterey/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "Monterey/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "Monterey/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "Monterey/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "Monterey/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "Monterey/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/
--- a/src/other/firefox/userChrome-Monterey-alt-adaptive.css
+++ b/src/other/firefox/userChrome-Monterey-alt-adaptive.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 "Monterey/theme-alt-adaptive.css"; /**/
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "Monterey/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 "Monterey/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 "Monterey/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "Monterey/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "Monterey/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "Monterey/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "Monterey/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "Monterey/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "Monterey/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/
--- a/src/other/firefox/userChrome-Monterey-alt.css
+++ b/src/other/firefox/userChrome-Monterey-alt.css
@@ -3,7 +3,7 @@
 * Add "/*" at the begining of "@import" line to DISABLE.
 */

-@import "Monterey/theme-alt.css"; /**/
+@import "Monterey/theme-alt-adaptive.css"; /**/

 /*--------------Configure common theme features--------------*/

--- a/src/other/firefox/userChrome-WhiteSur-adaptive.css
+++ b/src/other/firefox/userChrome-WhiteSur-adaptive.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-adaptive.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"; /**/
--- a/src/other/firefox/userContent-Monterey-adaptive.css
+++ b/src/other/firefox/userContent-Monterey-adaptive.css
@@ -0,0 +1,7 @@
+@import "Monterey/colors/light-adaptive.css";
+@import "Monterey/colors/dark-adaptive.css";
+
+@import "Monterey/pages/common.css";
+@import "Monterey/pages/newtab.css";
+@import "Monterey/pages/reader.css";
+@import "Monterey/pages/privatebrowsing.css";
--- a/src/other/firefox/userContent-WhiteSur-adaptive.css
+++ b/src/other/firefox/userContent-WhiteSur-adaptive.css
@@ -0,0 +1,7 @@
+@import "WhiteSur/colors/light-adaptive.css";
+@import "WhiteSur/colors/dark-adaptive.css";
+
+@import "WhiteSur/pages/common.css";
+@import "WhiteSur/pages/newtab.css";
+@import "WhiteSur/pages/reader.css";
+@import "WhiteSur/pages/privatebrowsing.css";
--- a/src/sass/_theme-options.scss
+++ b/src/sass/_theme-options.scss
@@ -20,17 +20,20 @@ $panel_opacity: 0.15;
 // Gnome-shell show apps button style
 $showapps_button: 'bigsur';

-// Maximized window radius
-$max_window_style: 'square';
+// Gnome-shell Panel height size
+$panel_size: 'default';
+
+// Gnome-shell font size
+$font_size: 'normal';
+
+// Gnome-shell Panel Activities button style
+$activities: 'default';

 // Panel font color
 $panel_font: 'white';

-// Panel height size
-$panel_size: 'default';
-
-// Panel Activities button style
-$activities: 'default';
+// Maximized window radius
+$max_window_style: 'square';

 // Monterey style
 $monterey: 'false';
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -21,7 +21,7 @@ $large-font-family: Roboto, "M+ 1c", Cantarell, Sans-Serif;
 // font sizes
 $root-font-size: if($laptop == 'false', 15px, 13px);
 $subheading-size: if($laptop == 'false', 17px, 15px);
-$base_font_size: if($laptop == 'false', 11pt, 10pt);
+$base_font_size: if($font_size == 'normal', 11pt, 10pt);

 // opacities
 $higher_opacity: 0.9;
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@@ -152,10 +152,10 @@ $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: 3em !important;
-    height: 3em !important;
+    width: 2.6em !important;
+    height: 2.6em !important;
    padding: 2px !important;
    margin: 2px !important;
    border-radius: $circular_radius;
@@ -256,7 +256,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
    @extend %smaller;
    width: 2em !important;
    height: 2em !important;
-    margin: 0.7em 0.7em 0.7em 0.2em !important;
+    margin: 0.6em 0.6em 0.6em 0.2em !important;
    padding: 2px !important;
    border-radius: $bt_radius;
    background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
--- a/src/sass/gnome-shell/widgets-46-0/_dash.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_dash.scss
@@ -74,7 +74,7 @@ $dash_spacing: $base_margin * 0.5;
    .app-grid-running-dot {
      // manually position the dot within the dash item
      // margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
-      offset-y: 0;
+      offset-y: -9px;
    }
  }

--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -2888,6 +2888,7 @@ notebook {

        > tabs {
          margin: 0;
+          padding: 0;

          > tab {
            outline-offset: -4px;
@@ -3798,9 +3799,7 @@ frame {

  > list {
    border-radius: $wm_radius - 2px;
-    box-shadow: if($variant == 'light',
-                  (inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01)),
-                  (inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02)));
+    box-shadow: none;
  }
 }