/* ==UserStyle==
@name Modrinth Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/modrinth
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/modrinth
@version 2026.04.13
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/modrinth/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amodrinth
@description Soothing pastel theme for Modrinth
@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== */

@import "https://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";

@-moz-document domain("modrinth.com") {
  .light,
  .light-mode,
  .light-properties,
  html {
    #catppuccin(@lightFlavor);
  }

  .dark,
  .dark-mode,
  .oled-mode,
  :root[data-theme="dark"] {
    #catppuccin(@darkFlavor);
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    // TODO: Use Catppuccin palette colors? `fade()`-ed?
    @shadow: if(@flavor = latte, #dbdfef, #010409);

    #css-variables() !important;

    // homepage
    .blob-demonstration,
    .blob-demonstration::after {
      background: linear-gradient(
        0deg,
        fade(@accent, 20%),
        fade(@base, 10%)
      ) !important;
    }
    .logo-banner path {
      fill: @accent !important;
    }
    .logo-banner > svg > g > rect {
      display: none;
    }

    [tabindex="0"]:focus-visible,
    a:focus-visible,
    button:focus-visible {
      outline-color: @accent;
    }

    .BDVE3s9MFQttmbMUeYup-2 a b,
    .BDVE3s9MFQttmbMUeYup-2 a strong {
      color: @accent;
    }

    // dropdown icon
    .multiselect__select::before {
      border-color: @text transparent transparent;
      color: @text;
    }
    // header button hover
    .btn-wrapper:hover {
      a,
      button {
        --tw-brightness: none !important;
      }
    }
    .nuxt-loading-indicator {
      background: @accent !important;
    }

    #css-variables() {
      --text-color: @text;
      --color-base: @text;
      --color-bg: @crust;
      --color-secondary: @subtext0;
      --color-ad-raised: @surface2;
      --color-ad: @surface1;
      --color-ad-highlight: @teal;
      --color-brand: @accent;
      --color-brand-green: @green;
      --color-button-bg-active: @overlay0;
      --color-button-bg-selected: fade(@accent, 25%);
      --color-button-bg-hover: @surface1;
      --color-button-bg: @surface0;
      --color-button-text-hover: @text;
      --color-button-text: @subtext1;
      --color-button-text-active: @text;
      --color-button-text-selected: @accent;
      --color-divider: @surface0;
      --color-divider-dark: @surface2;
      --color-heading: @text;
      --color-icon: @text;
      --color-link-active: @sapphire;
      --color-link-hover: @sky;
      --color-link: @blue;
      --color-raised-bg: @base;
      --color-blue: @sapphire;
      --color-special-blue: @sapphire;
      --color-orange: @peach;
      --color-special-orange: @peach;
      --color-purple: @mauve;
      --color-special-purple: @mauve;
      --color-red: @red;
      --color-gray: @subtext0;
      --color-special-gray: @subtext0;
      --color-green: @green;
      --color-text: @subtext1;
      --color-text-dark: @text;
      --color-text-inactive: @overlay1;
      --color-brand-highlight: fade(@accent, 25%);
      --color-brand-inverted: @shadow;
      --color-table-alternate-row: @crust;
      --color-table-border: @overlay0;
      --color-contrast: @text;
      --color-accent-contrast: @mantle;
      --color-red-highlight: fade(@red, 25%);
      --color-orange-highlight: fade(@peach, 25%);
      --color-green-highlight: fade(@accent, 25%);
      --color-blue-highlight: fade(@blue, 25%);
      --color-purple-highlight: fade(@mauve, 25%);
      --color-gray-highlight: fade(@text, 25%);
      --color-red-bg: fade(@red, 20%);
      --color-orange-bg: fade(@peach, 25%);
      --color-green-bg: fade(@accent, 25%);
      --color-blue-bg: fade(@blue, 25%);
      --color-purple-bg: fade(@mauve, 25%);
      --color-brand-shadow: @accent;
      --color-warning-banner-side: @red;
      --color-warning-banner-bg: fade(@red, 25%);
      --color-warning-banner-text: @text;
      --color-platform-fabric: @rosewater;
      --color-platform-quilt: @mauve;
      --color-platform-forge: @lavender;
      --color-platform-neoforge: @peach;
      --color-platform-liteloader: @sky;
      --color-platform-bukkit: @peach;
      --color-platform-bungeecord: @yellow;
      --color-platform-folia: @green;
      --color-platform-paper: @red;
      --color-platform-purpur: @mauve;
      --color-platform-spigot: @yellow;
      --color-platform-velocity: @teal;
      --color-platform-waterfall: @blue;
      --color-platform-sponge: @yellow;
      --color-platform-ornithe: @teal;
      --color-platform-bta-babric: @green;
      --color-platform-legacy-fabric: @lavender;
      --color-platform-nilloader: @pink;
      --color-button-border: fade(@crust, 20%);
      --color-tooltip-bg: @surface1;
      --color-tooltip-text: @subtext1;
      --landing-green-label: @accent;
      --landing-green-label-bg: fade(@accent, 10%);
      --landing-blue-label: @blue;
      --landing-color-heading: @text;
      --landing-color-subheading: @subtext0;
      --landing-border-color: @overlay0;
      --landing-blue-label-bg: fade(@blue, 10%);
      --landing-border-gradient: linear-gradient(
        to bottom right,
        @overlay0,
        @surface2
      );
      --brand-gradient-strong-bg: linear-gradient(
        270deg,
        fade(@accent, 5%) 10%,
        fade(@accent, 15%)
      );
      --brand-gradient-border: fade(@accent, 10%);

      --surface-1: @crust;
      --surface-1-5: mix(@crust, @mantle, 50%);
      --surface-2: @mantle;
      --surface-2-5: mix(@mantle, @base, 50%);
      --surface-3: @base;
      --surface-4: @surface0;
      --surface-5: @surface2;

      --color-text-primary: @text;
      --color-text-default: @subtext1;
      --color-text-tertiary: @subtext0;
    }
  }
}