mikamika by jaterxx

/* ==UserStyle==
@name         mikamika
@version      20230126.14.28
@namespace    userstyles.world/user/jaterxx
@description  ﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶﾐｶ

@author       jaterxx
@license      No License
==/UserStyle== */

/* ==UserStyle==
@name           ミカミカ
@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 ihttps://cdn.discordapp.com/attachments/720866623833112617/1068173642732679220/327253771_2001509726713719_2470215882332091107_n.jpgmage)" {
	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/720866623833112617/1068173642732679220/327253771_2001509726713719_2470215882332091107_n.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]]*/) ...