66 lines
1.4 KiB
SCSS
66 lines
1.4 KiB
SCSS
|
/* render <kbd> with slight depth */
|
||
|
|
@supports #{'selector\(:has(kbd))'} {
|
||
|
|
/* style individual keys only (for the innermost <kbd> element) */
|
||
|
|
kbd kbd,
|
||
|
|
kbd:not(:has(kbd)) {
|
||
|
|
font-family: monospace;
|
||
|
|
padding: 0.25em;
|
||
|
|
background: var(--ui-overlay);
|
||
|
|
color: var(--ui-overlay-text);
|
||
|
|
border: 1px solid var(--primary-accent-transparent);
|
||
|
|
margin-inline: 0.25em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@supports not #{'selector\(:has(kbd))'} {
|
||
|
|
/* style the entire key sequence */
|
||
|
|
kbd {
|
||
|
|
font-family: monospace;
|
||
|
|
padding: 0.25em;
|
||
|
|
background: var(--ui-overlay);
|
||
|
|
color: var(--ui-overlay-text);
|
||
|
|
}
|
||
|
|
/* and prevent double-styling for nested keys */
|
||
|
|
kbd kbd {
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* render <mark> as highlighting */
|
||
|
|
mark {
|
||
|
|
background: var(--primary-accent-transparent);
|
||
|
|
color: var(--ui-text);
|
||
|
|
--pad-x-highlight: 0.125em;
|
||
|
|
padding-inline-start: var(--pad-x-highlight);
|
||
|
|
padding-inline-end: var(--pad-x-highlight);
|
||
|
|
}
|
||
|
|
/* lists */
|
||
|
|
ul {list-style: disc;}
|
||
|
|
ol {list-style: decimal;}
|
||
|
|
/* tables */
|
||
|
|
table {text-align: center;}
|
||
|
|
thead {
|
||
|
|
font-weight: bold;
|
||
|
|
background: var(--ui-overlay);
|
||
|
|
color: var(--ui-overlay-text);
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
border: 1px solid var(--ui-text);
|
||
|
|
padding: 0.5em;
|
||
|
|
}
|
||
|
|
/* figures */
|
||
|
|
figure {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
figcaption {
|
||
|
|
padding-block: 1em;
|
||
|
|
padding-inline: 1em;
|
||
|
|
}
|
||
|
|
/* extra style and flair */
|
||
|
|
code {
|
||
|
|
background: var(--ui-overlay);
|
||
|
|
color: var(--ui-overlay-text);
|
||
|
|
padding: 0.25rem;
|
||
|
|
}
|
||
|
|
/* fix pre */
|
||
|
|
pre {
|
||
|
|
margin: 0;
|
||
|
|
}
|