Those styles are becoming so aids.

Author: Alluseri

html/popup.html

@@ -15,7 +15,7 @@
 	<div id="central-logo">
 		<img src="../icons/default64.png">
 		<span id="central-name">SeriStyle</span>
-		<span class="central-sub">v1.11.3</span>
+		<span class="central-sub">v1.12.0</span>
 		<span class="central-sub" id="storage-status"></span>
 	</div>
 	<div id="interactions">

html/popup.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
 	});
 	document.getElementById("low-i-debug").onclick = async () => {
 		var DebugInfo = [
-			"- SeriStyle v1.11.3",
+			"- SeriStyle v1.12.0",
 			"- " + navigator.userAgent,
 			"- " + StorageMode
 		];

manifest.firefox.json

@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "SeriStyle",
 	"author": "Nekoseri",
-	"version": "1.11.3",
+	"version": "1.12.0",
 	"description": "Bring the early-2021 UI back to YouTube!",
 	"icons": {
 		"16": "icons/default16.png",

manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "SeriStyle",
 	"author": "Nekoseri",
-	"version": "1.11.3",
+	"version": "1.12.0",
 	"description": "Bring the early-2021 UI back to YouTube!",
 	"icons": {
 		"16": "icons/default16.png",

scripts/defaults.js

@@ -1,4 +1,4 @@
-this.SeriStyleMetaVersion = 2;
+this.SeriStyleMetaVersion = 3;
 
 this.SeriStyleLocales = {
 	"en-US": {
@@ -18,7 +18,7 @@ this.SeriStyleLocales = {
 			Advanced: "Advanced settings"
 		},
 		Messages: {
-			UpdateSettings: "SeriStyle was updated to version 1.11.3, which introduced new settings!\n\nDo you want to visit the settings page(opens in a new tab)?"
+			UpdateSettings: "SeriStyle was updated to version 1.12.0, which introduced new settings!\n\nDo you want to visit the settings page(opens in a new tab)?"
 		}
 	}
 };
@@ -339,17 +339,17 @@ this.SeriStyleSettings = {
 				"en-US": "$ms"
 			}
 		},
-		LegacyPanels: {
+		DisableCSS: {
 			Kind: 0,
 			Name: {
-				"en-US": "Legacy(v1.2.0) panel style"
+				"en-US": "Disable all CSS transformers"
 			},
 			Value: false
 		},
-		LegacySubButton: {
+		LegacyPanels: {
 			Kind: 0,
 			Name: {
-				"en-US": "Legacy(v1.4.0) subscribe button"
+				"en-US": "Legacy(v1.2.0) panel style"
 			},
 			Value: false
 		},
@@ -366,6 +366,7 @@ this.SeriStyleSettings = {
 this.DomUtils = {
 	"GetValue": (Element) => Element.value || Element.innerText,
 	"BuildElement": function (Tag, Characteristics, Inner, Callback) {
+		if (Tag == "style" && SeriStyleSettings.Advanced.DisableCSS.Value) return document.createElement(Tag);
 		var elem = document.createElement(Tag);
 		for (let _ in (Characteristics || {})) {
 			elem[_] = Characteristics[_];

scripts/page-observer.js

@@ -14,7 +14,7 @@ var Environment = this.browser || this.chrome;
 Environment.runtime.onMessage.addListener((Message) => {
 	if (Message.Operation != "SeriStyle_HistoryState") return;
 	var URL = Message.Args[0];
-	window.dispatchEvent(new CustomEvent("historychange", {detail: Message.Args[0]}));
+	window.dispatchEvent(new CustomEvent("historychange", { detail: Message.Args[0] }));
 });
 
 var GeneralTransformerBurned = false;
@@ -90,4 +90,7 @@ PageObserver.observe(document.querySelector("ytd-app"), {
 });
 
 GT_Burn1 = !!document.querySelector("#search-icon-legacy>yt-icon.ytd-searchbox");
-GT_Burn2 = !!document.querySelector("#voice-search-button yt-icon");
+GT_Burn2 = !!document.querySelector("#voice-search-button yt-icon");
+
+if (SeriStyleSettings.Advanced.DisableCSS.Value)
+	console.log("[SeriStyle|EarlyBird] Disabled all CSS transformers for this page.");

scripts/transformer-css.js

@@ -1,7 +1,7 @@
 // jshint -W014, -W086
 
-var SelSubPassiveBtn = "#subscribe-button yt-button-shape>button";
-var SelSubContainer = "yt-smartimation.ytd-subscribe-button-renderer"; // Alt: #subscribe-button yt-smartimation
+var SelSubPassiveBtn = "#subscribe-button-shape>button"; // Old: #subscribe-button yt-button-shape>button
+var SelSubContainer = "yt-smartimation.ytd-subscribe-button-renderer>.smartimation__content>__slot-el"; // [OLD] Alt: #subscribe-button yt-smartimation
 var SelMeta = "#meta.ytd-c4-tabbed-header-renderer";
 var SelMetaSpan = SelMeta + ">span.meta-item";
 
@@ -10,6 +10,8 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 	"innerText":
 		(
 			/* General */
+			// Remove "You"
+			"ytd-guide-collapsible-section-entry-renderer>#header{display:none;}" +
 			// Old search box styles
 			"#container.ytd-searchbox{" + (SeriStyleSettings.General.NormalizeSearchBar.Value ? "margin-left:0px;" : "") + "position:relative;align-items:center;border:1px solid var(--ytd-searchbox-legacy-border-color);border-right:none;border-radius:2px 0 0 2px;box-shadow:inset 0 1px 2px var(--ytd-searchbox-legacy-border-shadow-color);padding:2px 6px;flex:1;flex-basis:1e-9px;display:flex;flex-direction:row;}" +
 			// Prepare voice search button
@@ -31,24 +33,19 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 				"#sponsor-button yt-button-shape>button{" + (SeriStyleSettings.VideoPage.HideJoinButton.Value ? "display:none;" : "text-transform:uppercase;background:none;border:1px solid #3EA6FF;color:#3EA6FF;border-radius:3px;") + "}" +
 				"#analytics-button yt-button-shape>button{text-transform:uppercase;background:#065FD4;color:#FFF;border-radius:3px;}"
 				: "") +
-			// Old subscribe button color & form
+			// Fix the Unsubscribe button
+			"ytd-subscribe-button-renderer{transition:none;width:unset;}" +
 			SelSubPassiveBtn + "{border-radius:3px;text-transform:uppercase;}" +
 			SelSubPassiveBtn + ".yt-spec-button-shape-next--filled{background:#C00;color:#FFF;}" + // "SUBSCRIBE" button, red color
-			(SeriStyleSettings.Advanced.LegacySubButton.Value
-				? SelSubPassiveBtn + ".yt-spec-button-shape-next--tonal{background:#2C2C2C;color:#A8A8A8;}"
-				: "#subscribe-button>ytd-subscribe-button-renderer>yt-smartimation>yt-button-shape>button{background:#2C2C2C;color:#A8A8A8;}"
-			) +
-			// Fix sub button
-			(!SeriStyleSettings.Advanced.LegacySubButton.Value ?
-				"#subscribe-button yt-button-shape[hidden]{display:block;}" +
-				"#notification-preference-button div.cbox{display:none;}" + // widest: "#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.cbox.yt-spec-button-shape-next--button-text-content"
-				"#notification-preference-button div.yt-spec-button-shape-next__secondary-icon{display:none;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__secondary-icon
-				"#notification-preference-button div.yt-spec-button-shape-next__icon{margin-right:0px;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__icon
-				"#notification-preference-button button{background:none;padding-right:0px;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button
-				"#notification-preference-button div.yt-spec-button-shape-next__button-text-content{display:none;}"
-				: "") +
+			SelSubPassiveBtn + "{background:#2C2C2C;color:#A8A8A8;}" +
+			"#subscribe-button yt-button-shape[invisible]{display:block;position:unset;pointer-events:unset;visibility:unset;}" +
+			"#notification-preference-button div.cbox{display:none;}" + // widest: "#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.cbox.yt-spec-button-shape-next--button-text-content"
+			"#notification-preference-button div.yt-spec-button-shape-next__secondary-icon{display:none;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__secondary-icon
+			"#notification-preference-button div.yt-spec-button-shape-next__icon{margin-right:0px;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__icon
+			"#notification-preference-button button{background:none;padding-right:0px;}" + // widest: #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button
+			"#notification-preference-button div.yt-spec-button-shape-next__button-text-content{display:none;}" +
 			// Fix notification bell
-			(!SeriStyleSettings.Advanced.LegacyImation.Value ?
+			(!SeriStyleSettings.Advanced.LegacyImation.Value ? // TODO: Pending removal
 				SelSubContainer + "{display:flex;flex-direction:row;}"
 				: "") +
 			// Hide channel handles
@@ -103,7 +100,7 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 			"}" +
 
 			/* Playlists */
-			(SeriStyleSettings.Playlist.TrueOld.Value ?
+			(SeriStyleSettings.Playlist.TrueOld.Value ? // TODO: Move duplicates outside of this scope
 				// Restore position & dimensions, fix colors
 				"ytd-browse.ytd-page-manager{padding-top:0px;}" +
 				"ytd-playlist-header-renderer{background:rgba(255,255,255,0.05);margin-left:0px;height:calc(100vh - var(--ytd-toolbar-height));}" + // In the past: var(--yt-spec-general-background-a)
@@ -142,14 +139,35 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 			) +
 
 			/* Channel Page */
-			(SeriStyleSettings.ChannelPage.TrueOld.Value ?
+			(SeriStyleSettings.ChannelPage.TrueOld.Value ? // TODO: Relocate this... maybe?
+				// Metadata: Only show subscriber count
 				SelMetaSpan + "{margin:0;}" +
 				SelMetaSpan + ">#channel-handle{display:none;}" +
 				SelMetaSpan + ">#videos-count{display:none;}" +
+				SelMeta + " span.delimiter{display:none;}" +
 				SelMeta + ">#channel-tagline{display:none;}" +
+				SelMeta + ">#channel-header-links{display:none;}" +
+				// Fix channel name size
+				SelMeta + " #text.ytd-channel-name{font-size:24px;font-weight:400;}" +
+				SelMeta + ">#channel-name{font-size:unset;line-height:unset;}" +
+				// Part of subscribe button fix
+				SelMeta + "{width:max-content;}" +
+				// Fix misaligned badge
+				SelMeta + ">#channel-name{display:flex;align-items:center;font-size:unset;line-height:unset;}" +
+				SelMeta + ">#channel-name>ytd-badge-supported-renderer>div>yt-icon{margin-bottom:0px;}" +
+				SelMeta + ">#channel-name>ytd-badge-supported-renderer{margin-left:8px;}" +
+				// Header realignment
 				"#channel-header-container.ytd-c4-tabbed-header-renderer{padding-top:0px;align-items:center;}" +
+				"#inner-header-container.ytd-c4-tabbed-header-renderer{flex-direction:row;margin-top:0px;}" +
+				// Avatar style fixes
 				"#channel-header-container.ytd-c4-tabbed-header-renderer>#avatar{width:80px;height:80px;margin-bottom:0px;}" +
-				"#inner-header-container.ytd-c4-tabbed-header-renderer{margin-top:0px;}"
+				// Fixing tab styles:
+				".yt-tab-shape-wiz__tab{padding:0 32px;font-family:Roboto,Noto,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.007px;text-size-adjust:100%;text-transform:uppercase;white-space:nowrap;}" +
+				"yt-tab-shape.yt-tab-shape-wiz{margin-right:0px;}" +
+				".yt-tab-group-shape-wiz__slider{display:none;}" +
+				".yt-tab-shape-wiz__tab-bar--tab-bar-selected{height:2px;background:#AAA;}" +
+				//
+				""
 				: "") +
 			(SeriStyleSettings.General.OldColors.Value ?
 				"#channel-header.ytd-c4-tabbed-header-renderer, #tabs-inner-container.ytd-c4-tabbed-header-renderer{background:#181818;}" +

scripts/transformer-videopage.js

@@ -56,6 +56,7 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 			"#description-inner{margin:0px;}" +
 			"#snippet>.ytd-text-inline-expander:not([id]){display:none;}" + // Better than nth-child
 			"#expand-sizer{display:none;}" +
+			"#ytd-watch-info-text{display:none;}" +
 			// Old pfp style
 			"#owner #avatar{width:48px;height:48px;max-width:48px;max-height:48px;margin-right:16px;}" +
 			"#owner #avatar>#img{width:48px;height:48px;max-width:48px;max-height:48px;}" +
@@ -165,7 +166,7 @@ if (Views) {
 	}));
 	$("#title > ytd-badge-supported-renderer > div > span").innerText = "I AM CRINGE AND I WANT MONEY FOR MY CONTENT";
 	const FuckThisURL = document.location.href;
-	window.addEventListener("historychange", function(Deets) {
+	window.addEventListener("historychange", function (Deets) {
 		var URL = Deets.detail;
 		if (URL != FuckThisURL) {
 			console.log("[SeriStyle|Videopage] Hard reloading the page after sponsorship lock.");

update.firefox.json

@@ -82,6 +82,15 @@
 							"strict_min_version": "109"
 						}
 					}
+				},
+				{
+					"version": "1.12.0",
+					"update_link": "https://github.com/Alluseri/SeriStyle/releases/download/1.12.0/SeriStyle-1.12.0.xpi",
+					"applications": {
+						"gecko": {
+							"strict_min_version": "109"
+						}
+					}
 				}
 			]
 		}