Fixed firefox 133 issues

src/Monterey/colors/darker.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. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #1f1f1f;
+	--gnome-browser-content-box-background: #323232;
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #1e1e1e;
+	--gnome-tabstoolbar-background: #1e1e1e;
+	--gnome-findbar-background: #282828;
+	--gnome-toolbar-color: #ffffff;
+	--gnome-toolbar-icon-fill: #ffffff;
+	--gnome-toolbar-border-color: #070707;
+	--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
+	--gnome-inactive-toolbar-background: #1e1e1e;
+	--gnome-inactive-toolbar-border-color: #121212;
+
+	/* Sidebar */
+	--gnome-sidebar-background: #1e1e1e;
+	--gnome-inactive-sidebar-background: #3f3f3f;
+	--gnome-sidebar-border-color: color-mix(in srgb, #ffffff 12%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(40, 40, 40, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: rgba(40, 40, 40, 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: #1e1e1e;
+	--gnome-headerbar-border-color: #070707;
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: #1e1e1e;
+	--gnome-inactive-headerbar-border-color: #202020;
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: #2a2a2a;
+	--gnome-button-border-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, #242424 0%, #282828 100%);
+	--gnome-button-active-background: #282828;
+	--gnome-button-active-border-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, #242424 0%, #494949 100%);
+	--gnome-button-disabled-border-color: #282828;
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: #2a2a2a;
+	--gnome-inactive-button-border-color: #282828;
+	--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: #2a2a2a;
+	--gnome-urlbar-border-color: #282828;
+	--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: #ffffff;
+	--gnome-hover-urlbar-border-color: #585858;
+	--gnome-inactive-urlbar-background: #2a2a2a;
+	--gnome-inactive-urlbar-border-color: #282828;
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: #d6d6d6;
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: #25003e;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: rgba(42, 42, 42, .25);
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-hover-background: #282828;
+	--gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b;
+	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
+	--gnome-tabbar-tab-active-background: #2a2a2a;
+	--gnome-tabbar-tab-active-border-bottom-color: #15539e;
+	--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: var(--gnome-tabbar-tab-background);
+	--gnome-inactive-tabbar-tab-active-background: rgb(50, 50, 50);
+	--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: #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: #1e1e1e;
+	/* 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: #1f1f1f;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}

src/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;

src/Monterey/parts/tabsbar.css

@@ -7,10 +7,20 @@
 	-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;
 }
 
+/* Tabs bar height */
+#tabbrowser-tabs {
+	--tab-min-height: 32px !important;
+	--tabstrip-min-height: 32px !important;
+}
+
 .tabbrowser-tab,
 .tab-background {
 	border: none !important;

src/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;
 	}
 }

src/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;
 	}
 }

src/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;
 	}
 }

src/Monterey/theme-alt-darker.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/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.css";
+@import "colors/darker.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;
+}

src/Monterey/theme-darker.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.css";
+@import "colors/darker.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;
+}