A more distinct "Like" activated state
Mar 15, 2022 4:25:44 GMT
King Mir, imaginaryfriend, and 2 more like this
Post by Isildur on Mar 15, 2022 4:25:44 GMT
I find it a little inconvenient that the difference in shading between an activated like button and the default state is rather subtle. Sometimes I click "Like' on a post only to realize that I just removed my existing like by accident, and need to click it a third time. Consequently, I decided to change it for myself to something clearer:
People who want this could add the code below by using an extension like Stylus (I would NOT trust the predecessor extension Stylish, ever since it came under new management a few years ago and had a browsing-history-snooping code scandal). (With some extra wrapping, it could also be used with Greasemonkey for Firefox or Tampermonkey for Chromium-based browsers.)
(As a matter of safety, you probably shouldn't get in the habit of installing code from random people unless you learn to understand it first, so this is more of a recipe tip for people who actually do know at least enough coding to verify that the below is harmless.)
The first line makes the button (well, really an "A" link element that looks like a button) match the bluish-purple* page background
The subsequent lines, contain an SVG filter with the color channel mapping matrix that tells it
red = 0.6 x old red (and zero other contributions)
green= 1 x old green + 0.6 extra (so even the ordinarily black outline becomes a medium green)
blue= 0.6 x old blue (and zero other contributions)
opacity= 4 x the old opacity (and zero other contributions) because by default the image is semi-transparent.
*(#9999cc is actually red set to 60% of max, green set to 60% of max, and blue set to 80% of max, though the actual tint will vary from one screen's calibration to another. To my perception, the result on my screen of this muted blue looks like a sort of purple, or bluish lilac, even though the green percentage is as high as the red.)
The inline SVG greening matrix works in Chrome and Firefox in my testing, but not in Safari. The background-shading first line works in Safari too, though.
People who want this could add the code below by using an extension like Stylus (I would NOT trust the predecessor extension Stylish, ever since it came under new management a few years ago and had a browsing-history-snooping code scandal). (With some extra wrapping, it could also be used with Greasemonkey for Firefox or Tampermonkey for Chromium-based browsers.)
(As a matter of safety, you probably shouldn't get in the habit of installing code from random people unless you learn to understand it first, so this is more of a recipe tip for people who actually do know at least enough coding to verify that the below is harmless.)
.liked.likes-button {background: #9999cc;}
.liked.likes-button img {
/* inline SVG filter */
filter: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="recolor-and-make-more-opaque" color-interpolation-filters="sRGB">\
<feColorMatrix type="matrix" values="0.6 0 0 0 0 \
0 1 0 0 0.6 \
0 0 0.6 0 0 \
0 0 0 4 0"></feColorMatrix>\
</filter>\
</svg>#recolor-and-make-more-opaque');
}
The first line makes the button (well, really an "A" link element that looks like a button) match the bluish-purple* page background
The subsequent lines, contain an SVG filter with the color channel mapping matrix that tells it
red = 0.6 x old red (and zero other contributions)
green= 1 x old green + 0.6 extra (so even the ordinarily black outline becomes a medium green)
blue= 0.6 x old blue (and zero other contributions)
opacity= 4 x the old opacity (and zero other contributions) because by default the image is semi-transparent.
*(#9999cc is actually red set to 60% of max, green set to 60% of max, and blue set to 80% of max, though the actual tint will vary from one screen's calibration to another. To my perception, the result on my screen of this muted blue looks like a sort of purple, or bluish lilac, even though the green percentage is as high as the red.)
The inline SVG greening matrix works in Chrome and Firefox in my testing, but not in Safari. The background-shading first line works in Safari too, though.
