1047 lines
27 KiB
HTML
1047 lines
27 KiB
HTML
<style>@charset "UTF-8";
|
|
/* Use a more intuitive box-sizing model */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove all margins & padding */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Only show focus outline when the user is tabbing (not when clicking) */
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: 1px solid blue;
|
|
}
|
|
|
|
/* Prevent mobile browsers increasing font-size */
|
|
html {
|
|
-moz-text-size-adjust: none;
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;
|
|
line-height:1.15;
|
|
-webkit-text-size-adjust:100%;
|
|
overflow-y:scroll;
|
|
}
|
|
|
|
/* Allow percentage-based heights */
|
|
/* Setting width: 100% isn't required because it is a default for block-level elements (html & body are block level) */
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
/* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
|
|
overscroll-behavior: none;
|
|
|
|
/* Prevent the browser from synthesizing missing typefaces */
|
|
font-synthesis: none;
|
|
|
|
margin:0;
|
|
font-feature-settings:"onum" 1;
|
|
text-rendering:optimizeLegibility;
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
font-family:var(--sans-serif-system-stack);
|
|
font-size:100%;
|
|
}
|
|
|
|
/* Remove unintuitive behaviour such as gaps around media elements. */
|
|
img, picture, video, canvas, svg, iframe {
|
|
display: block;
|
|
}
|
|
|
|
/* Avoid text overflow */
|
|
h1, h2, h3, h4, h5, h6, p, strong {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
position: relative;
|
|
}
|
|
h1 > a.self-link,
|
|
h2 > a.self-link,
|
|
h3 > a.self-link,
|
|
h4 > a.self-link,
|
|
h5 > a.self-link,
|
|
h6 > a.self-link {
|
|
font-size: 83%;
|
|
}
|
|
|
|
a.self-link::before {
|
|
content: "ยง";
|
|
/* increase surface area for clicks */
|
|
padding: 1rem;
|
|
margin: -1rem;
|
|
}
|
|
|
|
a.self-link {
|
|
--width: 22px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: calc(var(--width) - 3.5rem);
|
|
width: calc(-1 * var(--width) + 3.5rem);
|
|
height: 2em;
|
|
text-align: center;
|
|
border: medium none;
|
|
transition: opacity 0.2s ease 0s;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[href]:focus, a[href]:hover {
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-skip-ink: none;
|
|
}
|
|
|
|
a[href] {
|
|
text-decoration: underline;
|
|
color: #034575;
|
|
color: var(--a-normal-text);
|
|
text-decoration-color: #707070;
|
|
text-decoration-color: var(--accent-secondary);
|
|
text-decoration-skip-ink: none;
|
|
}
|
|
|
|
ul, ol {
|
|
list-style: none;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--monospace-system-stack);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
pre {
|
|
font-family: var(--monospace-system-stack);
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
/* Create a root stacking context (only when using frameworks like Next.js) */
|
|
#__next {
|
|
isolation: isolate;
|
|
}
|
|
|
|
:root {
|
|
--emoji-system-stack: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--monospace-system-stack: /* apple */ ui-monospace, SFMono-Regular, Menlo, Monaco,
|
|
/* windows */ "Cascadia Mono", "Segoe UI Mono", Consolas,
|
|
/* free unixes */ "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace, var(--emoji-system-stack);
|
|
--sans-serif-system-stack:-apple-system,BlinkMacSystemFont,Roboto,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif, var(--emoji-system-stack);
|
|
--grotesque-system-stack: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif, var(--emoji-system-stack);
|
|
--text-primary: CanvasText;
|
|
--text-faded: GrayText;
|
|
--horizontal-rule: #88929d;
|
|
--code-foreground: #124;
|
|
--code-background: #8fbcbb;
|
|
--a-visited-text: var(--a-normal-text);
|
|
--tag-border-color: black;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--text-secondary: #4e4e4e;
|
|
--text-inactive: #9e9e9ea6;
|
|
--text-link: #0069c2;
|
|
--text-invert: #fff;
|
|
--background-primary: #fff;
|
|
--background-secondary: #ebebeb;
|
|
--background-tertiary: #fff;
|
|
--background-toc-active: #ebeaea;
|
|
--background-mark-yellow: #c7b70066;
|
|
--background-mark-green: #00d06166;
|
|
--background-information: #0085f21a;
|
|
--background-warning: #ff2a511a;
|
|
--background-critical: #d300381a;
|
|
--background-success: #0079361a;
|
|
--border-primary: #cdcdcd;
|
|
--border-secondary: #cdcdcd;
|
|
--button-primary-default: #1b1b1b;
|
|
--button-primary-hover: #696969;
|
|
--button-primary-active: #9e9e9e;
|
|
--button-primary-inactive: #1b1b1b;
|
|
--button-secondary-default: #fff;
|
|
--button-secondary-hover: #cdcdcd;
|
|
--button-secondary-active: #cdcdcd;
|
|
--button-secondary-inactive: #f9f9fb;
|
|
--button-secondary-border-focus: #0085f2;
|
|
--button-secondary-border-red: #ff97a0;
|
|
--button-secondary-border-red-focus: #ffd9dc;
|
|
--icon-primary: #696969;
|
|
--icon-secondary: #b3b3b3;
|
|
--icon-information: #0085f2;
|
|
--icon-warning: #ff2a51;
|
|
--icon-critical: #d30038;
|
|
--icon-success: #007936;
|
|
--accent-primary: #0085f2;
|
|
--accent-primary-engage: #0085f21a;
|
|
--accent-secondary: #0085f2;
|
|
--accent-tertiary: #0085f21a;
|
|
--shadow-01: 0 1px 2px rgba(43,42,51,.05);
|
|
--shadow-02: 0 1px 6px rgba(43,42,51,.1);
|
|
--focus-01: 0 0 0 3px rgba(0,144,237,.4);
|
|
--field-focus-border: #0085f2;
|
|
--code-token-tag: #0069c2;
|
|
--code-token-punctuation: #858585;
|
|
--code-token-attribute-name: #d30038;
|
|
--code-token-attribute-value: #007936;
|
|
--code-token-comment: #858585;
|
|
--code-token-default: #1b1b1b;
|
|
--code-token-selector: #872bff;
|
|
--code-background-inline: #f2f1f1;
|
|
--code-background-block: #f2f1f1;
|
|
--notecard-link-color: #343434;
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-color: #00000040;
|
|
--category-color: #0085f2;
|
|
--category-color-background: #0085f210;
|
|
--code-color: #5e9eff;
|
|
--mark-color: #dce2f2;
|
|
--blend-color: #fff80;
|
|
--text-primary-red: #d30038;
|
|
--text-primary-green: #007936;
|
|
--text-primary-blue: #0069c2;
|
|
--text-primary-yellow: #746a00;
|
|
--form-invalid-color: #d30038;
|
|
--form-invalid-focus-color: #ff2a51;
|
|
--form-invalid-focus-effect-color: #ff2a5133;
|
|
|
|
--a-normal-text: #034575;
|
|
--a-normal-underline: #bbb;
|
|
--a-visited-underline: #707070;
|
|
--a-hover-bg: #bfbfbf40;
|
|
--a-active-text: #c00;
|
|
--a-active-underline: #c00;
|
|
--tag-border-color: #0000005e;
|
|
color-scheme: light;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-secondary: #cdcdcd;
|
|
--text-inactive: #cdcdcda6;
|
|
--text-link: #8cb4ff;
|
|
--text-invert: #1b1b1b;
|
|
--background-primary: #1b1b1b;
|
|
--background-secondary: #343434;
|
|
--background-tertiary: #4e4e4e;
|
|
--background-toc-active: #343434;
|
|
--background-mark-yellow: #c7b70066;
|
|
--background-mark-green: #00d06166;
|
|
--background-information: #0085f21a;
|
|
--background-warning: #ff2a511a;
|
|
--background-critical: #d300381a;
|
|
--background-success: #0079361a;
|
|
--border-primary: #858585;
|
|
--border-secondary: #696969;
|
|
--button-primary-default: #fff;
|
|
--button-primary-hover: #cdcdcd;
|
|
--button-primary-active: #9e9e9e;
|
|
--button-primary-inactive: #fff;
|
|
--button-secondary-default: #4e4e4e;
|
|
--button-secondary-hover: #858585;
|
|
--button-secondary-active: #9e9e9e;
|
|
--button-secondary-inactive: #4e4e4e;
|
|
--button-secondary-border-focus: #0085f2;
|
|
--button-secondary-border-red: #ff97a0;
|
|
--button-secondary-border-red-focus: #ffd9dc;
|
|
--icon-primary: #fff;
|
|
--icon-secondary: #b3b3b3;
|
|
--icon-information: #5e9eff;
|
|
--icon-warning: #afa100;
|
|
--icon-critical: #ff707f;
|
|
--icon-success: #00b755;
|
|
--accent-primary: #5e9eff;
|
|
--accent-primary-engage: #5e9eff1a;
|
|
--accent-secondary: #5e9eff;
|
|
--accent-tertiary: #0085f21a;
|
|
--shadow-01: 0 1px 2px rgba(251,251,254,.2);
|
|
--shadow-02: 0 1px 6px rgba(251,251,254,.2);
|
|
--focus-01: 0 0 0 3px rgba(251,251,254,.5);
|
|
--field-focus-border: #fff;
|
|
--notecard-link-color: #e2e2e2;
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-color: #ffffff40;
|
|
--category-color: #8cb4ff;
|
|
--category-color-background: #8cb4ff70;
|
|
--code-color: #c1cff1;
|
|
--mark-color: #004d92;
|
|
--blend-color: #00080;
|
|
--text-primary-red: #ff97a0;
|
|
--text-primary-green: #00d061;
|
|
--text-primary-blue: #8cb4ff;
|
|
--text-primary-yellow: #c7b700;
|
|
--collections-link: #ff97a0;
|
|
--collections-header: #40000a;
|
|
--collections-mandala: #9e0027;
|
|
--collections-icon: #d30038;
|
|
--updates-link: #8cb4ff;
|
|
--updates-header: #000;
|
|
--updates-mandala: #c1cff1;
|
|
--updates-icon: #8cb4ff;
|
|
--form-limit-color: #9e9e9e;
|
|
--form-limit-color-emphasis: #b3b3b3;
|
|
--form-invalid-color: #ff97a0;
|
|
--form-invalid-focus-color: #ff707f;
|
|
--form-invalid-focus-effect-color: #ff707f33;
|
|
|
|
--a-normal-text: #4db4ff;
|
|
--a-normal-underline: #8b8b8b;
|
|
--a-visited-underline: #707070;
|
|
--a-hover-bg: #bfbfbf40;
|
|
--a-active-text: #c00;
|
|
--a-active-underline: #c00;
|
|
--tag-border-color: #000;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body>main.layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-wrap: anywhere;
|
|
|
|
display: grid;
|
|
grid:
|
|
"header header header" auto
|
|
"leftside body rightside" 1fr
|
|
"footer footer footer" auto
|
|
/ auto 1fr auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
main.layout>.header { grid-area: header; }
|
|
main.layout>.leftside { grid-area: leftside; }
|
|
main.layout>div.body {
|
|
grid-area: body;
|
|
width: 90vw;
|
|
justify-self: center;
|
|
align-self: start;
|
|
}
|
|
main.layout>.rightside { grid-area: rightside; }
|
|
main.layout>footer {
|
|
font-family: var(--grotesque-system-stack);
|
|
grid-area: footer;
|
|
border-top: 2px inset;
|
|
margin-block-start: 1rem;
|
|
border-color: var(--text-link);
|
|
background-color: var(--text-primary-blue);
|
|
color: var(--text-invert);
|
|
}
|
|
|
|
main.layout>footer a[href] {
|
|
box-shadow: 2px 2px 2px black;
|
|
background: Canvas;
|
|
border: .3rem solid Canvas;
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
font-family: var(--monospace-system-stack);
|
|
font-size: small;
|
|
}
|
|
|
|
main.layout>footer>* {
|
|
margin-block-start: 1rem;
|
|
margin-inline-start: 1rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
main.layout>div.header>h1 {
|
|
margin: 1rem;
|
|
font-family: var(--grotesque-system-stack);
|
|
font-size: xx-large;
|
|
}
|
|
|
|
main.layout>div.header>p.site-subtitle {
|
|
margin: 1rem;
|
|
margin-top: 0px;
|
|
font-family: var(--grotesque-system-stack);
|
|
font-size: large;
|
|
}
|
|
|
|
main.layout>div.header>div.page-header {
|
|
width: 90vw;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
main.layout>div.header>div.page-header>nav:first-child {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
main.layout>div.body *:is(h2,h3,h4,h5,h6) {
|
|
padding-bottom: .3em;
|
|
border-bottom: 1px solid var(--horizontal-rule);
|
|
}
|
|
|
|
nav.main-nav {
|
|
padding: 0rem 1rem;
|
|
border: 1px solid var(--border-secondary);
|
|
border-left: none;
|
|
border-right: none;
|
|
border-radius: 2px;
|
|
padding: 10px 14px 10px 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
nav.main-nav>ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
nav.main-nav>ul>li>a {
|
|
/* fallback if clamp() isn't supported */
|
|
padding: 1rem;
|
|
padding: 1rem clamp(0.6svw,1rem,0.5vmin);
|
|
}
|
|
nav.main-nav > ul > li > a:hover {
|
|
outline: 0.1rem solid;
|
|
outline-offset: -0.5rem;
|
|
}
|
|
nav.main-nav >ul .push {
|
|
margin-left: auto;
|
|
}
|
|
|
|
main.layout>div.header h2.page-title {
|
|
margin: 1rem 0px;
|
|
font-family: var(--grotesque-system-stack);
|
|
}
|
|
|
|
nav.breadcrumbs {
|
|
padding: 10px 14px 10px 0px;
|
|
}
|
|
|
|
nav.breadcrumbs ol {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
font-size: small;
|
|
}
|
|
|
|
/* If only the root crumb is visible, hide it to avoid unnecessary visual clutter */
|
|
li.crumb:only-child>span[aria-current="page"] {
|
|
--secs: 150ms;
|
|
transition: all var(--secs) linear;
|
|
color: transparent;
|
|
}
|
|
|
|
li.crumb:only-child>span[aria-current="page"]:hover {
|
|
transition: all var(--secs) linear;
|
|
color: revert;
|
|
}
|
|
|
|
.crumb, .crumb>a {
|
|
display: inline;
|
|
}
|
|
|
|
.crumb a::after {
|
|
display: inline-block;
|
|
color: var(--text-primary);
|
|
content: '>';
|
|
content: '>' / '';
|
|
font-size: 80%;
|
|
font-weight: bold;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.crumb span[aria-current="page"] {
|
|
color: var(--text-faded);
|
|
padding: 0.4rem;
|
|
margin-left: -0.4rem;
|
|
display: inline;
|
|
}
|
|
|
|
ul.messagelist {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
ul.messagelist:not(:empty) {
|
|
margin-block-end: 0.5rem;
|
|
}
|
|
|
|
ul.messagelist>li {
|
|
padding: 1rem 0.7rem;
|
|
--message-background: var(--icon-secondary);
|
|
background: var(--message-background);
|
|
border: 1px outset var(--message-background);
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
margin-block-end: 1.0rem;
|
|
color: #0d0b0b;
|
|
}
|
|
|
|
ul.messagelist>li>span.label {
|
|
text-transform: capitalize;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
ul.messagelist>li.error {
|
|
--message-background: var(--icon-critical);
|
|
}
|
|
|
|
ul.messagelist>li.success {
|
|
--message-background: var(--icon-success);
|
|
}
|
|
|
|
ul.messagelist>li.warning {
|
|
--message-background: var(--icon-warning);
|
|
}
|
|
|
|
ul.messagelist>li.info {
|
|
--message-background: var(--icon-information);
|
|
}
|
|
|
|
div.body>section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
div.body>section+section{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
div.calendar rt {
|
|
white-space: nowrap;
|
|
font-size: 50%;
|
|
-moz-min-font-size-ratio: 50%;
|
|
line-height: 1;
|
|
}
|
|
@supports not (display: ruby-text) {
|
|
/* Chrome seems to display it at regular size, so scale it down */
|
|
div.calendar rt {
|
|
scale: 50%;
|
|
font-size: 100%;
|
|
}
|
|
}
|
|
|
|
div.calendar rt {
|
|
display: ruby-text;
|
|
}
|
|
|
|
div.calendar th {
|
|
padding: 0.5rem;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
}
|
|
|
|
div.calendar tr {
|
|
text-align: right;
|
|
}
|
|
|
|
div.calendar tr,
|
|
div.calendar th {
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: var(--monospace-system-stack);
|
|
}
|
|
|
|
div.calendar table {
|
|
display: inline-table;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
div.calendar td {
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: 80%;
|
|
width: 2.3rem;
|
|
height: 2.3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
div.calendar td.empty {
|
|
color: var(--text-faded);
|
|
}
|
|
|
|
div.calendar td:not(.empty) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.calendar td:not(:empty) {
|
|
border: 1px solid var(--text-faded);
|
|
}
|
|
|
|
div.calendar td:empty {
|
|
background: var(--text-faded);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
div.calendar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
align-items: baseline;
|
|
}
|
|
|
|
div.calendar caption {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.entries {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
div.entries>p:first-child {
|
|
margin: 1rem 0rem;
|
|
}
|
|
|
|
div.entries>div.entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
border: 1px solid var(--border-secondary);
|
|
padding: 1rem 1rem;
|
|
}
|
|
|
|
div.entries>div.entry+div.entry {
|
|
border-top:none;
|
|
}
|
|
|
|
div.entries>div.entry>span.subject>a {
|
|
/* increase surface area for clicks */
|
|
padding: 1rem;
|
|
margin: -1rem;
|
|
}
|
|
|
|
div.entries>div.entry span.metadata.replies {
|
|
background: CanvasText;
|
|
border-radius: .6rem;
|
|
color: Canvas;
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: small;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
div.entries>div.entry>span.metadata {
|
|
font-size: small;
|
|
color: var(--text-faded);
|
|
word-break: break-all;
|
|
}
|
|
|
|
div.entries>div.entry span.value {
|
|
max-width: 44ch;
|
|
display: inline-block;
|
|
white-space: break-spaces;
|
|
word-wrap: anywhere;
|
|
word-break: break-all;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.entries>div.entry span.value.empty {
|
|
color: var(--text-faded);
|
|
}
|
|
|
|
div.posts>div.entry>span.metadata>span.from {
|
|
margin-inline-end: 1rem;
|
|
}
|
|
|
|
table.headers {
|
|
padding: .5rem 0 .5rem 1rem;
|
|
}
|
|
|
|
table.headers tr>th {
|
|
text-align: left;
|
|
color: var(--text-faded);
|
|
}
|
|
|
|
table.headers th[scope="row"] {
|
|
padding-right: .5rem;
|
|
vertical-align: top;
|
|
font-family: var(--grotesque-system-stack);
|
|
}
|
|
|
|
table.headers tr>td {
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
word-wrap: anywhere;
|
|
word-break: break-all;
|
|
width: 50ch;
|
|
}
|
|
|
|
div.post-body>pre {
|
|
border-top: 1px solid;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-line;
|
|
hyphens: auto;
|
|
background-color: var(--background-secondary);
|
|
line-height: 1.1;
|
|
padding: 1rem;
|
|
}
|
|
|
|
div.post {
|
|
border-top: 1px solid var(--horizontal-rule);
|
|
border-right: 1px solid var(--horizontal-rule);
|
|
border-left: 1px solid var(--horizontal-rule);
|
|
border-bottom: 1px solid var(--horizontal-rule);
|
|
}
|
|
div.post:not(:first-child) {
|
|
border-top: none;
|
|
}
|
|
|
|
td.message-id,
|
|
span.message-id{
|
|
color: var(--text-faded);
|
|
}
|
|
.message-id>a {
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
td.message-id:before,
|
|
span.message-id:before{
|
|
content: '<';
|
|
display: inline-block;
|
|
opacity: 0.6;
|
|
}
|
|
td.message-id:after,
|
|
span.message-id:after{
|
|
content: '>';
|
|
display: inline-block;
|
|
opacity: 0.6;
|
|
}
|
|
span.message-id + span.message-id:before{
|
|
content: ', <';
|
|
display: inline-block;
|
|
opacity: 0.6;
|
|
}
|
|
td.faded,
|
|
span.faded {
|
|
color: var(--text-faded);
|
|
}
|
|
td.faded:is(:focus, :hover, :focus-visible, :focus-within),
|
|
span.faded:is(:focus, :hover, :focus-visible, :focus-within) {
|
|
color: revert;
|
|
}
|
|
tr>td>details.reply-details ~ tr {
|
|
display: none;
|
|
}
|
|
tr>td>details.reply-details[open] ~ tr {
|
|
display: revert;
|
|
}
|
|
|
|
ul.lists {
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
ul.lists li {
|
|
list-style: disc;
|
|
}
|
|
|
|
ul.lists li + li {
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
dl.lists dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dl.lists dl,
|
|
dl.lists dd {
|
|
font-size: small;
|
|
}
|
|
|
|
dl.lists dd {
|
|
/* fallback in case margin-block-* is not supported */
|
|
margin-bottom: 1rem;
|
|
margin-block-start: 0.3rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
dl.lists dd.no-description {
|
|
color: var(--text-faded);
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 0rem;
|
|
border-bottom: 1px solid #88929d;
|
|
}
|
|
|
|
.command-line-example {
|
|
user-select: all;
|
|
display: inline-block;
|
|
ruby-align: center;
|
|
ruby-position: under;
|
|
|
|
background: var(--code-background);
|
|
outline: 1px inset var(--code-background);
|
|
border-radius: 1px;
|
|
color: var(--code-foreground);
|
|
font-weight: 500;
|
|
width: auto;
|
|
max-width: 90vw;
|
|
padding: 1.2rem 0.8rem 1rem 0.8rem;
|
|
overflow-wrap: break-word;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
textarea.key-or-sig-input {
|
|
font-family: var(--monospace-system-stack);
|
|
font-size: 0.5rem;
|
|
font-weight: 400;
|
|
width: auto;
|
|
height: 26rem;
|
|
max-width: min(71ch, 100%);
|
|
overflow-wrap: break-word;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
line-height: 1rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
textarea.key-or-sig-input.wrap {
|
|
word-wrap: anywhere;
|
|
word-break: break-all;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
.login-ssh textarea#id_password::placeholder {
|
|
line-height: 1rem;
|
|
}
|
|
|
|
mark.ssh-challenge-token {
|
|
font-family: var(--monospace-system-stack);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.body-grid {
|
|
display: grid;
|
|
/* fallback */
|
|
grid-template-columns: 1fr;
|
|
grid-template-columns: fit-content(100%);
|
|
grid-auto-rows: min-content;
|
|
row-gap: min(6vw, 1rem);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
form.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: 98vw;
|
|
width: auto;
|
|
}
|
|
|
|
form.login-form > :not([type="hidden"]) + label, fieldset > :not([type="hidden"], legend) + label {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
form.settings-form {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
gap: 1rem;
|
|
max-width: 90vw;
|
|
width: auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
form.settings-form>input[type="submit"] {
|
|
place-self: start;
|
|
}
|
|
|
|
form.settings-form>fieldset {
|
|
padding: 1rem 1.5rem 2rem 1.5rem;
|
|
}
|
|
|
|
form.settings-form>fieldset>legend {
|
|
padding: .5rem 1rem;
|
|
border: 1px ridge var(--text-faded);
|
|
font-weight: bold;
|
|
font-size: small;
|
|
margin-left: 0.8rem;
|
|
}
|
|
|
|
form.settings-form>fieldset>div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
form.settings-form>fieldset>div>label:last-child {
|
|
padding: 1rem 0 1rem 1rem;
|
|
flex-grow: 2;
|
|
max-width: max-content;
|
|
}
|
|
|
|
form.settings-form>fieldset>div>label:first-child {
|
|
padding: 1rem 1rem 1rem 0rem;
|
|
flex-grow: 2;
|
|
max-width: max-content;
|
|
}
|
|
|
|
form.settings-form>fieldset>div>:not(label):not(input) {
|
|
flex-grow: 8;
|
|
width: auto;
|
|
}
|
|
|
|
form.settings-form>fieldset>div>input {
|
|
margin: 0.8rem;
|
|
}
|
|
|
|
form.settings-form>fieldset>table tr>th {
|
|
text-align: right;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
button, input {
|
|
overflow: visible;
|
|
}
|
|
|
|
button, input, optgroup, select, textarea {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
|
|
form label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
textarea {
|
|
max-width: var(--main-width);
|
|
width: 100%;
|
|
resize: both;
|
|
}
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
button, [type="button"], [type="reset"], [type="submit"] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
input, textarea {
|
|
display: inline-block;
|
|
appearance: auto;
|
|
-moz-default-appearance: textfield;
|
|
padding: 1px;
|
|
border: 2px inset ButtonBorder;
|
|
border-radius: 5px;
|
|
padding: .5rem;
|
|
background-color: Field;
|
|
color: FieldText;
|
|
font: -moz-field;
|
|
text-rendering: optimizeLegibility;
|
|
cursor: text;
|
|
}
|
|
|
|
input[type="text"], textarea {
|
|
outline: 3px inset #6969694a;
|
|
outline-offset: -5px;
|
|
}
|
|
|
|
button, ::file-selector-button, input:is([type="color"], [type="reset"], [type="button"], [type="submit"]) {
|
|
appearance: auto;
|
|
-moz-default-appearance: button;
|
|
padding-block: 1px;
|
|
padding-inline: 8px;
|
|
border: 2px outset ButtonBorder;
|
|
border-radius: 3px;
|
|
background-color: ButtonFace;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
padding: .5rem;
|
|
min-width: 10rem;
|
|
align-self: start;
|
|
}
|
|
|
|
button:disabled, input:is([type="color"], [type="reset"], [type="button"], [type="submit"]):disabled {
|
|
color: var(--text-faded);
|
|
background: Field;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
ol.list {
|
|
list-style: decimal outside;
|
|
padding-inline-start: 4rem;
|
|
}
|
|
|
|
.screen-reader-only {
|
|
position:absolute;
|
|
left:-500vw;
|
|
top:auto;
|
|
width:1px;
|
|
height:1px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
<
|
|
ul.tags.inline {
|
|
display: contents;
|
|
}
|
|
|
|
ul.tags {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: max-content;
|
|
vertical-align: baseline;
|
|
display: inline-flex;
|
|
gap: 0.8ex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.tag {
|
|
--padding-top-bottom: 1px;
|
|
--padding-left-right: 5.4px;
|
|
|
|
display: inline-block;
|
|
border: 1px solid var(--tag-border-color);
|
|
border-radius:.2rem;
|
|
color: #555;
|
|
font-size: .9rem;
|
|
padding: 0px 0.4em 1px 0.4em;
|
|
padding: var(--padding-top-bottom) var(--padding-left-right);
|
|
text-decoration: none;
|
|
|
|
--aa-brightness: ((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000;
|
|
--aa-color: calc((var(--aa-brightness) - 128) * -1000);
|
|
background: rgb(var(--red), var(--green), var(--blue));
|
|
color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
|
|
min-width: max-content;
|
|
max-height: calc(1.5cap + var(--padding-top-bottom));
|
|
min-height: calc(1.5cap + var(--padding-top-bottom));
|
|
}
|
|
|
|
|
|
|
|
span.tag-name a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
</style>
|