pganssle / cim

Chord Identification Method Trainer
https://pganssle.github.io/cim/
Apache License 2.0
6 stars 3 forks source link

Update _cim.scss #28

Closed MacAhetti closed 9 months ago

MacAhetti commented 9 months ago

added thicker border for answer icons in _cim.scss file for your wife .

pganssle commented 9 months ago

Haha, thanks, but this doesn't seem to fix the issue:

image

The border we are using is actually a fake border provided by text-shadow.

    text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989993px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756803px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279416px 0px;
}

In the original system, we were applying a class to flag that would add a ::before pseudo-element to it, like so:

div.flag-incorrect::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    content: "\f00d";
    color: red;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    font-weight: bold;
    font-size: 5rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

But this required that all of our flags be fa classes. In the new system, we have hidden divs that we show when a selection is made and importantly those hidden divs are using the standard fork-awesome CSS, so they look like this:

<i class="answer-icon correct fa fa-check"></i>
<i class="answer-icon incorrect fa fa-times"></i>

And fa-check and fa-times are bringing with them their own :before psuedo-selector, which I cannot figure out how to modify to add the --webkit-text-stroke-width attribute.

So I think we either need to just thicken the text-shadow created pseudo-border or go back to manually specifying the :before content.

Having written this out to understand the problem, I realized that it's probably pretty easy to do the latter, so I created #32.

Thanks for helping out!