Customise H5P styles via Raw SCSS theme setting

Setup

1. Login as admin
2. Create a course
3. Go to the Content bank and upload the fill-in-the-blanks.h5pfile.
4. Check it's displayed properly.

Testing scenario 1: boost

1. Go to "Site administration > Appearance > Themes > Boost", and click on the "Advanced settings" tab.
2. Set the "Raw SCSS" field to:

   .h5p-joubelui-button {

   background: orange !important;

   }

   .h5p-content {

   background: grey;

   }

   .h5p-question-content {

   color: blue !important;

   }

3. Save changes
4. Go to the content bank and open the H5P content uploaded previously.
5. Confirm the H5P content is displayed with different styling (for instance, the button is orange, the background is grey and the text is blue).

Testing scenario 2: classic

1. Access to "Site administration > Appearance > Themes > Theme selector" and choose "Classic" as the Default theme.
2. Go to the content bank and open the H5P content uploaded previously.
3. Confirm the H5P content is not using the previous colours (so, for instance, the background is white and the text is black).
4. Go to "Site administration > Appearance > Themes > Classic", and click on the "Advanced settings" tab.
5. Set the "Raw SCSS" field to:

   .h5p-joubelui-button {

   background: blue !important;

   }

   .h5p-content {

   background: yellow;

   }

   .h5p-question-content {

   color: orange !important;

   }

6. Save changes
7. Go to the content bank and open the H5P content uploaded previously.
8. Confirm the H5P content is displayed with different styling (for instance, the button is blue, the background is yellow and the text is orange).

Testing scenario 3: third-party theme implementing the H5P renderer

1. Download the theme h5pmod to your local Moodle instance by running the following command from the Moodle root folder: 

   git clone https://github.com/sarjona/h5pmods-moodle-plugin.git theme/h5pmod

2. Run the upgrade process, to install the h5pmod theme.
3. Access to "Site administration > Appearance > Themes > Theme selector" and choose "H5PMod" as the Default theme.
4. Go to the content bank and open the H5P content uploaded previously.
5. Confirm the H5P content is displayed with different styling. In that case, the button should be displayed pink, the background should be back to white and the text to black.