youtube.userstyles.css

youtube.userstyles.css

/* ==UserStyle==
@name           Undistracted Youtube
@namespace      userstyles.world
@version        0.0.5
@description    Undistracted Youtube
@author         Abhinav K
@preprocessor		stylus


@var checkbox checkbox-shorts "Hide Shorts" 1
@var checkbox checkbox-sidebar-discovery "Hide Sidebar: Discovery" 1
@var checkbox checkbox-video-recommended "Hide Video: Recommended" 1
@var checkbox checkbox-disable-inline-playback "Disable Inline Playback" 1
@var number gridItemsPerRow 'Thumbnails per row' [5, 1, 10]

==/UserStyle== */
@-moz-document domain('youtube.com') {

	/** 
	This is a modified version of Youtube 6 grid available at
	https://userstyles.world/style/21255
	The primary changes are obviously 5 grid instead of 6, but also a sane ratio of thumbnail and text below it. 
	It also fixes the float issue in search page, removed shelfs for shorts, news, and random stuffs. 
	Also made a few things visible back again, and seperates channels in search page.
	*/

	:root {
		/* set maximum no of rows */
		--max-row: gridItemsPerRow
	}

	ytd-rich-grid-renderer {
		--ytd-rich-grid-items-per-row: var(--max-row) !important;
		--ytd-rich-grid-item-max-width: 450px !important;
		--ytd-rich-grid-item-min-width: 250px !important;
		--ytd-rich-grid-posts-per-row: var(--max-row) !important;
		--ytd-rich-grid-slim-items-per-row: var(--max-row) !important;
		--ytd-rich-grid-game-cards-per-row: var(--max-row) !important;
		--ytd-rich-grid-mini-game-cards-per-row: var(--max-row) !important;
	}

	if checkbox-shorts {

		/* remove shorts, breaking news, you might like, etc */
		a[title="Shorts"],
		/* for when the name "shorts" isn't used */
		.style-scope .ytd-mini-guide-renderer:nth-child(2),
		#sections .ytd-guide-renderer:first-child ytd-guide-entry-renderer:nth-child(2),
		[page-subtype='home'] ytd-rich-shelf-renderer[is-shorts],
		ytd-reel-shelf-renderer {
			display: none !important;
		}

		#dismissible {
			display: none
		}

		/* BlockTube is much better addon but this will work most of the time. */
	}

	if checkbox-sidebar-discovery {
		#sections {

			.ytd-guide-renderer:nth-child(3),
			.ytd-guide-renderer:nth-child(4) {
				display: none;
			}
		}
	}

	if checkbox-disable-inline-playback {

		ytd-video-preview,
		ytd-moving-thumbnail-renderer {
			display: none;
		}
	}

	if checkbox-video-recommended {
		#secondary-inner {
			display: none !important;
		}

		:not(.ytp-mweb-player) .ytp-endscreen-paginate {

			.ytp-endscreen-next,
			.ytp-endscreen-previous {
				display: none;
			}
		}

		.ytp-endscreen-content {
			display: none;
		}
	}

	/* video thumb margins */
	#contents ytd-rich-item-renderer ytd-rich-shelf-renderer {
		margin-top: 15px !important;
		margin-left: 10px !important;
		margin-right: 10px !important;
		margin-bottom: 15px !important;
	}

	/*search thumbnail size*/
	ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer {
		max-width: 300px !important;
	}

	/* show "latest, popular, oldest" at channel page */
	ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] yt-chip-cloud-chip-renderer {
		display: inline-block !important;
	}

	ytd-channel-renderer {
		border: 5px solid #3c3a3a;
		border-radius: 10px;
		padding: 1.5rem 1rem;
		margin: 0;
	}

	/* Hide youtube Create button. */
	button[aria-label="Create"] {
		display: none !important;
	}

	/* front page smaller text and spacing */
	ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
		font-size: 1.3rem !important;
		line-height: 1.8rem !important;
	}

	ytd-rich-item-renderer h3.ytd-rich-grid-media {
		margin: 6px 0 5px 0 !important;
	}

	ytd-video-meta-block[rich-meta] #byline-container.ytd-video-meta-block,
	ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
		font-size: 1.3rem !important;
		line-height: 1.1rem !important;
	}

	ytd-guide-collapsible-section-entry-renderer.ytd-guide-section-renderer {
		margin-top: 0px !important;
		font-size: 1rem !important;
	}

	/* hide miniplayer button */
	.ytp-chrome-controls>.ytp-right-controls>button.ytp-miniplayer-button {
		display: none !important;
	}

	/* Stupid shorts are huge */
	ytm-shorts-lockup-view-model-v2 ytm-shorts-lockup-view-model .shortsLockupViewModelHostThumbnailContainer,
	.shortsLockupViewModelHostThumbnailContainer>img {
		height: 400px;
	}
}

User style is located at https://userstyles.world/style/22020