Add color difference for visibility button

[Spenhouet]

Currently it is not clear in which mode the visibility button is. It would be helpful if the button would change its color to grey if it is not active.

[krassowski]

It does (for me):

Which version/OS/Anki version do you use?

[Spenhouet]

For me it is always colored.

TouchScreen Version: 0.2.3 (updated to the newest version) OS: Windows 10 Anki Version: 2.1.11

[krassowski]

Thank you! Would you be able to add a screenshot as well?

On Sat, 20 Apr 2019 at 22:44, Sebastian Penhouet notifications@github.com wrote:

For me it is always colored.

TouchScreen Version: 0.2.3 OS: Windows 10 Anki Version: Version 2.1.11

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/krassowski/Anki-TouchScreen/issues/9#issuecomment-485178525, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMQBRTB52BQXJYTADLZLEDPROFEPANCNFSM4HFYHQKA .

-- Best regards, Michał Krassowski

[Spenhouet]

Sure, just not sure how much that helps since it just looks like when the visibility toggle is active.

Here the visibility toggle is set to visible:

Here the visibility toggle is set to invisible:

[krassowski]

This helps a lot! Wow, I had no idea that this will be literally colourful (as you can see on my screenshot, for me its either black or grey). This is strange... Ok, these two links make it clearer:

• color-for-unicode-emoji
• unicode-character-color-issue

Would you be able to modify following lines:

#pencil_button_bar input[type=button].active
{
    color: black!important;
}

in touchscreen/__inline__.py file (you can locate it with help of Anki, from menu choose Tools -> Add-ons -> select touchscreen addon -> View Files button), substituting for:

#pencil_button_bar input[type=button].active
{
    opacity: 0.5
}

restart Anki and tell me if it helps?

[Spenhouet]

This would be somewhat irritating for me since I would expect the invisible mode (canvas not visible / draw mode inactive) to grey out the emoji icon and to have it colored when it is active.

Therefore I would propose:

#pencil_button_bar input[type=button].active
{
    -webkit-filter: grayscale(0);
    filter: none;
}

#pencil_button_bar input[type=button]
{
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

That would look like this:

Also works for the night mode:

I'm preparing a pull request.

[Spenhouet]

@krassowski I opened a pull request. You might want to test if this changes anything on your OS.

[krassowski]

This would be somewhat irritating for me since I would expect the invisible mode (canvas not visible / draw mode inactive) to grey out the emoji icon and to have it colored when it is active.

Yeah, it was late here and I misplaced the opacity (should be the other way around), but the grey filter that you proposed is a better idea anyway. Thanks for your contribution!

[Spenhouet]

👍