Advanced

Change History

New api methods will be announced here. Changes in our data that is relevant to checkers scripts/tags will also be announced here.

Message: Re: Checker CSS and helper functions

Changed By: magma1447
Change Date: March 04, 2026 11:26AM

Re: Checker CSS and helper functions
Sorry for taking so long to answer. I had this on my list last Tuesday but didn't manage to catch up.

[quote]
Notice that everything is left-aligned...
[/quote]

Web browser defaults are center-aligned for th and left-aligned for td. The provided CSS sets everything to left-aligned for consistency.

The idea then was that a `align-center` on the table element should fix the whole table. But when looking at it it doesn't override the th `th` css. This will be fixed in the next release.
This was a bug and not intentional.

[quote]
... and how badly the border is visible between the cache types.
[/quote]

We'll be adding class `table-bordered-black` in the next release. You will then end up with border colors using `#333` (so "almost black").

[quote]
P.S.: If you would like a more uniform design, you can define background colors for table cells that are
- not fulfilled (usually red is used in checkers so far)
- partially fulfilled (usually some kind of yellow or orange))
- fulfilled (some kind of green)
- fulfilled and selected (some other kind of green)
[/quote]

The idea is that these should be used:
[code]
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
[/code]

I guess we could have "aliased" them into words that fits expected challenge checker result names better though. And potentially adjusted the colors as well if needed. I expect `warning` to look a bit light. Is it your opinion that the above doesn't work well enough? I think Project-GC itself uses those almost exclusivily.

[quote]
I tested a bit more with "<table class="table-bordered align-center">".
The "align-center" works nicely for <TD>s, but not for <TH>s:
[/quote]

Covered above.

[quote]
Also I'm still struggling to find background colors that work with your border color.
Your very light gray border may be OK for a white background, but with colored backgrounds it is barely visible. I still think we need something darker here.
[/quote]

Covered above (`table-bordered-black`).

[quote]
Sure, take your time. I just wanted to give early feedback so that you can better understand our use cases and requirements.
[/quote]

And this is much appreciated. Don't take my response time as if it's not wanted feedback. It's just that it's always something to do, everywhere. :)

[quote]
In the meantime I compared a bit more our different grids (i.e. DT, calendar, and others) and I think we need a few more colors
[/quote]

If the colors listed above doesn't work well. Feel free to submit a list of colors (#rrggbb(aa)) and name suggestions and I can try to figure out how we should implement them in the css.

Jumping a step forward here, but if you wish for a color-blind variant of it, make such suggestion as well. If we add one "theme" we can just as well add a second. I don't know if you know it, but there is a color-blind boolean sent as an argument to the LUA scripts. Print the incoming `args` and you should find it.

[quote]
[s]So a red-yellow-green color scheme for failed / in progress / passed is pretty common, but may pose a problem for color blind people[/s]
[/quote]

Project-GC itself has a "modifier class" that we add to get other colors. It's only used in a few places, for several reasons. It's hard to find colors that work out. We seldom think of it. There are so many variants of color blindness. Back in the day we used to get a lot of contradicting feedback regarding our colors. It's very time-consuming.

I think the colors on your "colorful" table looks great. I personally have a very hard time guessing what they represent though (if I don't look at your "legend").

[hr]

I hope I didn't miss anything important. If so, just repeat it.

Original Message

Author: magma1447
Date: March 04, 2026 11:25AM

Re: Checker CSS and helper functions
Sorry for taking so long to answer. I had this on my list last Tuesday but didn't manage to catch up.

[quote]
Notice that everything is left-aligned...
[/quote]

Web browser defaults are center-aligned for th and left-aligned for td. The provided CSS sets everything to left-aligned for consistency.

The idea then was that a `align-center` on the table element should fix the whole table. But when looking at it it doesn't override the th css. This will be fixed in the next release.

[quote]
... and how badly the border is visible between the cache types.
[/quote]

We'll be adding class `table-bordered-black` in the next release. You will then end up with border colors using `#333` (so "almost black").

[quote]
P.S.: If you would like a more uniform design, you can define background colors for table cells that are
- not fulfilled (usually red is used in checkers so far)
- partially fulfilled (usually some kind of yellow or orange))
- fulfilled (some kind of green)
- fulfilled and selected (some other kind of green)
[/quote]

The idea is that these should be used:
[code]
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
[/code]

I guess we could have "aliased" them into words that fits expected challenge checker result names better though. And potentially adjusted the colors as well if needed. I expect `warning` to look a bit light. Is it your opinion that the above doesn't work well enough? I think Project-GC itself uses those almost exclusivily.

[quote]
I tested a bit more with "".
The "align-center" works nicely for
s, but not for s:
[/quote]

Covered above.

[quote]
Also I'm still struggling to find background colors that work with your border color.
Your very light gray border may be OK for a white background, but with colored backgrounds it is barely visible. I still think we need something darker here.
[/quote]

Covered above (`table-bordered-black`).

[quote]
Sure, take your time. I just wanted to give early feedback so that you can better understand our use cases and requirements.
[/quote]

And this is much appreciated. Don't take my response time as if it's not wanted feedback. It's just that it's always something to do, everywhere. :)

[quote]
In the meantime I compared a bit more our different grids (i.e. DT, calendar, and others) and I think we need a few more colors
[/quote]

If the colors listed above doesn't work well. Feel free to submit a list of colors (#rrggbb(aa)) and name suggestions and I can try to figure out how we should implement them in the css.

Jumping a step forward here, but if you wish for a color-blind variant of it, make such suggestion as well. If we add one "theme" we can just as well add a second. I don't know if you know it, but there is a color-blind boolean sent as an argument to the LUA scripts. Print the incoming `args` and you should find it.

[quote]
[s]So a red-yellow-green color scheme for failed / in progress / passed is pretty common, but may pose a problem for color blind people[/s]
[/quote]

Project-GC itself has a "modifier class" that we add to get other colors. It's only used in a few places, for several reasons. It's hard to find colors that work out. We seldom think of it. There are so many variants of color blindness. Back in the day we used to get a lot of contradicting feedback regarding our colors. It's very time-consuming.

I think the colors on your "colorful" table looks great. I personally have a very hard time guessing what they represent though (if I don't look at your "legend").

[hr]

I hope I didn't miss anything important. If so, just repeat it.