search

cognitive-engineering-lab / mdbook-quiz

Interactive quizzes for Markdown
http://cel.cs.brown.edu/mdbook-quiz/
Apache License 2.0
106 stars 23 forks source link

Display error -- incorrect styling makes bug report close button invisible #38

Closed tylerl closed 1 year ago

tylerl commented 1 year ago

The quiz styling doesn't play nice with the bug reporting pop-up; in particular the close button is styled to be nearly invisible in the navy and coal themes. This is particularly important because the navy theme is the default. See attached screenshot:

Screenshot 2023-10-25 103359

This is caused is the combination of two conflicting style rules, found in index.scss.

The first style rule removes the background for the selector .mdbook-quiz .prompt .bug-report button -- that's a selector with 3 classes and 1 element; so a CSS specificity weight of 0.3.1. Presumably this is done to make the background go away on the close button, though technically it could apply to other buttons on the bug report form that use the <button> element.

https://github.com/cognitive-engineering-lab/mdbook-quiz/blob/fd43ab7373e85c4b4eee8c197ea39a7284aefa0d/js/packages/quiz-embed/src/index.scss#L164-L168

The second style rule puts the background back in, and also sets the foreground color. It applies to the selectors .mdbook-quiz button and .mdbook-quiz input[type=submit] -- only the first of which is important here. It has one class plus one element, so a specificity of 0.1.1. That means it between the two rules mentioned, this one loses and gets overridden by one previously mentioned.

https://github.com/cognitive-engineering-lab/mdbook-quiz/blob/fd43ab7373e85c4b4eee8c197ea39a7284aefa0d/js/packages/quiz-embed/src/index.scss#L128-L136

Therefore the close button is using the button foreground color (technically --searchbar-fg) and the background color of the body (instead of --searchbar-bg). And in two of the themes (including the default), the button text color isn't readable on the body background color.

Note that the submit button isn't affected by this error because it's an <input type="submit"/> rather than <button>.

My recommendation would be to add color: var(--fg); to the first selector.

Though, do note that you already have a selector for just the close button on line 180; perhaps you want to do all of the styling for the close button in that rule?

willcrichton commented 1 year ago

Thanks for the bug report, a patch will appear in the next release.