YouTube Vibrancy by saber by nitives

/* ==UserStyle==
@name           YouTube Vibrancy by saber
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         saber

==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com") {
    
/* Purp #825cff */

:root {                                                                         
        --n-bg-color: #0f0f0f;
        --n-accent-color: #825cff;
}


* {
    --yt-spec-menu-background: var(--n-bg-color) !important;
	--yt-spec-base-background: var(--n-bg-color) !important;

    --yt-spec-raised-background: var(--n-bg-color) !important;

    --yt-spec-static-brand-red: var(--n-accent-color) !important;  /* Scroll Bar */
}

.yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge { /* Noti Icon */
  background-color: var(--n-accent-color);
  color:#fff
}

.ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox { /* Amvbient Mode Switch */
    background: var(--n-accent-color); 
}

.ytp-swatch-background-color { /* Progress Bar */
  background-color: var(--n-accent-color);
}

yt-icon.ytd-logo { /* YouTube Logo Type Logo */
  color:#fff;
}

/* ------------------------------------------------------------------------------------- */

.external-icon path {
  fill: #414141; /* Change this to the color you want */
}

/* ------------------------------------------------------------------------------------- */

#time-status.ytd-thumbnail-overlay-time-status-renderer { /* Time Length on Videos - Home Page */
    backdrop-filter: blur(20px);
    background-color: #00000078;
    border-color: #0000000f;

    border-radius: 100px;
    position: absolute;
    scale: 1.1;
    right: 1px;
    top: -18px;
    padding-inline: 6px;
}

#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
    backdrop-filter: blur(20px);
    background-color: #0000002e;
    border-color: #0000000f;
}

yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER], yt-chip-cloud-chip-renderer[chip-style=STYLE_COLOR_RED], yt-chip-cloud-chip-renderer[chip-style=STYLE_COLOR_GREEN], yt-chip-cloud-chip-renderer[chip-style=STYLE_COLOR_BLUE], yt-chip-cloud-chip-renderer[chip-style=STYLE_REFRESH_TO_NOVEL_CHIP] {
    backdrop-filter: blur(10px);
    background-color: #0000002e;
    border: 1px solid;
    border-color: #ffffff42;
}

/* ------------------------------------------------------------------------------------- */

.ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
    background: var(--n-accent-color); 
}

.ytp-live-badge[disabled]:before {
    background: var(--n-accent-color); 
}

.ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
    background: var(--n-accent-color); 
}

.ytp-video-menu-item-now-playing {
    color: var(--n-accent-color); 
} 

.ytp-video-menu-item-thumbnail {
    border: 0 solid var(--n-accent-color);
}

.ytp-videowall-still-info-live {
    background: var(--n-accent-color);
}

.ytp-chrome-controls .ytp-button[aria-pressed]:after {
    background-color: var(--n-accent-color);
}

.ytp-swatch-background-color {
    background-color: var(--n-accent-color);
}

.ytp-swatch-color {
    color: var(--n-accent-color);
}

.ytp-more-videos-view .ytp-suggestion-link .ytp-suggestion-duration[data-is-live=true] {
    background: var(--n-accent-color);
}

.ytp-related-on-error-overlay .ytp-suggestion-link .ytp-suggestion-duration[data-is-live=true] {
    background: var(--n-accent-color);
}

.ytp-heat-map-played_bar .ytp-heat-map-play {
    fill: var(--n-accent-color);
}

.ytp-inline-preview-ui .ytp-subtitles-button[aria-pressed=true]:after {
    background-color: var(--n-accent-color);
}

.ytp-large-play-button-red-bg .ytp-large-play-button-bg {
    fill: var(--n-accent-color);
}

.ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg,.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,.ytp-muted-autoplay-endscreen-overlay:hover .ytp-large-play-button-bg {
    fill: var(--n-accent-color);
}

.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: var(--n-accent-color);
}
    
.ytp-settings-button.ytp-hdr-quality-badge:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCA2IiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Ik0zLDUgTDQsNSBMNCw2IEwzLDYgTDMsNSBaIE04LDEgTDgsMiBMNiwyIEw2LDEgTDgsMSBaIE0xLDQgTDEsMyBMMywzIEwzLDQgTDEsNCBaIE0wLDUgTDEsNSBMMSw2IEwwLDYgTDAsNSBaIE01LDUgTDgsNSBMOCw2IEw1LDYgTDUsNSBaIE04LDQgTDksNCBMOSw1IEw4LDUgTDgsNCBaIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbD0iIzAwMCIgLz48cGF0aCBkPSJNMyw1IEwzLDQgTDMsMyBMMSwzIEwxLDQgTDEsNSBMMCw1IEwwLDAgTDEsMCBMMSwyIEwzLDIgTDMsMCBMNCwwIEw0LDUgTDMsNSBaIE05LDQgTDgsNCBMOCw1IEw1LDUgTDUsMCBMOCwwIEw4LDEgTDksMSBMOSw0IFogTTgsMiBMOCwxIEw2LDEgTDYsMiBMNiw0IEw4LDQgTDgsMiBaIiBmaWxsPSIjZmZmIiAvPjxwYXRoIGQ9Ik0xMywyIEwxNCwyIEwxNCwzIEwxMywzIEwxMywyIFogTTEzLDUgTDE0LDUgTDE0LDYgTDEzLDYgTDEzLDUgWiBNMTEsMyBMMTMsMyBMMTMsNCBMMTEsNCBMMTEsMyBaIE0xMCw1IEwxMSw1IEwxMSw2IEwxMCw2IEwxMCw1IFogTTExLDEgTDEzLDEgTDEzLDIgTDExLDIgTDExLDEgWiIgZmlsbC1vcGFjaXR5PSIwLjY0NzEiIGZpbGw9IiMwMDAiIC8+PHBhdGggZD0iTTE0LDMgTDE0LDUgTDEzLDUgTDEzLDQgTDEzLDMgTDE0LDMgWiBNMTEsMCBMMTMsMCBMMTMsMSBMMTEsMSBMMTEsMiBMMTMsMiBMMTMsMyBMMTEsMyBMMTEsNCBMMTEsNSBMMTAsNSBMMTAsMCBMMTEsMCBaIE0xMywwIEwxNCwwIEwxNCwyIEwxMywyIEwxMywwIFoiIGZpbGw9IiNmZmYiIC8+PC9zdmc+);
    border-color: var(--n-accent-color);
}

/* ------------------------------------------------------------------------------------- */


.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 {
  content:"";
  position:absolute;
  top:10px;
  right:5px;
  height:9px;
  width:13px;
  background-color:#323232;
  border-radius:1px;
  line-height:normal
}
}