Skip to content

yt enhancements by alpharetzy

Details

Authoralpharetzy

LicenseNo License

Categoryyoutube.com

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

makes the yt ui feel better (includes blur effects on certain elements)

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         yt enhancements
@version      20241223.12.33
@namespace    https://userstyles.world/user/alpharetzy
@description  makes the yt ui feel better (includes blur effects on certain elements)
@author       alpharetzy
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com"), domain("youtube-nocookie.com") {

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,0&icon_names=translate");

.html5-video-player:not(.ytp-transparent),
.html5-video-player.unstarted-mode,
.html5-video-player.ad-showing,
.html5-video-player.ended-mode {
	background: linear-gradient(#0093ff, #8fb3bc);
}

html {
	--ytd-tab-system-text-transform: capitalize;
	--ytd-caption-text-transform: capitalize;
}

.ERROR.yt-alert-renderer {
	background: linear-gradient(90deg, #2070c1, #9d0e2b);
}

.WARNING.yt-alert-renderer {
	background: linear-gradient(90deg, #2070c1, #8d8926);
}

.SUCCESS.yt-alert-renderer {
	background: linear-gradient(90deg, #2070c1, #478d26);
}

.yt-alert-renderer {
	border-radius: 12px;
	margin: 12px;
}

yt-formatted-string.yt-alert-renderer {
	color: #fff !important;
	font-weight: bold;
	font-size: 22px;
}

#title.ytd-hotkey-dialog-renderer {
	font-weight: bold;
	text-transform: capitalize;
}

#header-text.ytd-voice-search-dialog-renderer {
	color: white;
	font-size: 32px;
	font-family: 'YouTube Sans';
	font-weight: bold;
}

#body.ytd-voice-search-dialog-renderer,
#microphone-label.ytd-voice-search-dialog-renderer {
	color: white;
}

tp-yt-paper-dialog {
	border-radius: 12px;
}

ytd-voice-search-dialog-renderer[dialog] {
	border-radius: 12px;
	background: linear-gradient(to right, #f03, #ff4081);
	height: 300px;
	transition: opacity 0.2s;
}

.ytp-play-progress,
.ytp-cairo-refresh-signature-moments .ytp-play-progress,
.ytp-progress-linear-live-buffer {
	background: -webkit-gradient(linear, left top, right top, color-stop(80%, #f03), to(#ff2791));
	background: -webkit-linear-gradient(left, #f03 80%, #ff2791 100%);
	background: linear-gradient(to right, #f03 80%, #ff2791 100%);
}

html[dark] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[dark] #page-header-container.ytd-tabbed-page-header,
html[dark] #tabs-container.ytd-tabbed-page-header {
	background: linear-gradient(180deg, rgb(15, 15, 15), rgba(15, 15, 15, 0.6));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	transition: opacity 0.2s;
}

html[dark] tp-yt-paper-dialog,
html[dark] ytd-flow-root-renderer[dialog][dialog][dialog] {
	background-color: #212121b3;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: opacity 0.2s;
}

html[dark] ytd-modal-with-title-and-button-renderer {
   background-color: #212121b3;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: opacity 0.2s;
	border-radius: 12px;
}

html ytd-modal-with-title-and-button-renderer {
   background-color: #ffffffb3;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: opacity 0.2s;
	border-radius: 12px;
}

#title.ytd-modal-with-title-and-button-renderer {
    color: var(--yt-spec-text-primary);
    font-size: 2rem;
    font-weight: 600;
	text-transform: capitalize;
}

html tp-yt-paper-dialog,
html ytd-flow-root-renderer[dialog][dialog][dialog] {
	background-color: #ffffffb3;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: opacity 0.2s;
}

html #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html #page-header-container.ytd-tabbed-page-header,
html #tabs-container.ytd-tabbed-page-header {
	background: linear-gradient(180deg, #fff, #ffffffb3);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	transition: opacity 0.2s;
}

.ytp-time-wrapper {
	background-color: rgba(0, 0, 0, 0.3);
	height: 24px !important;
	border-radius: 18px;
	padding: 4px 8px;
	transition: opacity 0.2s;
}

.ytp-time-display > #present-time {
	background-color: rgba(0, 0, 0, 0.3);
	height: 24px !important;
	border-radius: 18px;
	padding: 4px 8px;
	margin-left: 6px;
	align-content: center;
	transition: opacity 0.2s;
}


.ytp-chapter-title.ytp-button {
	background-color: rgba(0, 0, 0, 0.3);
	height: 24px !important;
	border-radius: 18px;
	padding: 4px 8px;
	transition: all 0.2s;
}

.ytp-chapter-container {
	margin-top: 11px !important;
}

#header.ytd-engagement-panel-title-header-renderer {
	background-color: transparent;
}

ytd-engagement-panel-section-list-renderer[dialog] #content.ytd-engagement-panel-section-list-renderer {
	background: transparent;
}

.subheadline.ytd-about-channel-renderer,
#sub-title.ytd-hotkey-dialog-section-renderer,
yt-dropdown-menu[modern-buttons] #label.yt-dropdown-menu,
yt-dropdown-menu[modern-buttons] #icon-label.yt-dropdown-menu {
	text-transform: capitalize;
}

html[dark] ytd-multi-page-menu-renderer,
html[dark] ytd-simple-menu-header-renderer {
	background: #212121b3;
	backdrop-filter: blur(16px) !important;
	transition: all 0.2s;
}

html ytd-multi-page-menu-renderer,
html ytd-simple-menu-header-renderer {
	background: #ffffffb3;
	backdrop-filter: blur(16px) !important;
	transition: all 0.2s;
}

.yt-spec-button-shape-next,
svg > path {
	transition: all 0.2s !important;
}

.ytp-time-display,
.ytd-watch-info-text,
.animated-rolling-number-wiz,
.yt-spec-button-shape-next--size-m,
.badge-shape-wiz--thumbnail-default {
	text-transform: none !important;
}

html[dark] tp-yt-iron-overlay-backdrop,
html[dark] tp-yt-iron-overlay-backdrop.opened {
	background-color: #ffffffb3;
	filter: blur(1.5rem) !important;
}


html tp-yt-iron-overlay-backdrop,
html tp-yt-iron-overlay-backdrop.opened {
	background-color: rgba(15, 15, 15, .7);
	filter: blur(1.5rem) !important;
}

ytd-section-list-renderer:not([hide-bottom-separator]):not([page-subtype = history]):not([page-subtype = memberships-and-purchases]):not([page-subtype = ypc-offers]):not([live-chat-engagement-panel]) #contents.ytd-section-list-renderer > *.ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer):not([item-dismissed]):not([has-destination-shelf-renderer]):not(ytd-minor-moment-header-renderer):not([has-section-group-view-model]) {
	border-bottom: 1px solid transparent;
}

.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline[aria-label = "Sign in"],
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--outline[aria-label = "Sign in"] {
	color: #fff !important;
	border-color: transparent;
	background: linear-gradient(to right, #f03, #f03);
	transition: all 0.2s;
}

.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline[aria-label = "Sign in"] > .yt-spec-button-shape-next__icon,
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--outline[aria-label = "Sign in"] > .yt-spec-button-shape-next__icon {
	display: none !important;
	transition: all 0.2s;
}

*[d = "M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z"] {
	d: path("M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 6v-2.075q-2.3-.325-3.937-1.95t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q1.8 0 3.175-1.137T16.9 12q.1-.425.388-.712T18 11t.7.3t.225.725q-.35 2.275-1.975 3.925T13 17.925V20q0 .425-.288.713T12 21t-.712-.288T11 20");
}

html[dark] .ytSearchboxComponentInputBoxDark {
    border-color: transparent;
    background-color: hsla(0,0%,100%,.08);
	transition: all 0.2s;
}

html[dark] .ytSearchboxComponentSearchButtonDark {
    border: 1px solid transparent;
    background-color: hsla(0,0%,100%,.08);
	transition: all 0.2s;
}

html[dark] .ytSearchboxComponentInputBoxDark.ytSearchboxComponentInputBoxHasFocus {
    border-color: transparent;	
	transition: all 0.2s;
}

html .ytSearchboxComponentSearchButton {
    border: none;
    background-color: #f8f8f8;
}

html .ytSearchboxComponentInputBox {
    border-color: transparent;
    background-color: #f8f8f8;
	transition: all 0.2s;
	box-shadow: none;
}

html .ytSearchboxComponentInputBox.ytSearchboxComponentInputBoxHasFocus {
    border-color: transparent;	
	transition: all 0.2s;
}

#tabs-inner-container.ytd-tabbed-page-header {
	background-color: transparent;
}

ytd-tabbed-page-header[modern-tabs] #tabs-divider.ytd-tabbed-page-header {
	border-bottom: none;
}

.ytp-chrome-controls .ytp-button[aria-pressed]::after {
	background-color: #f03;
}

.ytp-settings-button.ytp-hd-quality-badge::after,
.ytp-settings-button.ytp-hdr-quality-badge::after,
.ytp-settings-button.ytp-4k-quality-badge::after,
.ytp-settings-button.ytp-5k-quality-badge::after,
.ytp-settings-button.ytp-8k-quality-badge::after,
.ytp-settings-button.ytp-3d-badge-grey::after,
.ytp-settings-button.ytp-3d-badge::after {
	background-color: #f03;
}

.ytp-volume-slider-handle::before {
	background: #fff;
	border-radius: 4px;
}

.ytp-volume-slider-handle {
	width: 6px;
	height: 12px;
	background: #fff;
}

.ytp-big-mode .ytp-volume-slider-handle {
	width: 8px;
	height: 18px;
}

.badge-style-type-simple.ytd-badge-supported-renderer {
	border-radius: 4px;
	padding: 0px 4px;
	font-weight: 500;
	background: var(--yt-spec-suggested-action);
	color: var(--yt-spec-text-primary);
}

.badge.ytd-badge-supported-renderer {
	border-radius: 4px;
	color: var(--yt-spec-text-primary);
}

.badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
	background: linear-gradient(to right, #f03, #ff2791);
	color: #fff;
}

html ytd-mini-guide-renderer.ytd-app {
	margin-bottom: 6px;
	margin-left: 0px;
	background: #ffffffb3;
	backdrop-filter: blur(16px) !important;
	box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
	border-radius: 0px 14px 14px 0px;
}

html[dark] ytd-mini-guide-renderer.ytd-app {
	margin-bottom: 6px;
	margin-left: 0px;
	background: rgba(15, 15, 15, .7)...

Reviews

No reviews yet.