/* ==UserStyle==
@name Lobsters Catppuccin
@namespace github.com/catppuccin/userstyles/styles/lobste.rs
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lobste.rs
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alobste.rs
@description Soothing pastel theme for Lobsters
@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://userstyles.catppuccin.com/lib/lib.less";

@-moz-document domain("lobste.rs") {
  html:has(head > link[rel="stylesheet"][href^="/assets/system-"]) {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  html:has(head > link[rel="stylesheet"][href^="/assets/light-"]) {
    #catppuccin(@lightFlavor);
  }

  html:has(head > link[rel="stylesheet"][href^="/assets/dark-"]) {
    #catppuccin(@darkFlavor);
  }

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

    --color-bg: @base;

    --color-fg: @text;
    --color-fg-shape: @surface2;

    --color-tag-bg: fade(@yellow, 20%);
    --color-tag-border: fade(@yellow, 20%);

    --color-lobsters-tag-special-bg: fade(@red, 30%);
    --color-lobsters-tag-special-border: fade(@red, 30%);

    --color-tag-media-bg: fade(@blue, 20%);
    --color-tag-media-border: fade(@blue, 30%);

    --color-tag-meta-bg: @surface0;
    --color-tag-meta-border: @surface2;

    --color-bg-target: fade(@accent, 20%);

    --color-fg-affirmative: @green;
    --color-fg-accent: @accent;
    --color-fg-author: @blue;

    --color-fg-contrast-7-5: @blue;

    --color-fg-link: @blue;
    --color-fg-link-visited: @lavender;

    --color-fg-contrast-4-5: @subtext0;
    --color-fg-contrast-5: @subtext1;
    --color-fg-contrast-6: @subtext1;
    --color-fg-contrast-10: @text;
    --color-fg-contrast-13: @text;

    --color-box-bg: @mantle;
    --color-button-bg: @mantle;
    --color-button-bg-shaded: @surface0;
    --color-box-border: @surface0;
    --color-box-border-focus: @accent;
    --color-box-bg-shaded: @mantle;

    --color-mobile-story-liner-bg: @base;
    --color-mobile-story-comments-bubble-fill: @surface1;

    --color-mobile-story-comments-bubble-fill-zero: @surface0;

    --color-table-header-bg: @surface0;
    --color-table-header-border: @surface1;
    --color-table-row-bg-even: @mantle;
    --color-table-row-bg-odd: @crust;
    --color-table-row-border: @base;

    --color-flash-bg-success: fade(@green, 30%);
    --color-fg-negative: @red;

    hr {
      color: @surface2;
    }

    #logo {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="@{accent}" d="M16 16H0V0h16z"/><path fill="@{base}" d="M3.5 13.45v-.63c0-.11 0-.1.1-.11.23-.02.46-.03.69-.07.46-.08.67-.31.74-.78.02-.14.03-.29.03-.43V4.69c0-.18-.02-.36-.04-.53-.03-.31-.23-.5-.52-.61-.27-.1-.55-.11-.83-.13h-.15v-.65c0-.07.02-.09.09-.09h5.24c.07 0 .1.01.1.09-.01.19 0 .37 0 .56v.08c-.14.01-.28 0-.41.02-.2.03-.4.06-.59.11-.35.11-.53.35-.57.68q-.03.225-.03.45v6.39c0 .27.03.54.06.8.03.29.22.48.49.58.23.09.48.11.72.12.63.02 1.25.01 1.86-.15.88-.22 1.47-.77 1.76-1.64.09-.28.13-.57.2-.86.01-.02.03-.06.05-.06h.66c-.02 1.2.02 2.4 0 3.6z"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
      background-color: transparent !important;
      &::after {
        background: none;
      }
    }
  }
}