☰

ModernRFCs

A new interface for reading RFCs in modern times.

  1. /* ==UserStyle==
  2. @name               ModernRFCs
  3. @namespace          sun/userstyles
  4. @version            1.0.8
  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://forgejo.sny.sh/sun/userstyles
  12. @supportURL         https://forgejo.sny.sh/sun/userstyles/issues
  13. @contributionURL    https://liberapay.com/sun
  14. @contributionAmount €1.00
  15. @author             Sunny <sunny@sny.sh>
  16. @icon               https://forgejo.sny.sh/sun/userstyles/raw/branch/main/icons/ModernRFCs.ico
  17. @copyright          2022-present, Sunny (https://sny.sh/)
  18. @license            Hippocratic License; https://forgejo.sny.sh/sun/userstyles/src/branch/main/LICENSE.md
  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:
  118.             0 1px 3px rgba(0, 0, 0, 0.12),
  119.             0 1px 2px rgba(0, 0, 0, 0.24);
  120.           text-transform: uppercase;
  121.           a {
  122.             color: inherit;
  123.           }
  124.           &:before {
  125.             content: "";
  126.             height: 24px;
  127.             display: inline-block;
  128.             position: relative;
  129.             top: 7px;
  130.             background-repeat: no-repeat;
  131.             filter: invert(1);
  132.           }
  133.         }
  134.         &:nth-child(7) {
  135.           top: 0;
  136.           left: 0;
  137.           background-color: #f44336;
  138.           span {
  139.             color: white !important;
  140.           }
  141.           &:before {
  142.             width: 30px;
  143.             background-image: url(https://fonts.gstatic.com/s/i/materialicons/warning/v17/24px.svg);
  144.           }
  145.         }
  146.         &:nth-child(5) {
  147.           top: 0;
  148.           right: 0;
  149.           background-color: #2196f3;
  150.           &:before {
  151.             width: 28px;
  152.             background-image: url(https://fonts.gstatic.com/s/i/materialicons/info/v20/24px.svg);
  153.           }
  154.         }
  155.       }
  156.       > br {
  157.         display: none;
  158.       }
  159.       h1,
  160.       h2,
  161.       h3,
  162.       h4,
  163.       h5,
  164.       h6,
  165.       pre,
  166.       .h1,
  167.       .h2,
  168.       .h3,
  169.       .h4,
  170.       .h5,
  171.       .h6,
  172.       .pre {
  173.         font-family: "Fira Code";
  174.         line-height: 1.3333;
  175.       }
  176.       pre {
  177.         &:first-of-type {
  178.           margin-top: 2.5em;
  179.         }
  180.         &:last-of-type {
  181.           margin-bottom: calc(2.5em + 80px);
  182.         }
  183.       }
  184.       .grey {
  185.         color: #9e9e9e;
  186.       }
  187.       a,
  188.       .grey a {
  189.         text-decoration: none;
  190.         color: #2196f3;
  191.         &:visited {
  192.           color: #9c27b0;
  193.         }
  194.         &:active {
  195.           color: #f44336;
  196.         }
  197.         @media (prefers-color-scheme: dark) {
  198.           color: #64b5f6;
  199.           &:visited {
  200.             color: #ba68c8;
  201.           }
  202.           &:active {
  203.             color: #e57373;
  204.           }
  205.         }
  206.       }
  207.       hr {
  208.         border: 1px solid #f5f5f5;
  209.         @media (prefers-color-scheme: dark) {
  210.           border: 1px solid #424242;
  211.         }
  212.         border-bottom: none !important;
  213.         margin-top: 1.5em;
  214.       }
  215.     }
  216.   }
  217. }