Skip to content

[Deprecated] JohnTTA's Style for YouTube by johntta

Screenshot of [Deprecated] JohnTTA's Style for YouTube
Write a review Install Get Stylus

Details

Authorjohntta

LicenseNo License

Categoryuserstyles, windows, windows 11, google, deprecated

Created

Updated

Size20 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

NOTE: YouTube's new design (Which looks suspiciously like mine hehe) has rendered this Userstyle broken and pointless. REFER TO THE NEW VERSION.

Inspired by Windows 11's Mica Material and Google's design.

Notes

YouTube's new design (Which looks suspiciously like mine hehe) has rendered this Userstyle broken and pointless. REFER TO THE NEW VERSION.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           JohnTTA's Style for YouTube
@namespace      userstyles.world
@version        1.0.0
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* ===VARS=== */

:root {
    --bg_color0: #ebebeb;
    --bg_color1: #f5f5f5df;
    --main_text: black;
    --color1: #c2c2c273;
    --color2: #ebebeb9f;
    --color3: #ebebeb88;
    --color4: #c2c2c2df;
    --boxshadow_preview: 0 0 20px 16px rgb(0 0 0 / 6%), 0 0 10px 2px rgb(0 0 0 / 12%);
}

html[dark] {
    --bg_color0: #0a0a0a;
    --bg_color1: #141414df;
    --main_text: white;
    --color1: #3d3d3d73;
    --color2: #1414149f;
    --color3: #14141488;
    --color4: #3d3d3ddf;
    --boxshadow_preview: 0 0 20px 16px rgb(0 0 0 / 25%), 0 0 10px 2px rgb(0 0 0 / 50%);
}
}

@-moz-document domain("youtube.com") {
/* ===COLORS=== */

ytd-masthead, #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
    background-color: var(--bg_color1);
}

ytd-page-manager {
    background-color: var(--bg_color0);
}

div#center, #bar.yt-copy-link-renderer { /*SEARCH-BAR and Link Copy*/
    background-color: var(--color1);
}

#contentContainer.tp-yt-app-drawer[opened]  { /*SIDE-BAR - OPEN*/
    background-color: var(--bg_color1);
}

tp-yt-paper-dialog, ytd-multi-page-menu-renderer { /*FLOAT MENU and CHANNEL MENU*/
    background-color: var(--color2) !important;
    box-shadow: var(--boxshadow_preview);
}

#contentWrapper.tp-yt-iron-dropdown > * {/*DROPDOWN MENU*/
    background-color: var(--color3);
}

.ytp-popup { /*POPUP MENU*/
    background-color: var(--color3) !important;
}

#video-preview-container.ytd-video-preview { /*VIDEO PREVIEW*/
    background-color: var(--color3) !important;
    box-shadow: var(--boxshadow_preview);
}

#channel-container.ytd-c4-tabbed-header-renderer, #tabs-container.ytd-c4-tabbed-header-renderer {/*CHANNEL LIST HEADER*/
    background-color: var(--bg_color1);
}

ytd-thumbnail-overlay-time-status-renderer.style-scope.ytd-thumbnail, ytd-thumbnail-overlay-toggle-button-renderer.style-scope.ytd-thumbnail { /*LISTING THUMBNAILS timer*/
    color: var(--main_text);
    background-color: var(--color3);
}

ytd-rich-shelf-renderer { /*MAIN SEPARATOR*/
    background-color: var(--bg_color1);
}

yt-notification-action-renderer[ui-refresh] tp-yt-paper-toast.yt-notification-action-renderer {
    background-color: var(--bg_color1);
    color: var(--main_text);
}
yt-notification-action-renderer[ui-refresh] #text.yt-notification-action-renderer {
    color: var(--main_text);
}

ytd-mini-guide-entry-renderer[is-active] { /*SIDEBAR SELECTED BG*/
    background-color: var(--color4);
}

/* ===YOUTUBE-BUDDY=== */
    .tb-videolytics-header, .tb-videolytics-category-title {
        color: var(--main_text);
        background: var(--bg_color1);
    }
    .tb-videolytics-container {
        background: var(--bg_color1);
    }
    .tb-videolytics-category-section {
        color: var(--main_text);
        background: var(--bg_color0);
    }
    button.tb-button.tb-button-default {
        color: var(--main_text) !important;
        background: var(--color1) !important;
    }
    .tb-videolytics-category-body.tb-videolytics-tags-container {
        color: var(--main_text) !important;
    }
    button.tb-videolytics-search-ranking.tb-button.tb-button-primary.tb-move-up5.tb-width150 {
        background: var(--color1) !important;
    }
    .tb-videolyitcs-tools-menu {
        background-color: var(--color3);
    }
    .tb-videolyitcs-tools-menu div:hover {
        background: var(--color1);
    }
    .tb-videolytics-compare-container {
        background-color: var(--bg_color0);
    }
    button.tb-button.tb-button-destructive.tb-margin-left5, button.tb-button.tb-button-payment.tb-margin-right5 {
        background: var(--color1) !important;
    }
}

@-moz-document domain("youtube.com") {
/* ===BODY AND STUFF=== */

/*BUG DOS BAGULHO FLUTUANTE
    div#send-by-qrcode-button {
        display: none;
    }
    div#video-detach-button {
        display: none;
BUG DOS BAGULHO FLUTUANTE*/
/*BUG DO INFO OVERFLOW*/
div#info {
    overflow-y: hidden;
    padding-bottom:8px;
}
/*BUG DO INFO OVERFLOW*/
/*DISSMISABLE BUG*/
#dismissible.ytd-statement-banner-renderer {
    margin-top: 57px;
}
/*DISSMISABLE BUG*/
    
/*SCROLLBAR*/
::-webkit-scrollbar {
    width: 12px;
    height: 10px;
    background: var(--color4);
}
    
::-webkit-scrollbar-track {
    background: var(--bg_color0);
}
    
::-webkit-scrollbar-thumb {
    background: var(--yt-spec-10-percent-layer);
    border-radius: 50px;
}
    
::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
    
::-webkit-scrollbar-button {
    background: var(--color4);
    display: none;
}
/*SCROLLBAR*/

yt-notification-action-renderer[ui-refresh] tp-yt-paper-toast.yt-notification-action-renderer {
    border: 1px solid var(--yt-spec-10-percent-layer);
    backdrop-filter: blur(64px);
}

ytd-masthead, #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
	backdrop-filter: blur(64px);
    z-index: 3000;
}

tp-yt-paper-listbox {
    background-color: transparent;
}
ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
    margin-left: var(--ytd-mini-guide-width);
}
#items.ytd-mini-guide-renderer {
    margin-top: 0px;
}
#start.ytd-masthead {
    z-index: 3000;
}
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
    width: 100%;
    position: fixed;
    border-top: 0px;
    border-bottom: 1px solid var(--yt-spec-10-percent-layer);
}
#header.ytd-rich-grid-renderer {
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 2000;
}
#contents.ytd-rich-grid-renderer {
    margin-top: 84px;
}

tp-yt-paper-button.style-scope.ytd-subscribe-button-renderer { /*SUBSCRIBE*/
    border-radius: 50px;
}

ytd-button-renderer.style-scope.ytd-c4-tabbed-header-renderer.style-primary.size-default { /*Button*/
    border-radius: 50px;
}

/*HEADER TAGS*/
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER] {
        background-color: transparent !important;
    }
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
        background-color: transparent !important;
        color: #ff0000;
        font-weight: 900;
        border: 1px solid #ff0000;
    }
    #left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer {
        background-color: var(--bg_color1);
        backdrop-filter: blur(64px);
    }
    
    ytd-feed-filter-chip-bar-renderer #left-arrow.ytd-feed-filter-chip-bar-renderer:after {
        background: linear-gradient(to right,var(--bg_color1) 20%,rgba(33,33,33,0) 80%) !important;
    }
    ytd-feed-filter-chip-bar-renderer #right-arrow.ytd-feed-filter-chip-bar-renderer:before {
        background: linear-gradient(to left,var(--bg_color1) 20%,rgba(33,33,33,0) 80%) !important;
    }
    
/*HEADER TAGS*/

/*BODY TAGS*/
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER] {
        background-color: transparent !important;
    }
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
        background-color: transparent !important;
        color: #ff0000;
        font-weight: 900;
        border: 1px solid #ff0000;
    }
    /*COLORS*/
        #left-arrow-button.yt-chip-cloud-renderer, #right-arrow-button.yt-chip-cloud-renderer {
            background-color: var(--bg_color0);
            backdrop-filter: blur(64px);
        }
        yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer:after {
            background: linear-gradient(to right,var(--bg_color0) 20%,rgba(33,33,33,0) 80%) !important;
        }
        yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer:before {
            background: linear-gradient(to left,var(--bg_color0) 20%,rgba(33,33,33,0) 80%) !important;
        }

        #left-arrow-button.yt-chip-cloud-renderer, #right-arrow-button.yt-chip-cloud-renderer {
            background-color: var(--bg_color0);
            backdrop-filter: blur(64px);
        }
        yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer:after {
            background: linear-gradient(to right,var(--bg_color0) 20%,rgba(33,33,33,0) 80%) !important;
        }
        yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer:before {
            background: linear-gradient(to left,var(--bg_color0) 20%,rgba(33,33,33,0) 80%) !important;
        }
    /*COLORS*/
    
/*BODY TAGS*/

/*MAIN SEPARATOR*/
    #show-more-button.ytd-rich-shelf-renderer {
        border-bottom: 1px solid var(--yt-spec-10-percent-layer);
    }
    ytd-rich-shelf-renderer {
        border: 1px solid var(--yt-spec-10-percent-layer);
        border-radius: 8px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 42px);
    }
    ytd-rich-shelf-renderer[is-show-more-hidden] #dismissible.ytd-rich-shelf-renderer {
        border-bottom: none;
    }
/*MAIN SEPARATOR*/

/*SEARCH-BAR*/
    div#center {
        max-width: 30vw;
        border-radius: 50px;
        border: 1px solid var(--yt-spec-10-percent-layer);
        padding-left: 16px;
    }
    div#center:focus-within {
        border: 1px solid #f00;
    }

    ytd-searchbox.ytd-masthead {
        margin: 0px;
        padding:0px;
    }

    #container.ytd-searchbox, #search-icon-legacy.ytd-searchbox, #voice-search-button.ytd-masthead {
        border: none;
        background-color: transparent;
        box-shadow: none;
    }
    #container.ytd-searchbox {
        margin: 0px;
    }
    #search-icon-legacy.ytd-searchbox {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    #search-icon-legacy.ytd-searchbox:hover {
        background:transparent;
    }
    #voice-search-button.ytd-masthead{
        margin: 0px;
    }
    ytd-searchbox#search[has-focus] {
        border: none !important;
  ...

Reviews

No reviews yet.