styles/chess.com/catppuccin.user.less

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

@var select highlightColor "Highlight" ["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("chess.com") {
  :root {
    #catppuccin(@lightFlavor);
  }

  :root.dark-mode {
    #catppuccin(@darkFlavor);
  }

  #catppuccin(@flavor) {
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];
    @accent: @catppuccin[@@flavor][@@accentColor];

    @highlight: @catppuccin[@@flavor][@@highlightColor];

    color-scheme: if(@flavor = latte, light, dark);

    ::selection {
      background-color: fade(@accent, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    --color-bg-opaque: @mantle;
    --color-bg-opaque-lighter: @base;
    --color-bg-subtle: @surface1;
    --color-bg-subtler: @surface0;
    --color-bg-input: @mantle;
    --color-bg-speech: @surface0;
    --color-bg-secondary: @surface0;
    --color-bg-tertiary: @surface1;
    --color-bg-quaternary: @surface2;
    --color-gray-100: @overlay1;
    --color-text-speech: @text;

    --color-icon-default: @subtext0;
    --color-icon-default-hovered: @subtext1;
    --color-icon-bolder: @subtext1;
    --color-icon-boldest: @text;

    --color-text-boldest: @text;
    --color-text-bolder: @text;
    --color-text-default: @text;
    --color-text-default-hovered: @subtext1;
    --color-text-subtle: @subtext1;
    --color-text-placeholder: @subtext0;
    --color-text-inverse: @crust;
    --color-text-link: @blue;
    --color-text-link-hovered: @sky;

    --color-border-default: @surface1;
    --color-border-subtle: @overlay2;
    --color-border-selected: @accent;

    --color-green-300: @accent;
    --color-red-300: @red; /* Danger */
    --color-red-400: @red; /* Danger */
    --color-green-400: @green; /* Success */

    /* Links */
    --color-blue-200: @sapphire;
    --color-blue-300: @sky;
    --color-blue-400: @blue;

    --color-classification-blunder: @red;
    --color-classification-miss: @maroon;
    --color-classification-mistake: @peach;
    --color-classification-inaccuracy: @yellow;
    --color-classification-best: @green;
    --color-classification-excellent: @green;
    --color-classification-good: @teal;
    --color-classification-great: @blue;
    --color-classification-brilliant: @sapphire;
    --color-classification-book: @rosewater;

    --color-icon-win: @green;
    --color-text-win: @green;
    --color-icon-draw: @subtext0;
    --color-text-draw: @subtext0;
    --color-bg-draw: @subtext0;
    --color-border-draw: var(--color-transparent-white-10);
    --color-icon-loss: @red;
    --color-text-loss: @red;
    --color-border-loss: @red;

    --color-icon-bullet: @peach;
    --color-icon-blitz: @yellow;

    body {
      --theme-background-color: @base !important;
      --theme-background-image: none;

      --globalBackground: @mantle !important;
      --globalBackgroundOpaque: @mantle !important;
      --globalSecondaryBackground: @crust !important;
      --globalTertiaryBackground: @surface0 !important;
      --globalAccentBackground: @accent !important;
      --globalSecondaryAccentBackground: @surface0 !important;
      --globalSiteBackground: @base !important;
      --globalBorder: @surface0 !important;
      --globalColorThemeFull: @text !important;
      --globalColorThemeHigh: @text;
      --globalColorThemeMid: @overlay2 !important;
      --globalColorThemeLow: @overlay0 !important;
      --globalColorThemeLower: @base !important;
      --globalColorThemeLink: @sapphire !important;
      --globalColorThemeBlueToMid: @text;
      --globalOverlayBackground: @base !important;
      --globalColorWin: @green !important;
      --globalColorDraw: @accent !important;
      --globalColorLoss: @red !important;

      --labelBgColor: @surface1;
      --activeLabelColor: @accent;
      --buttonBgColor: @text;

      --nodeColor: @text;
      --nodeBackground: @yellow;
    }

    /* Home page */
    .index-title,
    .index-info-item-counter {
      color: @text !important;
    }
    .index-info-item {
      color: @subtext0 !important;
    }
    .index-suggestion-title,
    .index-posts-title,
    .index-post-name {
      color: @text;
    }
    .index-quote-author,
    .index-quote-body,
    .index-post-author {
      color: @subtext1;
    }

    .promo-title,
    .promo-rank {
      color: @text;
    }
    .promo-subtitle {
      color: @subtext1;
    }

    .home-username-link {
      color: @text;
    }

    /* Lessons page */
    .level-title {
      color: @text;
    }
    .level-desc,
    .course-header-description strong {
      color: @subtext1;
    }

    .lessons-search-filter {
      .form-dropdown-chevron,
      .form-dropdown-control-label,
      .form-dropdown-value {
        color: @subtext1;
      }
    }

    /* Play lesson video */
    .lesson-status {
      background-color: @text;
    }

    /* More page */
    .landing-header {
      color: @text;
    }

    /* UI */
    .v5-title-label {
      color: @text;
    }
    .v5-tabs-list,
    .v5-tabs-list-dark {
      --borderColor: @surface2;
      --tabTitleColor: @subtext0;
      --tabHoverTitleColor: @subtext1;
      --tabSelectedBorderColor: @subtext1;
      --tabSelectedTitleColor: @text;
    }
    .ui_v5-input-component {
      --borderColor: @surface0;
      --borderFocus: @surface1;
      --bgColor: @base;
      --textColor: @text;
      --secondaryTextColor: @subtext1;
    }
    .ui_v5-input-group-component {
      --inputIconColor: @subtext0;
    }
    .ui_v5-button-component {
      --boxShadow: none;
      --boxShadowHover: none;
      box-shadow: none;

      &.ui_v5-button-basic {
        --basicColor: @text !important;
        --basicHoverColor: @text !important;
        --basicBgColor: @surface1 !important;
        --basicBghover: @surface2 !important;
        --borderColor: @surface0 !important;
      }

      &.ui_v5-button-primary {
        color: @crust !important;
        background-color: @accent;

        &:hover {
          background-color: darken(@accent, 5%);
          box-shadow: none;
        }
      }
    }
    .ui_v5-select-component {
      --borderColor: @surface0;
      --borderFocus: @surface1;
      --bgColor: @base;
      --textColor: @text;
      --arrowColor: @subtext0;
    }
    .ui_pagination-item-component {
      --paginationColor: @text;
      --paginationBgColor: @surface1;
      --paginationBgHover: @surface2;
      --paginationColorMuted: @base;
      --paginationBgColorMuted: @overlay1;
    }

    .nav-link-text {
      color: @text !important;
    }
    .nav-menu-area:last-of-type .icon-font-chess {
      color: @mantle !important;
    }
    .nav-link-main-design,
    .nav-link-main-link {
      color: @text !important;

      &:hover {
        color: @subtext1 !important;
      }
    }

    #tb {
      .toolbar-action-icon {
        color: @subtext1;
      }

      .toolbar-action-wrapper:hover .toolbar-action-icon {
        color: @text !important;
      }
    }

    #sb {
      color: @subtext0;

      &.open {
        background-color: @mantle;
      }

      .nav-action:hover {
        background-color: @surface0;
        color: @text;
      }

      .nav-panel-shade,
      .nav-panel-theme-bg,
      .nav-action.has-popover + .nav-popover {
        background: @mantle !important;
      }

      .nav-popover.dark .btn-link {
        color: @text;
      }
      .nav-menu-area:last-of-type {
        color: @text !important;
      }
      .nav-popover.nav-search {
        --search-bg-color: @surface0;
      }
    }

    .nav-popover.dark {
      background: @mantle;
    }

    .section-heading-component .back-link-component {
      color: currentcolor;
    }
    .section-heading-black {
      background-color: @surface1;
      color: @text;
    }
    .nav-section-header-component {
      background-color: @base;
      color: @text;
    }

    .popover-friends-header,
    .popover-friends-content,
    .popover-messages-header,
    .popover-messages-content,
    .popover-settings-header,
    .popover-settings-content {
      background: @mantle;
    }

    /* Buttons */

    .selector-button-button,
    .time-selector-button-button {
      background: @surface0;

      &:hover {
        background: @surface1;
      }
    }

    .cc-switch-checkbox:not(.cc-switch-readonly):checked
      + .cc-switch-label
      .cc-switch-button {
      background-color: @surface1;
    }

    .cc-button-component,
    .cc-button-primary {
      --bgColor: @accent;
      --bgColorHover: darken(@accent, 5%);
      --textColor: @crust;
      --textColorHover: @crust;
      box-shadow: none;
    }

    .cc-button-primary,
    .cc-button-monetization {
      --borderBottomLine: darken(@accent, 2%);
      --borderBottomLineHover: darken(@accent, 4%);
    }

    .cc-button-secondary {
      --bgColor: @surface0;
      --bgColorHover: darken(@surface0, 5%);
      --iconColor: @text;
      --iconColorHover: @text;
      --textColor: @text;
      --textColorHover: @text;
    }

    .cc-button-danger {
      --bgColor: @red;
      --bgColorHover: darken(@red, 5%);
      color: @crust;
    }

    .v5-section-shadow,
    .v5-section-shadow-hover {
      --linkHoverBackground: @surface1;
      --linkBoxShadow: 0 0.5rem 0 0 @surface2;
    }

    /* Game */

    .user-username-component,
    .cc-user-username-white,
    .cc-user-rating-white {
      color: @text;
      text-shadow: none;
    }

    .user-tagline-rating.user-tagline-white {
      color: @overlay1;
    }

    .clock-component.clock-black {
      background: @surface0;
    }
    .clock-component.clock-white {
      background: @text;
    }

    .highlight {
      background: @highlight !important;
      opacity: 1 !important;
    }
    .hover-square rect {
      stroke: @overlay1 !important;
    }
    .hint {
      background-color: @overlay1;
      filter: drop-shadow(0 0 1px @crust);
    }
    .capture-hint {
      background-color: @overlay1;
      filter: drop-shadow(0 0 1px @crust);
      z-index: -1;
    }

    /* Review/evaluation */

    .evaluation-bar-bar {
      .evaluation-bar-black {
        background-color: @surface2;
      }
      .evaluation-bar-draw {
        background-color: @overlay1;
      }
      .evaluation-bar-white {
        background-color: @text;
      }
    }

    .review-rating-white {
      background-color: @text;
    }
    .review-rating-black {
      background-color: @surface0;
      color: @text;
    }

    .overview-view-new-game-button {
      background-color: @surface1;
    }

    .arrow {
      fill: @overlay0 !important;
    }

    g#winner [fill="#dbac16"] {
      fill: @yellow !important;
    }

    /* Game over */

    .modal-game-over-header-grey,
    .modal-game-over-header-black-win,
    .game-over-header-component {
      background-color: @base;
      color: @text;
    }

    .modal-game-over-user-winner-active,
    .modal-game-over-user-crown {
      background: @lavender;
    }

    .game-over-review-button-label {
      color: @crust;
      text-shadow: none;
    }

    /* Ads */

    .placeholder-ad-upgrade {
      background-color: @accent;
    }
    .placeholder-ad-link {
      color: @crust;
    }

    .modal-trial-component.modal-trial-special-offer {
      .modal-trial-header-background {
        background-color: @accent;
      }
    }

    .coach-nudges-modal-component {
      background: @mantle;
    }

    .ready-to-play-banner-component {
      background-color: @mantle;

      .ready-to-play-banner-title,
      .ready-to-play-banner-list {
        color: @text;
      }
    }

    .notifications-links-trial .nav-link-text {
      color: @crust !important;
    }

    /* Misc */

    /* GM/IM/etc badge */
    --color-bg-chesstitle: @accent;
    .course-author-title,
    .course-header-author-title,
    .form-dropdown-short-title,
    .index-chess-title,
    .leaderboard-index-chess-title,
    .player-header-title,
    .category-headline-chess-title {
      color: @crust !important;
    }

    .tooltip-body {
      background: @surface0;
      color: @text;

      &::after {
        border-top-color: @surface0 !important;
      }
    }
    .popup-component {
      background-color: @surface0;
      color: @text;

      &.popup-left .popup-arrow {
        border-left-color: @surface0;
      }
      &.popup-right .popup-arrow {
        border-right-color: @surface0;
      }
    }

    /* Error banner */
    .alerts-alert {
      color: @crust;
    }

    div.mode-selection-button-selected {
      > .mode-selection-button-description {
        color: @surface1;
      }

      > .mode-selection-button-mode {
        color: @mantle;
      }
    }

    .status-component {
      background-color: @accent;
      color: @crust;
    }

    .navigation-footer-page-component,
    .navigation-footer-platform-icon {
      color: @subtext1;
      text-shadow: none;
    }

    .download-button-button {
      color: @crust !important;
    }

    .table-hover tbody tr:hover {
      background-color: @surface2;
    }

    /* Board */
    @board: escape(
      '<svg width="1600" height="1600" viewBox="0 0 1600 1600" xmlns="http://www.w3.org/2000/svg"><path fill="@{accent}" d="M200 0v200h200V0Zm200 200v200h200V200Zm200 0h200V0H600Zm200 0v200h200V200Zm200 0h200V0h-200Zm200 0v200h200V200Zm200 0h200V0h-200zm0 200v200h200V400zm0 200h-200v200h200zm0 200v200h200V800Zm0 200h-200v200h200zm0 200v200h200v-200zm0 200h-200v200h200zm-200 0v-200h-200v200zm-200 0H800v200h200zm-200 0v-200H600v200zm-200 0H400v200h200zm-200 0v-200H200v200zm-200 0H0v200h200zm0-200v-200H0v200zm0-200h200V800H200Zm0-200V600H0v200zm0-200h200V400H200Zm0-200V200H0v200zm200 200v200h200V600Zm200 0h200V400H600Zm200 0v200h200V600Zm200 0h200V400h-200Zm0 200v200h200V800Zm0 200H800v200h200zm-200 0V800H600v200zm-200 0H400v200h200z"/><path fill="@{surface0}" d="M0 0v200h200V0Zm200 200v200h200V200Zm200 0h200V0H400zm200 0v200h200V200Zm200 0h200V0H800Zm200 0v200h200V200Zm200 0h200V0h-200zm200 0v200h200V200Zm0 200h-200v200h200zm0 200v200h200V600Zm0 200h-200v200h200zm0 200v200h200v-200Zm0 200h-200v200h200zm0 200v200h200v-200zm-200 0h-200v200h200zm-200 0v-200H800v200zm-200 0H600v200h200zm-200 0v-200H400v200zm-200 0H200v200h200zm-200 0v-200H0v200zm0-200h200v-200H200Zm0-200V800H0v200zm0-200h200V600H200Zm0-200V400H0v200zm200 0h200V400H400zm200 0v200h200V600Zm200 0h200V400H800Zm200 0v200h200V600Zm0 200H800v200h200zm0 200v200h200v-200Zm-200 0H600v200h200zm-200 0V800H400v200z"/></svg>'
    );

    #board-play-computer,
    .fade-in-overlay {
      background-image: url("data:image/svg+xml,@{board}");
    }

    .coordinate-light {
      fill: @accent;
    }
    .coordinate-dark {
      fill: @surface0;
    }

    /*
      The "Tatiana" piece set.

      Author: sadsnake1
      License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/)
      Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana
    */

    @bishop: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M25.004 5.75c-1.683 0 -3.047 1.099 -3.047 2.453 0 0.503 0.194 0.993 0.554 1.405 -2.54 3.306 -8.781 9.8 -8.985 16.336 -0.087 3.375 3.933 8.723 4.107 9.26 0.174 0.535 1.333 0.933 3.268 1.176 -1.33 4.59 -10.098 -1.079 -14.147 3.37l1.842 4.5c5.573 -3.122 9.967 3.15 16.409 -3.422v0.001c6.44 6.57 10.835 0.299 16.407 3.421l1.842 -4.5c-4.05 -4.448 -12.817 1.22 -14.148 -3.37 1.936 -0.243 3.095 -0.64 3.269 -1.177 0.174 -0.536 4.193 -5.884 4.107 -9.26 -0.205 -6.535 -6.445 -13.028 -8.986 -16.335 0.36 -0.412 0.554 -0.902 0.554 -1.405 0 -1.354 -1.363 -2.452 -3.046 -2.453z" fill="%BG%" stroke="%BORDER%" stroke-linejoin="round" stroke-width="1.5"/><path class="st32" d="M25.004 21.106c-0.699 0 -1.02 0.342 -1.02 1.025v2.453h-2.388q-0.96 0 -0.96 0.931 0 0.932 0.96 0.932h2.389V28.9c0 0.683 0.35 1.025 1.019 1.025 0.67 0 1.02 -0.342 1.02 -1.025v-2.453h2.475c0.612 0 0.932 -0.31 0.932 -0.932 0 -0.62 -0.32 -0.931 -0.932 -0.931h-2.476V22.13c0 -0.683 -0.35 -1.025 -1.019 -1.025" opacity=".5"/><path d="M25.004 5.75c-0.827 0 -1.62 0.27 -2.194 0.75 3.937 0.194 4.045 2.262 3.072 3.475 1.102 2.394 2.82 4.2 4.161 6.431 0 0 11.604 21.888 -13.358 17.253 0 0 0.63 1.553 2.03 2.28 0.7 0.364 1.164 0.396 2.185 0.441 1.324 0.08 5.334 0.537 6.306 0.69 1.937 7.056 13.332 0.012 15.127 4.93l0.921 -2.249c-3.726 -4.452 -9.996 1.063 -14.057 -3.31 1.38 -0.214 2.392 -0.603 2.954 -0.898 0 -0.143 4.422 -6.065 4.331 -9.6 -0.204 -6.534 -6.443 -13.026 -8.985 -16.334 0.36 -0.412 0.554 -0.904 0.554 -1.407 0 -1.354 -1.364 -2.452 -3.047 -2.452" opacity=".4" style="opacity:.25;paint-order:normal"/><path d="M23.797 6.898c-0.714 0.32 -1.265 0.95 -1.001 1.779 0.084 0.32 0.314 0.507 0.465 0.79a0.9 0.9 0 0 1 -0.143 0.73c-1.576 1.946 -5.566 6.411 -7.414 10.599 -0.704 1.735 -1.565 3.746 -1.396 5.648 0.475 3.413 3.388 7.392 3.388 7.392s-2.053 -4.357 -2.246 -7.021c-0.032 -7.08 5.8 -12.424 8.301 -17.1 -0.379 -1.577 -1.172 -1.464 0.046 -2.817M9.01 43.191c0 -0.058 -1.345 -3.262 -1.345 -3.262 2.92 -2.56 8.37 -0.3 11.229 -0.952 -4.286 0.847 -7.639 -0.51 -10.069 1.09z" fill="#fff" opacity=".25"/></svg>';
    @king: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><g stroke-width="1.04"><path d="M3281.9 -2090.7c6.361 0 11.51 -0.56 11.51 -1.249l1.342 -6.525c11.336 -7.821 6.689 -19.658 -3.35 -19.615 -2.083 0.01 -4.893 0.53 -6.264 1.338l-0.876 -4.1h3.895c1.17 0.13 1.77 -1.6 1.77 -2.668 0 -1.067 -0.592 -2.667 -1.77 -2.667h-3.388v-3.092c0 -0.97 -1.804 -1.455 -2.89 -1.455s-2.892 0.485 -2.892 1.455v3.092h-3.388c-1.18 0 -1.77 1.6 -1.77 2.667 0 1.068 0.6 2.799 1.77 2.668h3.895l-0.876 4.1c-1.37 -0.807 -4.18 -1.328 -6.264 -1.338 -10.038 -0.043 -14.685 11.794 -3.35 19.615l1.342 6.525c0 0.689 5.15 1.246 11.51 1.249h0.023z" fill="%BG%" stroke="%BORDER%" stroke-width="1.559" transform="matrix(.96234 0 0 .9617 -3133.3 2054.9)"/><path d="M3287.7 -2126.4c-0.55 -0.01 -0.968 0.097 -0.986 0.185 0.738 0.752 3.757 4.344 -3.738 3.792 -0.902 0.506 0.15 7.329 0.891 9.249 0 0 1.22 -0.547 2.05 -0.977 14.764 -4.253 12.707 12.372 3.903 15.299 -5.255 0.795 -13.114 1.12 -18.294 0.35l0.413 2.538c6.744 0.603 6.596 0.464 15.112 0.59 4.2 2.842 -11.95 3.965 -16.7 3.396 0.092 0.263 23.03 1.225 23.058 0.036l1.342 -6.56c11.335 -7.821 6.69 -19.657 -3.348 -19.615 -0.876 0 -1.877 0.103 -2.849 0.271l-3.411 1.065 -0.876 -4.099h3.894c1.027 0.294 1.743 -1.58 1.77 -2.668 0.151 -2.251 -1.43 -2.704 -2.228 -2.852z" opacity=".4" style="opacity:.25" transform="matrix(.96234 0 0 .9617 -3133.3 2054.9)"/><path d="M3282.9 -2129.8c-0.942 -0.253 -2.572 -0.194 -3.17 0.55 -0.044 0.056 -0.034 0.215 -0.033 0.296l0.028 3.576h-3.453c-0.296 0 -0.787 -0.016 -0.97 0.088 -0.37 0.206 -0.717 0.94 -0.75 1.79 -0.027 0.689 0.5 1.896 0.877 1.93 0.237 0.02 0.576 -0.029 1.182 -0.01 -1.884 -0.7 -1.398 -3.503 -0.2 -3.451l3.63 -0.028 -0.046 -3.143c-0.014 -0.97 0.65 -1.471 1.737 -1.471 0.427 0 1.428 0.04 1.924 0.191 -0.519 -0.301 -0.757 -0.316 -0.757 -0.316zm-3 10.6 -0.77 3.661c-1.37 -0.807 -4.11 -1.766 -6.193 -1.775 -9.415 -0.753 -14.415 10.655 -3.24 18.389l1.349 6.62 0.108 0.015 -0.452 -6.716c-10.51 -7.743 -6.864 -17.498 3.174 -17.455 2.084 0.01 4.254 0.978 5.625 1.785l0.908 -6.87z" fill="#fff" opacity=".25" style="paint-order:normal" transform="matrix(.96234 0 0 .9617 -3133.3 2054.9)"/></g></svg>';
    @knight: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="m22.803 5.768 -2.495 0.468 -0.995 3.425 -2.169 -1.423 -1.427 0.424 0.76 4.951 -9.702 14.98c-0.358 5.956 1.871 6.017 6.143 7.648 4.973 -7.02 10.689 -5.017 15.371 -10.324 0.563 6.622 -15.845 9.2 -13.646 18.275l27.09 0.058c3.811 -16.778 1.02 -27.75 -14.607 -33.796z" style="clip-rule:evenodd;fill-rule:evenodd;fill:%BG%;stroke-linejoin:round;stroke-width:1.5;stroke:%BORDER%"/><path d="M21.619 17.718c-0.45 -0.01 -0.835 0.285 -1.09 0.609 -0.414 0.533 -0.63 1.178 -0.748 1.82 -0.044 0.278 -0.094 0.558 -0.077 0.838 0.026 0.098 0.144 0.063 0.217 0.044 0.632 -0.118 1.29 -0.128 1.907 -0.316 0.447 -0.14 0.801 -0.464 1.034 -0.84 0.233 -0.36 0.333 -0.773 0.471 -1.168 0.061 -0.138 0.045 -0.315 -0.096 -0.407 -0.232 -0.16 -0.513 -0.242 -0.772 -0.356 -0.254 -0.097 -0.505 -0.23 -0.788 -0.224z" style="clip-rule:evenodd;fill-rule:evenodd;opacity:.5"/><path d="m22.803 5.768 -1.247 0.234 3.807 5.702c19.045 8.125 18.868 24.79 6.86 32.524l9.51 0.021c3.81 -16.778 1.023 -27.75 -14.604 -33.796z" style="clip-rule:evenodd;fill-rule:evenodd;opacity:.25;"/><path d="M16.586 9.211c0.146 1.706 0.874 4.43 0.571 4.836l-9.61 14.73c-0.323 3.61 1.066 4.888 1.342 4.832 -0.087 0.01 -1.418 -2.128 -0.53 -4.647l9.67 -14.883 -1.432 -4.858c-0.14 -0.132 0.159 0.072 -0.01 -0.01z" style="clip-rule:evenodd;fill-rule:evenodd;fill:#fff;opacity:.25;"/><path d="M27.442 25.617s2.02 -2.624 1.99 -3.823 1.065 5.553 -1.303 6.363c-0.098 -0.413 0.272 -1.709 0.198 -1.993 -0.32 -1.224 -0.884 -0.417 -0.885 -0.547z" style="clip-rule:evenodd;fill-rule:evenodd;opacity:.25;stroke-width:.26458px;stroke:#000"/><path d="M28.727 28.005c-2.834 6.232 -14.734 8.14 -13.325 15.542 -1.072 -6.537 13.176 -8.88 13.325 -15.542" style="fill:#fff;opacity:.25"/><path d="M10.763 28.109s-0.047 2.386 -1.561 2.185c0 0 -1.834 -1.016 1.561 -2.185" style="fill:#000;opacity:.5"/></svg>';
    @rook: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><g stroke-width="1.079"><path d="m3329.1-2128.5-.643 2.608-3.389.194-.589-2.593-4.87 1.003v7.87c.846 2.112 1.968 2.466 3.027 3.027h2.162l-3.148 17.25c-4.314 2.456-5.284 3.57-5.284 8.502h31.034c0-4.933-.97-6.046-5.283-8.502l-3.148-17.25h2.161c1.06-.56 2.182-.915 3.027-3.027v-7.87l-4.87-1.003-.589 2.592-3.388-.194-.643-2.608h-2.784z" style="fill:%BG%;stroke-width:1.6185;stroke:%BORDER%" transform="matrix(.91877 0 0 .93482 -3036.3 1998.5)"/><path d="M3341.8-2127.8c4.172 12.439-14.069 10.218-21.331 9.793 0 0 .085 1.6 2.246 1.604h2.197-.036l-.092.503c13.852-1.045 11.329 3.048 13.773 15.557l-16.717.578-.111.613-1.051.613c5.434.595 23.899-3.102 22.257 7.89h4.543c.262-5.094-1.767-6.688-5.284-8.503l-2.962-17.53c.3-.194.96 0 1.922-.161 1.28-.213 2.624-1.483 3.08-2.748v-7.554z" opacity=".4" style="opacity:.25" transform="matrix(.91877 0 0 .93482 -3036.3 1998.5)"/><path d="m14.384 10.418 2.172-.444c-1.21.475-1.62 3.045-2.104 6.36-.146.994-.069-5.916-.069-5.916zm8.544-.935-.573 2.4 1.948-2.407zm9.372.28-.5 2.303 1.411-2.108zM19.07 20.609l-2.738 15.027L19.818 20.7zM11.444 43.23c-.013-.043-.031-1.011.152-1.914.209-1.023.696-2.006 1.489-2.64 1.46-1.168 2.686-1.828 2.825-1.832-2.104 1.627-4.052 3.62-4.466 6.386" opacity=".25" fill="#fff"/></g></svg>';
    @pawn: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M25 11.961c-3.39 0-6.032 2.505-6.032 5.818a6.2 6.2 0 0 0 1.976 4.514c-3.896 1.692-3.644 2.322-3.236 6.479h3.776c-1.66 8.227-9.02 6.338-8.862 15.47h24.755c.16-9.132-7.201-7.242-8.861-15.47h3.776c.408-4.157.66-4.787-3.237-6.48a6.2 6.2 0 0 0 1.976-4.513c0-3.313-2.64-5.818-6.031-5.818z" style="fill:%BG%;stroke-linejoin:round;stroke-width:1.5;stroke:%BORDER%"/><path d="M24.999 11.96a6.5 6.5 0 0 0-1.702.226c8.042 1.26 6.731 8.948 2.355 10.106 1.836.664 3.7 1.606 4.342 2.453.58.767.142 2.534.142 2.534l-12.555.204.128 1.02 5.694.021c1.711 8.098 14.126 6.628 13.968 15.718.158-9.09-7.118-7.642-8.829-15.74h3.752c.309-4.98 1.019-3.604-3.238-6.21a6.2 6.2 0 0 0 1.976-4.513c0-3.314-2.643-5.82-6.033-5.82z" style="fill:#000;opacity:.25"/><path d="M23.738 12.775c-.301-.106-4.279 1.245-3.986 5.297.12 1.658 1.217 3.176 1.38 3.141l.493.559s-.946-1.995-.946-3.7c0-3.157 3.064-5.3 3.064-5.3zm-1.571 16.489c-1.968 8.064-8.231 6.47-8.75 14.133v-.016c1.76-6.292 7.394-5.506 9.136-14.063z" style="fill:#fff;opacity:.25;"/><path d="M22.256 22.461c-1.397.672-3.813 1.37-3.942 2.788l1.761-.404c.144-.32.641-1.406 2.21-2.392z" style="fill:#fff;opacity:.25"/></svg>';
    @queen: '<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><g stroke-width="1.026"><path d="M3475.9-2129.1a4.37 4.37 0 0 0-4.373 4.367c0 1.98 1.34 3.71 3.258 4.216v11.158l-5.362-7.492c.485-.72.746-1.568.746-2.435a4.37 4.37 0 0 0-4.375-4.367 4.37 4.37 0 0 0-4.373 4.367c.065 2.14 1.935 3.816 4.328 4.365l.88 4.236 1.76 8.474 2.765 5.191 1.12 6.47c0 .801 4.318 1.45 9.647 1.45s9.648-.649 9.648-1.45l1.12-6.47 2.765-5.19 1.76-8.475.879-4.236c2.393-.55 4.264-2.225 4.328-4.365a4.37 4.37 0 0 0-4.373-4.367 4.37 4.37 0 0 0-4.374 4.367c0 .867.26 1.715.745 2.435l-5.361 7.493v-11.16a4.37 4.37 0 0 0 3.257-4.215 4.37 4.37 0 0 0-4.373-4.367 4.37 4.37 0 0 0-4.374 4.367c0 1.425.702 2.759 1.873 3.573l-3.52 10.364-3.52-10.364a4.36 4.36 0 0 0 1.874-3.573 4.37 4.37 0 0 0-4.374-4.367z" fill="%BG%" stroke="%BORDER%" stroke-width="1.538" transform="matrix(.98735 0 0 .96296 -3412.8 2056)"/><path d="M3498.4-2124c.95.986 3.299 5.321-2.077 8.733l-5.191 13.456c-6.962 1.255-14.694 1.553-20.32-.42l1.905 3.125c6.593 2.295 17.806.487 17.806.487-1.074 3.57-2.579 6.848-5.665 9.425 0 0 4.52.12 6.612-1.376l1.57-6.797 2.765-5.19 1.76-8.474.879-4.236c2.393-.55 4.264-2.225 4.328-4.365a4.37 4.37 0 0 0-4.372-4.368" opacity=".4" style="opacity:.25" transform="matrix(.98735 0 0 .96296 -3412.8 2056)"/><path d="M3475.9-2129.1c-.265 0-.524.028-.776.073 3.03 1.854 2.41 6 1.605 7.374l5.192 8.659-.776-1.801-2.744-6.364a4.36 4.36 0 0 0 1.874-3.574 4.37 4.37 0 0 0-4.375-4.367m12 0c-.265 0-.524.028-.776.073 4.562 1.318 1.776 6.566.654 6.989l1.238 10.482v-8.961a4.37 4.37 0 0 0 3.257-4.216 4.37 4.37 0 0 0-4.373-4.367m-22.2 5.4q-.398.002-.776.073c3.285 1.245 3.06 4.466 2.378 6.646l7.388 7.575-5.361-7.492a4.36 4.36 0 0 0 .745-2.435 4.37 4.37 0 0 0-4.374-4.367" opacity=".25" transform="matrix(.98735 0 0 .96296 -3412.8 2056)" fill="#010101"/><path d="M6.887 12.406s-3.273 2.607.121 5.31c-.219-.55-.906-3.763-.121-5.31m10.466-5.489c-.359-.156-3.303 2.198-1.152 5.148.1-.477-.836-3.765 1.152-5.148m12.144-.096c-.358-.156-3.505 2.176-1.307 5.2-.168-.553-.719-4.232 1.307-5.2M9.75 18.858l2.653 12.572 2.755 5.045 1.086 6.177.703.225-1.086-6.452-2.804-4.97zm29.72-6.74c-.36-.157-3.474 2.265-1.293 5.245-.21-.984-1.033-4.355 1.292-5.246" opacity=".25" fill="#fff"/></g></svg>';

    #piece(@piece, @type) {
      @raw: if(
        @type = "white",
        replace(
          replace(
            replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @text),
            "#fff",
            @mantle
          ),
          "#000",
          @text
        ),
        replace(
          replace(
            replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @surface2),
            "#fff",
            @text
          ),
          "#000",
          @mantle
        )
      );
      @svg: escape(@raw);
      @result: url("data:image/svg+xml,@{svg}");
    }

    --theme-board-style-image: url("data:image/svg+xml,@{board}");
    --theme-board-style-highlight-color: @highlight;

    --theme-piece-set-wp: #piece(@pawn, "white")[];
    --theme-piece-set-wn: #piece(@knight, "white")[];
    --theme-piece-set-wr: #piece(@rook, "white")[];
    --theme-piece-set-wb: #piece(@bishop, "white")[];
    --theme-piece-set-wq: #piece(@queen, "white")[];
    --theme-piece-set-wk: #piece(@king, "white")[];
    --theme-piece-set-bp: #piece(@pawn, "black")[];
    --theme-piece-set-bn: #piece(@knight, "black")[];
    --theme-piece-set-bb: #piece(@bishop, "black")[];
    --theme-piece-set-br: #piece(@rook, "black")[];
    --theme-piece-set-bq: #piece(@queen, "black")[];
    --theme-piece-set-bk: #piece(@king, "black")[];

    .board-popover-component {
      background-color: @surface0;
    }

    .piece {
      /* Black */
      &.bp {
        background-image: #piece(@pawn, "black")[] !important;
      }
      &.bn {
        background-image: #piece(@knight, "black")[] !important;
      }
      &.bb {
        background-image: #piece(@bishop, "black")[] !important;
      }
      &.br {
        background-image: #piece(@rook, "black")[] !important;
      }
      &.bk {
        background-image: #piece(@king, "black")[] !important;
      }
      &.bq {
        background-image: #piece(@queen, "black")[] !important;
      }

      /* White */
      &.wp {
        background-image: #piece(@pawn, "white")[] !important;
      }
      &.wn {
        background-image: #piece(@knight, "white")[] !important;
      }
      &.wb {
        background-image: #piece(@bishop, "white")[] !important;
      }
      &.wr {
        background-image: #piece(@rook, "white")[] !important;
      }
      &.wk {
        background-image: #piece(@king, "white")[] !important;
      }
      &.wq {
        background-image: #piece(@queen, "white")[] !important;
      }
    }

    .chessboard-pkg-move-list-component .dark-row {
      background-color: @surface1;
    }
  }
}

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