/* ==UserStyle==
@name InvokeAI Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/invokeai
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/invokeai
@version 2025.09.06
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/invokeai/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvokeai
@description Soothing pastel theme for InvokeAI
@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 regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

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

    :root,
    [data-theme]:root {
      --accent-color-dim: lighten(@accent, -10%);
      --accent-color: @accent;
      --accent-color-bright: lighten(@accent, 10%);
      --accent-color-hover: var(--accent-color-bright);
      --root-bg-color: @mantle;
      --background-color: @base;
      --background-color-light: @surface0;
      --background-color-secondary: @base;
      --text-color: @text;
      --text-color-secondary: @subtext0;
      --subtext-color: @subtext1;
      --subtext-color-bright: @subtext0;
      --border-color: @surface1;
      --border-color-light: @surface2;
      --tab-color: @accent;
      --tab-list-bg: @accent;
      --btn-delete-image: @red;
      --status-good-color: @green;
      --status-good-color-glow: lighten(@green, 10%);
      --border-color-invalid: @red;
      --box-shadow-color-invalid: lighten(@red, 5%);
      --tab-panel-bg: var(--background-color-light);
      --tab-hover-color: var(--background-color-secondary);
      --tab-list-text: white;
      --prompt-bg-color: var(--background-color-light);
      --switch-bg-color: var(--background-color-secondary);
      --btn-base-color: var(--background-color-light);
      --btn-base-color-hover: var(--background-color-secondary);
      --destructive-color: @red;
      --slider-color: @lavender;
      --slider-mark-color: var(--slider-color);
      --switch-bg-active-color: var(--accent-color);
      --console-icon-button-bg-color: var(--btn-base-color);
      --console-icon-button-bg-color-hover: var(--btn-base-color-hover);
      --console-bg-color: var(--background-color-light);
      --svg-color: var(--text-color);
      --btn-load-more: var(--background-color-light);
      --tab-list-text-inactive: var(--text-color-secondary);
    }

    .invokeai-style-cache-1m5jnul {
      --number-input-color: var(--text-color-secondary) !important;
    }

    .invoke-btn,
    .invokeai__button[data-active],
    .site-header-right-side .lang-select-btn[data-selected="true"],
    .site-header-right-side .lang-select-btn[data-selected="true"]:hover,
    button.chakra-button.invokeai__icon-button[data-selected="true"] {
      --svg-color: var(--root-bg-color);
      color: var(--root-bg-color) !important;
    }

    .invokeai-style-cache-vs1g06,
    .invokeai-style-cache-vs1g06:hover {
      background-color: var(--background-color-light);
    }
  }
}