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]

I think this is enough changes for one pull request. Ready for review now :)

[uncenter]

The profile page has some unthemed areas:

In yellow, the text contrast is poor. In red, we should use accent instead of red for the color of the current page in settings I think.

[zenoix]

@uncenter

In regards to the profile section and the preference's contrasts, it seems like Lichess updated some of their UI since this PR was opened. For example, now this is no longer themed as it has been updated:

I guess I'll have to convert this issue back into a draft to fix any changed UI I find.

we should use accent instead of red for the color of the current page in settings I think.

This was already set to red when I started working on the Lichess theming so I assume it was approved to be red (I did find it a bit strange tho). Happy to change the red to accent if that's preferred :)

[zenoix]

Fixed the create game menus

[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):