☰

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.1
  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.readable {
  16.   font-family: sans-serif;
  17.   font-size: 1.2rem;
  18.   background-color: #222;
  19.   line-height: 1.25;
  20. }
  21.  
  22. .readable br {
  23.   content: " ";
  24.   line-height:22px;
  25.    display: block;
  26.    margin: 3rem 0;
  27. }
  28.  
  29. .readable div.content {
  30.   position: relative;
  31.   width: 90%;
  32.   margin-left: auto;
  33.   margin-right: auto;
  34. }
  35.  
  36. .readable 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. .readable 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. .readable 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. .readable 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. .readable div.tutImg {
  80.   margin: 3rem 0;
  81. }
  82.  
  83. .readable a.nav, a.leftNav {
  84.   color: #3AF;
  85.   text-decoration: none;
  86. }
  87.  
  88. .readable a.nav:hover, a.leftNav:hover {
  89.   color: #58F;
  90. }
  91.  
  92. .readable a.tutLink {
  93.   color: #3AF;
  94.   text-decoration: none;
  95. }
  96.  
  97. .readable a.tutLink:hover {
  98.   color: #58F;
  99. }
  100.  
  101. .readable table.tutToC {
  102.   width: auto;
  103.   margin: 0 0;
  104.   border-spacing: 0;
  105. }
  106.  
  107. .readable td.ToCTitle {
  108.   background-color: #333;
  109.   border-top: 0;
  110.   border-left: 0;
  111.   border-right: 0;
  112. }
  113.  
  114. .readable td.tutLink {
  115.   background-color: #333;
  116.   border: 0;
  117. }
  118.  
  119.  
  120. .readable div.tutCodeHeader {
  121.   background: #333;
  122.   border-left: 0;
  123.   border-top: 0;
  124.   border-right: 0;
  125.   margin: 0;
  126.   width: auto;
  127.   padding: 1rem 2rem;
  128. }
  129.  
  130. .readable div.tutCode {
  131.   font-family: monospace;
  132.   font-weight: lighter;
  133.   line-height: 1.3;
  134.   color: white;
  135.   background: #2b2b2b;
  136.   border: 0;
  137.   margin: 0;
  138.   width: auto;
  139.   padding: 2rem;
  140. }
  141.  
  142. .readable div.tutFooter {
  143.   width: auto;
  144.   margin: 0;
  145.   padding: 2rem;
  146.   background: #111;
  147.   border: 0;
  148. }
  149.  
  150. .readable div.tutFooter a::after{
  151.   content: " >";
  152. }
  153.  
  154. .readable div.tutFooter a.leftNav::after {
  155.   content: '';
  156. }
  157.  
  158. .readable div.tutFooter a.leftNav::before {
  159.   content: '< ';
  160. }`;
  161.  
  162. document.body.className += 'readable';
  163.     GM_addStyle(readableCss);
  164. })();