Youtube - Style Changer (A lot customizable!) by reece323

/* ==UserStyle==
@name           Youtube - Style Changer (A lot customizable!)
@namespace      USO Archive
@author         AzPepoze
@description    `Warning!!!!!!!!!!!! (Please enable youtube darktheme before use)How to find rgba ( https://www.hexcolortool.com ):3`
@version        20220117.18.5
@license        NO-REDISTRIBUTION
@preprocessor   uso
@advanced color theme "Theme-Color" #9C19FF
@advanced dropdown LOGO "Logo Theme sync" {
	S1 "Enable*" <<<EOT ytd-topbar-logo-renderer > a > div > yt-icon > svg > g > g > path
{
    fill: var(--theme) !important;
} EOT;
S2 "Disable" <<<EOT  EOT;

}
@advanced text bg "Background-Color/Background-Tint (r,g,b,a)" "0,0,0,0.8"
@advanced dropdown IMG "Upload Backgound Image" {
S2 "None*" <<<EOT https://.png EOT;
S1 "MY WAIFU!!!! ♥♥♥" <<<EOT https://upload-bbs.mihoyo.com/upload/2021/08/21/145702127/8b88155945280dd69046d93efcd9ecb8_3907894960485319921.png?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png EOT;

	IMG-custom-dropdown "Custom" <<<EOT /*[[IMG-custom]]*\/ EOT;
}
@advanced text IMG-custom "Upload Backgound Image (Custom)" "https://example.com/image.png"
@advanced dropdown THEBGBlur "Blur-Backgound (Please choose disable if you didn't use background image)" {
	S2 "Disable*" <<<EOT  EOT;
S1 "Enable" <<<EOT ytd-app:not([use-content-visibility]) #page-manager.ytd-app
{
    backdrop-filter: blur(var(--Bg-blur)) !important;
} EOT;

}
@advanced text BGBlur "Blur-Background-Amout (px) (SO LAG)" "5"
@advanced dropdown thing_blur "Things-To-Blur" {
	S1 "All (Lag!!!)*" <<<EOT .sbdd_b,
#container.style-scope.ytd-masthead,
ytd-multi-page-menu-renderer,
.ytp-gradient-bottom,
.ytp-popup.ytp-settings-menu,
#chips-wrapper.ytd-feed-filter-chip-bar-renderer,
.ytp-iv-drawer-open .iv-drawer,
.branding-context-container-inner
.ytp-cards-teaser,
#card.ytd-miniplayer,
.ytp-popup,
.ytp-tooltip-text.ytp-tooltip-text-no-title,
.ytp-ce-playlist-count,
.ytp-ce-expanding-overlay-background,
ytd-thumbnail-overlay-bottom-panel-renderer,
ytd-thumbnail-overlay-time-status-renderer,
ytd-thumbnail-overlay-toggle-button-renderer,
#scrim,
.ytp-ad-preview-container,
.ytp-ad-message-container,
ytd-miniplayer,
.ytp-cards-teaser,
.ytp-ce-video-duration,
.ytp-videowall-still-info-content,
.ytp-videowall-still-listlabel-mix.ytp-videowall-still-listlabel,
tp-yt-iron-overlay-backdrop.opened,
.iv-branding-active .branding-context-container-inner,
.ytp-ce-shadow:not([aria-hidden=true]),
.ytp-ad-preview-container,
.ytp-ad-skip-button-container,
ytd-mini-guide-renderer.ytd-app
{
    backdrop-filter: blur(var(--blur-amount)) !important;
}

ytd-thumbnail-overlay-hover-text-renderer
{
    opacity: 0 !important;
    backdrop-filter: blur(0px) !important;
    transition: backdrop-filter 1s cubic-bezier(0,1,1,1) !important;
}

ytd-thumbnail-overlay-hover-text-renderer:hover
{
    opacity: 1 !important;
    backdrop-filter: blur(var(--blur-amount)) !important;
} EOT;
S2 "Only Pimary (Reduce Lag)" <<<EOT .sbdd_b,
#container.style-scope.ytd-masthead,
ytd-multi-page-menu-renderer,
.ytp-gradient-bottom,
.ytp-popup.ytp-settings-menu,
#chips-wrapper.ytd-feed-filter-chip-bar-renderer,
.ytp-iv-drawer-open .iv-drawer,
#card.ytd-miniplayer,
ytd-miniplayer,
ytd-mini-guide-renderer.ytd-app
{
    backdrop-filter: blur(var(--blur-amount)) !important;
} EOT;
S3 "None (Performance)" <<<EOT  EOT;

}
@advanced text blur "Things-Blur-amount (px)" "10"
@advanced dropdown ScB "Subtittles/Captions-Background-Blur" {
	S1 "Yes*" <<<EOT .html5-video-player .caption-visual-line .ytp-caption-segment:last-child
{
    backdrop-filter: blur(var(--blur-amount)) !important;
} EOT;
S2 "No" <<<EOT  EOT;

}
@advanced dropdown Osha "Outline or Shadow" {
	S1 "Outline*" <<<EOT {
    border-collapse: separate !important;
    overflow: hidden !important;
    box-shadow: var(--border-minus) 0 var(--border-color), 0 var(--border-width) var(--border-color), var(--border-width) 0 var(--border-color), 0 var(--border-minus) var(--border-color) !important;
}

.ytp-gradient-bottom,
.ytp-popup.ytp-settings-menu,
.ytp-tooltip-bg
{
    box-shadow: var(--bg-border-minus) 0 var(--border-color), 0 var(--player-bg-border-width) var(--border-color), var(--player-bg-border-width) 0 var(--border-color), 0 var(--bg-border-minus) var(--border-color) !important;
} EOT;
S2 "Shadow" <<<EOT {
    border-collapse: separate !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 10px var(--border-color) !important;
}

.ytp-gradient-bottom,
.ytp-popup.ytp-settings-menu,
.ytp-tooltip-bg
{
    box-shadow: 4px 4px 10px var(--border-color) !important;
} EOT;

}
@advanced dropdown masthead "Top-bar-Outline/Shadow" {
	T2 "No*" <<<EOT  EOT;
T1 "Yes" <<<EOT #masthead, EOT;

}
@advanced dropdown SusLOL "Suscribe-Outline/Shadow" {
	S2 "No*" <<<EOT  EOT;
S1 "Yes" <<<EOT tp-yt-paper-button.ytd-subscribe-button-renderer, EOT;

}
@advanced dropdown ScOut "Subtittles/Captions-Outline/Shadow" {
	S2 "No*" <<<EOT  EOT;
S1 "Yes" <<<EOT .html5-video-player .caption-visual-line .ytp-caption-segment:last-child, EOT;

}
@advanced text rgba1 "Playlist-Background-Color (r,g,b,a)" "99, 5, 250, 0.5"
@advanced color text "Main-Text-Color (like video tittle)" #FFFFFF
@advanced color sec "Secondary-Text-Color (like subscribers or viewers)" #7D7D7D
@advanced text border_n "Outline-Width (px)" "1"
@advanced text border_p "Bottom-Player-Outline-width (px)" "1"
@advanced text border_c "Outline/Shadow-Color (r,g,b,a)" "99, 5, 250, 0.5"
@advanced dropdown ANIMATE "Thumnail-Hover-Aimation" {
	S1 "Slide*" <<<EOT ytd-compact-playlist-renderer:hover,
ytd-compact-video-renderer:hover,
ytd-compact-radio-renderer:hover
{    
    margin-inline-start: -15px !important;
}

ytd-compact-playlist-renderer:hover>div>div>div>a,
ytd-compact-video-renderer:hover>div>div>div>a,
ytd-compact-radio-renderer:hover>div>div>div>a
{
    margin-inline-end: 15px !important;
} EOT;
S2 "Zoom (blur when zooming)" <<<EOT ytd-thumbnail:hover
{   
    transform: scale(1.075) !important;
} EOT;
S3 "Slide & Zoom" <<<EOT ytd-compact-playlist-renderer:hover,
ytd-compact-video-renderer:hover,
ytd-compact-radio-renderer:hover
{    
    margin-inline-start: -15px !important;
}

ytd-compact-playlist-renderer:hover>div>div>div>a,
ytd-compact-video-renderer:hover>div>div>div>a,
ytd-compact-radio-renderer:hover>div>div>div>a
{
    margin-inline-end: 15px !important;
}

ytd-thumbnail:hover
{   
    transform: scale(1.075) !important;
} EOT;

}
@advanced color hover "Right-Thumnail-Hover" #AA00FF
@advanced color click "Right-Thumnail-Clicked" #D400FF
@advanced text p_bg "Bottom-Player-Background-Color (r,g,b,a)" "0,0,0,0.5"
@advanced text tb_bg "Topbar,search,Overlays-Background-Color (r,g,b,a)" "0,0,0,0.507"
@advanced text end_bg "End-Creadit-Video-Button-Bcakground-Color (r,g,b,a)" "0,0,0,0.507"
@advanced text t_bg "(Hover) Time-Background-Color-On-Player  (r,g,b,a)" "0,0,0,0.425"
@advanced text sh_bg "(Hover) Search-Background-Color (r,g,b,a)" "99, 5, 250, 0.5"
@advanced text t_ra "Smooth-Edge-Normal (px)" "10"
@advanced text tt_ra "Smooth-Edge-Time-Background (px)" "10"
@advanced text t_rab "Smooth-Edge-Youtube-Player (px)" "20"
@advanced text Height "Player-Buttom-Height" "30"
@advanced text SWH "Scrollbar-Width" "11"
@advanced dropdown CENTERTIME "Center-Time-Thumbnail" {
	S1 "Enable*" <<<EOT ytd-thumbnail-overlay-time-status-renderer
{
    width: 97% !important;
    margin: 0px !important;
}

#text.ytd-thumbnail-overlay-time-status-renderer
{
    margin-left: auto;
    margin-right: auto;
}

.ytp-ce-video-duration
{
    width: 97% !important;
    margin: -2px !important;
    text-align:center !important;
} EOT;
S2 "Disable" <<<EOT  EOT;

}
@advanced text LOAD "Loading-Thumbnail-Color" "99, 5, 250, 0.24"
@advanced text TIMEBG "Time-Line-Background" "0,0,0,0.2"
@advanced text LOADED "Time-Line-Loaded-Color" "255,255,255,0.3"
@advanced dropdown CENTER "Center-Menu-Bar" {
	S2 "Disable*" <<<EOT  EOT;
S1 "Enable" <<<EOT #chips-wrapper
{
    margin-block: 72px !important;
}

ytd-mini-guide-renderer
{
	width: 100% !important;
    height: 72px !important;
}

#page-manager
{
    margin-left : 0px !important;
}

#contents
{
    margin-block: 72px !important;
}

ytd-mini-guide-renderer > #items
{
    display: grid !important;
    grid-template-columns: auto auto auto auto !important;
    justify-content: center !important;
    width: 100% !important;
    background-color: var(--top-bar-and-search-background) !important;
    margin: 0px 0px !important;
    height: 100% !important;
} EOT;

}

==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com") {

/* Yeaaaaaah :3 */

html:not(.style-scope)[system-icons]:not(.style-scope)[dark]
{
    background-image: url(/*[[IMG]]*/) !important;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: center;
    background-size: cover !important;
}
  
 :root {
    --blur-amount: /*[[blur]]*/px;
    --Bg-blur: /*[[BGBlur]]*/px;
    --theme: /*[[theme]]*/;
    --playlist-bg: rgba(/*[[rgba1]]*/);
    --text-color: /*[[text]]*/;
    --nd-text-color: /*[[sec]]*/;
    --border-width: /*[[border_n]]*/px;
    --player-bg-border-width: /*[[border_p]]*/px;
    --border-color: rgba(/*[[border_c]]*/);
    --border-hover-color: /*[[hover]]*/;
    --border-click-color: /*[[click]]*/;
    --bg-color: rgba(/*[[bg]]*/);
    --in-player-bg-color: rgba(/*[[p_bg]]*/);
    --top-bar-and-search-background: rgba(/*[[tb_bg]]*/);
    --things-end-on-video: rgba(/*[[end_bg]]*/);
    --hover-time-background: rgba(/*[[t_bg]]*/);
    --search-background-hover: rgba(/*[[sh_bg]]*/);
    --theme-radius: /*[[t_ra]]*/px;
    --theme-time-radius: /*[[tt_ra]]*/px;
    --theme-radius-big: /*[[t_rab]]*/px;
    --border-minus: calc(var(--border-width) * -1);
    --bg-border-minus: calc(var(--player-bg-border-width) * -1);
}

html:not(.style-scope)[dark], :not(.style-scope)[dark] ,html:not(.style-scope) {
    --yt-spec-brand-background-primary: var(--top-bar-and-search-background) !...