catppuccin / catppuccin/userstyles

Missing styles in game analysis and studies

Open
#1,636 0 comments 0 reactions 0 assignees View on GitHub
0.kind: bug lichess
Dominant language
Less
Stars
1.1k
Forks
297
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue outlining your problem?

- [x] I am using the latest version of the provided userstyle.
- [x] I have searched the existing issues and they do not solve my problem.

### What userstyles are you seeing the problem on?

lbl:lichess

### Describe your problem.

As can be seen in the first two screenshots below, some pages in lichess.org are missing styles.

### Attach screenshots.

### Original colors
![Image](https://github.com/user-attachments/assets/8bc543e6-e396-406b-9cae-e1cad80856b1)
![Image](https://github.com/user-attachments/assets/8055ea4f-2703-4187-9f06-185aab5cff3b)

### What browser(s) are you seeing the problem on?

Vivaldi 7.1.3570.54 (Chrome/132.0.0.0)

### Any additional comments?

I've made my own modifications to improve the coloring (can be seen in the next two screenshot above), but I have only tested it in my own browser and with the mocha flavour. I also didn't modify any of the existing styles and didn't check other pages I don't usually use, so there are surely some improvements to be made. But I hope this snippet can help to improve the existing amazing theme.

```css
/* Main */
header.scrolled {
background: @crust !important;
}

/* Notation */
.result,
.status {
background: @crust !important;
}
line move {
color: @subtext0 !important;
}
interrupt {
background: @crust !important;
}

/* Analysis */
.palantir {
color: @blue !important;
}
span[role="tab"] {
color: @blue !important;
}
povs:not(.printable) {
background: @crust !important;
}

div[class^='advice-summary']:not(.symbol) {
color: @subtext1 !important;
}

/* Study */
.study__player {
background: @crust !important;
}
.study__chapters {
background: @crust !important;
}
button.next {
background: @surface2 !important;
color: @subtext0 !important;
}
.study__metadata,
.study__metadata h2,
.slist tbody tr:nth-child(even),
.slist tbody tr:nth-child(even) input {
background: @crust;
}
.slist tbody tr:nth-child(odd),
.slist tbody tr:nth-child(odd) input {
background: @surface0;
}
.slist tbody th {
color: @subtext0 !important;
}
.study__comment,
.study__message,
.study__multiboard,
.study__share,
.gamebook .comment,
.gamebook .comment::after {
background: @surface0;
}
```

### My own modification
![Image](https://github.com/user-attachments/assets/afc4e87b-590d-4a41-8eb4-70f987692cb3)
![Image](https://github.com/user-attachments/assets/c63d03e0-0d88-4ab2-bc7c-82c4bf5959f1)

Contributor guide

Open the contributing guide

Research direction

Start with the `lbl:lichess` userstyle entry point and compare the analysis and study pages shown in the screenshots. Review the supplied selectors as candidate coverage, then check the affected pages in Vivaldi; done means those pages receive the intended Catppuccin styling without regressing other lichess pages.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.