☰

Revert StackExchange Formatting

Brings back the old line-height, colors, padding, borders, etc. of StackExchange websites like StackOverflow, SuperUser, ServerFault, etc.

  1. // ==UserScript==
  2. // @name         Revert StackExchange Formatting
  3. // @namespace    https://github.com/Prid13/Revert-StackExchange-Formatting
  4. // @version      1.2.1
  5. // @history      1.2.1 updated script to reflect new changes (as per Sep 24)
  6. // @history      1.1.1 added downloadURL and update URL to meta
  7. // @history      1.1.0 fully implemented old paragraph spacing
  8. // @history      1.0.8 added old compact paragraph spacing (margin-bottom)
  9. // @history      1.0.5 fixed bug: first line in code blocks being indented
  10. // @description  Brings back the old line-height, colors, padding, borders, etc. of StackExchange websites like StackOverflow, SuperUser, ServerFault, etc.
  11. // @author       Prid
  12. // @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)//
  13. // @run-at       document-start
  14. // @grant        none
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     var style = "";
  21.  
  22.     var values = {
  23.         line_height: 1.3,
  24.         
  25.         paragraph_spacing: "15px",
  26.  
  27.         code_block_bgcol: "#eff0f1",
  28.         code_block_padding: "12px 8px",
  29.         code_block_radius: "3px",
  30.  
  31.         inline_code_bgcol: "#e4e6e8",
  32.         inline_code_padding: "1px 5px",
  33.         inline_code_radius: "0px",
  34.  
  35.         comment_code_bgcol: "#eff0f1",
  36.         comment_code_padding: "1px 5px",
  37.     };
  38.  
  39.     buildCSS();
  40.     injectCSS();
  41.  
  42.     function buildCSS(){
  43.         var line_height = values.line_height;
  44.  
  45.         // paragraphs (revert line-height)
  46.         style += ".s-prose { line-height: " + line_height + "!important; }";
  47.         
  48.         // OLD PARAGRAPH SPACING
  49.     		style += ".s-prose p, .s-prose ol, .s-prose ul, .s-prose blockquote, .s-prose hr { ";
  50.     		style += 	"margin-bottom: "		+ values.paragraph_spacing + "!important;"; // 15px
  51.     		style += "}";
  52.     		
  53.     		// margin-bottom for <pre>
  54.     		style += ".s-prose pre { ";
  55.     		style += 	"margin-bottom: "		+ "13px!important;";
  56.     		style += "}";
  57.     		
  58.     		// margin-bottom for ul li, ol li
  59.     		style += ".s-prose ol li, .s-prose ul li { ";
  60.     		style += 	"margin-bottom: "		+ "7.5px!important;";
  61.     		style += "}";
  62.     		// fix margin-bottom for last element in ol and ul
  63.     		style += ".s-prose ol li:last-child, .s-prose ul li:last-child { ";
  64.     		style += 	"margin-bottom: "		+ "0!important;";
  65.     		style += "}";
  66.     		
  67.     		// heading margin-bottom
  68.     		style += ".s-prose h1 { margin-bottom: 21px!important; }";
  69.     		style += ".s-prose h2 { margin-bottom: 19px!important; }";
  70.     		style += ".s-prose h3 { margin-bottom: 17px!important; }";
  71.     		style += ".s-prose h4 { margin-bottom: 15px!important; }";
  72.     		
  73.     		// fix margin-bottom for last element in blockquote
  74.     		style += ".s-prose blockquote *:last-child { ";
  75.     		style += 	"margin-bottom: "		+ "0!important;"; // don't apply to blockquotes
  76.     		style += "}";
  77.  
  78.         // ADDITIONAL REVERSIONS
  79.             // code blocks
  80.             style += ".s-prose pre.s-code-block, .s-prose pre:not(.s-code-block) { ";
  81.             style += 	"line-height: " 		+ line_height + "!important;";
  82.             style += 	"background-color: " 		+ values.code_block_bgcol + "!important;";
  83.             style += 	"padding: " 			+ values.code_block_padding + "!important;";
  84.             style += 	"border-radius: " 		+ values.code_block_radius + "!important;";
  85.             style += "}";
  86.  
  87.             // fix inline code styling overriding code blocks (add transparent bg, remove padding)
  88. 			style += ".s-prose pre.s-code-block code, .s-prose pre:not(.s-code-block) code { ";
  89. 			style += 	"background-color: transparent!important;";
  90. 			style += 	"padding: 0!important;";
  91. 			style += "}";
  92.  
  93.             // inline code
  94.             style += ".s-prose *:not(.s-code-block) > code {";
  95.             style += 	"background-color: " 		+ values.inline_code_bgcol + "!important;";
  96.             style += 	"padding: " 			+ values.inline_code_padding + "!important;";
  97.             style += 	"border-radius: " 		+ values.inline_code_radius + "!important;";
  98.             style += "}";
  99.  
  100.             // comment inline code
  101.             style += ".comment-text code {";
  102.             style += 	"background-color: " 		+ values.comment_code_bgcol + "!important;";
  103.             style += 	"padding: " 			+ values.comment_code_padding + "!important;"; // padding is same
  104.             style += "}";
  105.  
  106.     }
  107.  
  108.     function injectCSS(){
  109.         // credit: https://stackoverflow.com/a/13436780/3705191
  110.         var cssStyle = document.createElement('style');
  111.         cssStyle.type = 'text/css';
  112.         var rules = document.createTextNode(style);
  113.         cssStyle.appendChild(rules);
  114.         document.getElementsByTagName("head")[0].appendChild(cssStyle);
  115.     }
  116. })();