Skip to content

Youtube - More modern theme by devarite

Screenshot of Youtube - More modern theme

Details

Authordevarite

LicenseNo License

Categoryyoutube

Created

Updated

Size3.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Makes youtube look more modern, requires dark mode to be enabled to work.

Notes

Not fully complete yet!, expect bugs.

latest:
Version 1.1: Fixed notification badge taking half of the screen when number is over 99, and added a transition to the search bar.
older:
Version 1.0.1: Fixed search suggestions not showing, and made more stuff rounded.
Version 1.0: Made the style.

Source code

/* ==UserStyle==
@name         Youtube.com More modern theme
@version      20220809.09.17
@namespace    userstyles.world/user/devarite
@description  Makes youtube look more modern, requires dark mode to be enabled to work.
@author       devarite
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
/*More modern youtube theme*/
/*Requires dark mode*/

.ytd-feed-filter-chip-bar-renderer .iron-selected {
	background-color: #7d7d7d !important;
}

#button .ytd-feed-filter-chip-bar-renderer {
	background-color: #7d7d7d !important;
}

ytd-guide-entry-renderer {
	height: 30px !important;
	border-radius: 5px;
}

ytd-guide-entry-renderer #endpoint {
	height: 30px !important;
	border-radius: 5px;
}

.guide-icon {
	margin-right: 15px;
}

#thumbnail {
	border-radius: 5px;
}

.ytd-thumbnail {
	border-radius: 5px;
	background-color: #00000000;
}

ytd-thumbnail, #thumbnail {
	border-radius: 5px !important;
	background-color: #00000000;
}

ytd-thumbnail::before {
	border-radius: 5px;
	background-color: #00000000;
}

.miniplayer {
	border-radius: 5px;
}

.ytd-searchbox {
	border-radius: 5px;
}

yt-img-shadow {
	border-radius: 5px !important;
}

.ytd-feed-filter-chip-bar-renderer, .yt-chip-cloud-renderer {
	border-radius: 5px;
	border: 0;
}

a {
	border-radius: 5px !important;
}

#author-text {
	color: #7d7dff !important;
}

#author-comment-badge {
	border-radius: 5px;
}

#comments {
	background-color: #131313 !important;
	border-radius: 5px;
	padding: 5px;
	transition: all 0.1s ease-in-out;
}

#replies {
	background-color: #1a1a1a !important;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
}

#expander #button {
	padding-bottom: 2px;
}


#replies:hover {
	background-color: #262626;
}

#container .ytd-searchbox {
	border-radius: 5px;
	transition:all 0.1s ease-in-out;
}

.sbsb_a {
	background-color: #262626;
	color: #fff !important;
	border-radius: 5px;
}

.sbpqs_a {
	background-color: #262626;
	color: #fff !important;
}

.iv-click-target, .iv-card-content, .iv-card, .iv-card-video {
	background-color: #262626;
	color: #fff;
	border-radius: 5px;
}

a .iv-card-primary-link {
	color: #808bff;
	transition: all 0.2s ease-in-out;
}

.iv-drawer {
	border-radius: 5px 0 0 5px;
	margin: 5px;
	margin-right: 0;
}

ytd-backstage-post-thread-renderer {
	border-radius: 5px;
}

#links-holder {
	border-radius: 5px;
}

.ytd-thumbnail-overlay-time-status-renderer {
	background-color: #262626b0;
	padding: 2px 5px;
	border-radius: 5px;
}

.sbqs_c {
	color: #fff;
}

.sbqs_c::before {
	color: #fff;
}

.sbpqs_a::before {
	color: #fff;
}

.sbsb_c, .sbfl_b {
	color: #ff7b7b;
	background-color: #262626;
}

.sbsb_i:hover, .gsfs:hover {
	color: #ff5757;
}

.sbdd_b {
	border-radius: 5px;
	border: none;
}

.sbsb_d:hover {
	color: #acc8ff !important;
}

.sbpqs_a {
	background-color: #0000;
}

.gsfs {
	padding: 0 5px;
}

.sbse {
	border-radius: 5px;
	padding: 1px 5px;
	transition: all 0.1s ease-in-out;
}

.sbse:hover {
	background-color: #404040;
}

.sbfl_a {
	margin-right: 0;
}

ytd-compact-link-renderer, ytd-multi-page-menu-renderer, .ytd-notification-renderer, .thumbnail-container, .ytd-rich-shelf-renderer, .ytd-rich-item-renderer, .branding-context-container-outer, .ytp-cued-thumbnail-overlay-image {
	border-radius: 5px;
}

img .yt-img-shadow {
	border-radius: 5px;
}

.ytp-chapter-hover-container, .ytp-timed-markers-container, .ytp-progress-list, .ytp-ad-progress-list, .ytp-hover-progress, .ytp-progress-linear-live-buffer, .ytp-play-progres {
	border-radius: 5px;
	
}


}

Reviews

No reviews yet.