YouTube Modern 2021 by arctic_fox

Details

Authorarctic_fox

LicenseNo License

CategoryUserstyles

Created3 years, 3 months ago

Updated3 years, 3 months ago

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Modernize YouTube with a new clean, simple, and compact UI. Now made to match Windows 11. Created by Arctic Fox.

Notes

Details:
To open the toolbar/search bar, hover your mouse over the top of the page.

If you have any questions, bugs, or recommendations, please comment below and let me know! Thanks - Arctic Fox

(8/13/21) Version-Release: YouTube Modern 2021 Revision 1:

Overhauled Entire Theme to Match the Aesthetic of Windows 11
Made the Top Bar Easier to Open
Added a Smooth Animation to Context Menus (to Match Windows 11)
Added a Smooth Animation to the Video Player when it's scaled.
Fixed Channels Page Alignment Issue
Removed Laggy Blur Effect When Top Bar is Opened
Fixed Top Bar's Frosted Glass Effect Appearing Delayed
Fixed Top Bar's Alignment Issues (specifically with the Voice Search button)
And Plenty More Fixes & Changes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           YouTube Modern 2021
@namespace      youtube.com
@version        2.0.0
@description    Modernize YouTube with a new clean, simple, and compact UI. Now made to match Windows 11.
@author         Arctic Fox
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com") {
/*

YouTube Modern 2020 was made by Arctic Fox on January 1st, 2020. Please do not redistribute under a different name.
I spent hours making this for you to enjoy, please don't take advantage of that. Thanks.

Version Updated to YouTube Modern 2021

*/



* {
    border: none !important;
    /*font-family: "Nunito", Times, serif;*/
}
/* Topbar */

#container.ytd-masthead {
    height: 35px;
}

#masthead-container.ytd-app {
    margin-top: -70px;
    margin-left: 5%;
    /*max-width: 1000px;*/
    width: 90%;
    opacity: 1;
    padding: 30px;
    transition: opacity 0.5s, margin-top 0.5s, margin-left 0.5s, width 0.5s;
}

#masthead-container.ytd-app:hover {
    opacity: 1;
    margin-top: -10px;
    margin-left: 2.5%;
    width: 95%;
    /*max-width: 500px;*/
    transition: opacity 0.5s, margin-top 0.5s, margin-left 1s, width 1s;
}

#masthead-container.ytd-app:hover ~ #page-manager {
    overflow: hidden !important;
    transition: transform 1s;
}

#page-manager {
    transition: offset 1s;
}

#masthead {
    height: 35px;
    border-radius: 10px;
    background-color: rgba(50,50,50,0.5);
    border: 1px solid rgb(150,150,150, 0.25) !important;
    backdrop-filter: blur(25px);
}

#search-icon-legacy.ytd-searchbox {
    background-color: rgba(0,0,0,0);
    border-radius: 30px;
    height: 25px;
    width: 25px;
    margin-left: -40px;
    margin-top: 2px;
}

#container.ytd-searchbox {
    border-radius: 5px;
    height: 25px;
    transition: background-color 1s, height 1s;
    background-color: rgba(75,75,75, 0.5) !important;
    border-bottom: 1px solid rgb(150,150,150) !important;
}

#container.ytd-searchbox:focus-within {
    border-bottom: 2px solid #3EA6FF !important;
}

#voice-search-button {
    background-color: rgba(0,0,0,0) !important;
    opacity: 0.5;
    margin-left: 10px !important;
}

/*#search-form.ytd-searchbox:hover {
	max-width: 660px !important;
    transition: max-width 1s;
}

#search-form.ytd-searchbox {
	max-width: 640px !important;
    transition: max-width 1s;
}

#container.ytd-searchbox:hover {
    /*margin-top: 75px;*//*
    border-radius: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.5);
    font-size: 30;
    transition: margin-top 1s, width 1s, background-color 1s, height 1s;
    box-shadow: none;
    
}

#container.ytd-searchbox:hover > #search-input > #search {
    color: rgb(0,0,0)
}

#avatar-btn > yt-img-shadow {
    border-radius: 10px;
}

/*#guide-icon > svg {
    width: 150% !important;
    height: 150% !important;
}*/

/* Sponser & Subscribe Button */

 #sponsor-button > ytd-button-renderer {
    background-color: rgb(22, 126, 215);
    /*(62, 166, 255)
              border-radius: 10px;*/
    color: rgb(255, 255, 255);
}

/* Video Description & Title */

#container > h1 > yt-formatted-string {
    font-size: 25px
}

#img {
    border-radius: 5px;
}

/* Video Settings & Progress */

#movie_player > div.ytp-gradient-bottom {
    opacity: 0;
}

/* Side Menu */

#guide-spacer.ytd-app {
    margin-top: 0px;
}

/* Youtube Adblock Watermark Remover */
#ab4yt-brand {
    opacity: 0 !important;
}
/* Body */
#page-manager.ytd-app {
    margin-top: 0px !important;
}

/* Right Click Menu */
body > div.ytp-popup.ytp-contextmenu {
    border-radius: 10px;
}

/* Search Menu */
body > div.gstl_50.sbdd_a {
    visibility: hidden;
}

/*SEARCH BAR*/
#container:hover ~ #page-manager > ytd-browse {
    height: 50px;
}

/* Mini-Sidebar */
#content > ytd-mini-guide-renderer {
    visibility: hidden;
}

/*#page-manager > ytd-browse > ytd-two-column-browse-results-renderer {
    margin-left: -60px;
}*/
}

@-moz-document url-prefix("https://www.youtube.com") {
/*

Youtube Modern 2021 Addon created by Arctic Fox on 8/13/2021

*/

.video-stream {
    transition: width 1s, height 1s;
}

#player-theater-container {
	transition: max-width 1s, max-height 1s, height 1s;
}

#primary {
    transition: max-width 1s, max-height 1s;
}

*[role=button], #button, ytd-button-renderer[is-paper-button] {
    border-radius: 5px !important;
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

@keyframes slide {
    0% {height: 295px}
    1% {height: 50px; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);}
    100% {height: 295px; box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3)}
}

.ytp-contextmenu {
    backdrop-filter: blur(15px);
    background-color: rgba(50,50,50,0.25);
    border: 1px solid rgb(150,150,150, 0.25) !important;
    box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3);
    animation: slide;
    animation-duration: 0.5s;
}

.ytd-menu-popup-container {
    backdrop-filter: blur(15px);
    background-color: rgba(0,0,0,0) !important;
    box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3);
}

.ytd-menu-popup-renderer, .tp-yt-paper-listbox, .tp-yt-iron-dropdown > div {
    background-color: rgba(0,0,0,0) !important;
    background: rgba(0,0,0,0) !important;
}


ytd-app {
    --app-drawer-content-container_-_background-color: #fff;
}
html:not(.style-scope)[dark], :not(.style-scope)[dark] {
	--yt-spec-brand-background-primary: rgba(50,50,50,0);
    --shadow-elevation-2dp_-_box-shadow: box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}


@keyframes slide2 {
    0% {transform:scaleY(0); transform-origin:top; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);}
    100% {transform:scaleY(1); transform-origin:top; box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3)}
}

.tp-yt-iron-dropdown {
    background-color: rgba(50,50,50,0.25);
    border: 1px solid rgb(150,150,150, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3);
    backdrop-filter: blur(15px);
	animation: slide2;
    animation-duration: 0.4s;
}


/* Buttons! */

tp-yt-paper-button.ytd-subscribe-button-renderer {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    color: rgba(255,50,50);
    font-weight: normal;
    padding: 7px;
    text-transform: none;
    letter-spacing: 0px;
    width: 100px;
}

#sponsor-button > ytd-button-renderer {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    color: rgba(50,200,255);
    font-weight: normal;
    text-transform: none;
    padding: 0px;
    height: 31px;
    letter-spacing: 0px;
}

tp-yt-paper-button.ytd-button-renderer {
    height: 31px;
}

#top-level-buttons-computed > *, .dropdown-trigger .style-scope .ytd-menu-renderer {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    font-weight: normal;
    padding: 0px;
    text-transform: none;
    letter-spacing: 0px;
    height: 30px;
}

.dropdown-trigger .style-scope .ytd-menu-renderer {
    margin-top: -8px;
    width: 30px;
    margin-left: 5px;
}

#top-level-buttons-computed > * > a {
    height: 30px;
}

#top-level-buttons-computed > * > a > #button {
    height: 30px;
}

/* Show More Button */

#more > yt-formatted-string, #less > yt-formatted-string {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    font-weight: normal;
    padding: 5px;
    
    text-transform: none;
    letter-spacing: 0px;
}


/* YouTube Comment Buttons */

#reply-button-end, #dislike-button, #like-button {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    font-weight: normal;
    padding: 0px;
    text-transform: none;
    letter-spacing: 0px;
    height: 30px;
    margin: 5px;
}

#simplebox-placeholder {
    border-radius: 5px;
    transition: background-color 1s, height 1s;
    background-color: rgba(75,75,75, 0.25) !important;
    border-bottom: 1px solid rgb(150,150,150) !important;
    padding: 10px;
    animation: comment-box-slide;
    animation-duration: 0.5s;
}

@keyframes comment-box-slide {
    0% {margin-top: -10px; opacity: 0}
    100% {margin-top: 0px; }
}

#comment-dialog > ytd-comment-dialog-renderer > ytd-commentbox > #main, #replybox > ytd-commentbox > #main {
    border-radius: 5px;
    transition: background-color 1s, height 1s;
    background-color: rgba(75,75,75, 0.25) !important;
    border-bottom: 2px solid #3EA6FF !important;
    padding: 10px;
    animation: comment-box-slide;
    animation-duration: 0.5s;
}

#submit-button, #cancel-button {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5) !important;
    border: 1px solid rgb(75,75,75, 0.25) !important;
    font-weight: normal;
    padding: 0px;
    text-transform: none;
    letter-spacing: 0px;
    height: 30px;
    margin-top: 15px
}

#submit-button{
    margin-right: -8px;
    color: #AAAAAA;
}

*[role=tab] {
    border-radius: 5px !important;
    background-color: rgba(50,50,50,0.5);
    border: 1px solid rgb(75,75,75, 0.25) !important;
    font-weight: normal;
    padding: 0px;
    text-transform: none;
    letter-spacing: 0px;
    height: 30px;
    margin: 5px;
}

/* Sidebar */

#guide-content > #guide-inner-content {
    margin-right: -15px;
}

/* Channels Page */

#tabsContent > tp-yt-paper-tab {
    height: 30px !important;
    width: 40px;
}

#links-holder > * {
    backdrop-filter: blur(15px);
	border-radius: 5px;
    height: 35px;
    margin-left: 10px;
}

#channel-container {
    height: 60px;
}

#channel-header-container > #inner-header-container {
    margin-top: -10px;
}

#channel-header-container > #avatar {
    margin-top: -30px;
    margin-left: 10px;
    margin-right: 10px;
}...

Reviews

No reviews yet.