Codeblocks: Move color theming to the codeblocks stylesheet
This commit is contained in:
parent
c97b24977d
commit
570234947b
2 changed files with 219 additions and 270 deletions
|
|
@ -71,273 +71,3 @@ hr {
|
||||||
border-top: 1pt solid var(--hr-color);
|
border-top: 1pt solid var(--hr-color);
|
||||||
color: var(--hr-color);
|
color: var(--hr-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/***********
|
|
||||||
# GRADIENT
|
|
||||||
***********/
|
|
||||||
|
|
||||||
.text-color--gradient {
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
|
|
||||||
radial-gradient(circle at 30% 30%, var(--light-blue), var(--blue) 20%, transparent 80%),
|
|
||||||
radial-gradient(ellipse at 95% 20%, var(--dark-blue), var(--blue) 70%, transparent 80%),
|
|
||||||
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
|
|
||||||
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
|
|
||||||
radial-gradient(ellipse at 50% 50%, var(--dark-blue), transparent 80%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
a[href] {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
|
||||||
.text-color--gradient {
|
|
||||||
--color1: rgb(103 128 229);
|
|
||||||
--color2: rgb(130 90 227);
|
|
||||||
--color3: rgb(135 101 228);
|
|
||||||
--color4: rgb(125 115 229);
|
|
||||||
--color5: rgb(107 130 230);
|
|
||||||
--color6: rgb(77 153 232);
|
|
||||||
--color7: rgb(74 136 230);
|
|
||||||
--color8: rgb(71 128 228);
|
|
||||||
--color9: rgb(65 80 224);
|
|
||||||
--color10: rgb(61 58 223);
|
|
||||||
|
|
||||||
span:nth-child(10n + 1) { color: var(--color1); }
|
|
||||||
span:nth-child(10n + 2) { color: var(--color2); }
|
|
||||||
span:nth-child(10n + 3) { color: var(--color3); }
|
|
||||||
span:nth-child(10n + 4) { color: var(--color4); }
|
|
||||||
span:nth-child(10n + 5) { color: var(--color5); }
|
|
||||||
span:nth-child(10n + 6) { color: var(--color6); }
|
|
||||||
span:nth-child(10n + 7) { color: var(--color7); }
|
|
||||||
span:nth-child(10n + 8) { color: var(--color8); }
|
|
||||||
span:nth-child(10n + 9) { color: var(--color9); }
|
|
||||||
span:nth-child(10n) { color: var(--color10); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************
|
|
||||||
# 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -22,3 +22,222 @@
|
||||||
margin-inline: var(--gutter-width);
|
margin-inline: var(--gutter-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************
|
||||||
|
# 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue