722 lines
18 KiB
HTML
722 lines
18 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;
|
|
|
|
color: black;
|
|
/* UI controls color (example: range input) */
|
|
accent-color: black;
|
|
|
|
/* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs */
|
|
background: white;
|
|
margin:0;
|
|
font-feature-settings:"onum" 1;
|
|
text-rendering:optimizeLegibility;
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
font-family:-apple-system,BlinkMacSystemFont,Roboto,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif;
|
|
font-size:1.125em
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul, ol {
|
|
list-style: none;
|
|
}
|
|
|
|
code {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
/* Create a root stacking context (only when using frameworks like Next.js) */
|
|
#__next {
|
|
isolation: isolate;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--text-primary: #1b1b1b;
|
|
--text-secondary: #4e4e4e;
|
|
--text-inactive: #9e9e9ea6;
|
|
--text-link: #0069c2;
|
|
--text-invert: #fff;
|
|
--background-primary: #fff;
|
|
--background-secondary: #f9f9fb;
|
|
--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;
|
|
color-scheme: light;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-primary: #fff;
|
|
--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;
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body>main.layout {
|
|
width: 100%;
|
|
height: 99%;
|
|
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; }
|
|
main.layout>.rightside { grid-area: rightside; }
|
|
main.layout>footer {
|
|
grid-area: footer;
|
|
border-top: 2px inset;
|
|
margin-block-start: 1rem;
|
|
}
|
|
|
|
main.layout>footer>* {
|
|
margin-block-start: 1rem;
|
|
margin-inline-start: 1rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
main.layout>div.header>h1 {
|
|
margin: 1rem;
|
|
}
|
|
|
|
main.layout>div.header>h2 {
|
|
margin-inline-start: 1rem;
|
|
}
|
|
|
|
main.layout>div.header>nav + nav {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
nav.main-nav {
|
|
padding: 0rem 1rem;
|
|
border: 1px solid #4d4e53;
|
|
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 {
|
|
padding: 1rem;
|
|
}
|
|
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.body h2 {
|
|
margin: 1rem;
|
|
}
|
|
|
|
nav.breadcrumbs {
|
|
padding: 10px 14px 10px 0px;
|
|
margin-inline-start: 1rem;
|
|
}
|
|
|
|
nav.breadcrumbs ol {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.crumb, .crumb>a {
|
|
display: contents;
|
|
}
|
|
|
|
.crumb a::after {
|
|
display: inline-block;
|
|
color: #000;
|
|
content: '>';
|
|
font-size: 80%;
|
|
font-weight: bold;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.crumb span[aria-current="page"] {
|
|
color: GrayText;
|
|
padding: 0.4rem;
|
|
margin-left: -0.4rem;
|
|
display: contents;
|
|
}
|
|
|
|
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: 0.5rem 1rem;
|
|
background: var(--message-background);
|
|
border: .1rem solid var(--border-secondary);
|
|
border-radius: 0.2rem;
|
|
font-weight: medium;
|
|
margin-block-end: 1.0rem;
|
|
}
|
|
|
|
ul.messagelist>li>span.label {
|
|
text-transform: capitalize;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
ul.messagelist>li.error {
|
|
--message-background: var(--background-critical);
|
|
}
|
|
|
|
ul.messagelist>li.success {
|
|
--message-background: var(--background-success);
|
|
}
|
|
|
|
ul.messagelist>li.warning {
|
|
--message-background: var(--background-warning);
|
|
}
|
|
|
|
ul.messagelist>li.info {
|
|
--message-background: var(--background-information);
|
|
}
|
|
|
|
div.preamble {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
div.calendar th {
|
|
padding: 0.5rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
div.calendar tr,
|
|
div.calendar th {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: monospace;
|
|
}
|
|
|
|
div.calendar table {
|
|
display: inline-table;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
div.calendar td {
|
|
padding: 0.1rem 0.4rem;
|
|
}
|
|
|
|
div.calendar td.empty {
|
|
color: GrayText;
|
|
}
|
|
|
|
div.calendar td:not(.empty) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.calendar td:not(:empty) {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
div.calendar td:empty {
|
|
background: GrayText;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
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;
|
|
gap: 1rem;
|
|
}
|
|
|
|
div.entries>div.entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
div.posts>div.entry>span.subject {
|
|
font-size: larger;
|
|
}
|
|
|
|
div.entries>div.entry>span.metadata {
|
|
color: GrayText;
|
|
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: GrayText;
|
|
}
|
|
|
|
div.posts>div.entry>span.metadata>span.from {
|
|
margin-inline-end: 1rem;
|
|
}
|
|
|
|
table.headers tr>th {
|
|
text-align: right;
|
|
color: GrayText;
|
|
}
|
|
table.headers th[scope="row"] {
|
|
padding-right: .5rem;
|
|
}
|
|
table.headers tr>th:after {
|
|
content:':';
|
|
display: inline-block;
|
|
}
|
|
div.post-body {
|
|
margin: 1rem;
|
|
}
|
|
div.post-body>pre {
|
|
max-width: 98vw;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-line;
|
|
}
|
|
td.message-id,
|
|
span.message-id{
|
|
color: GrayText;
|
|
}
|
|
td.message-id:before,
|
|
span.message-id:before{
|
|
content:'<';
|
|
display: inline-block;
|
|
}
|
|
td.message-id:after,
|
|
span.message-id:after{
|
|
content:'>';
|
|
display: inline-block;
|
|
}
|
|
span.message-id + span.message-id:before{
|
|
content:', <';
|
|
display: inline-block;
|
|
}
|
|
td.faded,
|
|
span.faded {
|
|
color: GrayText;
|
|
}
|
|
td.faded:is(:focus, :hover, :focus-visible, :focus-within),
|
|
span.faded:is(:focus, :hover, :focus-visible, :focus-within) {
|
|
color: revert;
|
|
}
|
|
|
|
ul.lists {
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
ul.lists li {
|
|
list-style: disc;
|
|
}
|
|
|
|
ul.lists li + li {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 0rem;
|
|
}
|
|
|
|
.command-line-example {
|
|
user-select: all;
|
|
display: inline-block;
|
|
ruby-align: center;
|
|
ruby-position: under;
|
|
padding: 0;
|
|
|
|
--pre-bg-color: #e9e9e9;
|
|
background: var(--pre-bg-color);
|
|
outline: 5px solid var(--pre-bg-color);
|
|
width: min-content;
|
|
max-width: 90vw;
|
|
padding: 2px 7px;
|
|
overflow-wrap: break-word;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
textarea.key-or-sig-input {
|
|
font-family: monospace;
|
|
font-size: 0.5rem;
|
|
font-weight: medium;
|
|
width: auto;
|
|
height: 29rem;
|
|
max-width: min(71ch, 75vw);
|
|
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;
|
|
}
|
|
|
|
.body-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
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 lightgray;
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
ol.list {
|
|
list-style: decimal outside;
|
|
padding-inline-start: 4rem;
|
|
}
|
|
</style>
|