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.
[Deprecated] JohnTTA's Style for YouTube by johntta
![Screenshot of [Deprecated] JohnTTA's Style for YouTube](https://userstyles.world/preview/7139/0.webp)
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
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;
...