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;
}
(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>`);
})();
(the script can be used e.g. with a user script manager like Tampermonkey, available for most commonly used bowsers https://www.tampermonkey.net/ )
