249 lines
3.8 KiB
CSS
249 lines
3.8 KiB
CSS
|
|
|
|
|
|
|
|
|
|
/*************
|
|
* CODEBLOCKS
|
|
*************/
|
|
|
|
.codeblock, .codeblock code {
|
|
font-family: var(--font-family-monospace);
|
|
}
|
|
|
|
.codeblock {
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
grid-column: gutter-start / gutter-end;
|
|
overflow: auto;
|
|
padding-block: var(--space-s);
|
|
|
|
.line {
|
|
margin-inline: var(--gutter-width);
|
|
}
|
|
}
|
|
|
|
|
|
.pre--plaintext {
|
|
font-family: var(--font-family-body);
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**********************
|
|
# SYNTAX HIGHLIGHTING
|
|
**********************/
|
|
|
|
.color-theme__dracula {
|
|
--background: #282A36;
|
|
--foreground: #f8f8f2;
|
|
--selection: #44475A;
|
|
--comment: #6272A4;
|
|
--red: #ff5555;
|
|
--orange: #ffB86C;
|
|
--yellow: #F1FA8C;
|
|
--green: #50FA7B;
|
|
--purple: #BD93F9;
|
|
--cyan: #8BE9FD;
|
|
--pink: #FF79C6;
|
|
}
|
|
|
|
|
|
.codeblock {
|
|
.err {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* line link */
|
|
.lnlinks {
|
|
outline: none;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.line {
|
|
display: flex;
|
|
}
|
|
|
|
/* keyword */
|
|
.k {
|
|
color: var(--purple);
|
|
}
|
|
|
|
/* keyword: constant */
|
|
/* keyword: declaration */
|
|
/* keyword: pseudo */
|
|
/* keyword: reserved */
|
|
.kc, .kd, .kp, .kr {
|
|
color: var(--orange);
|
|
}
|
|
|
|
/* keyword: namespace */
|
|
.kn {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* keyword: type */
|
|
.kt {
|
|
color: var(--yellow);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/* line highlight */
|
|
.hl {
|
|
background-color: var(--selection);
|
|
}
|
|
|
|
/* line numbers */
|
|
.ln {
|
|
white-space: pre;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
margin-right: 0.4em;
|
|
padding: 0 0.4em 0 0.4em;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
/* name: attribute */
|
|
/* name: class */
|
|
/* name: decorator */
|
|
.na, .nc, .nd {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* name: constant */
|
|
.no {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
/* name: exception */
|
|
.ne {
|
|
color: var(--pink);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/* name: function */
|
|
.nf {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* name: other */
|
|
.nx {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* name: tag */
|
|
.nt {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* literal */
|
|
.l {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
/* literal: date */
|
|
.ld {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* literal: string, delimiter */
|
|
/* literal: string */
|
|
/* literal: string, backtick */
|
|
/* literal: string, char */
|
|
.dl, .s, .sb, .sc {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* literal: number */
|
|
/* literal: number, bin */
|
|
/* literal: number, float */
|
|
/* literal: number, hex */
|
|
/* literal: number, integer */
|
|
/* literal: number, integer, long
|
|
/* literal: number, octal */
|
|
.il, .m, .mb, .mf, .mh, .mi, .mo {
|
|
color: var(--yellow);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/* name: built-in */
|
|
.nb {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* Operator */
|
|
.o {
|
|
color: var(--orange);
|
|
}
|
|
|
|
/* operator: word */
|
|
.ow {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* literal: string, double */
|
|
/* literal: string, doc */
|
|
/* literal: string, heredoc */
|
|
/* literal: string, interpol */
|
|
/* literal: string, other */
|
|
.s2, .sd, .sh, .si, .sx {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* literal: string escape */
|
|
.se {
|
|
color: var(--purple);
|
|
}
|
|
|
|
/* literal: string, regex */
|
|
.sr {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* literal: string, affix */
|
|
/* literal: string, single */
|
|
/* literal: string, symbol */
|
|
.sa, .s1, .ss {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* comment */
|
|
/* comment: hashbang */
|
|
/* comment: multiline */
|
|
/* comment: single */
|
|
/* comment: special */
|
|
/* comment: preproc */
|
|
/* comment: preproc file */
|
|
.c, .ch, .cm, .c1, .cs, .cp, .cpf {
|
|
color: var(--comment);
|
|
}
|
|
|
|
/* generic: deleted */
|
|
.gd {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* generic: emphasized */
|
|
.ge {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* generic: inserted */
|
|
.gi {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* generic: string */
|
|
.gs {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* generic: subheading */
|
|
.gu {
|
|
color: var(--text-color-secondary);
|
|
}
|
|
}
|