YouTube Mid 2018-Early 2019 Polymer Layout by magma_craft

/* ==UserStyle==
@name           YouTube Mid 2018-Early 2019 Polymer Layout
@namespace      userstyles.world/user/magma_craft
@version        1.3.5
@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);
  --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;
  --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
}

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

ytd-searchbox.style-scope.ytd-masthead {
  height: 32px
}

form#search-form.style-scope.ytd-searchbox,
.ytSearchboxComponentHost {
  height: 32px
}

button#search-icon-legacy.style-scope.ytd-searchbox,
.ytSearchboxComponentSearchButton {
  width: 65px;
  height: 32px;
  display: block !important;
  border-radius: 0 2px 2px 0 !important
}

button#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox,
button.ytSearchboxComponentSearchButton yt-icon {
  max-width: 20px;
  max-height: 20px
}

#container.ytd-searchbox,
.ytSearchboxComponentInputBox {
  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
}

.ytSearchboxComponentInputBox {
  padding-left: 12px !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,
.ytSearchboxComponentInnerSearchIcon,
.ytSuggestionComponentIcon {
  display: none !important
}

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

.ytSearchboxComponentInputBoxHasFocus input {
  padding: 2px 0px 2px 0px;
  margin: 0 !important
}

ytd-searchbox[desktop-searchbar-style="rounded_corner_dark_btn"] #searchbox-button.ytd-searchbox,
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, .ytSearchboxComponentSuggestionsContainer {
  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 !important
}

ytd-searchbox.ytd-masthead,
.ytSearchboxComponentHost {
  margin-right: 40px !important
}

button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-only-default.yt-spec-button-shape-next--enable-backdrop-filter-experiment[aria-label="Clear search query"],
.ytSearchboxComponentClearButtonWrapper {
  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: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 0;
  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: 0;
  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"],
...