mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 06:45:23 -04:00
100 lines
2.8 KiB
CSS
100 lines
2.8 KiB
CSS
.codeBlock {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 1em auto;
|
|
color: var(--colors-codeText);
|
|
}
|
|
|
|
.codeBlock .code {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
font-size: 0.9em;
|
|
tab-size: 2px;
|
|
background-color: var(--colors-codeBackground);
|
|
border: 1px solid var(--colors-kindaLight);
|
|
border-radius: var(--radii-corner);
|
|
}
|
|
|
|
.codeBlock :global(.line-number)::before {
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
margin-right: 1.5em;
|
|
text-align: right;
|
|
color: var(--colors-codeComment);
|
|
content: attr(line);
|
|
font-variant-numeric: tabular-nums;
|
|
user-select: none;
|
|
}
|
|
|
|
.codeBlock :global(.code-line):first-of-type {
|
|
margin-right: 3em;
|
|
}
|
|
|
|
.codeBlock.highlight :global(.token.comment),
|
|
.codeBlock.highlight :global(.token.prolog),
|
|
.codeBlock.highlight :global(.token.cdata) {
|
|
color: var(--colors-codeComment);
|
|
}
|
|
.codeBlock.highlight :global(.token.delimiter),
|
|
.codeBlock.highlight :global(.token.boolean),
|
|
.codeBlock.highlight :global(.token.keyword),
|
|
.codeBlock.highlight :global(.token.selector),
|
|
.codeBlock.highlight :global(.token.important),
|
|
.codeBlock.highlight :global(.token.doctype),
|
|
.codeBlock.highlight :global(.token.atrule),
|
|
.codeBlock.highlight :global(.token.url) {
|
|
color: var(--colors-codeKeyword);
|
|
}
|
|
.codeBlock.highlight :global(.token.tag),
|
|
.codeBlock.highlight :global(.token.builtin),
|
|
.codeBlock.highlight :global(.token.regex) {
|
|
color: var(--colors-codeNamespace);
|
|
}
|
|
.codeBlock.highlight :global(.token.property),
|
|
.codeBlock.highlight :global(.token.constant),
|
|
.codeBlock.highlight :global(.token.variable),
|
|
.codeBlock.highlight :global(.token.attr-value),
|
|
.codeBlock.highlight :global(.token.class-name),
|
|
.codeBlock.highlight :global(.token.string),
|
|
.codeBlock.highlight :global(.token.char) {
|
|
color: var(--colors-codeVariable);
|
|
}
|
|
.codeBlock.highlight :global(.token.literal-property),
|
|
.codeBlock.highlight :global(.token.attr-name) {
|
|
color: var(--colors-codeAttribute);
|
|
}
|
|
.codeBlock.highlight :global(.token.function) {
|
|
color: var(--colors-codeLiteral);
|
|
}
|
|
.codeBlock.highlight :global(.token.tag .punctuation),
|
|
.codeBlock.highlight :global(.token.attr-value .punctuation) {
|
|
color: var(--colors-codePunctuation);
|
|
}
|
|
.codeBlock.highlight :global(.token.inserted) {
|
|
color: var(--colors-codeAddition);
|
|
}
|
|
.codeBlock.highlight :global(.token.deleted) {
|
|
color: var(--colors-codeDeletion);
|
|
}
|
|
.codeBlock.highlight :global(.token.url) {
|
|
text-decoration: underline;
|
|
}
|
|
.codeBlock.highlight :global(.token.bold) {
|
|
font-weight: bold;
|
|
}
|
|
.codeBlock.highlight :global(.token.italic) {
|
|
font-style: italic;
|
|
}
|
|
|
|
.cornerCopyButton {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.65em;
|
|
background-color: var(--colors-backgroundInner);
|
|
border: 1px solid var(--colors-kindaLight);
|
|
border-top-right-radius: var(--radii-corner);
|
|
border-bottom-left-radius: var(--radii-corner);
|
|
}
|