☰

ModernRFCs

A new interface for reading RFCs in modern times.

当前为 2022-09-09 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name               ModernRFCs
  3. @namespace          TheLastZombie/userstyles
  4. @version            1.0.0
  5. @description        A new interface for reading RFCs in modern times.
  6. @compatible         chrome
  7. @compatible         edge
  8. @compatible         firefox
  9. @compatible         opera
  10. @compatible         safari
  11. @homepageURL        https://codeberg.org/sun/userstyles
  12. @supportURL         https://codeberg.org/sun/userstyles/issues/new
  13. @contributionURL    https://ko-fi.com/rcrsch
  14. @contributionAmount €1.00
  15. @author             TheLastZombie <roesch.eric+userstyles@protonmail.com>
  16. @icon               https://codeberg.org/sun/userstyles/raw/branch/main/icons/ModernRFCs.ico
  17. @copyright          2022, TheLastZombie (https://eric.jetzt/)
  18. @license            MIT; https://codeberg.org/sun/userstyles/src/branch/main/LICENSE
  19. @preprocessor       stylus
  20. ==/UserStyle== */
  21.  
  22. @-moz-document regexp("https://www\\.rfc-editor\\.org\\/rfc\\/rfc\\d+\\.html(#.*)?")
  23. {
  24.   @font-face {
  25.     font-family: "Fira Code";
  26.     src: url("https://cdn.jsdelivr.net/npm/firacode/distr/woff2/FiraCode-VF.woff2");
  27.   }
  28.   html:not(.RFC) {
  29.     body {
  30.       width: max-content;
  31.       margin: auto;
  32.       color: #212121;
  33.       @media (prefers-color-scheme: dark) {
  34.         background-color: #212121;
  35.         color: white;
  36.       }
  37.       .docinfo {
  38.         display: block;
  39.         white-space: initial;
  40.         &:first-child {
  41.           position: fixed;
  42.           bottom: 0;
  43.           left: 0;
  44.           display: flex;
  45.           align-items: center;
  46.           justify-content: center;
  47.           width: 100%;
  48.           height: 80px;
  49.           background-color: #f5f5f5;
  50.           @media (prefers-color-scheme: dark) {
  51.             background-color: #424242;
  52.           }
  53.           font-size: 0;
  54.           a {
  55.             display: inline-block;
  56.             width: 80px;
  57.             height: 40px !important;
  58.             margin: 10px;
  59.             background-repeat: no-repeat;
  60.             background-position: center;
  61.             border-radius: 20px;
  62.             transition: all 125ms ease-in-out;
  63.             &:hover {
  64.               background-color: #eeeeee;
  65.               @media (prefers-color-scheme: dark) {
  66.                 background-color: #9e9e9e;
  67.               }
  68.             }
  69.             &:focus,
  70.             &[href^="/rfc/rfc"][href$=".html"] {
  71.               background-color: #e0e0e0;
  72.               @media (prefers-color-scheme: dark) {
  73.                 background-color: #757575;
  74.               }
  75.             }
  76.             &[href="https://www.rfc-editor.org"]
  77.             {
  78.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/home/v16/24px.svg);
  79.             }
  80.             &[href^="/rfc/rfc"][href$=".txt"] {
  81.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/subject/v13/24px.svg);
  82.             }
  83.             &[href^="/rfc/pdfrfc/rfc"][href$=".txt.pdf"],
  84.             &[href^="/rfc/rfc"][href$=".pdf"] {
  85.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/print/v16/24px.svg);
  86.             }
  87.             &[href^="/rfc/rfc"][href$=".html"] {
  88.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/preview/v7/24px.svg);
  89.             }
  90.             &[href^="https://datatracker.ietf.org/doc/rfc"]
  91.             {
  92.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/more_vert/v19/24px.svg);
  93.             }
  94.             &[href^="https://datatracker.ietf.org/ipr/search"][href$="submit=rfc"]
  95.             {
  96.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/flag/v18/24px.svg);
  97.             }
  98.             &[href^="/errata/rfc"] {
  99.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/warning/v17/24px.svg);
  100.             }
  101.             &[href^="https://www.rfc-editor.org/info/rfc"]
  102.             {
  103.               background-image: url(https://fonts.gstatic.com/s/i/materialicons/info/v20/24px.svg);
  104.             }
  105.             @media (prefers-color-scheme: dark) {
  106.               filter: invert(1);
  107.             }
  108.           }
  109.         }
  110.         &:nth-child(5),
  111.         &:nth-child(7):not(:empty):not(:-moz-only-whitespace) {
  112.           position: fixed;
  113.           border-radius: 28px;
  114.           margin: 2.5em;
  115.           padding: 0.5em 2em 1.25em 2em;
  116.           color: white !important;
  117.           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
  118.             0 1px 2px rgba(0, 0, 0, 0.24);
  119.           text-transform: uppercase;
  120.           a {
  121.             color: inherit;
  122.           }
  123.           &:before {
  124.             content: "";
  125.             height: 24px;
  126.             display: inline-block;
  127.             position: relative;
  128.             top: 7px;
  129.             background-repeat: no-repeat;
  130.             filter: invert(1);
  131.           }
  132.         }
  133.         &:nth-child(7) {
  134.           top: 0;
  135.           left: 0;
  136.           background-color: #f44336;
  137.           span {
  138.             color: white !important;
  139.           }
  140.           &:before {
  141.             width: 30px;
  142.             background-image: url(https://fonts.gstatic.com/s/i/materialicons/warning/v17/24px.svg);
  143.           }
  144.         }
  145.         &:nth-child(5) {
  146.           top: 0;
  147.           right: 0;
  148.           background-color: #2196f3;
  149.           &:before {
  150.             width: 28px;
  151.             background-image: url(https://fonts.gstatic.com/s/i/materialicons/info/v20/24px.svg);
  152.           }
  153.         }
  154.       }
  155.       > br {
  156.         display: none;
  157.       }
  158.       h1,
  159.       h2,
  160.       h3,
  161.       h4,
  162.       h5,
  163.       h6,
  164.       pre,
  165.       .h1,
  166.       .h2,
  167.       .h3,
  168.       .h4,
  169.       .h5,
  170.       .h6,
  171.       .pre {
  172.         font-family: "Fira Code";
  173.         line-height: 1.3333;
  174.       }
  175.       pre {
  176.         &:first-of-type {
  177.           margin-top: 2.5em;
  178.         }
  179.         &:last-of-type {
  180.           margin-bottom: calc(2.5em + 80px);
  181.         }
  182.       }
  183.       .grey {
  184.         color: #9e9e9e;
  185.       }
  186.       a,
  187.       .grey a {
  188.         text-decoration: none;
  189.         color: #2196f3;
  190.         &:visited {
  191.           color: #9c27b0;
  192.         }
  193.         &:active {
  194.           color: #f44336;
  195.         }
  196.         @media (prefers-color-scheme: dark) {
  197.           color: #64b5f6;
  198.           &:visited {
  199.             color: #ba68c8;
  200.           }
  201.           &:active {
  202.             color: #e57373;
  203.           }
  204.         }
  205.       }
  206.       hr {
  207.         border: 1px solid #f5f5f5;
  208.         @media (prefers-color-scheme: dark) {
  209.           border: 1px solid #424242;
  210.         }
  211.         border-bottom: none !important;
  212.         margin-top: 1.5em;
  213.       }
  214.     }
  215.   }
  216. }