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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************
|
||||
# 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