Lazyfoo Readable CSS

Adds a readable CSS to Lazyfoo's tutorials.

当前为 2022-07-21 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Lazyfoo Readable CSS
  3. // @namespace codesthings.com
  4. // @license MIT
  5. // @version 1.0
  6. // @description Adds a readable CSS to Lazyfoo's tutorials.
  7. // @author JamesCodesThings
  8. // @match *://*.lazyfoo.net/tutorials/*
  9. // @grant GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. const readableCss = `body {
  16. font-family: sans-serif;
  17. font-size: 1.2rem;
  18. background-color: #222;
  19. line-height: 1.25;
  20. }
  21.  
  22. br {
  23. content: " ";
  24. line-height:22px;
  25. display: block;
  26. margin: 3rem 0;
  27. }
  28.  
  29. div.content {
  30. position: relative;
  31. width: 90%;
  32. margin-left: auto;
  33. margin-right: auto;
  34. }
  35.  
  36. h6 {
  37. font-family: monospace;
  38. font-size: 1.2rem;
  39. line-height: 1.0;
  40. margin: 3rem;
  41. font-weight: normal;
  42. }
  43.  
  44. div.tutPreface {
  45. background-color:#333;
  46. border-color: #333;
  47. padding: 1rem 2rem 3rem 2rem;
  48. margin-bottom: 0;
  49.  
  50. position: relative;
  51. width: auto;
  52. }
  53.  
  54. div.tutPreface::after{
  55. content: ' ';
  56. position: absolute;
  57. width: 90%;
  58. margin-left: auto;
  59. margin-right: auto;
  60. height: 1px;
  61. background: white;
  62. top: 100%;
  63. left: 50%;
  64. transform: translateX(-50%);
  65.  
  66. }
  67.  
  68. div.tutText {
  69. background-color: #333;
  70. border-color: #333;
  71. padding: 3rem 2rem;
  72. width: auto;
  73. margin-left: 0;
  74. margin-right: 0;
  75. margin-bottom: 0;
  76.  
  77. }
  78.  
  79. div.tutImg {
  80. margin: 3rem 0;
  81. }
  82.  
  83. a.nav, a.leftNav {
  84. color: #3AF;
  85. text-decoration: none;
  86. }
  87. a.nav:hover, a.leftNav:hover {
  88. color: #58F;
  89. }
  90.  
  91. a.tutLink {
  92. color: #3AF;
  93. text-decoration: none;
  94. }
  95. a.tutLink:hover {
  96. color: #58F;
  97. }
  98.  
  99. table.tutToC {
  100. width: auto;
  101. margin: 0 0;
  102. border-spacing: 0;
  103. }
  104.  
  105. td.ToCTitle {
  106. background-color: #333;
  107. border-top: 0;
  108. border-left: 0;
  109. border-right: 0;
  110. }
  111.  
  112. td.tutLink {
  113. background-color: #333;
  114. border: 0;
  115. }
  116.  
  117.  
  118. div.tutCodeHeader {
  119. background: #333;
  120. border-left: 0;
  121. border-top: 0;
  122. border-right: 0;
  123. margin: 0;
  124. width: auto;
  125. padding: 1rem 2rem;
  126. }
  127.  
  128. div.tutCode {
  129. font-family: monospace;
  130. font-weight: lighter;
  131. line-height: 1.3;
  132. color: white;
  133. background: #2b2b2b;
  134. border: 0;
  135. margin: 0;
  136. width: auto;
  137. padding: 2rem;
  138. }
  139.  
  140. div.tutFooter {
  141. width: auto;
  142. margin: 0;
  143. padding: 2rem;
  144. background: #111;
  145. border: 0;
  146. }
  147.  
  148. div.tutFooter a::after{
  149. content: " >";
  150. }
  151.  
  152. div.tutFooter a.leftNav::after {
  153. content: '';
  154. }
  155.  
  156. div.tutFooter a.leftNav::before {
  157. content: '< ';
  158. }`;
  159.  
  160. GM_addStyle(readableCss);
  161. })();