feat(bilibili): init

[sixuan911]

🎉 Theme for Bilibili 🎉

Bilibili is a video-sharing platform focused on animation, gaming, and creative content.

💬 Additional Comments 💬

This is an initial implementation focusing on the homepage header, navigation, and search UI.

🗒 Checklist 🗒

• I have read and followed Catppuccin's submission guidelines.
• I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
  • I have ensured that the new directory is in lower-kebab-case.
  • I have followed the template and kept the preprocessor as LESS.
• I have made sure to update the userstyles.yml file with information about the new userstyle.
• I have included the following files:
  • catppuccin.user.less - all the CSS for the userstyle, based on the template.

[sixuan911]

I have accepted all the suggestions and re-reviewed the entire code. I have modified the non-color theme for other out-of-bounds functions, and also themed some module boundaries and some other detail elements. Considering that the Bilibili website is very large with numerous functional elements, I wonder if some detailed content can be gradually improved in subsequent iterative updates after the merge. Thank you.

[uncenter]

Unthemed Themed

Our themed search input shouldn't have all these different layers and accent borders. We should match the unthemed version on the left with a single solid background color, and then show the smaller inner input box on focus like the original site does:

This remains unfixed.

[uncenter]

1. Make sure text on an accent background is @base colored.
2. Same goes for icons. You can use @base-filter (https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#monochrome-img-elements).
3. The hover background color for this button is unthemed (lighten(@accent, 5%) for hover, darken(@accent, 5%) for active/focus). Also, text on an accent background should again be @base colored. This goes for the default non-hovered state too.
4. This text should be @accent.

[uncenter]

This modal blocks the entire screen instead of having a transparent backdrop.

This remains unfixed.

[uncenter]

As per the original styling, this text should be @accent.
https://www.bilibili.com/video/BV1vSieBCEjH/?spm_id_from=333.1007.tianma.13-3-49.click

These dropdowns in the headers remain unfixed, as pointed out earlier.

And also here let's avoid making elements accent colored when they aren't originally. There is too much accent on the screen imo. I've outlined in red and have a comparison screenshot so you can see the difference. Only the stuff that is Bilibili's blue accent should be accent in our userstyle, not the stuff in the red boxes which isn't.