☰

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. })();