/* ==UserStyle==

@name					YourTube
@namespace				https://github.com/Himither
@version				1.1.0
@description				Black mode, centered & full height default view and theatre mode, hide borders & more
@author					Himither
@license				MIT
@preprocessor				stylus

@var text Youtube			"━━━━━━⮞【YouTube】" '_'

@var checkbox				yt-darknesss					"La+ Darknesss (Black YouTube)" 					1
@var number				yt-menuWidth					"Change side menu width (YouTube default: 240px)" 			[420, 170, 1080, 1, "px"]
@var select				theme						"Select a theme" {

"None*":				"none",
"Aqua":					"aqutan"

}
@var checkbox				yt-hideMinimenu					"Hide the small left sidemenu in Home & Shorts" 			0
@var checkbox				yt-posts					"Show YouTube posts on top in Home"					0

@var text YouTubeWatch		"━━━━━━⮞【YT Watch】" '_'

@var checkbox				yt-centerDefaultView				"Centered & full height default view video" 				1
@var checkbox				yt-centerTheatreMode				"Centered & full height theatre mode video" 				1
@var checkbox				yt-playlistChatFullHeight			"Use full height for playlist or chat" 					1
@var checkbox				yt-pauseHeader					"Show header only on pause when watching videos or shorts" 		1
@var checkbox				yt-borderlessChat				"Remove border around chat" 						1
@var checkbox				yt-borderlessPlaylist				"Remove border around playlist" 					1
@var checkbox				yt-saveButtonTweaks				"Tweaks to ensure saveButton accessibility" 				0

@var text YouTubeShorts		"━━━━━━⮞【YT Shorts】" '_'
	
@var checkbox				yt-hideShortsSidebar				"Hide shorts in right sidebar" 						0
@var checkbox				yt-hideShortsHome				"Hide shorts in Home" 							0

@var text YouTubeChat		"━━━━━━⮞【YT Chat】" '_'

@var number				ytc-chatWidth					"Change chat width (YouTube default: 402px)"				[402, 170, 1080, 1, "px"]
@var number				ytc-emojiPickerHeight				"Change emoji picker height (YouTube default: 252px)"			[252, 100, 600, 1, "px"]
@var text     				ytc-customLabel   				"Custom chat label text (wrapped in quotes)"				"Default"
@var checkbox				ytc-hideTopFansButton				"Hide top fans button" 							0
@var checkbox				ytc-hideChatMenuButton				"Hide chat menu button" 						0
@var checkbox				ytc-hideChatCloseButton				"Hide chat close button" 						0

@var text Hyperchat			"━━━━━━⮞【Hyperchat】" '_'

@var checkbox				hc-hideHyperchatInfo				"Hide Hyperchat Notice"							0

@var text Scrollbars		"━━━━━━⮞【Scrollbars】" '_'

@var checkbox				yt-hideScrollbars				"Hide YouTube scrollbars" 						0
@var checkbox				ytc-hideScrollbars				"Hide YouTube-Chat scrollbars" 						0
@var checkbox				hc-hideScrollbars				"Hide Hyperchat scrollbars" 						0

==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/") {

	if yt-darknesss {
		html[dark] {
			--yt-spec-base-background: black;
		}

		#masthead-container #background,
		#frosted-glass {
			background: black !important;
		}

		ytd-app[is-shorts-page] {
			background-color: black;
		}
	}

	if yt-menuWidth {

		tp-yt-app-drawer #contentContainer,
		#guide-renderer {
			width: yt-menuWidth !important;
		}

		ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
			margin-left: var(--ytd-mini-guide-width);
		}

		tp-yt-app-drawer #contentContainer {
			background-color: rgba(0, 0, 0, 0.5) !important;
			backdrop-filter: blur(10px);
		}

		#guide-content {
			background-color: unset !important;
		}

		if yt-hideMinimenu {
			ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
				margin-left: unset;
			}
		}
	}

	if yt-hideMinimenu {
		ytd-mini-guide-renderer {
			display: none;
		}

		ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
			margin-left: 0;
		}

		#shorts-container {
			margin-right: unset !important;
		}

		ytd-browse[mini-guide-visible] ytd-playlist-header-renderer.ytd-browse {
			left: unset;
		}

		:is(ytd-browse[mini-guide-visible], ytd-browse[guide-persistent-and-visible]) .page-header-sidebar.ytd-browse {
			left: unset;
		}
	}

	if yt-hideShortsSidebar {
		ytd-reel-shelf-renderer {
			display: none;
		}
	}

	if yt-hideShortsHome {
		#content ytd-rich-shelf-renderer:has(#dismissible):not(:has(ytd-post-renderer)) {
			display: none;
		}
	}

	if yt-posts {
		#content ytd-rich-section-renderer:has(ytd-post-renderer) {
			order: -1;
		}
	}

	if yt-hideScrollbars {
		* {
			scrollbar-width: none !important;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/watch"),
url-prefix("https://www.youtube.com/live"),
url-prefix("https://www.youtube.com/clip"),
url-prefix("https://www.youtube.com/shorts") {

	#anchored-panel:has([target-id="engagement-panel-structured-description"][visibility="ENGAGEMENT_PANEL_VISIBILITY_HIDDEN"]):not(:has([target-id="engagement-panel-comments-section"][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"])) {
		//This is a little fix for a stupid bug where the left border of the description/comment panel on the short page is visible even when the panel is hidden
		border-color: transparent;
	}

	.ytp-offline-slate-background {
		//Ensures that stream thumbnails aren't cropped
		background-size: contain;
	}

	if yt-darknesss {
		.header.ytd-playlist-panel-renderer {
			background: var(--yt-spec-base-background);
		}
	}

	if yt-centerDefaultView {

		ytd-watch-flexy[is-four-three-to-sixteen-nine-video_] {
			overflow-x: hidden;

			#player:has(#movie_player.playing-mode),
			#player:has(#movie_player.seeking-mode) {
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(100dvh - ((var(--ytd-margin-6x) + var(--ytd-toolbar-offset))));
			}

			#player:has(#movie_player:is(.playing-mode, .seeking-mode))>#player-container-outer {
				flex-grow: 1;
				transform: translateY(calc(var(--ytd-margin-6x)/-2 + var(--ytd-toolbar-offset)/-2));
			}

			#columns:has(#movie_player.playing-mode):has(#chat[collapsed]),
			#columns:has(#movie_player.seeking-mode):has(#chat[collapsed]),
			#columns:has(#movie_player.playing-mode):not(:has(#chat)),
			#columns:has(#movie_player.seeking-mode):not(:has(#chat)) {
				transform: translateX(calc(var(--ytd-watch-flexy-sidebar-width) / 2));
			}

			#secondary {
				visibility: visible;
				opacity: 1;
			}

			#columns:has(#movie_player:is(.playing-mode, .seeking-mode)):has(#chat[collapsed]) #secondary,
			#columns:has(#movie_player.playing-mode):not(:has(#chat)) #secondary,
			#columns:has(#movie_player.seeking-mode):not(:has(#chat)) #secondary {
				visibility: hidden;
				opacity: 0;
			}
		}
	}

	if yt-centerTheatreMode {
		ytd-watch-flexy[full-bleed-player=""] #full-bleed-container {
			min-height: calc(100dvh - var(--ytd-toolbar-offset)) !important;
		}

		.html5-video-container {
			height: 100% !important;
		}

		#movie_player .video-stream {
			left: 0 !important;
			top: 0 !important;
			object-fit: contain !important;
			height: 100% !important;
			width: 100% !important;
		}

		if yt-pauseHeader {

			ytd-page-manager:has([class*="playing-mode"]):not(:has([class*="unstarted-mode"])):has(ytd-watch-flexy[full-bleed-player=""]) {
				margin-top: 0 !important;
			}

			ytd-page-manager:has([class*="playing-mode"]):not(:has([class*="unstarted-mode"])) ytd-watch-flexy[full-bleed-player=""] #full-bleed-container {
				min-height: 100dvh !important;
			}

			ytd-watch-flexy[full-bleed-player=""] #chat {
				transition: unset !important;
			}

			ytd-page-manager:has([class*="playing-mode"]):not(:has([class*="unstarted-mode"])) ytd-watch-flexy[full-bleed-player=""] #chat {
				top: 0 !important;
			}
		}
	}

	if yt-playlistChatFullHeight {
		#secondary {
			padding-top: 0 !important;
		}

		#secondary:has(#playlist[hidden]) #chat-container:has(#chat):not(:has(#chat[collapsed])) {
			height: calc(100dvh - var(--ytd-toolbar-height)) !important;
		}

		#secondary:has(#playlist[collapsed]) #chat-container:has(#chat):not(:has(#chat[collapsed])) {
			height: calc(100dvh - var(--ytd-toolbar-height) - var(--ytd-margin-6x) - 68px) !important;
			margin-bottom: var(--ytd-margin-6x);
		}

		#secondary #chat:not([collapsed]) {
			height: 100dvh !important;
			min-height: 0 !important;
			margin-bottom: 0 !important;
		}

		#secondary #playlist:not([collapsed]) {
			height: calc(100dvh - var(--ytd-toolbar-height)) !important;
			max-height: unset !important;
			margin-bottom: 0 !important;
		}

		#secondary #playlist:not([collapsed]) #container {
			max-height: calc(100% - var(--ytd-toolbar-height)) !important;
		}

		#secondary #chat-container:not(:has(#chat[collapsed])) #chat {
			height: calc(100% - var(--ytd-toolbar-height)) !important;
		}
	}

	if yt-pauseHeader {

		ytd-app:has([class*="playing-mode"]):not(:has([class*="unstarted-mode"])) #masthead-container {
			visibility: hidden;
			background-color: var(--yt-spec-base-background) !important;
		}
	}

	if yt-borderlessChat {
		#chat {
			border-color: transparent !important;
		}
	}

	if yt-borderlessPlaylist {
		#container.ytd-playlist-panel-renderer {
			border: 1px solid transparent;
		}
	}

	if yt-saveButtonTweaks {
		#upload-info.ytd-video-owner-renderer {
			display: none;
		}

		ytd-video-owner-renderer:has(:is(.yt-simple-endpoint:hover, #upload-info:hover)) #upload-info.ytd-video-owner-renderer {
			display: flex;
		}

		:is(#owner, #actions.ytd-watch-metadata) {
			width: fit-content;
			min-width: unset;
		}

		ytd-subscribe-button-renderer {
			width: fit-content !important;
		}

		:is(yt-button-view-model, #flexible-item-buttons, ytd-subscribe-button-renderer[subscribed]) .yt-spec-button-shape-next__button-text-content {
			display: none;
		}

		:is(yt-button-view-model, #flexible-item-buttons) .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
			margin: 0;
		}

		#flexible-item-buttons {
			display: flex;
		}

		#flexible-item-buttons>yt-button-view-model:has([d*="M18 4v15"]) {
			order: -1;

			& button {
				background-color: #f1f1f1;
				color: black;
			}
		}
	}

	if ytc-chatWidth!=402 {
		ytd-watch-flexy {
			--ytd-watch-flexy-sidebar-width: ytc-chatWidth !important;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/live_chat") {



	if yt-darknesss {

		yt-live-chat-message-input-renderer,
		yt-live-chat-header-renderer,
		yt-live-chat-ticker-renderer,
		ytd-menu-popup-renderer,
		#chat-messages,
		#search-panel,
		#contentWrapper {
			background: black !important;
		}

		.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text:hover {
			background: #202020 !important;
		}

		#separator.yt-live-chat-renderer,
		#panel-pages.yt-live-chat-renderer {
			border: black !important;
		}
	}

	if ytc-emojiPickerHeight !=252 {
		[has-picker-open]:has(#emoji[selected]) {
			#panel-pages.yt-live-chat-renderer {
				height: ytc-emojiPickerHeight;
			}

			#input-panel,
			#live-chat-message-input,
			#container,
			#pickers,
			#emoji {
				height: 100%;
			}

			#emoji {
				max-height: unset;
			}
		}
	}

	if ytc-customLabel !="Default" {

		#label-text {
			display: none;
		}

		#label-icon {
			width: max-content !important;

			&::before {
				content: ytc-customLabel;
			}
		}
	}

	if ytc-hideTopFansButton {

		#viewer-leaderboard-entry-point {
			display: none;
		}
	}

	if ytc-hideChatMenuButton {

		yt-live-chat-button {
			display: none !important;
		}
	}

	if ytc-hideChatCloseButton {

		div#close-button {
			display: none !important;
		}
	}

	if theme!=none {

		div#content #author-name:not(.moderator) {
			color: var(--color-1) !important;
		}

		div#content #author-name.moderator {
			color: green !important;
		}


		#visible-banners span#author-name.owner {
			color: black !important;
		}

		div#content :is(#author-name.member,
		span#title::after) {
			color: var(--color-2) !important;
		}

		span#title::after,
		#trigger :is(#label-text,
		#label-icon) {
			color: var(--color-2) !important;
			text-shadow: -2px 2px 1.0px var(--color-1) !important;
		}
	}

	if theme==aqutan {

		:root {
			--color-1: rgb(59, 136, 213);
			--color-2: rgb(240, 98, 146);
		}
	}

	if ytc-hideScrollbars {

		* {
			scrollbar-width: none !important;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/embed/hyperchat_embed") {

	if yt-darknesss {

		.hyperchat-root,
		.hyperchat-root>div.w-full>div.flex {
			background: black !important;
		}
	}

	if hc-hideHyperchatInfo {

		div.hover-highlight:not(.flex) {
			display: none !important;
		}
	}

	if theme !=none {

		div.content>div>div>div>a>span:not(.text-moderator-light) {
			color: var(--color-1) !important;
		}

		div.content>div>div>div>a>span.text-moderator-light {
			color: green !important;
		}

		div.content>div>div>div>a>span.text-member-light {
			color: var(--color-2) !important;
		}
	}

	if theme==aqutan {
		:root {
			--color-1: rgb(59, 136, 213);
			--color-2: rgb(240, 98, 146);
		}
	}

	if hc-hideScrollbars {

		* {
			scrollbar-width: none !important;
		}

		div.hyperchat-root div.w-full {
			padding-bottom: 4px !important;
		}
	}
}