feat(lichess): add stylePieces option (#1096)

* feat(lichess): Add option to disable styling pieces * chore(lichess): Update version
catppuccin · Jul 21, 2024 · 3f0e04d · 3f0e04d
1 parent 69497f0
commit 3f0e04d
Showing 1 changed file with 81 additions and 78 deletions.
diff --git a/styles/lichess/catppuccin.user.css b/styles/lichess/catppuccin.user.css
@@ -2,7 +2,7 @@
 @name Lichess Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/lichess
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess
-@version 0.0.2
+@version 0.0.3
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.css
 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alichess
 @description Soothing pastel theme for Lichess
@@ -13,6 +13,7 @@
 @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 checkbox stylePieces "Style Pieces" 1
 ==/UserStyle== */
 
 @-moz-document domain("lichess.org") {
@@ -284,88 +285,90 @@
       );
       background-image: url("data:image/svg+xml,@{svg}") !important;
     }
-    .is2d .pawn {
-      #piece(@f, @s) {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><path d="M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" stroke="@{s}" fill="@{f}" stroke-width="1.5" stroke-linecap="round"/></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
+    & when (@stylePieces = 1) {
+      .is2d .pawn {
+        #piece(@f, @s) {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><path d="M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" stroke="@{s}" fill="@{f}" stroke-width="1.5" stroke-linecap="round"/></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.black {
+          #piece(@base, @text);
+        }
+        &.white {
+          #piece(@text, @base);
+        }
       }
-      &.black {
-        #piece(@base, @text);
+      .is2d .bishop {
+        #piece(@f, @s) {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="none" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g fill="@{f}" stroke-linecap="butt"><path d="M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5" stroke="@{s}" stroke-linejoin="miter"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.black {
+          #piece(@base, @text);
+        }
+        &.white {
+          #piece(@text, @base);
+        }
       }
-      &.white {
-        #piece(@text, @base);
+      .is2d .knight {
+        #piece(@f, @s) {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="none" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21" fill="@{f}"/><path d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3" fill="@{f}"/><path d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0m5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5" fill="@{f}" stroke="@{s}"/><path d="m24.55 10.4-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34s-5.79-6.64-9.19-7.16z" fill="@{s}" stroke="none"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.black {
+          #piece(@base, @text);
+        }
+        &.white {
+          #piece(@text, @base);
+        }
       }
-    }
-    .is2d .bishop {
-      #piece(@f, @s) {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="none" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g fill="@{f}" stroke-linecap="butt"><path d="M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5" stroke="@{s}" stroke-linejoin="miter"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
-      }
-      &.black {
-        #piece(@base, @text);
-      }
-      &.white {
-        #piece(@text, @base);
-      }
-    }
-    .is2d .knight {
-      #piece(@f, @s) {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="none" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21" fill="@{f}"/><path d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3" fill="@{f}"/><path d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0m5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5" fill="@{f}" stroke="@{s}"/><path d="m24.55 10.4-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34s-5.79-6.64-9.19-7.16z" fill="@{s}" stroke="none"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
-      }
-      &.black {
-        #piece(@base, @text);
-      }
-      &.white {
-        #piece(@text, @base);
-      }
-    }
-    .is2d .rook {
-      #piece(@f, @s) {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill-rule="evenodd" fill="@{f}" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 39h27v-3H9zm3.5-7 1.5-2.5h17l1.5 2.5zm-.5 4v-4h21v4z" stroke-linecap="butt"/><path d="M14 29.5v-13h17v13z" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M14 16.5 11 14h23l-3 2.5zM11 14V9h4v2h5V9h5v2h5V9h4v5z" stroke-linecap="butt"/><path d="M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23" fill="none" stroke="@{s}" stroke-width="1" stroke-linejoin="miter"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
-      }
-      &.black {
-        #piece(@base, @text);
-      }
-      &.white {
-        #piece(@text, @base);
-      }
-    }
-    .is2d .king {
-      #piece(@f, @s) {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="@{f}" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22.5 11.63V6" stroke-linejoin="miter"/><path d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5" fill="@{f}" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10z" fill="@{f}"/><path d="M20 8h5" stroke-linejoin="miter"/><path d="M32 29.5s8.5-4 6.03-9.65C34.15 14 25 18 22.5 24.5l.01 2.1-.01-2.1C20 18 9.906 14 6.997 19.85c-2.497 5.65 4.853 9 4.853 9" stroke="@{s}"/><path d="M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0" stroke="@{s}"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
-      }
-      &.black {
-        #piece(@base, @text);
+      .is2d .rook {
+        #piece(@f, @s) {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill-rule="evenodd" fill="@{f}" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 39h27v-3H9zm3.5-7 1.5-2.5h17l1.5 2.5zm-.5 4v-4h21v4z" stroke-linecap="butt"/><path d="M14 29.5v-13h17v13z" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M14 16.5 11 14h23l-3 2.5zM11 14V9h4v2h5V9h5v2h5V9h4v5z" stroke-linecap="butt"/><path d="M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23" fill="none" stroke="@{s}" stroke-width="1" stroke-linejoin="miter"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.black {
+          #piece(@base, @text);
+        }
+        &.white {
+          #piece(@text, @base);
+        }
       }
-      &.white {
-        #piece(@text, @base);
-      }
-    }
-    .is2d .queen {
-      &.black {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill-rule="evenodd" fill="@{base}" stroke="@{text}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g stroke="@{text}"><circle fill="@{text}" cx="6" cy="12" r="2.75"/><circle fill="@{text}" cx="14" cy="9" r="2.75"/><circle fill="@{text}" cx="22.5" cy="8" r="2.75"/><circle fill="@{text}" cx="31" cy="9" r="2.75"/><circle fill="@{text}" cx="39" cy="12" r="2.75"/></g><path fill="@{text}" d="M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5z" stroke-linecap="butt"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z" stroke-linecap="butt"/><path d="M11 38.5a35 35 1 0 0 23 0" fill="none" stroke-linecap="butt"/><path d="M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0m-23 3a35 35 1 0 0 24 0" fill="none" stroke="@{text}"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
+      .is2d .king {
+        #piece(@f, @s) {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="@{f}" fill-rule="evenodd" stroke="@{s}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22.5 11.63V6" stroke-linejoin="miter"/><path d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5" fill="@{f}" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10z" fill="@{f}"/><path d="M20 8h5" stroke-linejoin="miter"/><path d="M32 29.5s8.5-4 6.03-9.65C34.15 14 25 18 22.5 24.5l.01 2.1-.01-2.1C20 18 9.906 14 6.997 19.85c-2.497 5.65 4.853 9 4.853 9" stroke="@{s}"/><path d="M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0" stroke="@{s}"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.black {
+          #piece(@base, @text);
+        }
+        &.white {
+          #piece(@text, @base);
+        }
       }
-      &.white {
-        @svg: escape(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="@{text}" fill-rule="evenodd" stroke="@{base}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0m16.5-4.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M41 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0M16 8.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M33 9a2 2 0 1 1-4 0 2 2 0 1 1 4 0"/><path d="M9 26c8.5-1.5 21-1.5 27 0l2-12-7 11V11l-5.5 13.5-3-15-3 15-5.5-14V25L7 14z" stroke-linecap="butt"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z" stroke-linecap="butt"/><path d="M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0" fill="none"/></g></svg>'
-        );
-        background-image: url("data:image/svg+xml,@{svg}") !important;
+      .is2d .queen {
+        &.black {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill-rule="evenodd" fill="@{base}" stroke="@{text}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g stroke="@{text}"><circle fill="@{text}" cx="6" cy="12" r="2.75"/><circle fill="@{text}" cx="14" cy="9" r="2.75"/><circle fill="@{text}" cx="22.5" cy="8" r="2.75"/><circle fill="@{text}" cx="31" cy="9" r="2.75"/><circle fill="@{text}" cx="39" cy="12" r="2.75"/></g><path fill="@{text}" d="M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5z" stroke-linecap="butt"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z" stroke-linecap="butt"/><path d="M11 38.5a35 35 1 0 0 23 0" fill="none" stroke-linecap="butt"/><path d="M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0m-23 3a35 35 1 0 0 24 0" fill="none" stroke="@{text}"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
+        &.white {
+          @svg: escape(
+            '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><g fill="@{text}" fill-rule="evenodd" stroke="@{base}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0m16.5-4.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M41 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0M16 8.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M33 9a2 2 0 1 1-4 0 2 2 0 1 1 4 0"/><path d="M9 26c8.5-1.5 21-1.5 27 0l2-12-7 11V11l-5.5 13.5-3-15-3 15-5.5-14V25L7 14z" stroke-linecap="butt"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z" stroke-linecap="butt"/><path d="M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0" fill="none"/></g></svg>'
+          );
+          background-image: url("data:image/svg+xml,@{svg}") !important;
+        }
       }
     }