h5p/h5p-memory-game

Cards no longer have color when matched

Opened this issue · 5 comments

Jarvil commented

Hello,

I noticed that matched cards are now greyed out instead of keeping the color when they are matched. I would like to see that the color stays since it's helpfull for education purposes, can you give us this option? This option was in Memory Game (1.1.9) but no longer in Memory Game (1.2.1).

icc commented

Hi,
I have made some plans for adding different styling options to the editor. But I'm not sure when I'll get the time for it. For the time being you can override or change the CSS for you site if you want. Here's the style in question: memory-game.css#L127

Jarvil commented

Hello,

I added those styling options to https://moodlesite.com/admin/settings.php?section=themesettingclean
to Custom CSS (theme_clean | customcss) as follow;

.h5p-memory-game .h5p-memory-card.h5p-matched {
  opacity: 1.0;
  filter: grayscale(0%);
}

Greyscale option works but opacity doesn't do anything. Also on iPad iOS 10.something the colors don't work at all with Safari and Chrome.

icc commented

Try using filter: none !important;
Adding !important at the end of any CSS rule ensures that it overrides all others.

Jarvil commented

Hello,

thank you for the reply, now colors work on iOS too 👍 Only thing is that the opacity doesn't

Jarvil commented

Hello,

This worked!

.h5p-memory-game .h5p-memory-card.h5p-matched { opacity: 1.0 !important; filter: none !important; }

👍 😄