166340842e
Browsers treat an overflow: auto directive as a request to make an element scrollable, even if the element does not need it. This results in scrolling being confined to that element sometimes, such as when a document is scrolled using a mouse wheel if the document scrolls the pointer into that element. The result is that scrolling can be "trapped" on an element that doesn't really need to scroll. This disables vertical scrolling for those pre elements that might trap scrolling in this way.
469 lines
9.4 KiB
SCSS
469 lines
9.4 KiB
SCSS
// Based on https://github.com/martinthomson/rfc-txt-html/blob/main/txt.css
|
|
|
|
:root {
|
|
--line: 1.3em;
|
|
--block: 0 0 0 3ch;
|
|
--paragraph: var(--line) 0 var(--line) 3ch;
|
|
}
|
|
|
|
// WeasyPrint can't handle CSS variables in multi-attribute properties, so work
|
|
// around that
|
|
// https://github.com/Kozea/WeasyPrint/issues/1219
|
|
|
|
@mixin margin-paragraph {
|
|
margin-top: var(--line);
|
|
margin-right: 0;
|
|
margin-bottom: var(--line);
|
|
margin-left: 3ch;
|
|
}
|
|
|
|
@mixin margin-line {
|
|
margin-top: var(--line);
|
|
margin-right: 0;
|
|
margin-bottom: var(--line);
|
|
margin-left: 0;
|
|
}
|
|
|
|
@mixin margin-block {
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 3ch;
|
|
}
|
|
|
|
.rfchtml {
|
|
// body {
|
|
// color: black;
|
|
// font-family: monospace;
|
|
// font-size: 1em;
|
|
line-height: var(--line);
|
|
width: 72ch;
|
|
// margin: var(--line) 3ch;
|
|
margin-top: var(--line);
|
|
margin-right: 3ch;
|
|
margin-bottom: var(--line);
|
|
margin-left: 3ch;
|
|
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-weight: bold;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
@include margin-line; // margin: var(--line) 0;
|
|
}
|
|
.section-number {
|
|
margin-right: 1ch;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
section > p, section > div > p {
|
|
@include margin-paragraph; // margin: var(--paragraph);
|
|
}
|
|
aside {
|
|
@include margin-block; // margin: var(--block);
|
|
}
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
blockquote {
|
|
@include margin-paragraph; // margin: var(--paragraph);
|
|
padding-left: calc(2ch - 2px);
|
|
border-left: 2px solid var(--bs-border-color);
|
|
}
|
|
|
|
/* Header junk */
|
|
#external-metadata {
|
|
display: none !important; /* metadata.min.js is evil because it produces unstyleable goop */
|
|
}
|
|
#identifiers dt:is(.label-stream, .label-rfc, .label-std, .label-bcp, .label-internet-draft,
|
|
.label-workgroup, .label-intended-status, .label-obsoletes, .label-updates,
|
|
.label-published, .label-expires, .label-category, .label-issn,
|
|
.label-authors), .ears {
|
|
display: none;
|
|
}
|
|
#identifiers {
|
|
margin: 0;
|
|
}
|
|
#identifiers dt {
|
|
margin: 0 1ch 0 0;
|
|
float: revert;
|
|
display: inline-block;
|
|
}
|
|
#identifiers dd {
|
|
margin: 0;
|
|
margin-left: 0 !important; /* grr */
|
|
width: 47ch;
|
|
/* HAXX: this gets around the lack of text-content-trim support */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#identifiers dd::before {
|
|
margin: 0 1ch 0 0;
|
|
}
|
|
#identifiers dd.rfc::before {
|
|
content: "Request for Comments:";
|
|
}
|
|
#identifiers dd.std::before {
|
|
content: "STD:";
|
|
}
|
|
#identifiers dd.bcp::before {
|
|
content: "BCP:";
|
|
}
|
|
#identifiers dd.internet-draft::before {
|
|
content: "Internet-Draft:";
|
|
}
|
|
#identifiers dd.workgroup::before {
|
|
content: "Workgroup:";
|
|
}
|
|
#identifiers dd.intended-status::before {
|
|
content: "Intended Status:";
|
|
}
|
|
#identifiers dd.obsoletes::before {
|
|
content: "Obsoletes:";
|
|
margin: 0 0 0 -10ch;
|
|
}
|
|
#identifiers dd.obsoletes {
|
|
padding-left: 10ch;
|
|
}
|
|
#identifiers dd.updates::before {
|
|
content: "Updates:";
|
|
margin: 0 0 0 -8ch;
|
|
}
|
|
#identifiers dd.updates {
|
|
padding-left: 8ch;
|
|
}
|
|
#identifiers dd:is(.updates, .obsoletes) a {
|
|
margin: 0 0 0 1ch;
|
|
}
|
|
#identifiers dd:is(.updates, .obsoletes) a:last-of-type {
|
|
margin-right: 1ch;
|
|
}
|
|
#identifiers dd.published::before {
|
|
content: "Published:";
|
|
}
|
|
#identifiers dd.expires::before {
|
|
content: "Expires:";
|
|
}
|
|
#identifiers dd.category::before {
|
|
content: "Category:";
|
|
}
|
|
#identifiers dd.issn::before {
|
|
content: "ISSN:";
|
|
}
|
|
|
|
/* Thanks WeasyPrint for not supporting @supports */
|
|
/* @supports not (display: grid) { */
|
|
#identifiers dd.authors {
|
|
padding-left: 8ch;
|
|
width: 64ch;
|
|
}
|
|
#identifiers dd.authors::before {
|
|
content: "Authors:";
|
|
margin: 0 0 0 -8ch;
|
|
}
|
|
#identifiers dd.authors .author {
|
|
display: inline-block;
|
|
margin: 0 2ch 0 1ch;
|
|
min-height: calc(2 * var(--line));
|
|
}
|
|
#identifiers dd.authors .author:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
/* } */
|
|
/* #identifiers styling for when grid layout is supported, or not */
|
|
@supports(display: grid) {
|
|
#identifiers {
|
|
display: grid;
|
|
grid-template-columns: 47ch 24ch;
|
|
grid-auto-rows: auto;
|
|
gap: 0 1ch;
|
|
}
|
|
#identifiers dd {
|
|
grid-column: 1;
|
|
}
|
|
#identifiers dd.authors {
|
|
grid-area: 1 / 2 / 100 / 3;
|
|
width: 24ch;
|
|
text-align: right;
|
|
display: block;
|
|
/* overrides for @supports not block */
|
|
padding-left: 0;
|
|
}
|
|
/* more overrides for @supports not block */
|
|
#identifiers dd.authors::before {
|
|
display: none;
|
|
}
|
|
#identifiers dd.authors .author {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#title {
|
|
clear: left;
|
|
text-align: center;
|
|
margin-top: calc(2 * var(--line));
|
|
}
|
|
#rfcnum {
|
|
display: none;
|
|
}
|
|
:is(#status-of-memo, #copyright) a {
|
|
white-space: nowrap;
|
|
}
|
|
.toplink {
|
|
display: none;
|
|
}
|
|
nav.toc ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
nav.toc ul > li {
|
|
padding-left: 2ch;
|
|
}
|
|
nav.toc > ul > li {
|
|
padding-left: 3ch;
|
|
}
|
|
nav.toc ul > li > p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Lists */
|
|
ol, ul {
|
|
padding: 0;
|
|
}
|
|
ol {
|
|
margin: 0 0 0 6ch; /* todo: deal with lists that have >= 10 items */
|
|
}
|
|
:is(ol, ul) ol {
|
|
margin: 0 0 0 3ch;
|
|
}
|
|
ul {
|
|
margin: 0 0 0 4ch;
|
|
}
|
|
ul.ulEmpty {
|
|
list-style: none;
|
|
}
|
|
ul:not(.ulEmpty) {
|
|
list-style-type: '*';
|
|
}
|
|
ul ul:not(.ulEmpty) {
|
|
list-style-type: '-';
|
|
}
|
|
:is(ul, ol) ul {
|
|
margin-left: 1ch;
|
|
}
|
|
ul ul ul:not(.ulEmpty) {
|
|
list-style-type: 'o';
|
|
}
|
|
li {
|
|
@include margin-line; // margin: var(--line) 0;
|
|
padding: 0 0 0 2ch;
|
|
}
|
|
dl {
|
|
margin: 0;
|
|
}
|
|
section > dl, section > div > dl {
|
|
@include margin-block; // margin: var(--block);
|
|
}
|
|
dl, dt {
|
|
clear: left;
|
|
}
|
|
dt {
|
|
float: left;
|
|
font-weight: bold;
|
|
margin: 0 2ch 0 0;
|
|
break-after: avoid;
|
|
}
|
|
dd {
|
|
@include margin-paragraph; // margin: var(--paragraph);
|
|
margin-left: 3ch !important; /* override attribute added by xml2rfc */
|
|
padding: 0;
|
|
break-before: avoid;
|
|
}
|
|
dl.dlNewline > dd {
|
|
clear: left;
|
|
}
|
|
dl.olPercent > dt {
|
|
min-width: 4ch;
|
|
}
|
|
dl.olPercent > dd {
|
|
margin-left: 6ch !important; /* as above */
|
|
}
|
|
dl > dd > dl {
|
|
margin-top: var(--line);
|
|
margin-bottom: 0;
|
|
}
|
|
dl.references dt {
|
|
margin-right: 1ch;
|
|
}
|
|
dl.references dd {
|
|
margin-left: 11ch !important; /* grr */
|
|
}
|
|
:is(dd, span).break {
|
|
display: none;
|
|
}
|
|
:is(li, dd, blockquote, aside) :is(p, ol, ul:not(.toc), dl):not(:first-child) {
|
|
margin-top: var(--line);
|
|
}
|
|
:is(li, dd, blockquote, aside) .break:first-child + :is(p, ol, ul, dl) {
|
|
margin-top: 0;
|
|
}
|
|
:is(ol:is(.compact, .olCompact), ul:is(.compact, .ulCompact)) > li,
|
|
:is(dl.compact, .dlCompact) > :is(dt, dd) {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Figures, tables */
|
|
pre {
|
|
@include margin-line; // margin: var(--line) 0;
|
|
}
|
|
div:is(.artwork, .sourcecode) {
|
|
margin-top: var(--line);
|
|
margin-bottom: var(--line);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: end;
|
|
}
|
|
div:is(.artwork, .sourcecode).alignCenter {
|
|
justify-content: center;
|
|
}
|
|
div:is(.artwork, .sourcecode).alignRight {
|
|
justify-content: end;
|
|
}
|
|
div:is(.artwork, .sourcecode)::before {
|
|
flex: 0 1 3ch;
|
|
content: "";
|
|
}
|
|
div:is(.artwork, .sourcecode).alignRight::before {
|
|
flex-grow: 1;
|
|
}
|
|
div:is(.artwork, .sourcecode) pre {
|
|
flex: 0 0 content;
|
|
margin: 0;
|
|
max-width: 72ch;
|
|
overflow: auto clip;
|
|
}
|
|
div:is(.artwork, .sourcecode) .pilcrow {
|
|
flex: 0 0 1ch;
|
|
}
|
|
figcaption, table caption {
|
|
text-align: center;
|
|
margin-top: var(--line);
|
|
}
|
|
table {
|
|
--half-line: calc(var(--line) / 2 - 1px);
|
|
caption-side: bottom;
|
|
// margin: var(--line) 0 var(--half-line) 3ch;
|
|
margin-top: var(--line);
|
|
margin-right: 0;
|
|
margin-bottom: var(--half-line);
|
|
margin-left: 3ch;
|
|
border-collapse: collapse;
|
|
}
|
|
table.center {
|
|
margin-left: auto; /* todo: add 3ch */
|
|
margin-right: auto;
|
|
}
|
|
table caption {
|
|
margin-top: calc(var(--half-line) + var(--line));
|
|
}
|
|
thead, tfoot {
|
|
border-top-style: double;
|
|
border-bottom-style: double;
|
|
}
|
|
td, th {
|
|
border: 1px solid var(--bs-border-color);
|
|
// padding: var(--half-line) 1ch;
|
|
padding-top: var(--half-line);
|
|
padding-right: 1ch;
|
|
padding-bottom: var(--half-line);
|
|
padding-left: 1ch;
|
|
}
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Links */
|
|
a.selfRef, a.pilcrow, .iref + a.internal {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a.relref, a.xref {
|
|
hyphens: none;
|
|
}
|
|
a:is(.relref, .xref:is(.cite, .auto.internal)) {
|
|
white-space: nowrap;
|
|
}
|
|
.pilcrow {
|
|
display: inline-block;
|
|
margin-right: -1ch;
|
|
opacity: 0.01;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
}
|
|
:hover > .pilcrow {
|
|
opacity: 0.2;
|
|
}
|
|
* > .pilcrow[href]:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* sup, sub */
|
|
sup, sub {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Authors */
|
|
address, address.vcard {
|
|
font-style: normal;
|
|
// margin: var(--line) 0 var(--line) 3ch
|
|
margin-top: var(--line);
|
|
margin-right: 0;
|
|
margin-bottom: var(--line);
|
|
margin-left: 3ch;
|
|
}
|
|
address .tel, address .email {
|
|
// margin: var(--line) 0 0;
|
|
margin-top: var(--line);
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
}
|
|
address .tel + .email {
|
|
margin: 0;
|
|
}
|
|
|
|
/* haxx */
|
|
section > p, section > dl.references > dd {
|
|
/* Really long lines can wrap when all else fails.
|
|
* This won't affect <pre> or <table>, or cases where soft-wrapping occurs.
|
|
* Mostly this exists so that long URLs wrap properly in Safari, which
|
|
* doesn't break words at '/' like other browsers. */
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* From https://github.com/martinthomson/rfc-css/blob/main/rfc.css */
|
|
/* SVG Trick: a prefix match works because only black and white are allowed */
|
|
svg :is([stroke="black"], [stroke^="#000"]) {
|
|
stroke: var(--bs-body-color);
|
|
}
|
|
svg :is([stroke="white"], [stroke^="#fff"]) {
|
|
stroke: var(--bs-body-bg);
|
|
}
|
|
svg :is([fill="black"], [fill^="#000"], :not([fill])) {
|
|
fill: var(--bs-body-color);
|
|
}
|
|
svg :is([fill="white"], [fill^="#fff"]) {
|
|
fill: var(--bs-body-bg);
|
|
}
|
|
}
|