☰

Github Markdown Mod

Make Github Markdown headers more visible

  1. /* ==UserStyle==
  2. @name         Github Markdown Mod
  3. @description  Make Github Markdown headers more visible
  4. @author       V1rgul (https://github.com/V1rgul)
  5. @license      CC BY-NC - Creative Commons Attribution-NonCommercial
  6. @version 0.0.1.20201220180616
  7. @namespace https://greasyfork.org/users/676264
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("github.com") {
  11. @namespace url(http://www.w3.org/1999/xhtml);
  12. .markdown-body {
  13.     font-family: 'Segoe UI', sans-serif;
  14. }
  15. /* HEADERS */
  16. .markdown-body h1,
  17. .markdown-body h2,
  18. .markdown-body h3 {
  19.     border: none;
  20.     padding: 0;
  21.     line-height: normal;
  22.     margin: 0.5em 0 0.1em 0;
  23. }
  24. .markdown-body h1 {
  25.     text-align: center;
  26. }
  27. .markdown-body h1 {
  28.     font-size: 6em;
  29. }
  30.  
  31. .markdown-body h2 {
  32.     color: #0366d6;
  33.     font-size: 5em;
  34. }
  35. .markdown-body h3 {
  36.     font-size: 3em;
  37. }
  38. .markdown-body h4 {
  39.     color: #0366d6;
  40.     font-size: 2em;
  41. }
  42. .markdown-body h5 {
  43.     font-size: 1.2em;
  44. }
  45.  
  46. /* LISTS */
  47. .markdown-body ul,
  48. .markdown-body ol {
  49.     list-style-type: none;
  50.     position: relative;
  51.     padding-left: 1.6em;
  52. }
  53.  
  54. .markdown-body ul:not(.contains-task-list) > li:before,
  55. .markdown-body ol > li:before {
  56.     position: absolute;
  57.     left: 0.1em;
  58.     display: inline-block;
  59. }
  60. .markdown-body ul:not(.contains-task-list) > li:before {
  61.     color: #0366d6;
  62.     content: "\25AA";
  63.     font-size: 40px;
  64.     line-height: 20px;
  65.     position: absolute;
  66.     left: 0.1em;
  67.     display: inline-block;
  68.     vertical-align: baseline;
  69. }
  70. .markdown-body ul > li > ul:not(.contains-task-list) > li:before {
  71.     content: "\25AB";
  72. }
  73. .markdown-body ul > li > ul > li > ul:not(.contains-task-list) > li:before {
  74.     content: "\25AA";
  75.     font-size: 20px;
  76.     left: 0.25em;
  77. }
  78. .markdown-body ul > li > ul > li > ul > li > ul:not(.contains-task-list) > li:before {
  79.     content: "\25AB";
  80. }
  81.  
  82. .markdown-body ol {
  83.     counter-reset: item;
  84. }
  85. .markdown-body ol > li {
  86.     counter-increment: item;
  87. }
  88. .markdown-body ol > li:before {
  89.     content: counter(item) ". ";
  90.     color: #0366d6;
  91.     font-weight: bold;
  92. }
  93. .markdown-body ol > li > ol > li:before {
  94.     content: counter(item, lower-roman) ". ";
  95. }
  96. .markdown-body ol > li > ol > li > ol > li:before {
  97.     content: counter(item, lower-latin) ". ";
  98. }
  99.  
  100. .markdown-body blockquote, .markdown-body details, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
  101.     margin-top: 0;
  102.     margin-bottom: 8px;
  103. }
  104.  
  105. /* CODE */
  106. .markdown-body code,
  107. .markdown-body pre,
  108. .markdown-body .highlight pre {
  109.     /*border: 1px solid rgba(153, 204, 255, .5);*/
  110.     /*background: #F1F8FF;/*rgba(00,22,44,0.07);*/
  111.     background: rgba(91, 122, 153, .1);
  112.     border-radius: 2px;
  113.     color: #191d21;
  114. }
  115.  
  116. html[data-color-mode="dark"] .markdown-body code,
  117. html[data-color-mode="dark"] .markdown-body pre,
  118. html[data-color-mode="dark"] .markdown-body .highlight pre {
  119.     color: #edf6ff;
  120. }
  121.  
  122.  
  123. .markdown-body code {
  124.     margin: 0 0.25em;
  125.     padding: .2em .5em;
  126. }
  127. .markdown-body pre,
  128. .markdown-body .highlight pre {
  129.     padding: 0.5em 1.5em;
  130. }
  131. }