feat(lichess): unthemed UI elements

[zenoix]

🔧 What does this fix? 🔧

This pull request aims to theme the following from #1891:

• Hamburger menu icon
• Hamburger menu headers/sections
• Settings menu item hovers
• Stockfish configuration buttons
• Sign in, register page (input borders, sign in button)
• Preference options
• Game selector on main page

Additionally:

• Settings menu sub-menu items (except sliders feat(lichess): unthemed UI elements #1897 (comment))
• Top bar gradient when the page is slightly scrolled down
• Button selectors for play with the computer
• Unthemed running clock
• Invite friend to game (and most likely the received invitation page)
• Main page tournament progress bars
• Analysis eval bar

Screenshots:

🗒 Checklist 🗒

• I have read and followed Catppuccin's contributing guidelines.

[zenoix]

I can't figure out how to style the input sliders in the settings menu so if anyone knows how, let me know or feel free to implement it :)

[uncenter]

I can't figure out how to style the input sliders in the settings menu so if anyone knows how, let me know or feel free to implement it :)

What are you referring to?

[zenoix]

What are you referring to?

These sliders:

[uncenter]

Oh yeah native range sliders are terrible to theme. You can set the accent-color bit but the rest is not worth it.

[zenoix]

rip

[zenoix]

@uncenter Is there a way to style elements that are styled inline? In the registration page, the password complexity bar has spans that get directly styled when the password complexity increases:

[uncenter]

.password-complexity-meter {
  [style="background-color: red;"] {
    background-color: @red !important;
  }
}

Note the !important to override the inline styles.

[zenoix]

.password-complexity-meter {
  [style="background-color: red;"] {
    background-color: @red !important;
  }
}

Note the !important to override the inline styles.

Sick! Thanks for that. Learning something new every day lol

[zenoix]

This was already set to red when I started working on the Lichess theming

Changed

[zenoix]

In yellow, the text contrast is poor.

Okay, for this it seems like I trolled. Not sure how I didn't notice it regressing but I fixed it, apologies!

[zenoix]

Also themed the puzzle dashboard page (bottom visualisation is a canvas and not sure if it's possible to style those):

[uncenter]

I'm going to push some other fixes I've made after going over the site if you don't mind.

[uncenter]

Can we avoid using the * selector? On what elements does the base Lichess website apply these variables to?

[zenoix]

We could avoid using it. I just remember that quite a few of those variables like --c-good are used quite a bit for different elements.

[uncenter]

Ideally we should just copy whatever selector they set variables to, or be more specific and explicit by listing out the descendants where we need to reapply variables.

[zenoix]

Ugh... this is going to be painful

[uncenter]

I don't understand what this is showing, could you elaborate?

[uncenter]

In the styles panel there is a link to the source CSS for rules that you can go to:

[zenoix]

@uncenter Hey just wondering, in the userstyles contributing docs, we have:

How are we supposed to theme using the variables if not for using *? This may be a dumb question but I don't actually have much experience with web development 😅

[uncenter]

CSS variables, like other CSS properties, are inherited by descendant elements. If you set --foo: red; on the :root/html/body element, every element in the tree below will have --foo as red unless it is overridden somewhere. So we often only need to theme the variables at the very top, and occasionally - as in this case - we have to set them again at a few nodes/selectors where the original site overrides them.

[zenoix]

So, I could just make the variables apply to :root like this instead, right?

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    @lastMove: @catppuccin[@@flavor][@@lastMoveColor];
    @check: @catppuccin[@@flavor][@@checkColor];

    --c-accent: @accent;
    --c-bad: @red;
    --c-bg-box: @base;
    --c-bg-header-dropdown: @surface0;
    --c-bg-popup: @surface0;
    --c-bg-zebra: @mantle;
    --c-border: @surface0;
    --c-brag: @peach;
    --c-contours: @flamingo;
    --c-dasher: @accent;
    --c-dasher-light: @accent;
    --c-good: @green;
    --c-error: @red;
    --c-link: @blue;
    --c-primary: @accent;
    --c-shade: @surface1;
    --c-over: @base;
    --c-font: @text;
    --c-font-clear: @text;
    --c-font-clearer: @text;
    --c-font-dim: @subtext1;
    --c-font-dimmer: @subtext0;
    --m-font_dimmer--mix-85: @overlay2;
    --m-accent--fade-50: fade(@accent, 50%);
    --m-accent--fade-80: fade(@accent, 20%);
    --m-secondary--fade-30: fade(@green, 70%);

    --c-bg-page: @mantle;
    --c-body-gradient: @base;

    ...

Seems like this is how the Github userstyle works.

[uncenter]

Yep!

[zenoix]

I'm going to push some other fixes I've made after going over the site if you don't mind.

Of course, feel free to make any changes!

[uncenter]

Lmk if any of 05f1509 (#1897) doesn't make sense or breaks anything!

[uncenter]

Is this ready for re-review?

[zenoix]

Is this ready for re-review?

No, it's not. Some things seemed to have regressed and some pages are still not themed yet. I'm currently quite busy with other things and I'd prefer to work on #1966 first if that's all good.

[uncenter]

No worries! Just wanted to make sure I wasn't holding anything up here. :)