Skip to content

YouTube 2016 Material Layout by magma_craft

Write a review Install Get Stylus

Details

Authormagma_craft

LicenseCC Zero

Categoryyoutube

Created

Updated

Size100 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This userstyle brings back the 2016 YouTube material layout.

Notes

Requirements to get the 2016 Material Layout back:
Make sure you have both Stylus and Tampermonkey extensions installed before applying them.

Recommended scripts to be installed here first:
Mid 2016-Early 2019 Polymer UI script - https://pastebin.com/raw/yWaPxqti
Proper Description script (required for W9R) - https://greasyfork.org/en/scripts/440613
Watch9 Reconstruct - https://pastebin.com/raw/s1mWZ2Km
Revert Old Autoplay Switch UI - https://greasyfork.org/en/scripts/453729
Replace Explore with Trending - https://greasyfork.org/en/scripts/443297

Recommended styles to be installed here:
YouTube - Old Home Style / Video size - https://uso.kkx.one/style/190507
YT Player Classicifier - https://github.com/YukisCoffee/yt-player-classicifier/blob/main/yt_player_classicifier.user.css
YouTube - Force consistent video size - https://greasyfork.org/en/scripts/489498

And also, make sure you install Return YouTube Dislike addon and also you might want to copy settings from YT Player Classicifer here: https://bit.ly/3W6bEKl

If you want to revert the upload icon, you can install the User Agent Switcher addon for Chrome or Firefox and copy and paste this string here: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 OPR/69.0.3686.95

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 2016 Material Layout
@namespace      userstyles.world/user/magma_craft
@version        1.0.0
@description    This userstyle brings back the 2016 YouTube material layout.
@author         Magma_Craft
@license        CC Zero
==/UserStyle== */

@-moz-document domain("youtube.com") {
/* Topbar, leftsidebar, button and icons adjustments (including old logo) */
html {
  --yt-spec-call-to-action: #1e88e5
}

html:not([dark]) {
  --yt-spec-general-background-a: #f9f9f9 !important;
  --yt-spec-general-background-b: #f1f1f1 !important;
  --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98) !important;
  --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1) !important;
  --yt-spec-icon-active-other: hsla(0, 0%, 6.7%, .4);
  --paper-toggle-button-unchecked-bar-color: hsl(0, 0%, 0%);
  --paper-toggle-button-unchecked-button-color: hsl(0, 0%, 98%);
  --paper-toggle-button-checked-bar-color: hsl(206.1, 79.3%, 52.7%);
  --paper-toggle-button-checked-button-color: hsl(206.1, 79.3%, 52.7%);
  --yt-brand-paper-button-color: hsl(0, 100%, 50%);
  --yt-app-background: hsl(0, 0%, 100%);
  --yt-guide-background: hsl(0, 0%, 96%);
  --yt-simple-menu-header-background: hsl(0, 0%, 93.3%);
  --yt-channel-header-background: hsl(0, 0%, 98%)
}

html[dark] {
  --yt-spec-general-background-a: #181818 !important;
  --yt-spec-general-background-b: #0f0f0f !important;
  --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98) !important;
  --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1) !important;
  --paper-toggle-button-unchecked-bar-color: hsl(0, 0%, 60%);
  --paper-toggle-button-unchecked-button-color: hsl(0, 0%, 98%);
  --paper-toggle-button-checked-bar-color: hsl(0, 0%, 60%);
  --paper-toggle-button-checked-button-color: hsl(0, 0%, 98%);
  --yt-brand-paper-button-color: hsl(0, 0%, 100%);
  --yt-app-background: hsl(0, 0%, 7%);
  --yt-guide-background: hsl(0, 0%, 11%);
  --yt-simple-menu-header-background: hsla(0, 0%, 53.3%, .4);
  --yt-channel-header-background: hsla(0, 0%, 11%, .8)
}

ytd-masthead {
  background: var(--yt-spec-brand-background-primary) !important
}
    
ytd-app {
  background: var(--yt-app-background) !important
}

ytd-browse[page-subtype="channels"] {
  background: var(--yt-app-background) !important
}

ytd-c4-tabbed-header-renderer {
  --yt-lightsource-section1-color: var(--yt-channel-header-background) !important
}

#page-header.ytd-tabbed-page-header, #tabs-inner-container.ytd-tabbed-page-header {
  background: var(--yt-channel-header-background) !important
}

#tabs-divider.ytd-c4-tabbed-header-renderer, #tabs-divider.ytd-tabbed-page-header {
  border-bottom: 0px !important
}

#header.ytd-rich-grid-renderer {
  width: 100% !important
}

#masthead-container.ytd-app::after {
  margin-bottom: -5px;
  box-shadow: inset 0px 4px 8px -3px rgba(17, 17, 17, .06)
}
    
ytd-app[hide-header-shadow] #masthead-container.ytd-app::after {
  opacity: 1
}

#guide-content.ytd-app {
  background: var(--yt-app-background) !important
}

ytd-mini-guide-renderer.ytd-app {
  display: none
}
    
ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
  margin-left: 0px
}

ytd-guide-entry-renderer[active] {
  background-color: transparent
}

.guide-icon.ytd-guide-entry-renderer {
  color: #909090 !important
}

yt-icon.style-scope.ytd-searchbox {
  color: var(--yt-spec-text-secondary) !important
}

#center.ytd-masthead {
  flex: 0 1 608px
}

ytd-searchbox.style-scope.ytd-masthead {
  flex-direction: row-reverse
}

button.style-scope.ytd-searchbox {
  width: 72px
}

div.style-scope.ytd-searchbox {
  padding-left: 0px
}

button.style-scope.ytd-searchbox,
div.style-scope.ytd-searchbox {
  height: 40px;
  background: var(--yt-spec-additive-background) !important;
  border-radius: 0 !important;
  border: 0 !important
}

#container.ytd-searchbox {
  margin-left: 0px !important
}

ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
  display: none !important
}

ytd-searchbox[has-focus][desktop-searchbar-style=rounded_corner_dark_btn] #search-icon.ytd-searchbox, ytd-searchbox[has-focus][desktop-searchbar-style=rounded_corner_light_btn] #search-icon.ytd-searchbox {
  display: none !important
}

ytd-searchbox[has-focus] #container.ytd-searchbox {
  box-shadow: none;
  padding: 0px 6px 0px 0px !important;
  margin: 0 !important
}

#search[has-focus] #search-input {
  margin-left: 16px !important
}

div.sbqs_c::before {
  display: none !important
}

span.sbpqs_a::before {
  display: none !important
}

#voice-search-button.ytd-masthead,
#search-clear-button.ytd-searchbox {
  display: none !important
}

ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_HASHTAG_LANDING_PAGE"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer, ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
  background-color: transparent !important
}

yt-chip-cloud-chip-renderer {
  height: 32px !important;
  border: 1px solid var(--yt-spec-10-percent-layer) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important
}

yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
  background-color: var(--yt-spec-icon-active-other) !important
}

yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected]:hover, yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected]:hover, yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected]:focus, yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected]:focus {
  background-color: var(--yt-spec-icon-inactive) !important
}
    
#start.ytd-masthead {
  width: 180px
}

#logo-container .logo, .footer-logo-icon,
#logo-icon-container, #logo-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath fill='%23111111' d='M20.9 19.3h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V7.9h2.12V17.16c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V7.9h2.12v11.4M13.4 11.62c0-1.22-.23-2.13-.66-2.7-.56-.8-1.45-1.1-2.35-1.1-1.02 0-1.8.3-2.35 1.1-.44.57-.67 1.5-.67 2.7v4.07c0 1.2.2 2.04.64 2.6.56.8 1.48 1.2 2.37 1.2.9 0 1.82-.4 2.4-1.2.4-.56.6-1.4.6-2.6V11.6zm-2.1 4.3c.1 1.13-.25 1.7-.9 1.7-.66 0-1-.57-.9-1.7V11.4c-.1-1.13.24-1.66.9-1.66.65 0 1 .53.9 1.66v4.52zM5.03 13.1v6.2H2.8v-6.2S.47 5.46 0 4.04h2.35L3.92 10l1.56-5.95h2.34l-2.8 9.04'/%3E%3Cpath fill='%23e62117' d='M55.67 5.28s-.33-2.3-1.33-3.33C53.07.6 51.64.6 51 .53 46.33.2 39.32.2 39.32.2h-.02s-7 0-11.67.33c-.65.08-2.08.08-3.35 1.42-1 1.02-1.32 3.33-1.32 3.33s-.34 2.72-.34 5.44v2.55c0 2.72.34 5.43.34 5.43s.32 2.32 1.32 3.34c1.27 1.34 2.94 1.3 3.68 1.43 2.67.26 11.35.34 11.35.34s7.03 0 11.7-.34c.65-.08 2.07-.08 3.34-1.42 1-1.02 1.33-3.34 1.33-3.34S56 16 56 13.27v-2.55c0-2.72-.33-5.44-.33-5.44M29.95 19.3h-2.23v-13h-2.35V4.18h7.04V6.3h-2.45v13zm8.05 0h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V8h2.12v9.17c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V8H38v11.3zm7.7-3.38c0 1.04-.07 1.78-.2 2.26-.28.84-.87 1.27-1.67 1.27-.72 0-1.46-.44-2.14-1.28v1.14h-2.02V4.18h2V9.1c.66-.8 1.4-1.27 2.15-1.27.8 0 1.34.47 1.6 1.3.15.47.28 1.2.28 2.27v4.52zm4.46 1.67c.5 0 .8-.28.9-.83.02-.1.02-.6.02-1.42h2.12v.32c0 .66-.05 1.13-.07 1.33-.07.46-.23.87-.47 1.23-.56.82-1.4 1.22-2.45 1.22-1.05 0-1.85-.38-2.44-1.16-.43-.57-.7-1.4-.7-2.6v-3.96c0-1.2.25-2.14.68-2.72.58-.77 1.4-1.18 2.42-1.18s1.82.4 2.4 1.18c.4.58.65 1.46.65 2.67V14H49.2v2.02c0 1.05.3 1.57.98 1.57zM42.74 9.68c-.33 0-.7.2-1.05.52v6.86c.33.34.7.5 1.04.5.6 0 .85-.42.85-1.55v-4.86c0-1.13-.27-1.46-.86-1.46M51.08 11.07c0-1.05-.27-1.36-.94-1.36-.67 0-.96.3-.96 1.35v1.25h1.9v-1.23'/%3E%3C/svg%3E") !important;
  background-size: auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 60px !important;
  height: 26px !important;
  padding: 0 24px 0 0 !important
}

[dark] #logo-icon-container, [dark] #logo-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath fill='%23ffffff' d='M20.9 19.3h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V7.9h2.12V17.16c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V7.9h2.12v11.4M13.4 11.62c0-1.22-.23-2.13-.66-2.7-.56-.8-1.45-1.1-2.35-1.1-1.02 0-1.8.3-2.35 1.1-.44.57-.67 1.5-.67 2.7v4.07c0 1.2.2 2.04.64 2.6.56.8 1.48 1.2 2.37 1.2.9 0 1.82-.4 2.4-1.2.4-.56.6-1.4.6-2.6V11.6zm-2.1 4.3c.1 1.13-.25 1.7-.9 1.7-.66 0-1-.57-.9-1.7V11.4c-.1-1.13.24-1.66.9-1.66.65 0 1 .53.9 1.66v4.52zM5.03 13.1v6.2H2.8v-6.2S.47 5.46 0 4.04h2.35L3.92 10l1.56-5.95h2.34l-2.8 9.04'/%3E%3Cpath fill='%23e62117' d='M55.67 5.28s-.33-2.3-1.33-3.33C53.07.6 51.64.6 51 .53 46.33.2 39.32.2 39.32.2h-.02s-7 0-11.67.33c-.65.08-2.08.08-3.35 1.42-1 1.02-1.32 3.33-1.32 3.33s-.34 2.72-.34 5.44v2.55c0 2.72.34 5.43.34 5.43s.32 2.32 1.32 3.34c1.27 1.34 2.94 1.3 3.68 1.43 2.67.26 11.35.34 11.35.34s7.03 0 11.7-.34c.65-.08 2.07-.08 3.34-1.42 1-1.02 1.33-3.34 1.33-3.34S56 16 56 13.27v-2.55c0-2.72-.33-5.44-.33-5.44'/%3E%3Cpath fill='%23ffffff' d='M29.95 19.3h-2.23v-13h-2.35V4.18h7.04V6.3h-2.45v13zm8.05 0h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V8h2.12v9.17c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V8H38v11.3zm7.7-3.38c0 1.04-.07 1.78-.2 2.26-.28.84-.87 1.27-1.67 1.27-.72 0-1.46-.44-2.14-1.28v1.14h-2.02V4.18h2V9.1c.66-.8 1.4-1.27 2.15-1.27.8 0 1.34.47 1.6 1.3.15.47.28 1.2.28 2.27v4.52zm4.46 1.67c.5 0 .8-.28.9-.83.02-.1.02-.6.02-1.42h2.12v.32c0 .66-.05 1.13-.07 1.33-.07.46-.23.87-.47 1.23-.56.82-1.4 1.22-2.45 1.22-1.05 0-1.85-.38-2.44-1.16-.43-.57-.7-1.4-.7-2.6v-3.96c0-1.2.25-2.1...

Reviews

No reviews yet.