zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

๐Ÿ–ฑ๏ธ Fix selection highlight css rules for text generated by cmd shortcode #59

Closed sid-r-singh closed 3 years ago

sid-r-singh commented 3 years ago

๐Ÿค” Which problem are you solving ?

When any text generated by the cmd shortcode is selected, it looks as though nothing is selected.

๐Ÿ‘จโ€๐Ÿ”ฌ What do you think creates this problem ?

The default selection highlight css rules from assets\css\template-styles.css are

::-moz-selection { /* Code for Firefox */
    background: rgba(0,0,0,.8);
    color: #fefefe;
}

::selection {
  background: rgba(0,0,0,.8);
  color: #fefefe;
}

But while selecting any text generated by cmd shortcode, these highlighting rules fail since these are the default styles for the text generated by cmd shortcode. Thus it appears as though, nothing has been selected.

๐Ÿ–ผ๏ธ Can you show the problem in a screenshot ?

image I have selected the full line ๐Ÿ‘†. But it appears as though, nothing has been selected.

๐Ÿ–ผ๏ธ Can you show the improvement/fix in a screenshot ?

image I have selected the full line ๐Ÿ‘†. The selected text is seen.

๐Ÿ“ Can you summarize your fix in 1 line ?

I just inverted the colors so that the selected text is distinguishable.

๐Ÿ–ฅ๏ธ Can you share a live demo of site after the fix is implemented ?

Visit this .

zwbetz-gh commented 3 years ago

Thanks for this @sid-r-singh