Twitch Nord Theme by gonlad-x

/* ==UserStyle==
@name Twitch Nord Theme
@namespace https://github.com/nordtheme/nord
@homepageURL https://github.com/nordtheme/nord
@version 1.1.9
@supportURL https://github.com/nordtheme/nord
@description Soothing pastel theme for Last.fm
@author Mth
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@-moz-document domain("twitch.tv") {
  .tw-root--theme-dark {
    #catppuccin(@darkFlavor, @accentColor);
  }
  .tw-root--theme-light {
    #catppuccin(@lightFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    body {
      background-color: @base;
    }

    /* Stream title */

    p[data-test-selector="stream-info-card-component__subtitle"],
    p[data-test-selector="stream-info-card-component__description"] {
      color: @text !important;
    }

    a[data-a-target="player-info-game-name"] {
      color: @accent-color;
    }

    /* `Pinned message` popup */

    div.pinned-chat__pinned-by svg {
      color: @text;
    }

    p.pinned-chat__message span {
      color: @text !important;
    }

    p.pinned-chat__message a {
      color: @accent-color;
    }

    /* `Intended for certain audiences` label */

    div[data-a-target="content-classification-warning-disclosure-overlay"] p {
      color: @text;
    }

    /* `Hype Train` popup */

    div.hype-train-progress-bar-info-view__level-container p,
    div.hype-train-approaching-view__leftSide p,
    div.hype-train-expanded-layout p,
    div.hype-train-expanded-layout svg {
      color: @text;
    }

    path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] {
      fill: @mantle;
    }

    /* `Is video buffering?` warning */

    div.low-latency-notification p {
      color: @text;
    }

    /* `Includes paid promotion` label */

    div.disclosure-card p,
    div.disclosure-card svg {
      color: @text;
    }

    /* Raiding popup */

    div[data-test-selector="raid-banner"] {
      color: @text;
    }

    /* `Predict with Channel Points` popup */

    div[data-test-selector="expanded-content"] p,
    p[data-test-selector="community-prediction-highlight-header__top-predictors"],
    p[data-test-selector="community-prediction-highlight-body__outcome-title"] {
      color: @text;
    }

    /* TODO: ensure that the poll does not default to this */
    div[data-test-selector="header-content"] p {
      color: @text !important;
    }

    div.channel-points-icon svg,
    div[data-test-selector="header-content"] span,
    div[data-test-selector="community-prediction-highlight-body__outcome-points"]
      span {
      color: @accent-color;
    }

    button[data-test-selector="community-prediction-highlight-header__how-to-play"],
    button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"],
    button[data-test-selector="community-prediction-highlight-header__send-feedback"],
    button[data-test-selector="community-prediction-highlight-header__dismiss-message"] {
      color: @text;
    }

    /* Poll popup */

    div[data-test-selector="header-content"]
      p:not(
        [data-test-selector="community-prediction-highlight-header__title"],
        [data-test-selector="header"]
      ) {
      color: @text !important;
    }

    /* `Report Poll` button */

    button.gaoCTJ {
      color: @text;
    }

    /* ??? */

    div.happening-now-disable-prompt p {
      color: @text !important;
    }

    /* Gifting sub popup */

    div.mystery-gift-chat-banner span {
      color: @accent-color;
    }

    div.mystery-gift-chat-banner p {
      color: @text;
    }

    /* VOD metadata */

    div.tw-media-card-stat {
      color: @text;
    }

    /* DMCA warning */

    div.muted-segments-alert__content p {
      color: @text;
    }

    /* VOD time labels */

    div.vod-seekbar-time-labels p {
      color: @text !important;
    }

    /* VOD timestamp */

    div.vod-seekbar-preview-overlay__wrapper p {
      color: @text !important;
    }

    /* Seekbar segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"] {
      background: @accent-color !important;
    }

    /* Seekbar DMCA muted segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] {
      background: @red !important;
    }

    /* Seekbar buffered segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] {
      background: @overlay2 !important;
    }

    /* Recent VOD title */

    div.player-overlay-background h4 {
      color: @subtext0 !important;
    }

    a.offline-recommendations-video-card p {
      color: @text;
    }

    /* Offline screen follow panel */

    div[data-test-selector="follow-panel-overlay"] p {
      color: @text !important;
    }

    div[data-test-selector="follow-panel-overlay"] button div {
      color: @crust !important;
    }

    /* Front page warning sign */

    div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
      div.content-overlay-icon
      svg {
      color: @red;
    }

    /* Front page age warning */

    div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
      p.content-overlay-gate__allow-pointers {
      color: @red !important;
    }

    /* Front page age selector */

    div[data-a-target="player-overlay-age-gate-form"] select {
      color: @text;
    }

    /* Following usercard */

    div[data-a-target="user-card-modal"] p {
      color: @text !important;
    }

    /* PiP username */

    div.mini-overlay__title span {
      color: @text;
    }

    /* Viewercard username */

    div.viewer-card-header__display-name h4 {
      color: @accent-color !important;
    }

    /* Viewercard metadata */

    div.viewer-card-header__display-name svg:not(button svg) {
      color: @subtext1;
    }

    div.viewer-card-header__display-name p {
      color: @text !important;
    }

    /* Extension name */

    div[aria-describedby="popover-extensions-body"] h6 {
      color: @text;
    }

    /* Extension description */

    div.extensions-popover-view-layout__body p {
      color: @text;
    }

    /* Extension service buttons */

    div.extensions-popover-view-layout__body svg {
      color: @subtext0;
    }

    div.extensions-popover-view-layout__body div {
      color: @text;
    }

    .carousel-metadata {
      background: @crust;
    }
    .carousel-metadata--fadeout {
      background: @crust;
    }
    .chat-line__message-body--highlighted {
      background-color: @accent-color;
      color: @crust;
      border-color: @accent-color;
    }
    .chat-scrollable-area__message-container {
      background-color: @mantle;
    }
    .jmUA-dj {
      background-color: @mantle;
    }
    .bBpiku {
      fill: @mantle;
    }
    .ivjxmt {
      color: @crust;
    }
    .gzYMLv {
      color: @text;
    }
    .gZxBHd {
      color: @subtext0;
      &:hover {
        color: @accent-color;
      }
    }
    .eBmJxH {
      color: @text;
    }
    .ffZeRf {
      color: #fff !important;
    }
    .igzOaC {
      color: @text;
    }
    .bEHknf {
      color: #fff;
    }
    .side-nav-card__link:hover {
      background: @surface0 !important;
    }
    .dDyYOA {
      color: #fff !important;
    }
    .reward-icon__cost {
      color: #fff !important;
    }
    .kLILeB {
      color: #fff !important;
    }
    .navigation-link__active-indicator {
      background-color: @accent-color !important;
    }
    .footer {
      background: @crust;
    }
    .whispers-list-item--selected,
    .whispers-list-item:hover {
      background-color: @surface0;
    }
    .thread-header__title-bar-container--focused {
      background-color: @mantle;
    }
    .thread-header__title-bar-container {
      background: @mantle;
    }
    .thread-header__click-area:focus .thr...