update

src/other/firefox/chrome/Colloid/colors/dark.css

@@ -93,6 +93,7 @@
 		--gnome-tab-button-background: rgba(0, 0, 0, .5);
 		--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
 		--gnome-tabbar-tab-identity-base-opacity: 0;
+		--gnome-tabbar-tab-needs-attetion: #78aeed;
 	}
 
 	/* Private window colors */

src/other/firefox/chrome/Colloid/colors/light.css

@@ -91,6 +91,7 @@
 	--gnome-tab-button-background: rgba(255, 255, 255, .5);
 	--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
 	--gnome-tabbar-tab-identity-base-opacity: .1;
+	--gnome-tabbar-tab-needs-attetion: #5b9bf8;
 }
 
 /* Private window colors */

src/other/firefox/chrome/Colloid/icons/picture-in-picture-open.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m3 0c-1.662 0-3 1.338-3 3v8c0 1.662 1.338 3 3 3h6v-1h-6c-1.108 0-2-0.892-2-2v-8c0-1.108 0.892-2 2-2h8c1.108 0 2 0.892 2 2v6h1v-6c0-1.662-1.338-3-3-3h-8zm0.75781 3.0508-0.70703 0.70703 4.2422 4.2422h-1.293v1h2 1v-1-2h-1v1.293l-4.2422-4.2422zm8.2422 6.9492c-1.108 0-2 0.892-2 2v2c0 1.108 0.892 2 2 2h2c1.108 0 2-0.892 2-2v-2c0-1.108-0.892-2-2-2h-2zm0 1h2c0.554 0 1 0.446 1 1v2c0 0.554-0.446 1-1 1h-2c-0.554 0-1-0.446-1-1v-2c0-0.554 0.446-1 1-1z" fill="#363636"/>
+</svg>

src/other/firefox/chrome/Colloid/parts/csd.css

@@ -74,7 +74,8 @@
 /* Remove close and minimize buttons from fullscreen buttons */
 :root[tabsintitlebar][inFullscreen] #window-controls #close-button,
 :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button,
-:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container {
+:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container .titlebar-min,
+:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container .titlebar-close {
 	display: none !important;
 }
 
@@ -128,11 +129,12 @@
 	width: 16px !important;
 }
 
+:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button,
 :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
 	border-radius: 6px !important;
-	height: 32px;
+	height: 32px !important;
 	margin: 0 4px !important;
-	width: 32px;
+	width: 32px !important;
 }
 
 :root[tabsintitlebar] #titlebar toolbarbutton > .toolbarbutton-icon {

src/other/firefox/chrome/Colloid/parts/entries.css

@@ -121,3 +121,6 @@
 #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
 	outline: 0 !important;
 }
+#notification-popup-box {
+	height: 34px !important;
+}

src/other/firefox/chrome/Colloid/parts/icons.css

@@ -110,6 +110,7 @@ menuitem[type="radio"][disabled="true"] .menu-iconic-icon {
 :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min .toolbarbutton-icon {
 	list-style-image: url("../icons/window-minimize-symbolic.svg") !important;
 }
+:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-restore .toolbarbutton-icon,
 :root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon {
 	list-style-image: url("../icons/view-restore-symbolic.svg") !important;
 }
@@ -504,6 +505,10 @@ treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
 	list-style-image: url("../icons/reader-mode.svg") !important;
 }
 
+#picture-in-picture-button > .urlbar-icon {
+	list-style-image: url("../icons/picture-in-picture-open.svg") !important;
+}
+
 #permissions-granted-icon {
 	list-style-image: url("../icons/permissions-granted.svg") !important;
 }
@@ -777,6 +782,7 @@ treechildren::-moz-tree-image {
 	#permissions-granted-icon,
 	#tracking-protection-icon-animatable-image,
 	#reader-mode-button > .urlbar-icon,
+	#picture-in-picture-button > .urlbar-icon,
 	#star-button:not([starred]),
 	#context-bookmarkpage:not([starred]) .menu-iconic-icon,
 	#geo-sharing-icon[sharing], .geo-icon,

src/other/firefox/chrome/Colloid/parts/popups.css

@@ -37,6 +37,18 @@ menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover {
 	background: transparent !important;
 }
 
+@media (-moz-gtk-non-native-menus) or (-moz-non-native-content-theme) {
+	menuitem:is([type="checkbox"], [checked="true"]) .menu-iconic-icon {
+		appearance: none !important;
+		-moz-default-appearance: none !important;
+	}
+
+	menuitem[type="radio"] .menu-iconic-icon {
+		appearance: none !important;
+		-moz-default-appearance: none !important;
+	}
+}
+
 /* Adjust popovers position */
 panel[type=arrow] {
 	margin-top: 3px !important;

src/other/firefox/chrome/Colloid/parts/tabsbar.css

@@ -239,9 +239,9 @@ tab {
 
 /* Icon overlay smaller */
 .tab-icon-overlay[pinned], .tab-icon-overlay:not([indicator-replaces-favicon="true"], [selected]) {
-	width: 12px !important;
+	width: 16px !important;
-	height: 12px !important;
+	height: 16px !important;
-	padding: 2px !important;
+	padding: 0 !important;
 }
 /* Icon overlay small style */
 .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
@@ -327,27 +327,39 @@ tab {
 }
 
 /* Close button overlay */
-.tabbrowser-tab:not([pinned]) .tab-content::after, .tabbrowser-tab:not([pinned]) .tab-content::before {
+.tabbrowser-tab:not([pinned]) .tab-content::before {
-	bottom: 1px;
+	border-radius: 0 6px 6px 0;
 	content: "";
 	height: 100%;
 	opacity: 0;
 	position: absolute;
 	right: 0;
-	transition: all 0.2s ease-out;
+	top: 0;
+	transition: 0.2s;
 	width: 55px;
 }
-.tabbrowser-tab:not([pinned]) .tab-content::after {
-	background: transparent;
-	z-index: 90;
-}
 .tabbrowser-tab:not([pinned]) .tab-content::before {
 	background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent);
 	z-index: 99;
 }
-.tabbrowser-tab:not([pinned], :-moz-window-inactive):is([selected="true"], :hover) .tab-content::before {
+.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) .tab-content::before {
 	opacity: 1;
 }
+.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background);
+}
+.tabbrowser-tab:not([pinned], :-moz-window-inactive)[selected="true"]:hover .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background);
+}
+.tabbrowser-tab:not([pinned]):hover .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background);
+}
+.tabbrowser-tab:not([pinned])[selected="true"]:-moz-window-inactive .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-active-background);
+}
+.tabbrowser-tab:not([pinned]):hover:-moz-window-inactive .tab-content::before  {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-hover-background);
+}
 
 /* Tab close button etc. positioning */
 .tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button {
@@ -445,6 +457,14 @@ tab {
 	transition: none !important;
 }
 
+/* Needs attetion tab indicator */
+.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+	background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important;
+	background-position: center bottom !important;
+	background-size: 14px 2px !important;
+}
+
 /* Tab spinner */
 .tab-throbber::before {
 	animation: gnome-spinner 1s linear infinite !important;
@@ -470,8 +490,10 @@ tab {
 
 /* OPTIONAL: Hide single tab */
 @supports -moz-bool-pref("gnomeTheme.hideSingleTab") {
-	#tabbrowser-tabs tab:only-of-type {
+	#tabbrowser-tabs tab:only-of-type,
-		display: none !important;
+	#tabbrowser-tabs tab:only-of-type ~ toolbarbutton,
+	#tabbrowser-tabs tab:only-of-type ~ #tabbrowser-arrowscrollbox-periphery {
+		visibility: collapse;
 	}
 }
 
@@ -480,13 +502,118 @@ tab {
 	.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
 	.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
 		max-width: 225px !important;
+		--tab-min-width: inherit !important;
 	}
 }
 
 /* OPTIONAL: Add more contrast to the active tab */
 @supports -moz-bool-pref("gnomeTheme.activeTabContrast") {
-	.tab-background[selected=true],
+	.tab-background[selected=true]:not(#hack),
 	:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) {
 		background: var(--gnome-tabbar-tab-active-background-contrast) !important;
 	}
+	.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before,
+	:root:not(:-moz-window-inactive) .tabbrowser-tab:hover .tab-content::before {
+		--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important;
+	}
+}
+
+/* OPTIONAL: Show the close button on the selected tab only */
+@supports -moz-bool-pref("gnomeTheme.closeOnlySelectedTabs") {
+	/* Hide the close buttons on hover */
+	.tabbrowser-tab:not([selected="true"]):hover .tab-close-button {
+		visibility: hidden !important;
+		opacity: 0 !important;
+	}
+	/* Hide the close button overlay on hover */
+	.tabbrowser-tab:not([pinned]):hover .tab-content::before {
+		--gnome-tabbar-tab-close-overlay-bg: unset;
+	}
+	/* Reset the overflow position of the tab label container */
+	.tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {
+		margin-right: -16px;
+	}
+}
+
+/* OPTIONAL: Use tabs as headerbar */
+@supports -moz-bool-pref("gnomeTheme.tabsAsHeaderbar") {
+	/* Rearrange bars */
+	#navigator-toolbox #titlebar {
+		order: 0;
+	}
+	#navigator-toolbox #titlebar #TabsToolbar {
+		order: 0;
+	}
+	#navigator-toolbox #titlebar #toolbar-menubar {
+		order: 1;
+	}
+	#navigator-toolbox #nav-bar {
+		order: 1;
+	}
+	#navigator-toolbox #PersonalToolbar {
+		order: 2;
+	}
+	
+	/* Remove nav-bar rounding and padding */
+	:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { 
+		border-radius: 0 !important; 
+	 } 
+	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar,
+	:root[tabsintitlebar][inFullscreen] #nav-bar {
+		padding-left: 3px !important;
+		padding-right: 3px !important;
+	}
+	
+	/* Round and pad tab-bar */
+	:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #TabsToolbar {
+		border-radius: env(-moz-gtk-csd-titlebar-radius) env(-moz-gtk-csd-titlebar-radius) 0 0 !important
+	}
+	:root[tabsintitlebar]:not([inFullscreen], [sizemode="maximized"]) #TabsToolbar .toolbar-items {
+		padding: 0 46px;
+	}
+	
+	/* Hide duplicate window controls from menubar */
+	:root[tabsintitlebar] #toolbar-menubar .titlebar-buttonbox-container {
+		display: none !important;
+	}
+	
+	/* Force displaying controls in tab-bar */
+	:root[tabsintitlebar] #TabsToolbar .titlebar-buttonbox-container:not(#hack) {
+		display: flex !important;
+		position: static !important;
+		visibility: visible !important;
+	}
+	
+	/* Blend single tab into whole bar */
+	@supports -moz-bool-pref("gnomeTheme.hideSingleTab") {
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]),
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) ~ toolbarbutton,
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) ~ #tabbrowser-arrowscrollbox-periphery {
+			visibility: visible;
+		}
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) {
+			-moz-window-dragging: drag;
+		}
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-background {
+			display: none !important
+		}
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-close-button {
+			visibility: hidden !important;
+			opacity: 0 !important;
+		}
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-content::before {
+			--gnome-tabbar-tab-close-overlay-bg: unset !important;
+		}
+		#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-labelk-container[textoverflow="true"] {
+			margin-right: -16px;
+		}
+		/* Override normal width tabs */
+		@supports -moz-bool-pref("gnomeTheme.normalWidthTabs") {
+			#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]):not([style^="max-width"]),
+			#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"][style^="max-width: 100px !important;"]:not([pinned]) {
+				max-width: 100% !important;
+				--tab-min-width: 131px !important;
+			}
+		}
+	}
 }