33

TeX.SE lost its iconic voting icons in The Great Undesign of 2018, while some other sites were allowed to keep their custom voting buttons. That was a very tragic day for the site.

Luckily SO now introduced new voting buttons which are so unusable that a lot of user scripts/styles popped up to revert this change. That's good news, because they can be adapted to bring back our loved pen nibs!

User style

For users who prefer user styles, here a modification of https://meta.stackexchange.com/a/389568/237989

  /* voting arrows, adapted from https://meta.stackexchange.com/a/389568/237989 */
 
  button.js-vote-down-btn, button.js-vote-up-btn {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;
  }
  button.js-vote-down-btn:not(.fc-theme-primary-500):not(.fc-theme-primary),
  button.js-vote-up-btn:not(.fc-theme-primary-500):not(.fc-theme-primary) {
    color: inherit !important;
  }
  
  button.js-vote-down-btn > svg, button.js-vote-up-btn > svg {
    width: 36px;
    height: 36px;
  }
  
  .js-vote-count {
    color: var(--black-500) !important;
    font-size: var(--fs-title) !important;
    padding: 0 !important;
    font-weight: normal !important;
  } 
  
  button.js-vote-up-btn svg.iconArrowUp path { 
    d: path('M 0.1,17.7 c 1.1,0.2 2,1.2 2,2.4 0,1.4 -1.1,2.5 -2.5,2.5 -1.4,0 -2.5,-1.1 -2.5,-2.5 0,-1.2 0.9,-2.2 2,-2.4 l -0.1,-17.7 c -3.5,10.1 -9.2,15.3 -10.8,16.9 0.4,1.3 2.1,5.8 2.5,9.1 h 17.9 c 0.4,-3.3 1.8,-7.1 2.3,-8.3 -1.6,-1.7 -7.4,-7.6 -10.9,-17.7 z') !important; 
    transform-origin: 26px 0px;
    transform: scale(0.65);
  }
  
  button.js-vote-down-btn svg.iconArrowDown path { 
    d: path('M 0.1,-17.7 c 1.1,-0.2 2,-1.2 2,-2.4 0,-1.4 -1.1,-2.5 -2.5,-2.5 -1.4,0 -2.5,1.1 -2.5,2.5 0,1.2 0.9,2.2 2,2.4 l -0.1,17.7 c -3.5,-10.1 -9.2,-15.3 -10.8,-16.9 0.4,-1.3 2.1,-5.8 2.5,-9.1 h 17.9 c 0.4,3.3 1.8,7.1 2.3,8.3 -1.6,1.7 -7.4,7.6 -10.9,17.7 z') !important; 
    transform-origin: 26px 52px;
    transform: scale(0.65);
  }  
  .fc-white, .h\:fc-white:hover, .f\:fc-white:focus, .f\:fc-white:focus-within {
    color: var(--theme-button-color) !important;
  }

enter image description here

(this user style can for example be used with Stylus https://github.com/openstyles/stylus )

User script

For users who prefer user scripts, here an adaptation of https://stackapps.com/questions/9443/revert-stack-exchanges-new-up-down-vote-buttons

// ==UserScript==
// @name         SE Pen Nib Vote Buttons
// @description  modified from https://stackapps.com/questions/9443/revert-stack-exchanges-new-up-down-vote-buttons
// @match        https://tex.stackexchange.com/*
// @match        https://tex.meta.stackexchange.com/*
// ==/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','-12.5 -36 23.5 36'));

    upsvg.forEach ( x => x.setAttribute('height','36'));
    upsvg.forEach ( x => x.setAttribute('width','36'));
    upsvg.forEach ( x => x.setAttribute('viewBox','-12.5 0 23.5 36'));

    // set SVG path values to resize the SVGs themselves
    downpath.forEach ( x => x.setAttribute('d','M 0.1,-17.7 c 1.1,-0.2 2,-1.2 2,-2.4 0,-1.4 -1.1,-2.5 -2.5,-2.5 -1.4,0 -2.5,1.1 -2.5,2.5 0,1.2 0.9,2.2 2,2.4 l -0.1,17.7 c -3.5,-10.1 -9.2,-15.3 -10.8,-16.9 0.4,-1.3 2.1,-5.8 2.5,-9.1 h 17.9 c 0.4,3.3 1.8,7.1 2.3,8.3 -1.6,1.7 -7.4,7.6 -10.9,17.7 Z'));
    uppath.forEach ( x => x.setAttribute('d','M 0.1,17.7 c 1.1,0.2 2,1.2 2,2.4 0,1.4 -1.1,2.5 -2.5,2.5 -1.4,0 -2.5,-1.1 -2.5,-2.5 0,-1.2 0.9,-2.2 2,-2.4 l -0.1,-17.7 c -3.5,10.1 -9.2,15.3 -10.8,16.9 0.4,1.3 2.1,5.8 2.5,9.1 h 17.9 c 0.4,-3.3 1.8,-7.1 2.3,-8.3 -1.6,-1.7 -7.4,-7.6 -10.9,-17.7 Z'));

    //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>`);
})();

enter image description here

(the script can be used e.g. with a user script manager like Tampermonkey, available for most commonly used bowsers https://www.tampermonkey.net/ )

5
  • 1
    Is there a way to revert the vote count number size too? Is very off putting, will get used to it over time but the old size was good. Thanks for sharing too, love the icons!
    – JamesT
    May 31, 2023 at 12:04
  • 3
    @JamesT Yes, see the second code block in meta.stackexchange.com/a/389568/237989 May 31, 2023 at 12:05
  • 3
    If I may ask, what are the issues with the new voting buttons? I haven't really been here too long so I'm not very familiar with the whole situation.
    – Slurp
    Jun 2, 2023 at 19:20
  • 3
    @Slurp Personally my problem with them is that it is sometimes hard to notice if you have already voted or not. The triangles we had until last week changed from light gray to a solid colour. This meant that you had both the change in colour as well as the change in luminosity. Now the change in luminosity is gone and the area of the triangle is much smaller making the colour change much harder to see. .. and they are boring compared to the pen nibs :) Jun 2, 2023 at 19:23
  • 3
    @Slurp For a more in-depth analysis, I recommend reading this answer meta.stackexchange.com/a/389458/237989 Jun 2, 2023 at 19:27

0

You must log in to answer this question.

Browse other questions tagged .