This userstyle reverts back YouTube to the layout from May 2018 to early 2019.
YouTube Mid 2018-Early 2019 Polymer Layout by magma_craft
Details
Authormagma_craft
LicenseCC Zero
Categoryyoutube
Created
Updated
Size98 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Make sure you have the same instructions from the late 2017-early 2018 material UI here:
https://userstyles.world/style/5606/youtube-late-2017-early-2018-material-layout
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 Mid 2018-Early 2019 Polymer Layout
@namespace userstyles.world/user/magma_craft
@version 1.2.1
@description This userstyle reverts back YouTube to the layout from May 2018 to early 2019.
@author Magma_Craft
@license CC Zero
@preprocessor stylus
@var checkbox classicLikebar "Enable the classic like/dislike bar (before late-July 2018)" 0
@var checkbox beforeLate2018 "Disable features from late 2018 (including miniplayer)" 0
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* Topbar, leftsidebar, button and icons adjustments */
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-spec-general-background-a) !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-guide-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
}
ytd-searchbox.style-scope.ytd-masthead {
height: 32px;
padding-right: 44px;
}
form#search-form.style-scope.ytd-searchbox {
height: 32px;
}
button#search-icon-legacy.style-scope.ytd-searchbox {
width: 65px;
height: 32px;
}
button#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
max-width: 20px;
max-height: 20px;
}
#container.ytd-searchbox {
background-color: var(--ytd-searchbox-background) !important;
border-radius: 2px 0 0 2px !important;
box-shadow: inset 0 1px 2px var(--ytd-searchbox-legacy-border-shadow-color) !important;
color: var(--ytd-searchbox-text-color) !important;
padding: 2px 6px !important;
margin: 0 !important;
}
#container.ytd-searchbox > [slot=search-input] input {
box-sizing: border-box !important;
padding: 1px 6px !important;
margin: 0 !important;
}
ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
display: none !important;
}
ytd-searchbox[has-focus] #container.ytd-searchbox {
padding: 2px 6px 2px 6px;
margin: 0 !important;
}
ytd-searchbox[desktop-searchbar-style="rounded_corner_dark_btn"] #searchbox-button.ytd-searchbox {
display: none !important;
}
ytd-searchbox[desktop-searchbar-style="rounded_corner_light_btn"] #searchbox-button.ytd-searchbox {
display: none !important;
}
#search[has-focus] #search-input {
margin-left: 0px !important;
}
#search-icon-legacy.ytd-searchbox {
display: block !important;
border-radius: 0px 2px 2px 0px;
}
div.style-scope.ytd-searchbox {
border-radius: 2px 0px 0px 2px !important;
margin-left: 0px !important;
padding-left: 6px !important;
}
button.style-scope.ytd-searchbox {
border-radius: 0px 2px 2px 0px !important;
}
#search-icon.ytd-searchbox {
padding-right: 10px !important;
padding-left: 10px !important;
}
#container.ytd-searchbox > [slot=search-input] input {
box-sizing: border-box !important;
padding: 1px 6px !important;
margin: 0 !important;
}
div.sbsb_a {
border-radius: 2px !important;
}
#container.ytd-searchbox {
margin-left: 0px !important;
}
#container.ytd-searchbox > [slot=search-input] input {
box-sizing: border-box !important;
padding: 1px 6px !important;
margin: 0 !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 {
padding: 2px 6px 2px 6px !important;
margin: 0 !important;
}
#search[has-focus] #search-input {
margin-left: 0px !important;
}
div.sbqs_c::before {
display: none !important;
}
span.sbpqs_a::before {
display: none !important;
}
yt-icon.style-scope.ytd-searchbox {
color: var(--yt-spec-text-secondary) !important;
}
#voice-search-button.ytd-masthead {
display: none;
}
#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
}
yt-icon.ytd-logo {
width: 80px;
height: 24px
}
ytd-logo[enable-refresh-ringo2-web] yt-icon.ytd-logo {
width: 84px;
height: 24px
}
tp-yt-paper-button.style-scope.ytd-button-renderer.style-suggestive.size-small {
color: var(--yt-brand-paper-button-color) !important;
border-color: transparent;
margin-right: 4px;
margin-left: -4px
}
ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer {
display: none
}
ytd-button-renderer#sign-in-button.style-scope.ytd-guide-signin-promo-renderer.style-suggestive.size-default > a.yt-simple-endpoint.style-scope.ytd-button-renderer > tp-yt-paper-button.style-scope.ytd-button-renderer.style-suggestive.size-default {
color: var(--yt-brand-paper-button-color) !important;
border: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
margin-left: -15px
}
.yt-spec-icon-badge-shape {
color: #606060 !important
}
.yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
background-color: #ff0000 !important
}
div.yt-spec-icon-badge-shape__badge {
left: 14px;
min-width: 10px;
max-width: 10px;
height: 18px;
border: 0px;
font-size: 10px;
line-height: 18px
}
yt-icon.style-scope.ytd-badge-supported-renderer {
color: #909090 !important
}
#label-icon.yt-dropdown-menu {
color: var(--yt-spec-text-secondary) !important
}
#icon-label.yt-dropdown-menu {
color: var(--yt-spec-text-secondary) !important
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Your channel"] {
display: none !important
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Your videos"] {
display: none !important
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Your movies"]
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Your movies & TV"] {
display: none !important
}
ytd-guide-entry-renderer > a[href*="/feed/clips"] {
display: no...