feat(crunchyroll): init

[Lichthagel]

🎉 Theme for Crunchyroll 🎉

A video streaming platform geared towards anime.

💬 Additional Comments 💬

Started this about 7 months ago.
Haven't really got the time to finish this.

Maybe someone wants to do the finishing touches or use the style as is.
Probably also needs some clean-up. Got kinda messy.

Some stuff that is still unthemed:

• Every account page
• Music landing page
• Notifications (got none atm)
• Gift Card Redeem Page
• Trial Popup
• MALSync support (optional)

🗒 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.css - all the CSS for the userstyle, based on the
    template.
  • preview.webp - composite image of all four individual flavor screenshots stitched together,
    generated via Catwalk.

[NeonGamerBot-QK]

if you need any help i can work on it

[sgoudham]

As the author states in the original description:

Haven't really got the time to finish this.

Maybe someone wants to do the finishing touches or use the style as is.
Probably also needs some clean-up. Got kinda messy.

Feel free to create a new branch with the commits from this PR and continue working on the userstyle @NeonGamerBot-QK

I'll close this PR as not planned if you, or someone else, decides to pick up this work or start from scratch.

[NeonGamerBot-QK]

As the author states in the original description:

Haven't really got the time to finish this.
Maybe someone wants to do the finishing touches or use the style as is.
Probably also needs some clean-up. Got kinda messy.

Feel free to create a new branch with the commits from this PR and continue working on the userstyle @NeonGamerBot-QK

I'll close this PR as not planned if you, or someone else, decides to pick up this work or start from scratch.

i think ill pick it up after i finish my other PR's (#1140 #1160 ) and get them merged.

[Lichthagel]

This should be more or less complete now.

I do not plan to do so, but @NeonGamerBot-QK might want to theme the games page, which is probably better done in a separate PR.
Apart from this some other pages are unthemed (e.g. news, about, tos, ...; see the used regex).

[NeonGamerBot-QK]

This should be more or less complete now.

I do not plan to do so, but @NeonGamerBot-QK might want to theme the games page, which is probably better done in a separate PR. Apart from this some other pages are unthemed (e.g. news, about, tos, ...; see the used regex).

i was just doing the extra pages because i thought it was apart of the current PR. if it doesnt need to be done then the PR LGTM!

[isabelroses]

The footer becomes a bit hard to read with the gradient, could we perhaps reduce it a bit?

[Lichthagel]

The footer becomes a bit hard to read with the gradient, could we perhaps reduce it a bit? !

Going up to only 10 % opacity it looks like this on mocha:

[uncenter]

I've yet to review the code but it really sticks out here. It is very warped of what we usually do and I'm struggling to understand what all the #catppuccinXyz mixins do and what not. Why are the colors in a mixin? Why is the normal mixin now called "main"? Etc.

[uncenter]

Rating popup unthemeed.

[uncenter]

Login and create account pages are unthemed. Would be a nice touch, doesn't look too complicated?

[Lichthagel]

I've yet to review the code but it really sticks out here. It is very warped of what we usually do and I'm struggling to understand what all the #catppuccinXyz mixins do and what not. Why are the colors in a mixin? Why is the normal mixin now called "main"? Etc.

I'm using two @-moz-document blocks, one for the main site and one for the video player that is embedded as an iframe.
For those I use #catppuccinMain and #catppuccinPlayer respectively, which both apply #catppuccinColors to define @base, @mantle, @crust...
In #catppuccinPlayer I further use #catppuccinMinimal, #catppuccinMedium and #catppuccinFull (see below).

Can you elaborate more on these player options; why a user might want them enabled/disabled compared to other users (in other words, why is this an option), and what do each of these options look like?

The Player: Flavor option allows using a different flavor for the video player.
I.e., if one likes to have a dark player on a light page, he may set this to Mocha:

Player: Setting allows to what extent the theme is applied to the video player:

• None: disables theming of the video player
  
• Minimal: player background, the orange accent in the timeline and the loading circle
  
• Medium: same as Minimal plus menus
  
• Full: all controls, menus and the background (contrast is suboptimal and likely to break)
  

Especially the full setting is quite experimental, e.g. using a black background in full screen with latte looks like this:

I tried to stay close to the original CSS, but we may do some slightly opinionated changes here.
And I also just fixed a breakage with a somewhat hacky selector in ab8d4e2 (#1023).

Player: Background controls when the background is themed. Similar to YouTube's Enable black bars.

Also added a short explanation to the FAQ: 16fc3b5 (#1023)

Rating popup unthemeed.

Done in f685010 (#1023)

Login and create account pages are unthemed. Would be a nice touch, doesn't look too complicated?

Done in 9f33aed (#1023). Those pages use a different domain and some different class names.