catppuccin.user.css

/* ==UserStyle==
@name Twitch Catppuccin
@namespace github.com/catppuccin/userstyles/styles/twitch
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch
@version 2024.12.28
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.css
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch
@description Soothing pastel theme for Twitch
@author Catppuccin
@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") {
  @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");

  .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;
    }

    &,
    .tw-dialog-layer {
      --color-background-input-focus: @crust;
      --color-background-interactable-hover: @surface0;
      --color-background-interactable-alpha-hover: @surface0;
      --color-background-interactable-active: @surface1;
      --color-background-button-secondary-active: @surface1;
      --color-background-button-text-default: null !important;
      --color-background-pill-subtle: @subtext0;
      --color-background-placeholder: @surface0;
      --color-background-selectable: @surface0;
      --color-text-input-placeholder: @text;
      --color-border-input: @base;
      --color-border-tab: @surface0;
      --color-text-button-primary: @crust;
      --color-text-overlay: @base;
      --color-text-base: @subtext1;
      --color-text-alt: @text;
      --color-text-alt-2: @text;
      --color-text-interactable-selected: @crust;
      --color-background-alt-2: @crust;
      --color-text-tag: @text;
      --color-background-button-secondary-default: @crust;
      --color-background-button-secondary-hover: @surface0;
      --color-background-button-overlay-secondary-default: fade(@text, 13%);
      --color-background-tag-default: @mantle;
      --color-background-tag-hover: @crust;
      --color-background-float: @mantle;
      --color-background-body: @base;
      --color-background-base: @mantle;
      --color-background-alt: @mantle;
      --color-background-input: @crust;
      --color-brand-muted-cupcake: @pink;
      --color-brand-muted-mint: @green;
      --color-brand-muted-sky: @sky;
      --color-brand-muted-blush: @peach;
      --color-brand-muted-canary: @peach;
      --color-brand-muted-lavender: @lavender;
      --color-brand-muted-mustard: @yellow;
      --color-brand-muted-emerald: @green;
      --color-brand-muted-coral: @peach;
      --color-brand-muted-ocean: @blue;
      --color-brand-accent-grape: @mauve;
      --color-brand-accent-dragonfruit: @flamingo;
      --color-brand-accent-carrot: @peach;
      --color-brand-accent-sun: @peach;
      --color-brand-accent-lime: @green;
      --color-brand-accent-turquoise: @sky;
      --color-brand-accent-eggplant: @mauve;
      --color-brand-accent-wine: @flamingo;
      --color-brand-accent-slime: @green;
      --color-brand-accent-seafoam: @green;
      --color-brand-accent-cherry: @red;
      --color-brand-accent-marine: @blue;
      --color-brand-accent-seaweed: @teal;
      --color-brand-accent-fiji: @green;
      --color-brand-accent-blueberry: @blue;
      --color-brand-accent-arctic: @sky;
      --color-brand-accent-highlighter: @yellow;
      --color-brand-accent-flamingo: @flamingo;
      --color-brand-accent-ruby: @red;
      --color-brand-accent-punch: @flamingo;
      --color-brand-accent-creamsicle: @yellow;
      --color-red: @maroon;
      --color-red-darker: @red;
      --color-orange: @peach;
      --color-yellow: @yellow;
      --color-green: @green;
      --color-green-darker: @green;
      --color-blue: @blue;
      --color-prime-blue: @blue;
      --color-magenta: @flamingo;
      --color-error: @red;
      --color-warn: @yellow;
      --color-success: @green;
      --color-white: @text;
      --color-black: @crust;
      --color-info: @blue;
      --color-twitch-purple: @accent-color;
      --color-twitch-purple-4: @accent-color;
      --color-twitch-purple-5: @accent-color;
      --color-twitch-purple-6: @accent-color;
      --color-twitch-purple-7: @accent-color;
      --color-twitch-purple-8: @accent-color;
      --color-twitch-purple-9: @accent-color;
      --color-twitch-purple-10: @accent-color;
      --color-twitch-purple-11: @accent-color;
      --color-twitch-purple-12: @accent-color;
      --color-orange-7: @yellow;
      --color-orange-8: @yellow;
      --color-orange-9: @yellow;
      --color-orange-10: @yellow;
      --color-orange-11: @yellow;
      --color-orange-12: @yellow;
      --color-orange-13: @yellow;
      --color-yellow-6: @peach;
      --color-yellow-7: @peach;
      --color-yellow-8: @peach;
      --color-yellow-9: @peach;
      --color-yellow-10: @peach;
      --color-yellow-11: @peach;
      --color-yellow-12: @peach;
      --color-yellow-13: @peach;
      --color-yellow-14: @peach;
      --color-yellow-15: @peach;
      --color-green-5: @green;
      --color-green-6: @green;
      --color-green-7: @green;
      --color-green-8: @green;
      --color-green-9: @green;
      --color-green-10: @green;
      --color-green-11: @green;
      --color-green-12: @green;
      --color-green-13: @green;
      --color-green-14: @green;
      --color-green-15: @teal;
      --color-cyan-9: @sapphire;
      --color-cyan-10: @sapphire;
      --color-cyan-11: @sapphire;
      --color-cyan-12: @sapphire;
      --color-cyan-13: @sapphire;
      --color-cyan-14: @sapphire;
      --color-cyan-15: @sky;
      --color-blue-4: @blue;
      --color-blue-5: @blue;
      --color-blue-6: @blue;
      --color-blue-7: @blue;
      --color-blue-8: @blue;
      --color-blue-9: @blue;
      --color-blue-10: @sky;
      --color-blue-11: @sky;
      --color-blue-14: @sky;
      --color-magenta-5: @flamingo;
      --color-magenta-6: @flamingo;
      --color-magenta-7: @flamingo;
      --color-magenta-8: @flamingo;
      --color-magenta-9: @flamingo;
      --color-magenta-10: @flamingo;
      --color-magenta-11: @pink;
      --color-magenta-12: @pink;
      --color-magenta-14: @pink;
      --color-red-4: @accent-color;
      --color-red-5: @accent-color;
      --color-red-6: @accent-color;
      --color-red-7: @accent-color;
      --color-red-8: @accent-color;
      --color-red-9: @accent-color;
      --color-red-10: @accent-color;
      --color-red-11: @peach;
      --color-red-12: @peach;
      --color-red-14: @peach;
      --color-twitter: @blue;
      --color-facebook: @blue;
      --color-reddit: @peach;
      --color-snapchat: @yellow;
      --color-instagram: @blue;
      --color-youtube: @red;
      --color-paypal: @blue;
      --color-paypal-blue: @blue;
      --color-paypal-yellow: @yellow;
      --color-venmo: @blue;
      --color-vk: @blue;
      --color-amazon: @yellow;
      --color-background-button-text-hover: @surface0;
      --color-text-accessible-red: @accent-color;
      --color-border-input-checkbox: @subtext0;
      --color-border-input-checkbox-hover: @text;
      --color-text-label: @text;
      --color-border-input-hover: @surface0;
      --color-opac-b-14: @crust;
      --color-text-button-overlay: @text !important;
      --color-background-progress: @surface0;
      --color-background-range-overlay-fill: @text !important;
      --color-text-button-overlay-hover: @text !important;
      --color-text-tooltip: @base !important;
      --color-background-tooltip: @text !important;
      --color-hinted-grey-2: @surface0;
      --color-hinted-grey-15: @text;
      --color-background-overlay-alt: fade(@mantle, 60%);
      --color-background-button-overlay-primary-hover: @subtext1;
      --color-background-button-overlay-text-hover: @crust;
      --color-border-overlay: @surface0;
      --color-background-button-disabled: @surface0;
      --color-text-button-disabled: @subtext0;
      --color-background-toggle-handle: @text;
      --color-border-toggle: @text;
      --color-border-toggle-hover: @text;
      --color-background-toggle-checked: @mantle;
      --color-background-input-checkbox-checked-background: @crust;
    }

    --color-text-link: @accent-color;
    --color-text-link-active: darken(@accent-color, 5%);
    --color-text-link-focus: darken(@accent-color, 5%);
    --color-text-link-hover: darken(@accent-color, 5%);
    --color-text-link-visited: @accent-color;

    &,
    [class*="ScAccentRegionCssVars"] {
      --color-accent: @accent-color;
    }
    /* Hardcoded accent color */
    [style="color: rgb(160, 84, 255);"] {
      color: @accent-color !important;
    }

    /* Full screened video player title & description */

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

    /* `Pinned message` popup */

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

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

      a {
        color: @accent-color;
      }
    }

    /* `Intended for certain audiences` label */

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

    /* `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;
      }
      border-color: @accent-color;
    }

    /* `Includes paid promotion` label */

    div.disclosure-card {
      p,
      svg,
      a {
        color: @text;
      }
      background: fade(@mantle, 80%);
    }

    /* 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;
    }

    /* ??? */

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

    /* Gifting sub popup */

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

      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;
    }

    /* Usercard mod log tabs */

    .viewer-card-mod-drawer-tab--active {
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset !important;
    }

    /* Usercard header */

    .viewer-card-header__overlay {
      background-color: fade(@mantle, 60%) !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;
    }

    /* Extension overlay */

    .extension-view__iframe {
      color-scheme: light;
    }

    .carousel-metadata {
      background: @crust;
    }
    .carousel-metadata--fadeout {
      background: @crust;
    }
    .chat-line__timestamp {
      color: @subtext0;
    }
    .chat-line__message-body--highlighted {
      background-color: @accent-color;
      color: @crust;
      border-color: @accent-color;
    }
    .chat-scrollable-area__message-container {
      background-color: @mantle;
    }
    .side-nav-card__link:hover {
      background: @surface0 !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 .thread-header__title-bar-container {
      background-color: @mantle;
    }
    .navigation-link {
      color: @text;

      &:hover,
      .active {
        color: @accent-color;
      }
    }
    .navigation-link__active-indicator {
      background-color: @accent-color !important;
    }
    .chat-room {
      background: @mantle;
    }
    div.pinned-chat__highlight-card div.highlight {
      background: @mantle;
    }

    .server-message-alert {
      border-color: @red !important;
      border-left-color: @red !important;
    }

    .server-message-alert__icon {
      color: @red !important;
    }

    /* Predictions */
    .fixed-prediction-button {
      color: @mantle !important;

      .channel-points-icon svg {
        color: @mantle !important;
      }

      &.fixed-prediction-button--disabled {
        color: @text !important;

        .channel-points-icon svg {
          color: @text !important;
        }
      }
    }
    [style*="rgb(255, 255, 255)"] {
      color: @base !important;
      .channel-root,
      .channel-info-content,
      .chat-author__display-name,
      &[data-a-target="chat-message-username"],
      &.message-author__display-name {
        color: @text !important;
      }
    }
    [style="color: rgb(56, 122, 255);"] {
      color: @blue !important;
    }
    [style="color: rgb(245, 0, 155);"] {
      color: @pink !important;
    }

    /* FrankerFaceZ uptime timer */
    .ffz-il-tooltip__container {
      .tw-c-text-overlay {
        background-color: var(--color-background-overlay-alt) !important;
      }

      p,
      figure.ffz-i-flag {
        color: @text;
      }
    }

    [data-a-target="preview-card-image-link"] when (@lookup = latte) {
      --color-background-overlay-alt: fade(@text, 80%);
      .tw-media-card-stat,
      p,
      figure.ffz-i-flag {
        color: @base;
      }
    }

    /* VOD chapters */
    .preview-card-game-balloon__content .tw-interactable:hover {
      p,
      figure {
        color: @text !important;
      }
      .media-row__image-play-overlay {
        background-color: fade(@base, 80%) !important;
      }
    }

    .fixed-prediction-button--blue,
    [style*="background-color: rgb(56, 122, 255);"],
    [style*="background: rgb(56, 122, 255);"] {
      background-color: @blue !important;
    }
    .fixed-prediction-button--pink,
    [style*="background-color: rgb(245, 0, 155);"],
    [style*="background: rgb(245, 0, 155);"] {
      background-color: @pink !important;
    }

    input[disabled] {
      background-color: @surface0;
    }
    .chat-wysiwyg-input__placeholder {
      color: @subtext0;
    }

    button[aria-label="Play"],
    button[aria-label="Pause"] {
      + div svg {
        color: @subtext0;
      }
    }

    [data-a-target="video-ad-label"],
    [data-a-target="video-ad-countdown"] {
      color: @text !important;
    }

    /* Override for logo icon */
    .tw-animated-glitch-logo {
      --color-white: @crust;
    }

    /* Modals */
    .modal__content {
      color: @text;
    }

    /* Leaderboard highlighted username */
    .bits-leaderboard-expanded-top-three-entry__marquee-username,
    .channel-leaderboard-header-runner-up-entry__username,
    .bits-leaderboard-expanded-top-three-entry__username {
      div {
        color: @base !important;
      }
    }

    .channel-leaderboard-header-rotating__expand-grabber {
      background: @surface0 !important;
    }

    /* Privacy center */

    .privacy-center-root__number-item {
      background: @accent-color;
      color: @base;
    }

    .privacy-center-accordion {
      border-color: @accent-color;
    }

    .privacy-center-home-tabs {
      color: @base !important;
      &[aria-selected="true"],
      &:hover {
        color: @surface1 !important;
      }
    }

    .home-page__title-container,
    .tw-responsive-wrapper {
      svg path {
        &[fill="#fff"],
        &[fill="#FFF"] {
          fill: transparent !important;
        }
      }
    }

    .home-page__title {
      color: @base !important;
    }

    .tw-balloon {
      .tw-callout-message__title {
        color: var(--color-text-variable) !important;
      }

      .tw-callout__close div.tw-svg {
        fill: var(--color-text-variable) !important;
      }
    }

    /* Home page tips and analytics */

    .analytics-tip-card,
    .creator-home-card__icon .creator-home-card__icon-svg {
      color: @base !important;
      button {
        color: @base !important;
      }
    }

    .creator-home-welcome-title__overlay-text,
    .analytics-highlights-chart-tooltip__label--dark {
      color: @base !important;
    }

    .creator-home-focus-position {
      background: linear-gradient(@accent-color, @base);
    }

    /* Shield mode tray */

    .shield-mode-icon svg path {
      fill: @peach;
    }

    .tray-highlight,
    .chat-input-highlight,
    .shield-mode-shortcut__btn {
      border-color: @peach !important;
    }

    /* Shield mode mod view button */

    .shield-mode-shortcut__inner,
    .shield-mode-view-toggle--active {
      color: @base;
      background: @peach;
    }

    /* Channel points reward cost */

    .reward-icon__cost {
      color: @text !important;
      background: fade(@mantle, 60%) !important;
    }

    /* Directory banner */

    .directory-header-new__banner-cover {
      background: linear-gradient(0deg, @base, fade(@mantle, 25%)),
        linear-gradient(90deg, @base, fade(@mantle, 25%));
    }

    .home-video * {
      color: @text !important;
    }

    /* Cookies and Advertising Choices */

    .top-bar--pointer-enabled .consent-banner__content--gdpr-v2,
    .consent-banner {
      a,
      button {
        color: @base !important;
      }

      button:not([data-a-target="consent-banner-accept"]) {
        background-color: fade(@base, 10%);
      }
    }

    /* Mod view changelog shadow */

    .mod-view-whats-new-list--more-posts-to-see::after {
      background-image: linear-gradient(transparent, @mantle);
    }

    /* Unban requests */

    .unban-requests-tabs__load-previous {
      background-image: linear-gradient(@mantle, fade(@mantle, 0%));
    }

    .unban-requests-action-button__selected {
      color: @base !important;
      background: @accent-color;
    }

    .unban-requests-tabs__load-previous > div {
      background: @surface0;
    }

    /* Timestamps, mod actions and deleted messages */

    .targeted-mod-action,
    .message__timestamp,
    .vcml-message__timestamp,
    .chat-line__message--deleted {
      color: @subtext0;
    }

    /* Suspicious user banner in usercard */

    .low-trust-user-banner div {
      color: @text !important;
    }

    /* Emote preview */

    .chat-input__preview__text {
      color: @base !important;
    }

    /* Twitch logo in onboarding screen */

    .onboarding-modal-splash-screen__container {
      svg path[fill="#fff"] {
        fill: transparent !important;
      }
    }

    /* Stream category subtitle in onboarding screen */

    .onboarding-modal-main-list-live-channels-live-channel-card__sub-title {
      color: @subtext0 !important;
    }

    /* Subscriptions */

    .tier-display {
      color: @mauve;
    }

    .tier-display__prime {
      color: @blue;
    }

    .sub-badge-progress p,
    .sub-badge-progress__all-badges--text,
    .expired-sub-message {
      color: @subtext0 !important;
    }

    /* Clips timestamp */

    .player-controls,
    .clips-player-seekbar-container {
      .tw-balloon p {
        color: @text !important;
      }
    }

    .sunlight-modal__content {
      color: @text !important;
    }

    .tw-loading-spinner {
      color: @text;
    }

    .player-overlay-background {
      div,
      div p {
        color: @text !important;
      }
      & when (@lookup = latte) {
        div,
        div p {
          color: @base !important;
        }
      }
    }

    .vertical-selector a:hover {
      background: darken(@accent-color, 5%);
    }

    /* Chat popouts */

    div[data-test-selector="chat-private-callout-queue__callout-container"] {
      .tw-callout__close > button {
        color: @base !important;
      }
      div[data-a-target="tw-progress-bar-animation"] {
        background: @base;
      }
      div.tw-progress-bar {
        background: fade(@base, 10%);
      }
      button .tw-svg {
        fill: @base;
      }
    }

    /* SUBtember subscribe button */

    .gift-subtember-button {
      background: @teal;
    }

    .player-controls when (@lookup = latte) {
      --color-text-button-overlay: @base !important;
      --color-background-range-overlay-fill: @base !important;
      --color-text-button-overlay-hover: @mantle !important;
    }

    /* Clips watch live prompt */

    .watch-live-prompt {
      h5 {
        color: @text !important;
      }
      h6 {
        color: @subtext0 !important;
      }
    }

    .clips-top-nav-user {
      .clips-top-nav-user__username,
      .tw-svg {
        color: @text !important;
      }
    }
  }
}

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

  #catppuccin(@lookup, @accent) {
    @text: @catppuccin[@@lookup][@text];
    @green: @catppuccin[@@lookup][@green];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @surface0: @catppuccin[@@lookup][@surface0];
    @accent-color: @catppuccin[@@lookup][@@accent];

    article button {
      --color-fill-current: @base !important;
      --color-background-button-overlay: @base !important;
      --color-background-button-overlay-hover: @base !important;
      --color-background-button-icon-overlay-hover: fade(@base, 13%);
      --color-background-button-overlay-primary-hover: fade(
        @base,
        13%
      ) !important;
    }

    .simplebar-content {
      background-color: @mantle;
    }

    .scrollable-area--suppress-scroll-x > .simplebar-scroll-content,
    .scrollable-area--suppress-scroll-x
      > .simplebar-scroll-content
      > .simplebar-content {
      background-color: @base;
    }

    .sunlight-page .simplebar-scroll-content .simplebar-content {
      background-color: @base;
    }
    .info_box_row {
      background: @crust;
    }
    .info_box_row_label {
      color: @text;
    }
    .video-card-thumbnail__video-state-overlay {
      color: @text !important;
      background: fade(@mantle, 80%) !important;
    }

    /* Twitch alerts */

    .alerts-home-main-wrapper {
      color: @text !important;
    }

    .alerts-home-scrollable-area,
    .alert-boxes-section-border-container {
      color: @text !important;
      .simplebar-content {
        background: @mantle !important;
      }
      .alert-set-card {
        background: @crust !important;
      }
    }

    /* Analytics */

    .top-stats-tab--active {
      color: @accent-color !important;
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset;
      .top-stats-tab__title {
        color: @accent-color !important;
      }
    }

    .top-stats-tab:hover {
      box-shadow:
        inset 0 -2px 0 @accent-color,
        0 4px 6px -4px @accent-color;
      background: @base !important;
    }

    /* Stream Manager */

    .stream-manager--page-view {
      .mosaic-tile .simplebar-content,
      .stream-manager-edit-mode-item,
      .stream-manager-edit-mode-stat-item {
        background: @mantle !important;
      }
    }

    /* Autohost / managed channels list */

    .dashboard-centered-page {
      .simplebar-scroll-content,
      .simplebar-content {
        background: transparent !important;
      }

      .autohost-list-item--hovered {
        color: @text;
        background: @base;

        button svg path {
          fill: @text !important;
        }
      }
    }

    /* Research */

    .time-to-stream-tab--active {
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset;
    }

    /* Collection thumbnails */

    .collection-preview-image__wrapper {
      color: @text !important;
      background: linear-gradient(
        90deg,
        fade(@mantle, 0%),
        fade(@mantle, 100%) 75%
      );
    }

    /* AutoMod shadow */

    .automod-level-controls__categories--bottom::after {
      background-image: linear-gradient(fade(@mantle, 0%), @mantle);
    }

    /* Tables */

    .tw-table,
    .tw-table-heading {
      border-color: @surface0;
      background: @crust;
    }

    /* Achievements & activity page */

    .ach-sb,
    .activity-page__scrollable .simplebar-content {
      background: @mantle !important;
    }

    /* Clips player background */

    .clips-player-container {
      background: @crust;
    }

    .clmgr-table__row:hover {
      background: @surface0 !important;
    }

    /* Announcements button */

    .announcements-icon--green svg {
      fill: @green !important;
    }
  }
}

@-moz-document domain("dev.twitch.tv"), url-prefix("https://discuss.dev.twitch.com/embed/topics")
{
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: light) {
    :root {
      #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];

    --ctp-rosewater: @rosewater;
    --ctp-flamingo: @flamingo;
    --ctp-pink: @pink;
    --ctp-mauve: @mauve;
    --ctp-red: @red;
    --ctp-maroon: @maroon;
    --ctp-peach: @peach;
    --ctp-yellow: @yellow;
    --ctp-green: @green;
    --ctp-teal: @teal;
    --ctp-sky: @sky;
    --ctp-sapphire: @sapphire;
    --ctp-blue: @blue;
    --ctp-lavender: @lavender;
    --ctp-text: @text;
    --ctp-subtext1: @subtext1;
    --ctp-subtext0: @subtext0;
    --ctp-overlay2: @overlay2;
    --ctp-overlay1: @overlay1;
    --ctp-overlay0: @overlay0;
    --ctp-surface2: @surface2;
    --ctp-surface1: @surface1;
    --ctp-surface0: @surface0;
    --ctp-base: @base;
    --ctp-mantle: @mantle;
    --ctp-crust: @crust;

    &,
    body {
      color: @text !important;
      background: @base;
      --primary-medium: @text;
      --primary-low: @surface0;
      scrollbar-color: @surface0 @mantle;
    }

    a.btn,
    button.btn {
      border-color: @accent-color;
      background: @accent-color !important;
      color: @base !important;
    }

    a.btn:hover,
    button.btn:hover {
      background: fade(@accent-color, 80%) !important;
    }

    /* Recent announcements */
    .topics-list .topic-list-item .main-link a {
      color: @accent-color;
    }

    .topic-created-at,
    .topic-last-posted-at,
    .topic-like-count,
    .topic-post-count {
      color: @subtext0 !important;
    }

    /* Header */
    .nav__container,
    .dev-top-nav {
      background: @crust !important;

      .tw-link,
      .dev-top-nav__nav-items-container {
        color: @text !important;
        background: @crust !important;
      }
      .online {
        border-color: @crust !important;
      }
      a.btn.light {
        background: fade(@accent-color, 10%) !important;
        color: @text !important;
      }
      .nav__links a {
        color: @text;

        &:hover {
          color: @subtext0;
        }
        &.active {
          color: @accent-color;
          border-color: @accent-color;
        }
      }
      .nav__logo svg path {
        fill: @text;
      }
    }

    /* Footers */
    .footer,
    .dev-footer,
    .subscribe-footer {
      h5,
      p,
      a,
      div {
        color: @text !important;
      }
      a:hover {
        color: @accent-color !important;
      }

      svg path {
        fill: @text !important;
      }

      background: @crust;
    }

    .bright-cta {
      * {
        color: @mantle !important;
      }
      background: @accent-color;
    }
    .content-alternate-2 {
      background: @base;
    }

    .sandbox-tab {
      color: @text !important;
    }

    .why-twitch ul li {
      background: @base;
      border-color: @surface0 !important;
    }

    .sandbox-tab.active {
      color: @accent-color !important;
      border-color: @accent-color !important;
    }

    .hero,
    .extension-cta,
    .subscribe-footer {
      background: @mantle;
    }

    thead tr th {
      border-color: @surface0;
      background: @mantle;
    }

    tbody tr td {
      border-color: @surface0;
    }

    tbody tr:nth-child(odd) {
      background: @base !important;
    }
    tbody tr:nth-child(even) {
      background: @mantle !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr {
      color: @text !important;
      border-color: @surface0 !important;
    }

    .right-code {
      p {
        color: @subtext0;
      }
    }

    blockquote {
      border-color: @accent-color;
      background: @mantle;
    }

    .content,
    .main,
    .topics-list,
    .doc-content {
      background: @base;
      border-color: @base !important;
      a {
        color: @accent-color;
      }
      border-bottom-color: @surface0 !important;
      border-image: none;
      -webkit-border-image: none;
    }

    code {
      border-color: @accent-color !important;
      background: fade(@accent-color, 5%) !important;
      color: @text !important;
    }

    /* Code */
    .right-code pre,
    pre.highlight,
    pre {
      border-color: @mantle !important;
      background: @mantle !important;
      code {
        background: transparent !important;
        color: @text !important;
      }
    }

    /* Pills */
    .pill-new {
      color: @base !important;
      background: @accent-color !important;
    }
    .pill-beta {
      color: @base !important;
      background: @yellow !important;
    }

    /* Navbar */
    .sidebar {
      background: @mantle !important;
      dl {
        border-color: @base !important;
      }
      dt a,
      dl dd a {
        color: @text !important;
      }
      dl dd a.active-highlight {
        color: @accent-color !important;
      }
      dl dd a.active-highlight::before {
        border-left-color: @accent-color !important;
      }
      dt a:hover {
        background: @base !important;
      }

      /* Search */

      input {
        color: @text;
        &::placeholder {
          color: @subtext0;
        }
        &:focus {
          background: @crust !important;
          box-shadow: 0 0 3px 1px fade(@accent-color, 70%);
          color: @text;
        }
      }

      .search-icon svg path {
        fill: @text !important;
      }

      .algolia-autocomplete {
        .algolia-docsearch-suggestion--category-header {
          color: @text !important;
          background: @mantle !important;
          border-color: @base !important;
        }

        .algolia-docsearch-suggestion--highlight {
          background: @accent-color !important;
          color: @base !important;
        }

        .algolia-docsearch-suggestion--content {
          background: @mantle !important;
        }

        .algolia-docsearch-suggestion--title {
          color: @text !important;
        }

        .algolia-docsearch-suggestion--text {
          color: @subtext0 !important;
        }

        .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
          .algolia-docsearch-suggestion--title,
          .algolia-docsearch-suggestion--text {
            background: @crust !important;
            .algolia-docsearch-suggestion--highlight {
              background: @base !important;
            }
          }
        }
      }
    }

    ul.grid li.story {
      h4 a,
      a.btn {
        color: @text !important;
      }
      a {
        color: @accent-color !important;
      }
      .story__links a {
        color: @base !important;
      }

      border-color: @surface0;
    }

    .submission .relative .outer {
      svg path {
        fill: @text;
      }
      button {
        border-color: @accent-color !important;
      }

      .tag button {
        background: @accent-color !important;
        border-color: @accent-color !important;
      }

      .author {
        color: @subtext0 !important;
      }
      background: @mantle;
    }
  }
}

/* prettier-ignore */
@catppuccin: {
  @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
  @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
  @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
  @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
}

// vim:ft=less