Better StackOverflow

adds outline to code blocks, ad block, no cookie modal, various fixes.

  1. /* ==UserStyle==
  2. @name Better StackOverflow
  3. @description adds outline to code blocks, ad block, no cookie modal, various fixes.
  4. @author NotYou
  5. @match *://stackoverflow.com/*
  6. @match *://*.stackoverflow.com/*
  7. @match *://stackexchange.com/*
  8. @match *://superuser.com/*
  9. @match *://serverfault.com/*
  10. @match *://askubuntu.com/*
  11. @match *://stackapps.com/*
  12. @match *://mathoverflow.net/*
  13. @namespace -
  14. @version 1.2.3
  15. @license GPL-3.0-or-later
  16. ==/UserStyle== */
  17.  
  18. /* Darker Accepted Mark Background in questions list */
  19.  
  20. .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
  21. background-color: var(--green-legacy-600);
  22. border-color: var(--green-legacy-600);
  23. }
  24.  
  25. /* Fix; Keyboard and Tag Elements | https://meta.stackexchange.com/a/257138/260841 */
  26.  
  27. kbd,
  28. .s-prose .post-tag {
  29. white-space: pre-wrap;
  30. max-width: calc(100% - 0.1em);
  31. }
  32.  
  33. /* Fix; Non-Vertically Aligned Elements at Sidebar | https://meta.stackexchange.com/q/388770/ */
  34.  
  35. #sidebar .related a,
  36. #sidebar .linked a {
  37. margin: auto 0;
  38. }
  39.  
  40. /* Fix; Remove Default FF styles for <select> */
  41.  
  42. select {
  43. -webkit-appearance: none;
  44. -moz-appearance: none;
  45. appearance: none;
  46. }
  47.  
  48. /* Fix; No Overflowing Avatar Text */
  49.  
  50. .s-avatar.s-user-card--avatar {
  51. overflow: hidden;
  52. }
  53.  
  54. /* Ad Block */
  55.  
  56. .img_ad,
  57. #dfp-tsb,
  58. #dfp-smlb,
  59. #dfp-tlb,
  60. #dfp-mlb,
  61. .js-report-ad-button-container,
  62. .adsbox,
  63. #newsletter-ad,
  64.  
  65. /* Cookie */
  66.  
  67. .js-consent-banner {
  68. display: none !important;
  69. }
  70.  
  71. .js-tag-editor.tag-editor.multi-line.s-input {
  72. width: 100% !important;
  73. }
  74.  
  75. /* Code Outline */
  76.  
  77. .default.s-code-block {
  78. --color: rgba(0, 0, 0, .2);
  79. }
  80.  
  81. [class*="lang-"] {
  82. border: 2px solid var(--color);
  83. }
  84.  
  85. [class*="lang-"]::after {
  86. content: '\a'var(--content);
  87. color: var(--color) !important;
  88. padding: 2px 5px 5px 5px;
  89. font-weight: 800;
  90. }
  91.  
  92. .snippet-code [class*="lang-"]::after {
  93. content: '\a\a'var(--content);
  94. }
  95.  
  96. .s-code-block::after {
  97. font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  98. }
  99.  
  100. .lang-none {
  101. --color: rgb(100, 0, 0);
  102. --content: "Plain";
  103. }
  104.  
  105. .lang-js {
  106. --color: rgb(247, 223, 30);
  107. --content: "JS";
  108. }
  109.  
  110. .lang-js::after {
  111. color: rgb(0, 0, 0);
  112. }
  113.  
  114. .lang-html {
  115. --color: rgb(242, 103, 44);
  116. --content: "HTML";
  117. }
  118.  
  119. .lang-css {
  120. --color: rgb(52, 169, 222);
  121. --content: "CSS";
  122. }
  123.  
  124. .lang-java {
  125. --color: rgb(234, 146, 5);
  126. --content: "Java";
  127. }
  128.  
  129. .lang-py,
  130. .lang-python {
  131. --color: rgb(54, 119, 173);
  132. --content: "Python";
  133. }
  134.  
  135. .lang-cpp {
  136. --color: rgb(101, 154, 210);
  137. --content: "C++";
  138. }
  139.  
  140. .lang-cs,
  141. .lang-csharp {
  142. --color: rgb(93, 108, 189);
  143. --content: "C#";
  144. }
  145.  
  146. .lang-c {
  147. --color: rgb(93, 108, 189);
  148. --content: "C";
  149. }
  150.  
  151. .lang-php {
  152. --color: rgb(93, 108, 189);
  153. --content: "PHP";
  154. }
  155.  
  156. .lang-rb {
  157. --color: rgb(174, 21, 5);
  158. --content: "Ruby";
  159. }
  160.  
  161. .lang-r {
  162. --color: rgb(35, 105, 190);
  163. --content: "R";
  164. }
  165.  
  166. .lang-perl {
  167. --color: rgb(66, 68, 109);
  168. --content: "Perl";
  169. }
  170.  
  171. .lang-bsh {
  172. --color: rgb(41, 48, 54);
  173. --content: "Bash";
  174. }
  175.  
  176. .lang-kotlin {
  177. --color: rgb(117, 114, 227);
  178. --content: "Kotlin";
  179. }
  180.  
  181. .lang-rust {
  182. --color: rgb(0, 0, 0);
  183. --content: "Rust";
  184. }
  185.  
  186. .lang-regex {
  187. --color: rgb(64, 209, 178);
  188. --content: "RegEx";
  189. }
  190.  
  191. .lang-sql {
  192. --color: rgb(192, 207, 212);
  193. --content: "SQL";
  194. }
  195.  
  196. .lang-pascal {
  197. --color: rgb(50, 96, 160);
  198. --content: "Pascal";
  199. }
  200.  
  201. .lang-vb {
  202. --color: rgb(60, 110, 179);
  203. --content: "VB";
  204. }
  205.  
  206. .lang-xml {
  207. --color: rgb(0, 95, 174);
  208. --content: "XML";
  209. }
  210.  
  211. .lang-lua {
  212. --color: rgb(0, 0, 128);
  213. --content: "Lua";
  214. }
  215.  
  216. .lang-go {
  217. --color: rgb(106, 215, 228);
  218. --content: "Go";
  219. }
  220.  
  221. .lang-swift {
  222. --color: rgb(250, 42, 31);
  223. --content: "Swift";
  224. }
  225.  
  226. .lang-clj {
  227. --color: rgb(145, 180, 255);
  228. --content: "Clojure";
  229. }
  230.  
  231. .lang-scala {
  232. --color: rgb(234, 2, 0);
  233. --content: "Scala";
  234. }
  235.  
  236. .lang-typescript {
  237. --color: rgb(49, 120, 198);
  238. --content: "TypeScript";
  239. }