mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 09:05:22 -04:00
134 lines
3.1 KiB
CSS
134 lines
3.1 KiB
CSS
/* all code */
|
|
.code {
|
|
font-size: 0.925em;
|
|
color: var(--code-text);
|
|
page-break-inside: avoid;
|
|
background-color: var(--code-background);
|
|
border: 1px solid var(--kinda-light);
|
|
border-radius: var(--rounded-edge-radius);
|
|
|
|
/* light-dark theme switch fading */
|
|
transition: background 0.25s ease, border 0.25s ease;
|
|
}
|
|
|
|
/* inline code in paragraphs/elsewhere (single backticks) */
|
|
.inline {
|
|
padding: 0.2em 0.3em;
|
|
}
|
|
|
|
/* full-blown code blocks, with copy/paste button and (usually) line numbers */
|
|
.block {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.block .code {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
tab-size: 2;
|
|
}
|
|
|
|
.copy_btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.65em;
|
|
color: var(--medium-dark);
|
|
background-color: var(--background-inner);
|
|
border: 1px solid var(--kinda-light);
|
|
border-top-right-radius: var(--rounded-edge-radius);
|
|
border-end-start-radius: var(--rounded-edge-radius);
|
|
|
|
/* light-dark theme switch fading */
|
|
transition: background 0.25s ease, border 0.25s ease;
|
|
}
|
|
|
|
.copy_btn:hover {
|
|
color: var(--link);
|
|
}
|
|
|
|
/* the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file */
|
|
|
|
/* leave room for clipboard button to the right of the first line */
|
|
.highlight > :global(.code-line:first-of-type) {
|
|
margin-right: 3em;
|
|
}
|
|
|
|
.highlight > :global(.line-number::before) {
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
margin-right: 1.5em;
|
|
text-align: right;
|
|
color: var(--code-comment);
|
|
content: attr(line); /* added to spans by prism */
|
|
}
|
|
|
|
.highlight :global(.token.comment),
|
|
.highlight :global(.token.prolog),
|
|
.highlight :global(.token.cdata) {
|
|
color: var(--code-comment);
|
|
}
|
|
|
|
.highlight :global(.token.delimiter),
|
|
.highlight :global(.token.boolean),
|
|
.highlight :global(.token.keyword),
|
|
.highlight :global(.token.selector),
|
|
.highlight :global(.token.important),
|
|
.highlight :global(.token.doctype),
|
|
.highlight :global(.token.atrule),
|
|
.highlight :global(.token.url) {
|
|
color: var(--code-keyword);
|
|
}
|
|
|
|
.highlight :global(.token.tag),
|
|
.highlight :global(.token.builtin),
|
|
.highlight :global(.token.regex) {
|
|
color: var(--code-namespace);
|
|
}
|
|
|
|
.highlight :global(.token.property),
|
|
.highlight :global(.token.constant),
|
|
.highlight :global(.token.variable),
|
|
.highlight :global(.token.attr-value),
|
|
.highlight :global(.token.class-name),
|
|
.highlight :global(.token.string),
|
|
.highlight :global(.token.char) {
|
|
color: var(--code-variable);
|
|
}
|
|
|
|
.highlight :global(.token.literal-property),
|
|
.highlight :global(.token.attr-name) {
|
|
color: var(--code-attribute);
|
|
}
|
|
|
|
.highlight :global(.token.function) {
|
|
color: var(--code-literal);
|
|
}
|
|
|
|
.highlight :global(.token.tag .punctuation),
|
|
.highlight :global(.token.attr-value .punctuation) {
|
|
color: var(--code-punctuation);
|
|
}
|
|
|
|
.highlight :global(.token.inserted) {
|
|
background-color: var(--code-addition);
|
|
}
|
|
|
|
.highlight :global(.token.deleted) {
|
|
background-color: var(--code-deletion);
|
|
}
|
|
|
|
.highlight :global(.token.url) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.highlight :global(.token.bold) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlight :global(.token.italic) {
|
|
font-style: italic;
|
|
}
|