diff --git a/styles/lichess/catppuccin.user.css b/styles/lichess/catppuccin.user.css
index 2b29a7633c..f75f13a024 100644
--- 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.1
+@version 0.0.2
@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 ChangePieces "Change the chess pieces." 1
==/UserStyle== */
@-moz-document domain("lichess.org") {
@@ -68,6 +69,18 @@
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];
+ /* Prettier Lichess Support */
+ --primaryColor: @accent-color !important;
+ --secondaryColor: @peach !important;
+ --tertiaryColor: @red !important;
+ --backgroundColor: @base !important;
+ --textColor: @text !important;
+ --surfaceColor: @crust !important;
+ --surfaceColorHover: @mantle !important;
+ --defaultWhite: @subtext1 !important;
+ --moveIndicator: @accent-color !important;
+ --preMove: @blue !important;
+
/* Main background */
html,
body {
@@ -134,6 +147,21 @@
}
/* Popup skining */
+ #modal-wrap .close {
+ background-color: @mantle;
+ color: @overlay2
+ }
+ dialog button.close-button {
+ background-color: @mantle;
+ color: @overlay2
+ }
+ dialog button.close-button:hover {
+ background-color: @red;
+ color: @mantle
+ }
+ .now-playing .indicator {
+ color: @red;
+ }
dialog {
background: @crust;
}
@@ -143,6 +171,7 @@
}
.game-setup .radio input:checked + label {
background: @green;
+ color: @mantle;
}
/* Text */
@@ -222,6 +251,9 @@
.hook__filters {
background-color: fade(@mantle, 50%);
}
+ .lobby__feed {
+ background-color: @crust;
+ }
.lobby__support a {
background: @crust;
}
@@ -242,6 +274,7 @@
}
.unread {
background: @red;
+ color: @mantle
}
.lobby__box tr:nth-child(even) {
background: @crust;
@@ -269,18 +302,40 @@
.learn__side-home {
background: @blue;
}
+ .learn-stages .stage h3,
+ .learn-stages .stage p {
+ color: @mantle
+ }
.learn-stages .stage.future {
background: @red;
}
/* Chess Game */
+
+ .rcontrols .rematch-decline {
+ background-color: @red;
+ }
+ square.check {
+ background-image: radial-gradient(ellipse at center, @red 0%, @red 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%)
+ }
+ #powerTip .forecast-info .title, .rcontrols .rematch.fbt, .cmn-toggle:hover:not(:disabled) + label::after, .cmn-toggle + label::after, .crosstable povs:hover, .crosstable__users, .crosstable__score {
+ background-image: linear-gradient(to bottom, @surface1, @surface0 100%);
+ }
+ .fbt:hover:not(.disabled, [disabled]) {
+ background-color: @green;
+ color: @mantle;
+ }
+ group.radio label, group.radio .label, .game-setup .optional-config, .game-setup .ratings, input, textarea, select, .game__meta section:not(:last-child) {
+ border-color: @surface0;
+ }
+
.brown .is2d cg-board {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}") !important;
}
- .is2d .pawn {
+ .is2d .pawn when (@ChangePieces = 1) {
#piece(@f, @s) {
@svg: escape(
''
@@ -294,7 +349,7 @@
#piece(@text, @base);
}
}
- .is2d .bishop {
+ .is2d .bishop when (@ChangePieces = 1) {
#piece(@f, @s) {
@svg: escape(
''
@@ -308,7 +363,7 @@
#piece(@text, @base);
}
}
- .is2d .knight {
+ .is2d .knight when (@ChangePieces = 1) {
#piece(@f, @s) {
@svg: escape(
''
@@ -322,7 +377,7 @@
#piece(@text, @base);
}
}
- .is2d .rook {
+ .is2d .rook when (@ChangePieces = 1) {
#piece(@f, @s) {
@svg: escape(
''
@@ -336,7 +391,7 @@
#piece(@text, @base);
}
}
- .is2d .king {
+ .is2d .king when (@ChangePieces = 1) {
#piece(@f, @s) {
@svg: escape(
''
@@ -350,14 +405,14 @@
#piece(@text, @base);
}
}
- .is2d .queen {
+ .is2d .queen when (@ChangePieces = 1) {
&.black {
@svg: escape(
''
);
background-image: url("data:image/svg+xml,@{svg}") !important;
}
- &.white {
+ &.white when (@ChangePieces = 1) {
@svg: escape(
''
);
@@ -393,8 +448,8 @@
background: @mantle;
color: @text;
}
- .rclock.running .time {
- background: #384722; /* putting it back to default so that the time on the clock is readable */
+ .rclock.running .time, :root:has(body[data-theme="system"]) .rclock.running .time {
+ background-color: darken(@accent-color, 45);
}
.rclock .bar {
background: @accent-color;
@@ -514,6 +569,13 @@
.mchat__tab:hover {
background: fade(@accent-color, 50%);
}
+ /* Chat */
+ .mchat__messages li.me {
+ border-color: @green;
+ }
+ .mchat__presets span {
+ border-color : @surface1
+ }
/* Openings */
.opening__config,
.opening__next {
@@ -580,5 +642,103 @@
.form-control:invalid {
border-color: @red;
}
+ #dasher_app .links a:hover, #dasher_app .links a:hover::before, #dasher_app .links button:hover, #dasher_app .subs .sub:hover {
+ background-color: @green;
+ color: @mantle;
+ }
+ #dasher_app .head::before {
+ color: @green;
+ }
+ /* Misc */
+ .daily-feed__update__marker.nobg {
+ background-color: @mantle;
+ border-color: @peach;
+ }
+ .daily-feed__updates {
+ border-color: @peach;
+ }
+ bad,.crosstable .loss {
+ color: @red
+ }
+ good, .crosstable .win, .user-link.online .line, .ceval .technology.good {
+ color: @green
+ }
+ #dasher_app .piece .no-square.active {
+ background-color: @green;
+ }
+ #dasher_app .selector button.active {
+ background-color: @green!important;
+ color: @mantle!important;
+ }
+ #dasher_app .selector button.active::before {
+ color: @mantle!important;
+ }
+ #dasher_app .selector button:hover {
+ background-color: darken(@green, 30%);
+ color: @mantle;
+ }
+ .board-editor .spare .no-square.selected-square {
+ background-color: @blue
+ }
+ .board-editor .spare-top, .board-editor .spare {
+ background-color: @surface0
+ }
+ .board-editor .spare .no-square.trash.selected-square {
+ background-color: @red
+ }
+ .analyse__moves {
+ border-color: @surface1
+ }
+ #topnav div a:hover {
+ background-color: @accent-color;
+ color: @mantle
+ }
+ .copyables .name, .ceval help, .ceval .engine {
+ color: @subtext1
+ }
+ .tv-single .tv-history h2 {
+ color: @subtext0
+ }
+ .cmn-toggle--subtle:not(:checked) + label {
+ background-color: @surface1
+ }
+ .cmn-toggle--subtle:not(:checked) + label::before {
+ color: @surface1
+ }
+ .cmn-toggle + label {
+ border-color: @surface1
+ }
+ .mselect__list .current {
+ background-color: @mantle;
+ }
+ .mselect__list > :hover {
+ color: @mantle;
+ background-color: @accent-color
+ }
+ .cmn-toggle:not(:checked) + label {
+ background-color: @red
+ }
+ .cmn-toggle:not(:checked) + label::before, .tv-channel.active > span::before {
+ color: @red
+ }
+ .ublog-index .box__top__actions .atom {
+ color: @subtext1
+ }
+ .ublog-index .box__top__actions .atom:hover {
+ color: @peach
+ }
+ .ceval .settings-gear.active {
+ color: @mantle
+ }
+ .community__leaders .leaderboards h2 {
+ background-color: darken(@peach, 45);
+ color: mantle
+ }
+ .user-link {
+ color: @accent-color
+ }
+ .tv-channel > span::before {
+ color: @blue;
+ }
}
}