12

This userscript, written for ViolentMonkey, reverts the question and answer upvotes on all Stack Exchange sites so that they are almost identical to their previous design.

New vote buttons (shown for Stack Overflow in dark mode):
screenshot of vote buttons depicting small triangle buttons with a filled-in circle, all colored orange

This user script changes them to (shown for Stack Overflow in dark mode):
screenshot of vote buttons depicting large triangle buttons with no circle, and only the triangle is orange

Link to userscript install: https://github.com/Tyler-H/SO-UserScripts/raw/master/OriginalVoteButtons.user.js

Raw code:

// ==UserScript==
// @name         Original Stack Overflow Vote Buttons
// @homepage     https://github.com/Tyler-H/SO-UserScripts/blob/master/OriginalVoteButtons.js
// @version      1.1
// @description  Reverts post vote buttons on Stack Exchange to the previous implementation, pre-2022-06-24
// @author       TylerH
// @match        https://*.stackoverflow.com/*
// @match        https://*.stackexchange.com/*
// @match        https://*.superuser.com/*
// @match        https://stackapps.com/*
// @match        https://*.serverfault.com/*
// @match        https://*.askubuntu.com/*
// @match        https://*.mathoverflow.net/*
// ==/UserScript==

(function() {
    let allbtns = document.querySelectorAll("button[class^='js-vote-']");
    let downsvg = document.querySelectorAll('.js-vote-down-btn .iconArrowDown');
    let upsvg = document.querySelectorAll('.js-vote-up-btn .iconArrowUp');
    let downpath = document.querySelectorAll('button.js-vote-down-btn svg.iconArrowDown path');
    let uppath = document.querySelectorAll('button.js-vote-up-btn svg.iconArrowUp path');
    
    // set attribute values for the SVG elements
    downsvg.forEach ( x => x.setAttribute('height','36'));
    downsvg.forEach ( x => x.setAttribute('width','36'));
    downsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    upsvg.forEach ( x => x.setAttribute('height','36'));
    upsvg.forEach ( x => x.setAttribute('width','36'));
    upsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    // set SVG path values to resize the SVGs themselves
    downpath.forEach ( x => x.setAttribute('d','M2 11h32L18 27 2 11Z'));
    uppath.forEach ( x => x.setAttribute('d','M2 25h32L18 9 2 25Z'));
    
    //remove border & revert padding
    allbtns.forEach ( x => x.setAttribute('style','border: 1px solid transparent !important; padding: 1px 4px'));
    
    //revert hover styles
    document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:hover { color: var(--blue-500) !important; background: none !important; }</style>`);
    allbtns.forEach ( x => x.style.setProperty('background-color','transparent','important'));
    
    //revert :focus styles
    document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:focus { box-shadow: none; }</style>`);
    
    //revert :active styles
    document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:active { background: none }</style>`);
    
    //de-emphasize color brightness of buttons while leaving brightness of score
    //allbtns.forEach ( x => x.style.setProperty('color','rgb(105, 111, 117)',''));
    document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].fc-black-700 { color: rgb(186, 191, 196) !important; }</style>`);
})();

This may be an inefficient implementation; there is undoubtedly room for improvement.

This script does not modify the styles for the post score, since that is not technically included in the up/down vote buttons, but nevertheless, users of the script may appreciate styles to revert the score to a prior design. The CSS styles I use for that are as follows:

div.js-vote-count {
    font-family: "Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    color: rgb(186,191,196) !important;
}

Note that the color may need to be updated per-site. I have it set for Stack Overflow, but I know other sites use different color schemes.

7
  • I just noticed this does not apply to posts in /review. I will try to update it in the future so that it affects those, too.
    – TylerH
    Commented Jun 24, 2022 at 18:53
  • FWIW, it's now live on all sites
    – Glorfindel
    Commented May 30, 2023 at 19:01
  • 2
    Great userscript! TeX.SE lost its custom voting icons in the Great Undesign of 2018 and your script finally allows to have them back: tex.meta.stackexchange.com/q/10080/36296 Commented May 31, 2023 at 14:51
  • Is it possible to make the up/down vote counter not bold? This is also a change that is quite unnecessary and can be probably easily rolled back.
    – Pedro
    Commented Jun 1, 2023 at 15:03
  • @Pedro Yes it is possible, although outside the scope of this script, which affects only the buttons (not the score). You can use a user style via a browser add-on (like Stylus) and use the style: div.js-vote-count { font-weight: 400 !important; } to restore it. (Note, it was bold before, just less bold (the new font-weight is 600 vs the old 400. Anything over 300 is considered "bold".)
    – TylerH
    Commented Jun 1, 2023 at 19:24
  • @TylerH Ok, thanks! Perhaps what I meant to ask (and apologies for the silly question, I sort of landed here from meta.SE): is it possible to edit the script to add a line like in your last comment that will affect the weight of the font in the vote counter?
    – Pedro
    Commented Jun 1, 2023 at 20:05
  • @Pedro Yes you could do that by adding a new variable and using document.querySelectorAll() to select the div.js-vote-count element and then applying the style in my previous comment the same way I applied all the other styles (via .setAttribute()), for one example.
    – TylerH
    Commented Jun 1, 2023 at 20:08

2 Answers 2

3

The arrows are too dark.

With the script:

1

Original arrows:

2


They also have a blue hover, which the original design didn't hove.

4
  • I did notice the darker color on light mode, I think that's a change on SO's side, since I think it's the a different color from what I applied while crafting it in dark mode (at least I think it is, I didn't confirm). The blue color hover is intentional for improving UX. These are both feature-requests rather than bugs, per se; I'll consider changing them. Considering the fact that SO's change of the styles in the first place is allegedly to comply with WCAG requirements, I'll probably check the contrast of the old vs the newer, darker buttons before changing them, as well.
    – TylerH
    Commented Jun 24, 2022 at 20:04
  • That being said, do of course feel free to use a lighter value in your own copy of the script if that's the only thing you find issue with.
    – TylerH
    Commented Jun 24, 2022 at 20:04
  • I don't think it's a change on SO's side... How could it be? The global colors haven't been redefined. Check what's happening on Meta, @TylerH; it seems the A/B test isn't applied there. I use the light mode, and I don't see any difference in color on the buttons on Meta. Commented Jun 25, 2022 at 0:11
  • @CodyGray Yes, it was the optical illusion of the color looking darker on a light background and lighter on a darker background. It has been fixed now.
    – TylerH
    Commented Jul 4, 2022 at 14:58
1

The script needs to remove the .fc-white class from selected vote buttons, otherwise they're invisible on some sites. (Reported here.)

3
  • NB - I have paused work on any scripts or user styles for SO while the moderation strike is on-going.
    – TylerH
    Commented Jun 13, 2023 at 15:41
  • @TylerH Fair. I've made an exception for accessibility concerns, but I'm going about it differently.
    – wizzwizz4
    Commented Jun 13, 2023 at 16:07
  • I do support this suggestion, though, and hope to implement it in the future--I encourage any end user to feel free to make the change in their own instance of the script or similar if they are using it.
    – TylerH
    Commented Jun 13, 2023 at 18:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .