☰

Revert StackExchange Formatting

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

Versione datata 01/09/2020. Vedi la nuova versione l'ultima versione.

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