Siesta賽高 by jaterxx

/* ==UserStyle==
@name           Siesta.賽高
@namespace      Jater~~my twitter:@Jater3010X
@author         Killuo
@description    `It's a siesta background for youtube`
@version        20211205
@license        NO-REDISTRIBUTION
@preprocessor   uso
@advanced color theme "Theme-Color" #FFBFBF
@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)" "242,242,5,0.2"


@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-mini-guide-renderer.ytd-app,
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
{
    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,0,0,0) !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
{
    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)" "39, 221, 39, 0.8"
@advanced color text "Main-Text-Color (like video tittle)" #FFBFBF
@advanced color sec "Secondary-Text-Color (like subscribers or viewers)" #544D4E
@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)" "245, 221, 39, 0.8"
@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" #febb4d 
@advanced color click "Right-Thumnail-Clicked" #febb4d 

@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;

}

==/UserStyle== */
@-moz-document domain("youtube") {}

@-moz-document regexp("https?://www.youtube.com?/(?!my_videos|ad_companion|subscribe_embed|account|yt|red).*") {
    html:not(#⁠),
    body > div,
    body > table,
    [role="navigation"],
    [role="dialog"],
    #body-container > div,
    [aria-expanded="true"]:not(.ytp-button),
    [class*="tooltip"]:not(.ytp-tooltip-duration):not(.ytp-tooltip-bg):not(.ytp-tooltip-text-wrapper):not([class*="arrow"]):not(button),
    [role="menu"],
    .ytp-popup,
    .videoAdUiPreSkipButton,
    .videoAdUiAdInfoPopup {
        background: url(https://cdn.discordapp.com/attachments/650680602080837663/916972823652737084/036da465d5ff3e9c01d78fc985a16c7f_2.jpg)fixed #000!important;
        background-repeat: no-repeat;
  	    background-attachment: fixed;
  	    background-position: center;
        background-size: cover!important;
        border-bottom: 1px solid  #febb4d !important;
    }
    
    .watch-skeleton .skeleton-light-border-bottom {
   border-bottom: 1px solid  #febb4d !important;
  }
    
    .masthead-skeleton-icon {
  background-color: #5b5e1b63;
}
     :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) !important;
    --yt-spec-brand-background-solid: var(--bg-color) !important;
    --yt-spec-general-background-a: var(--bg-color) !important;
    --yt-spec-call-to-action: var(--theme) !important;
    --yt-spec-badge-chip-background: var(--playlist-bg) !important;
    --yt-spec-text-primary: var(--text-color) !important;
    --yt-spec-text-secondary: var(--nd-text-color) !important;
    --yt-spec-brand-button-background: var(--theme) !important;
    --yt-spec-static-brand-red: var(--theme) !important;
    --yt-spec-brand-icon-inactive: var(--theme) !important;
    --yt-spec-10-percent-layer: rgba(/*[[LOAD]]*/) !important;
}

/*[[CENTERTIME]]*/
    body::-webkit-scrollbar,
.playlist-items.ytd-playlist-panel-renderer::-webkit-scrollbar,
#guide-inner-content.ytd-app:hover::-webkit-scrollbar
{
   width: /*[[SWH]]*/px  !important;
}

body::-webkit-scrollbar-thumb,
.playlist-items.ytd-playlist-panel-renderer::-webkit-scrollbar-thumb,
#guide-inner-content.ytd-app:hover::-webkit-scrollbar-thumb
{
    backg...