Inspired by Windows 11's and Google's design.
Supports TubeBuddy and SaveFrom.net helper.
JohnTTA's Style for YouTube by johntta
Details
Authorjohntta
LicenseNo License
Categoryuserstyles, windows, windows 11, google
Created
Updated
Size36 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
OFFICIALLY SUPPORTS ONLY CHROMIUM BASED BROWSERS.
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 JohnTTA
@version 2.6.1
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* ===VARS=== */
:root {
--op90: 0.9; /*DF*/
--op80: 0.8; /*CF*/
--op60: 0.6; /*9F*/
--jsy-accent-color: var(--yt-brand-youtube-red);
--jsy-accent-color-hover: var(--yt-brand-light-red);
--jsy-accent-color: #FF0033;
--jsy-accent-color-hover: #FF0033;
/*SET YOUR CUSTOM ACCENT COLOR */
/* --jsy-accent-color: #a94dc1;
--jsy-accent-color-hover: #db9fe5; */
--background-blur: blur(32px);
/*BLUR IS BROKEN IF HARDWARE ACCEL. IS OFF, USE THIS: */
/* --background-blur: blur(4px); */
}
:root {
--bg_color_primary: 255, 255, 255;
--bg_color_secondary: 255, 255, 255;
}
html[dark] {
--bg_color_primary: 15, 15, 15;
--bg_color_secondary: 33, 33, 33;
}
}
@-moz-document domain("youtube.com") {
/* ===SCROLLBAR=== */
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
background: var(--yt-spec-text-secondary);
border-radius: 50px;
background-clip: padding-box;
border: solid 4px transparent;
}
::-webkit-scrollbar-thumb:hover {
background: var(--yt-spec-icon-disabled);
border-radius: 50px;
background-clip: padding-box;
border: solid 4px transparent;
}
}
@-moz-document domain("youtube.com") {
/* ===BODY AND STUFF=== */
/*NAVIGATION PROGRESS*/
#progress {
background-color: var(--jsy-accent-color) !important;
}
/*NAVIGATION PROGRESS*/
/*MASTERHEAD*/
ytd-masthead#masthead #background, div#chips-wrapper, ytd-carousel-header-renderer #contents {
background: rgba(var(--bg_color_primary), var(--op90)) !important;
backdrop-filter: var(--background-blur);
}
/*MASTERHEAD CHANNEL*/
div#channel-header, div#tabs-inner-container {
background: transparent !important;
}
#contentContainer div#channel-container {
background: rgba(var(--bg_color_primary), var(--op90)) !important;
backdrop-filter: var(--background-blur);
}
div#tabs-container {
background: rgba(var(--bg_color_primary), 0.98) !important;
backdrop-filter: var(--background-blur);
}
/*SELECTED*/
yt-tab-shape.yt-tab-shape-wiz[aria-selected="true"] .yt-tab-shape-wiz__tab--tab-selected{
color: var(--jsy-accent-color);
}
.yt-tab-group-shape-wiz__slider {
background: var(--jsy-accent-color) !important;
}
.selection-bar.tp-yt-paper-tabs {
border-bottom: 2px solid var(--jsy-accent-color);
}
/*SELECTED*/
/*MASTERHEAD CHANNEL*/
/*YOUTUBE LOGO*/
.external-icon path[fill="#FF0000"] {
fill: var(--jsy-accent-color);
}
/*YOUTUBE LOGO*/
/*MASTERHEAD*/
/*MASTERHEAD DROPDOWN MENU*/
ytd-multi-page-menu-renderer.style-scope.ytd-popup-container {
background: rgba(var(--bg_color_secondary), var(--op80)) !important;
}
/*MASTERHEAD DROPDOWN MENU*/
/*BUTTON*/
button.yt-spec-button-shape-next.yt-spec-button-shape-next--filled{
&.yt-spec-button-shape-next--mono, &.yt-spec-button-shape-next--overlay {
background-color: var(--jsy-accent-color);
color: var(--yt-spec-text-primary-inverse);
&:hover{
background-color: var(--jsy-accent-color-hover);
}
}
&.yt-spec-button-shape-next--size-s {
background-color: var(--yt-spec-call-to-action);
&:hover{
background-color: var(--yt-spec-commerce-filled-hover);
}
}
}
/*BUTTON*/
/*CHECKER BOX*/
#checkbox.checked.tp-yt-paper-checkbox {
background-color: var(--jsy-accent-color) !important;
border-color: var(--jsy-accent-color) !important;
}
yt-icon.guide-entry-badge icon-shape div {
fill: var(--jsy-accent-color) !important;
}
/*CHECKER BOX*/
/*BODY TAGS*/
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
background-color: var(--jsy-accent-color) !important;
color: var(--yt-spec-text-primary-inverse) !important;
font-weight: 900;
&:hover {
background-color: var(--jsy-accent-color-hover) !important;
}
}
/*BODY TAGS*/
/*SEARCH-BAR*/
div#center {
max-width: 30vw;
border-radius: 50px;
border: 1px solid var(--yt-spec-10-percent-layer);
padding-left: 16px;
background: rgba(var(--bg_color_primary), var(--op60)) !important;
&:focus-within {
border: 2px solid var(--jsy-accent-color);
}
}
ytd-searchbox {
&#search[has-focus] {
border: none !important;
& #search-icon {
display: none;
}
& #container {
padding-left: 16px;
border:none;
box-shadow: none;
}
}
&.ytd-masthead {
margin: 0px;
padding: 0;
}
}
.YtSearchboxComponentSearchButtonDark, .YtSearchboxComponentSearchButtonDark:hover {
border-color: transparent;
background-color: transparent;
margin: 0px !important;
}
.YtSearchboxComponentInputBox, .YtSearchboxComponentHost {
border-color: transparent;
background-color: transparent;
margin: 0px !important;
}
.YtSearchboxComponentInputBoxHasFocus {
border-color: transparent !important;
}
#container.ytd-searchbox, #search-icon-legacy.ytd-searchbox, #voice-search-button.ytd-masthead, .YtSearchboxComponentHost {
border: none;
background-color: transparent;
box-shadow: none;
}
#container.ytd-searchbox, .YtSearchboxComponentHost {
margin: 0px !important;
}
#search-icon-legacy.ytd-searchbox {
width: 40px;
height: 40px;
padding: 8px;
border-radius: 50px;
&:hover, .YtSearchboxComponentSearchButtonDark:hover {
background: var(--yt-spec-10-percent-layer);
}
}
#voice-search-button.ytd-masthead{
margin: 0px;
}
#search-clear-button.ytd-searchbox {
width: 40px;
margin-right: -4px;
}
/*SEARCH-BAR*/
/*SEARCH SUGGESTIONS*/
.sbdd_b {
border: 1px solid var(--yt-spec-10-percent-layer);
background: rgba(var(--bg_color_secondary), var(--op80)) !important;
backdrop-filter: var(--background-blur);
}
.sbsb_a {
background: transparent !important;
}
.sbfl_b {
background: transparent !important;
}
/*SEARCH SUGGESTIONS*/
/*SIDE-BAR - CLOSED*/
ytd-mini-guide-entry-renderer {
width: 64px;
height: 64px;
& a{
width: 64px !important;
height: 64px !important;
padding: 0 !important;
}
&[is-active] {
background: var(--yt-spec-badge-chip-background) !important;
&::before {
content: "";
background-color: var(--jsy-accent-color) !important;
position: absolute;
left: 0;
top: 20px;
height: 24px;
width: 4px;
border-radius: 2px;
}
& span.title{
color: var(--jsy-accent-color) !important;
display: none !important;
}
& svg{
color: var(--jsy-accent-color) !important;
}
& .guide-icon.ytd-mini-guide-entry-renderer {
margin: 0px !important;
}
}
}
/*SIDE-BAR - CLOSED*/
/*SIDE-BAR - OPEN*/
#contentContainer.tp-yt-app-drawer[opened], ytd-guide-renderer.ytd-app {
width: 240px;
}
ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
margin-left: 240px;
}
/*LISTING*/
ytd-guide-entry-renderer {
&[active] {
&::before {
content: "";
background-color: var(--jsy-accent-color);
position: absolute;
left: 0;
top: 12px;
height: 16px;
width: 3px;
border-radius: 2px;
}
& svg, & .title.ytd-guide-entry-renderer {
color: var(--jsy-accent-color) !important;
}
}
}
/*LISTING*/
#guide-content.ytd-app {
background: rgba(var(--bg_color_primary), var(--op90)) !important;
backdrop-filter: var(--background-blur);
}
#contentContainer.tp-yt-app-drawer, div#scrim {
background:...