makes the yt ui feel better (includes blur effects on certain elements)
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
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)...