Youtube Cyberyadix by xyadx

/* ==UserStyle==
@name         Youtube Cyberyadix
@namespace    USO Archive
@author       YAD
@description  A custom Youtube cyberpunk theme
@version      20241112.03.30
@license      NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("youtube.com"), regexp("http(s?)://[^/]*\.youtube(\.com)?(\.[a-z][a-z])?/.*"), regexp("http(s?)://youtube(\.com)?(\.[a-z][a-z])?/.*") {
html {
    scrollbar-color: var(--bg2) #140516 !important;
  }
  body {
    overflow-x: hidden !important;
  }
  ytd-app {
    z-index: -11;
    background: var(--bg2) !important;
  }
  ytd-app::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: var(--rep1);
  }
  ytd-app::after {
    content: "";
    width: 100%;
    height: 100%;
    opacity: var(--bgoppa);
    background: var(--rep1), linear-gradient(360deg, var(--bg2), transparent), var(--wallpa1) var(--wallpas);
    position: fixed;
    display: block;
    z-index: -3;
    top: 0;
    bottom: 0;
  }
  #guide-content.ytd-app {
    background: transparent;
  }
  #guide-content.ytd-app::after {
    content: "";
    width: 100%;
    height: 100%;
    opacity: var(--bgoppa);
    background: var(--rep1), linear-gradient(360deg, var(--bg2), transparent), var(--wallpa1) var(--wallpas2);
    position: fixed;
    display: block;
    z-index: -2;
    top: 0;
    left: 0;
    bottom: 0;
  }
  #scrim.tp-yt-app-drawer {
    background: var(--cyberyadix) no-repeat center, var(--scrim);
    background-blend-mode: soft-light;
  }
  #container.ytd-masthead {
    height: 48px;
    padding: 0 16px 15px 16px;
    background: var(--rep1), var(--bg2);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 80%, 78% 100%, 25% 100%, 23% 80%, 0 80%);
  }
  #container.ytd-masthead::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--rep1), var(--wallpa1) var(--wallpas);
    opacity: var(--bgoppa);
    position: absolute;
    display: block;
    z-index: -4;
    left: 0;
    top: 0;
  }
  #cinematics {
    mix-blend-mode: lighten !important;
    z-index: -11;
  }
  #background.ytd-masthead {
    background: var(--lg3);
    box-shadow: 0 0 20px var(--lg3), 1px 0px 20px var(--lg3);
  }
  ytd-searchbox.ytd-masthead {
    margin: 10px 0px 0px 95px;
  }
  #voice-search-button.ytd-masthead {
    margin-left: 2em;
  }
  ytd-searchbox[has-focus] #container.ytd-searchbox {
    border: 1px solid var(--bg3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    margin-left: 0;
    transition: 0.2s;
    padding: 2px 4px 2px 48px;
  }
  .gsfs {
    color: var(--cy1) !important;
  }
  .sbsb_d {
    background: var(--bg0);
  }
  html[darker-dark-theme] .sbqs_c:before {
    filter: invert(1);
  }
  html[dark] .sbqs_c:before {
    filter: invert(0) !important;
  }
  yt-report-form-modal-renderer[dialog][dialog][dialog],
  tp-yt-paper-dialog,
  tp-yt-paper-menu-button[vertical-align=top] .dropdown-content.tp-yt-paper-menu-button,
  ytd-multi-page-menu-renderer {
    opacity: var(--oppa);
    border-radius: 0;
    backdrop-filter: none;
    --background-color: var(--yt-spec-base-background);
    clip-path: var(--poly1);
  }
  yt-report-form-modal-renderer[dialog][dialog][dialog]::before,
  tp-yt-paper-dialog::before,
  tp-yt-paper-menu-button[vertical-align=top] .dropdown-content.tp-yt-paper-menu-button::before,
  ytd-multi-page-menu-renderer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border-color);
    z-index: -2;
  }
  yt-report-form-modal-renderer[dialog][dialog][dialog]::after,
  tp-yt-paper-dialog::after,
  tp-yt-paper-menu-button[vertical-align=top] .dropdown-content.tp-yt-paper-menu-button::after,
  ytd-multi-page-menu-renderer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--background-color);
    z-index: -1;
    clip-path: var(--poly2);
    animation: galaw2 0.2s 1 linear;
  }
  ytd-menu-popup-renderer {
    opacity: var(--oppa);
    border-radius: 0;
    backdrop-filter: none;
    --background-color: var(--yt-spec-base-background);
    clip-path: var(--poly1);
  }
  ytd-menu-popup-renderer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--yt-spec-base-background);
    z-index: -1;
    clip-path: var(--poly2);
    animation: galaw2 0.4s 1 linear;
  }
  ytd-menu-popup-renderer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border-color);
    z-index: -5;
  }
  .yt-contextual-sheet-layout-wiz,
  .ytp-popup {
    opacity: var(--oppa);
    border-radius: 0;
    backdrop-filter: none;
    --background-color: var(--yt-spec-base-background);
    clip-path: var(--poly1);
  }
  .yt-contextual-sheet-layout-wiz::before,
  .ytp-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border-color);
    z-index: -2;
  }
  .yt-contextual-sheet-layout-wiz::after,
  .ytp-popup::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--background-color);
    z-index: -1;
    clip-path: var(--poly2);
    animation: galaw2 0.4s 1 linear;
  }
  ytd-menu-popup-renderer tp-yt-paper-listbox.ytd-menu-popup-renderer {
    background: none;
  }
  .ytd-menu-title-renderer {
    color: var(--tx1);
  }
  #offRadio.tp-yt-paper-radio-button,
  #checkbox.tp-yt-paper-checkbox {
    border-color: var(--acc);
  }
  .ytp-progress-bar::before {
    content: "initializing" " " attr(aria-valuenow);
    width: 60px;
    height: 20px;
    position: absolute;
    z-index: 999;
    left: 0px;
    top: -10px;
    display: block;
    color: var(--acc);
    font-size: x-small;
    writing-mode: vertical-tr;
    font-weight: 900;
    text-shadow: none;
  }
  .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
    color: #fff;
    background: var(--acc);
    padding: 0px 20px 0px 20px;
    position: relative;
    cursor: pointer;
    border-radius: 0px;
    transition: box-shadow 0.1s ease, background 0.3s ease;
    clip-path: polygon(0 0, calc(100% - var(--es)) 0, 100% var(--es), 100% calc(100% - 0%), calc(100% - var(--es)) 100%, var(--es) 100%, 0 calc(100% - var(--es)), 0 var(--es));
    overflow: hidden;
    border: none;
  }
  .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover {
    background: #262626;
    box-shadow: inset -4px -4px 12px var(--acc), inset 4px 4px 12px var(--acc2), 5px 5px 18px rgba(0,0,0,0.9);
    color: var(--acc);
  }
  .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    clip-path: polygon(0 0, calc(100% - var(--es)) 0, 100% var(--es), 100% calc(100% - var(--es)), calc(100% - var(--es)) 100%, var(--es) 100%, 0 calc(100% - var(--es)), 0 var(--es));
    border: 2px solid var(--acc3); /* Optional border accent */
    pointer-events: none;
  }
  #search-icon-legacy.ytd-searchbox {
    background: linear-gradient(135deg, var(--acc) calc(115% - var(--es)), transparent 0%);
    border-radius: 0px;
    border: 0;
    margin-left: 4px;
  }
  #search-icon-legacy.ytd-searchbox:hover {
    background: linear-gradient(135deg, var(--acc) calc(115% - var(--es)), transparent 0%);
    opacity: 0.9;
  }
  #search-icon-legacy.ytd-searchbox:active {
    background: linear-gradient(135deg, var(--acc2) calc(115% - var(--es)), transparent 0%);
    opacity: 0.9;
    transform: translateX(-1px);
  }
  #search-icon-legacy.ytd-searchbox:focus {
    background: linear-gradient(135deg, var(--acc2) calc(115% - var(--es)), transparent 0%);
    opacity: 0.9;
  }
  ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
    color: #fff;
    stroke: #fff;
  }
  #container.ytd-searchbox {
    opacity: var(--oppa);
    border-radius: 0;
    clip-path: var(--poly-search);
    --background-color: var(--yt-spec-base-background);
    --ses1: var(--es);
    --sbw1: var(--bw);
  }
  #container.ytd-searchbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border-color);
    z-index: -2;
  }
  #container.ytd-searchbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--background-color);
    z-index: -1;
    clip-path: var(--poly-search2);
  }
  .gstl_50.sbdd_a [style*="display"] {
    width: 100%;
  }
  .sbsb_a,
  .sbdd_b,
  .gstl_50.sbdd_a {
    border-radius: 0;
    --background-color: var(--yt-spec-base-background);
    opacity: var(--oppa);
    clip-path: var(--poly-search-down);
    animation: galaw3 0.5s 1 linear;
  }
  .sbsb_a::before,
  .sbdd_b::before,
  .gstl_50.sbdd_a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border-color);
    z-index: -5;
  }
  .sbsb_a::after,
  .sbdd_b::after,
  .gstl_50.sbdd_a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--yt-spec-base-background);
    z-index: -1;
    clip-path: var(--poly-search-down2);
  }
  tp-yt-iron-dropdown.style-scope.ytd-popup-container {
    animation: galaw2 0.3s 1 linear;
  }
  tp-yt-iron-dropdown.style-scope.ytd-popup-container::after {
    content: "";
    position: absolute;
    background: var(--borderc);
    border-radius: 0;
    width: 30%;
    height: 15px;
    right: 0;
    top: 0;
    z-index: 99999;
    margin-right: auto;
    clip-path: polygon(0 0 /*t left*/, calc(100% - var(--es)) 0 /*t right*/, 100% calc(0% + var(--es)) /*t-side right*/, 100% calc(100% - var(--es)) /*b-side right*/, 100% 100% /*b right*/, 0% 100% /*b left*/, 0 100% /*b-side left*/, 0 100%) /*t-side left*/;
    animation: galaw1 0.4s 1 linear;
  }
  ytd-exploratory-results-renderer.ytd-item-section-renderer,
  ytd-horizontal-card-list-renderer.ytd-item-section-renderer:not(:first-child),
  ytd-reel-shelf-renderer.ytd-item-section-renderer,
  ytd-shelf-renderer.ytd-item-section-renderer,
  ytd-rich-section-renderer {
    display: flexbox;
  }
  tp-yt-iron-overlay-backdrop.opened {
    displ...