/* ==UserStyle==
@name           YouTube - Darker
@description    Darker theme for YouTube.
@version        2026.04.24.16.19
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   stylus

@var color      primary-bg-color            "Primary background color"              #000
@var color      additive-bg-color           "Additive background color"             #fff
@var checkbox   remove-playlist-gradient    "Remove playlist gradient"              1
@var checkbox   remove-cinematics-gradient  "Remove video gradient"                 1

==/UserStyle== */
@-moz-document domain("youtube.com") {
  [color-version="v2_0"] [dark],
  [dark],
  [darker-dark-theme] [dark],
  html[color-version="v2_0"][dark],
  html[dark],
  html[darker-dark-theme][dark] {
    /* stylus to CSS */
    --primary-bg-color-00: primary-bg-color;
    --primary-bg-color-05: lightness(primary-bg-color, 5%);
    --primary-bg-color-10: lightness(primary-bg-color, 10%);

    --additive-bg-color-00: additive-bg-color;
    --additive-bg-color-05: rgba(additive-bg-color, 5%);
    --additive-bg-color-10: rgba(additive-bg-color, 10%);
    --additive-bg-color-20: rgba(additive-bg-color, 20%);
    /*  */

    --yt-sys-color-baseline--additive-background: var(--additive-bg-color-05);

    --yt-sys-color-baseline--base-background: var(--primary-bg-color-00);
    --yt-sys-color-baseline--menu-background: var(--primary-bg-color-10);
    --yt-sys-color-baseline--raised-background: var(--primary-bg-color-05);

    --yt-spec-base-background: var(--primary-bg-color-00);

    .ytd-channel-owner-empty-state-renderer.illustration {
      filter: contrast(1.2);
    }

    .playlist-items.ytd-playlist-panel-renderer {
      background-color: var(--additive-bg-color-05);
    }

    ytd-app,
    ytd-item-section-renderer[use-chip-bar-view-model-header][page-subtype="playlist"] #header.ytd-item-section-renderer,
    ytd-masthead {
      background: var(--primary-bg-color-00);
    }

    #description.ytd-watch-metadata:not(:hover),
    .header.ytd-playlist-panel-renderer,
    .yt-contextual-sheet-layout-wiz,
    tp-yt-paper-dialog,
    tp-yt-paper-listbox,
    tp-yt-paper-toast,
    yt-confirm-dialog-renderer[dialog],
    ytd-menu-popup-renderer tp-yt-paper-listbox.ytd-menu-popup-renderer {
      background-color: var(--primary-bg-color-05);
    }

    .ytContextualSheetLayoutHost,
    .ytd-multi-page-menu-renderer {
      background-color: var(--primary-bg-color-10);
    }

    yt-notification-action-renderer {
      #text.yt-notification-action-renderer,
      #sub-text.yt-notification-action-renderer {
        color: var(--yt-spec-text-primary);
      }
    }

    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
    .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled {
      background-color: var(--additive-bg-color-10);
      color: var(--yt-spec-text-primary);

      &:hover {
        background-color: var(--additive-bg-color-20);
      }
    }

    if (remove-playlist-gradient) {
      .YtCinematicContainerViewModelBackgroundGradient,
      .immersive-header-background-wrapper {
        background: var(--primary-bg-color-00) !important;
      }

      .immersive-header-gradient {
        background: transparent !important;
      }

      .ytCinematicContainerViewModelHost,
      .immersive-header-container .blurred-image {
        display: none;
      }
    }

    if (remove-cinematics-gradient) {
      #cinematics {
        display: none;
      }
    }

    /* extensions */
    .ysm-subscription-filter {
      filter: contrast(1.25);
    }
  }
}