Reddit Nord Theme by gonlad-x

/* ==UserStyle==
@name Reddit 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("reddit.com") {
  :root:not(.theme-dark) .theme-rpl,
  :root:not(.theme-dark).theme-rpl,
  :root:not(.theme-dark) .theme-beta,
  :root:not(.theme-dark).theme-beta,
  .theme-light {
    #catppuccin(@lightFlavor, @accentColor);
  }

  :root:not(.theme-light) .theme-rpl,
  :root:not(.theme-light).theme-rpl,
  :root:not(.theme-light) .theme-beta,
  :root:not(.theme-light).theme-beta,
  .theme-dark {
    #catppuccin(@darkFlavor, @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;
      }
    }

    /* BETA */
    --color-pizzaRed: @red !important;
    --color-global-brand-orangered: @peach !important;
    --color-global-focus: @surface1 !important;
    --color-interactive-content-disabled: @subtext0 !important;
    --color-interactive-background-disabled: fade(@surface2, 70%) !important;
    --color-interactive-pressed: @surface2 !important;
    --color-neutral-content: @text !important;
    --color-neutral-content-disabled: @subtext0 !important;
    --color-neutral-content-weak: @subtext0 !important;
    --color-neutral-content-strong: @text !important;
    --color-global-white: @crust !important;
    --color-neutral-background: @base !important;
    --color-neutral-background-selected: @surface0 !important;
    --color-neutral-background-weak: @mantle !important;
    --color-neutral-background-medium: @base !important;
    --color-neutral-background-strong: @crust !important;
    --color-neutral-background-hover: @surface0 !important;
    --color-neutral-border: @surface0 !important;
    --color-neutral-border-medium: @surface0 !important;
    --color-neutral-border-weak: @surface0 !important;
    --color-neutral-border-strong: @surface2 !important;
    --color-primary: @accent-color !important;
    --color-primary-hover: lighten(@accent-color, 10) !important;
    --color-primary-visited: @lavender !important;
    --color-primary-background: @accent-color !important;
    --color-primary-background-hover: darken(@accent-color, 5%) !important;
    --color-primary-background-selected: darken(@accent-color, 5%) !important;
    --color-primary-onBackground: @base !important;
    --color-primary-onBackground-selected: @crust !important;
    --color-secondary: @subtext0 !important;
    --color-secondary-hover: @subtext1 !important;
    --color-secondary-weak: @subtext0 !important;
    --color-secondary-onBackground: @text !important;
    --color-secondary-background: @mantle !important;
    --color-secondary-background-hover: @surface1 !important;
    --color-secondary-background-selected: @surface1 !important;
    --color-secondary-plain: @subtext0 !important;
    --color-secondary-plain-hover: @subtext1 !important;
    --color-danger-background: @red !important;
    --color-danger-background-disabled: fadeout(@red, 80) !important;
    --color-danger-background-hover: fadeout(@red, 2) !important;
    --color-danger-onBackground: @text !important;
    --color-danger-content: @red !important;
    --color-danger-content-default: @crust;
    --color-danger-content-hover: darken(@red, 2) !important;
    --color-success-content: @green !important;
    --color-success-hover: darken(@green, 2) !important;
    --color-success-onBackground: @crust;
    --color-success-background: @green !important;
    --color-success-background-hover: darken(@green, 2) !important;
    --color-warning-content: @yellow !important;
    --color-warning-content-hover: darken(@yellow, 2) !important;
    --color-warning-onBackground: @base !important;
    --color-warning-background: @yellow !important;
    --color-warning-background-hover: darken(@yellow, 2) !important;
    --color-upvote-content: @accent-color !important;
    --color-upvote-disabled: @subtext0 !important;
    --color-upvote-onBackground: @text !important;
    --color-upvote-background: @base !important;
    --color-upvote-background-hover: darken(@accent-color, 5%) !important;
    --color-upvote-background-disabled: @base !important;
    --color-downvote-content: @text !important;
    --color-downvote-content-weak: @text !important;
    --color-downvote-disabled: @subtext0 !important;
    --color-downvote-onBackground: @text !important;
    --color-downvote-background: @base !important;
    --color-downvote-background-hover: darken(@blue, 5%) !important;
    --color-downvote-background-disabled: @mantle !important;
    --color-tone-1: @text !important;
    --color-tone-2: @subtext0 !important;
    --color-tone-3: @overlay2 !important;
    --color-tone-4: @surface0 !important;
    --color-tone-5: @surface1 !important;
    --color-tone-6: @surface2 !important;
    --color-tone-7: @base !important;
    --color-avatar-gradient: @accent-color !important;
    --color-transparent-background-hover: fadeout(@surface0, 70) !important;
    --color-opacity-50: fadeout(@base, 50) !important;
    --color-online: @accent-color !important;
    --color-favorite: @accent-color !important;
    --color-brand-background: @accent-color !important;
    --color-brand-background-hover: darken(@accent-color, 5%) !important;
    --color-global-orangered: @accent-color !important;
    --color-action-upvote: @accent-color !important;
    --color-action-downvote: @blue;

    --shreddit-color-wordmark: @accent-color;
    #reddit-logo {
      circle[fill="#FF4500"] {
        fill: @accent-color !important;
      }
      path[fill="#FFF"] {
        fill: @crust !important;
      }
    }

    /* normal stuff */

    &,
    div[class^="subredditvars"] {
      --color-online: @green !important;
      --newCommunityTheme-actionIcon: @subtext0 !important;
      --newCommunityTheme-actionIconAlpha20: fadeout(@crust, 20) !important;
      --newCommunityTheme-actionIconAlpha50: fadeout(@crust, 20) !important;
      --newCommunityTheme-actionIconShaded80: @subtext0 !important;
      --newCommunityTheme-actionIconTinted80: @subtext1 !important;
      --newCommunityTheme-active: @accent-color !important;
      --newCommunityTheme-activeAlpha10: fadeout(@crust, 20) !important;
      --newCommunityTheme-activeAlpha20: fadeout(@crust, 20) !important;
      --newCommunityTheme-activeAlpha50: fadeout(@crust, 20) !important;
      --newCommunityTheme-activeLight60: @accent-color !important;
      --newCommunityTheme-activeShaded80: @accent-color !important;
      --newCommunityTheme-activeShaded90: @accent-color !important;
      --newCommunityTheme-activeTinted05: @text !important;
      --newCommunityTheme-banner-backgroundColor: @accent-color !important;
      --newCommunityTheme-banner-iconColor: @accent-color !important;
      --newCommunityTheme-body: @mantle !important;
      --newCommunityTheme-bodyAlpha50: @surface0 !important;
      --newCommunityTheme-bodyAlpha70: @surface1 !important;
      --newCommunityTheme-bodyAlpha80: @surface2 !important;
      --newCommunityTheme-bodyFade: @subtext0 !important;
      --newCommunityTheme-bodyShaded80: @mantle !important;
      --newCommunityTheme-bodyText: @text !important;
      --newCommunityTheme-bodyTextAlpha03: @mantle !important;
      --newCommunityTheme-bodyTextAlpha20: @surface1 !important;
      --newCommunityTheme-bodyTextShaded20: @surface0 !important;
      --newCommunityTheme-bodyTextTinted20: @subtext0 !important;
      --newCommunityTheme-bodyTinted50: @overlay1 !important;
      --newCommunityTheme-bodyTinted80: @overlay0 !important;
      --newCommunityTheme-button: @text !important;
      --newCommunityTheme-buttonAlpha05: fadeout(@crust, 20) !important;
      --newCommunityTheme-buttonAlpha10: fadeout(@crust, 20) !important;
      --newCommunityTheme-buttonAlpha20: fadeout(@crust, 20) !important;
      --newCommunityTheme-buttonAlpha40: @subtext0 !important;
      --newCommunityTheme-buttonAlpha50: @subtext1 !important;
      --new...