feat(komodo): init

[astreaprtcl]

🎉 Theme for Komodo 🎉

Komodo is a self hosted service for managing docker containers

💬 Additional Comments 💬

Neither the graphs nor the status colours can be changed easily since they are not controlled by css variables

🗒 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.

[uncenter]

Neither the graphs nor the status colours can be changed easily since they are not controlled by css variables

Can you elaborate more? What does the HTML and CSS for those look like? Can we theme them via classes?

[astreaprtcl]

no, they can't be themed via classes, they are svgs without proper classing
but i have just managed to theme the status colours and will add that to the PR in a bit
for context:
this is the html for the green circles on the homepage:

<path d="M 85.7 50 A 35.7 35.7 0 1 1 49.99999999999999 14.299999999999997" fill="none" stroke-width="12.6" stroke="#22C55E">
  <title>Healthy</title>
</path>

and i managed to theme it with following css:

path[stroke="#22C55E"] {
  stroke: @green;
}

[astreaprtcl]

for the server stat graphs i sadly don't know how to style it, this is the html for it:

<path d="<data>" style="stroke-width: 2px; opacity: 0.5; stroke: rgb(34, 197, 94); fill: rgb(34, 197, 94);"></path>

[uncenter]

for the server stat graphs i sadly don't know how to style it, this is the html for it:

<path d="<data>" style="stroke-width: 2px; opacity: 0.5; stroke: rgb(34, 197, 94); fill: rgb(34, 197, 94);"></path>

You can do:

path[style$="stroke: rgb(34, 197, 94); fill: rgb(34, 197, 94);"] {
  stroke: @color !important;
  fill: @color !important;
}

[astreaprtcl]

thank you, with that i have managed to also style the graphs :)

[uncenter]

I'm trying to test this on the demo site Komodo has, https://demo.komo.do, but I can't figure out how to log in. Is there a hosted instance that I can log into/view?

When I was trying (and failing) to log in, there was an unthemed error banner:

Can be themed by the --destructive and --destructive-foreground HSL variables.

[astreaprtcl]

the demo instance should work with username & password = komodo

the error message is themed, it is the same variables as the delete buttons
i darkened the red, because the button background vanishes when pressed and the text color on red is not really visible and if we use a dark text color, the text becomes not readable when pressing the button
i could also override the animation, but this solution seemed easier

[astreaprtcl]

i have to correct myself, i was writing that comment on my phone, the button changes color when hovering over:

Normal

When hovering on it

[astreaprtcl]

i have now styled the buttons and the destructive colors correctly and have overwritten the button hover colour

[WalkQuackBack]

Suggested change

	--destructive: #lib.hslify(darken(@red, 20%)) [];
	--destructive: #lib.hslify(mix(@red, @base, 25%)) [];

I think this works a bit better, and doesn't make the colour very distorted on Latte

[astreaprtcl]

oh, you are right that would work better but i just forgot to actually commit the colours the last time, because since my last fix the unaltered colours actually work too