Dark mode themes (CSS)...here you go

[dapotamus]

Just an FYI, and a request to the BGA team. I just noticed this message when trying to view a BGA bug page:

Screen Shot 2020-12-29 at 1.25.56 PM.png (32.61 KiB) Viewed 2057 times

If you want to access bug pages, looks like you'll need to clear your custom CSS first. ¯\_(ツ)_/¯

And now the request to the BGA team: Since you control the presence of the custom CSS on the site...can't you just not load the custom CSS for bug pages? It's not very user-friendly to put the burden on the user.

[JPreto]

If you want to access bug pages, looks like you'll need to clear your custom CSS first. ¯\_(ツ)_/¯

Not the first time it is mentioned, there is even multiple threads about it...

viewtopic.php?f=9&t=18196
viewtopic.php?f=3&t=18088

[Salvidrim]

Using the dark mode CSS in the OP, there is still some on-screen game text that remains black, and thus becomes unreadable because it's black-on-black.

Specific example includes the running current total in Cribbage

[JPreto]

Using the dark mode CSS in the OP, there is still some on-screen game text that remains black, and thus becomes unreadable because it's black-on-black.

Many games that have black letters directly, without BG, become hard to read... yes!

[dapotamus]

Thanks for giving it a try! I've identified 16 games (including Cribbage) that need small tweaks to fix the cases where the game developer placed black text outside of a background container. I will work on addressing these soon. Thanks for the interest, Salvidrim!

[Salvidrim]

It might be helpful if you list the known examples, that way we'll know if ones we find are known or not.

Another example: the Round counter in Dice Forge

EDIT: Nevermind, I saw you did some updates and I had to reimport the new CSS code since it does not update dynamically


Another point, on the Play Now page using Tiny Icons, isn't there supposed to be a dynamically-updated white border around the games for which there are currently open tables? With the previous theme code version the white frames were present but haphazard and did not update properly, and now they are absent altogether. I get that it might be simply too complicated to make work, if that's the case then so be it, it's a small tradeoff.

EDIT2: Also while using Tiny Icons, when hovering on a game's icon, normally the little icons that popup (Fave, or Rank-Gear-Fave in Arena) are on the top-left of the game's icon, but using Dark Mode CSS they are misaligned, displayed one line lower than the game icon and to its right. (See attached screenshot)

[dapotamus]

Thanks Salvidrim, I’ll take a look at these!

[Salvidrim]

Another thing, sorry for finding all these nitpicky details I'm a pretty small-problem-finder guy, I hope this is helpful and not annoying

On the "ELO Calculations" tooltip in aftergame reports, the CSS changes the text to white but the background stays white too, making the text white-on-white thus unreadable. (Screenshot attached)

[Salvidrim]

Thanks for giving it a try! I've identified 16 games (including Cribbage) that need small tweaks to fix the cases where the game developer placed black text outside of a background container. I will work on addressing these soon. Thanks for the interest, Salvidrim!

Found another instance of hardcoded black text without a background that wasn't fixed in your last update: the "Ship Stacks" counter in Dragonheart

[JPreto]

Another things that might improve, that I am using:

1) The max width of the page section is predefined for 1400px, nowadays most PC screens work minimum @1920px, so this code increases to 1800px the pages areas:

Code: Select all

.row {
max-width:1800px;
}

2) This allows you to have more games showing in the "play now" lobby with this code:

- 6 games in Large Icons
- 13 games in Medium Icons
- 13 games in Small Icons (my favorite)
- 23 games in Tiny Icons

Code: Select all

.desktop_version .verycompactlobby .expandedgame_box_wrap .wannaplayauto_item .emblempremium_big {
right:20px;
}

.desktop_version .verycompactlobby .expandedgame_box_wrap .wannaplayauto_item .game_box_image_wrap {
margin-top:-25px;
margin-left:-20px;
}

.desktop_version .verycompactlobby .expandedgame_box_wrap .game_box_mask {
top:25px;
}

.mobile_version #gamelobbyauto .game_box_wrap,.desktop_version .compactlobby .game_box_wrap {
margin-right:11px;
margin-left:6px;
}

.desktop_version .verycompactlobby .game_box_wrap,.desktop_version .verycompactlobby .wannaplayauto_item {
height:130px;
}

.desktop_version .compactlobby .game_box_wrap,.desktop_version .compactlobby .wannaplayauto_item {
width:115px;
height:130px;
}

.desktop_version .verycompactlobby .expandedgame_box_wrap .emblemstatus {
right:5px;
}

3) And also on the Player`s games list (?section=prestige), this will display more games per row:

Code: Select all

#player-module .palmares_game {
width:279px;
}