Skip to content

fix(lichess): unthemed elements #652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kingofcube wants to merge 20 commits into from
Closed

fix(lichess): unthemed elements #652

Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
8e20a23
Update userstyles.yml
kingofcube Mar 10, 2024
663944d
Update catppuccin.user.css
kingofcube Mar 10, 2024
d4ac913
Update catppuccin.user.css
kingofcube Mar 10, 2024
c120fa5
Update userstyles.yml
kingofcube Mar 10, 2024
799f96c
Update catppuccin.user.css
kingofcube Mar 10, 2024
b1718f2
Update userstyles.yml
kingofcube Mar 10, 2024
f410621
Update catppuccin.user.css
kingofcube Mar 10, 2024
5b89ac2
Update catppuccin.user.css
kingofcube Mar 10, 2024
485a78e
Merge branch 'main' into main
kingofcube Mar 10, 2024
cbf1f55
Update catppuccin.user.css
kingofcube Mar 10, 2024
043767d
Update catppuccin.user.css
kingofcube Mar 10, 2024
40f9c8a
Merge branch 'main' into main
kingofcube Mar 10, 2024
2b70c99
Update catppuccin.user.css
kingofcube Mar 10, 2024
e7db343
Update styles/lichess/catppuccin.user.css
kingofcube Mar 10, 2024
41e6ad6
Update styles/lichess/catppuccin.user.css
kingofcube Mar 10, 2024
8c3dde0
Update catppuccin.user.css
kingofcube Mar 10, 2024
7f49f44
Update catppuccin.user.css
kingofcube Mar 10, 2024
0314259
Update catppuccin.user.css
kingofcube Mar 10, 2024
3572cdb
Update catppuccin.user.css
kingofcube Mar 10, 2024
20c36c3
themed and fixed alot of things
kingofcube Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 170 additions & 10 deletions styles/lichess/catppuccin.user.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

@uncenter uncenter Mar 10, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@var checkbox ChangePieces "Change the chess pieces." 1
@var checkbox changePieces "Theme chess pieces." 1

@uncenter uncenter Mar 10, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now an issue again since you undid it. And yes, you do have to change the name of the variable wherever you are using it!

==/UserStyle== */

@-moz-document domain("lichess.org") {
Expand Down Expand Up @@ -68,6 +69,18 @@
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];

/* Prettier Lichess Support */
Comment thread
uncenter marked this conversation as resolved.
--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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -143,6 +171,7 @@
}
.game-setup .radio input:checked + label {
background: @green;
color: @mantle;
}

/* Text */
Expand Down Expand Up @@ -222,6 +251,9 @@
.hook__filters {
background-color: fade(@mantle, 50%);
}
.lobby__feed {
background-color: @crust;
}
.lobby__support a {
background: @crust;
}
Expand All @@ -242,6 +274,7 @@
}
.unread {
background: @red;
color: @mantle
}
.lobby__box tr:nth-child(even) {
background: @crust;
Expand Down Expand Up @@ -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(
'<svg shape-rendering="crispEdges" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="a"><g id="b"><g id="c"><g id="d"><path id="e" d="m0 0h1v1h-1z" fill="@{subtext0}"/><use x="1" xlink:href="#e" y="1"/><path id="f" d="m0 1h1v1h-1z" fill="@{crust}"/><use x="1" xlink:href="#f" y="-1"/></g><use x="2" xlink:href="#d"/></g><use x="4" xlink:href="#c"/></g><use xlink:href="#b" y="2"/></g><use xlink:href="#a" y="4"/></svg>'
);
background-image: url("data:image/svg+xml,@{svg}") !important;
}
.is2d .pawn {
.is2d .pawn when (@ChangePieces = 1) {

@uncenter uncenter Mar 10, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of this stuff below can be nested. Something like:

.is2d when (@ChangePieces = 1) {
	.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>'
Expand All @@ -294,7 +349,7 @@
#piece(@text, @base);
}
}
.is2d .bishop {
.is2d .bishop when (@ChangePieces = 1) {
#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>'
Expand All @@ -308,7 +363,7 @@
#piece(@text, @base);
}
}
.is2d .knight {
.is2d .knight when (@ChangePieces = 1) {
#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 0zm5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5z" fill="@{f}" stroke="@{s}"/><path d="M24.55 10.4l-.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.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1z" fill="@{s}" stroke="none"/></g></svg>'
Expand All @@ -322,7 +377,7 @@
#piece(@text, @base);
}
}
.is2d .rook {
.is2d .rook when (@ChangePieces = 1) {
#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-3H9v3zm3.5-7l1.5-2.5h17l1.5 2.5h-20zm-.5 4v-4h21v4H12z" stroke-linecap="butt"/><path d="M14 29.5v-13h17v13H14z" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M14 16.5L11 14h23l-3 2.5H14zM11 14V9h4v2h5V9h5v2h5V9h4v5H11z" 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>'
Expand All @@ -336,7 +391,7 @@
#piece(@text, @base);
}
}
.is2d .king {
.is2d .king when (@ChangePieces = 1) {
#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 10V37z" 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>'
Expand All @@ -350,14 +405,14 @@
#piece(@text, @base);
}
}
.is2d .queen {
.is2d .queen when (@ChangePieces = 1) {
&.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.5 9 26z" 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 {
&.white when (@ChangePieces = 1) {
@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 0zm16.5-4.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM41 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM16 8.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM33 9a2 2 0 1 1-4 0 2 2 0 1 1 4 0z"/><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 14l2 12z" 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>'
);
Expand Down Expand Up @@ -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 {

@uncenter uncenter Mar 14, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this :root:has(body[data-theme="system"]) needed?

@kingofcube kingofcube Mar 14, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to remove it

background-color: darken(@accent-color, 45);
}
.rclock .bar {
background: @accent-color;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}