OGS/Gitea-Blurple
12
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweaked styles for 1.20.5

Browse Source
This commit is contained in:
Sophia Atkinson
2023-10-05 12:29:22 -07:00
parent 2d32ca2e38
commit b7b204e013
4 changed files with 392 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/theme-blurple-dyslexia.css
View File

@ -194,10 +194,10 @@
--color-input-text: #d5dbe6; --color-input-text: #d5dbe6;
--color-input-background: #232933; --color-input-background: #232933;
--color-input-toggle-background: #454a57; --color-input-toggle-background: #454a57;
--color-input-border: #454a57; --color-input-border: var(--color-secondary);
--color-input-border-hover: #505667; --color-input-border-hover: var(--color-secondary-dark-1);
--color-header-wrapper: #2a2e3a; --color-header-wrapper: #202430;
--color-header-wrapper-transparent: #2a2e3a00; --color-header-wrapper-transparent: #20243000;
--color-light: #00000028; --color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28; --color-light-border: #ffffff28;
@ -220,20 +220,19 @@
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: #ffffff12; --color-reaction-bg: #ffffff12;
--color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0; --color-tooltip-bg: #000000f0;
--color-nav-bg: #232834; --color-nav-bg: #232834;
--color-nav-hover-bg: #383c47; --color-nav-hover-bg: #383c47;
--color-label-text: #dfe3ec; --color-label-text: #dfe3ec;
--color-label-active-bg: #4c525e; --color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0; --color-label-hover-bg: #7c8497a0;
--color-label-active-bg: #7c8497ff; --color-label-active-bg: #7c8497ff;
--color-accent: var(--color-primary-light-1); --color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b; --color-active-line: #534d1b;
accent-color: var(--color-accent); accent-color: var(--color-accent);
--color-label-bg: #2A2E3A;
color-scheme: dark; color-scheme: dark;
} }
} }

13
public/css/theme-blurple.css
View File

@ -169,10 +169,10 @@
--color-input-text: #d5dbe6; --color-input-text: #d5dbe6;
--color-input-background: #232933; --color-input-background: #232933;
--color-input-toggle-background: #454a57; --color-input-toggle-background: #454a57;
--color-input-border: #454a57; --color-input-border: var(--color-secondary);
--color-input-border-hover: #505667; --color-input-border-hover: var(--color-secondary-dark-1);
--color-header-wrapper: #2a2e3a; --color-header-wrapper: #202430;
--color-header-wrapper-transparent: #2a2e3a00; --color-header-wrapper-transparent: #20243000;
--color-light: #00000028; --color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28; --color-light-border: #ffffff28;
@ -195,20 +195,19 @@
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: #ffffff12; --color-reaction-bg: #ffffff12;
--color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0; --color-tooltip-bg: #000000f0;
--color-nav-bg: #232834; --color-nav-bg: #232834;
--color-nav-hover-bg: #383c47; --color-nav-hover-bg: #383c47;
--color-label-text: #dfe3ec; --color-label-text: #dfe3ec;
--color-label-active-bg: #4c525e; --color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0; --color-label-hover-bg: #7c8497a0;
--color-label-active-bg: #7c8497ff; --color-label-active-bg: #7c8497ff;
--color-accent: var(--color-primary-light-1); --color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b; --color-active-line: #534d1b;
accent-color: var(--color-accent); accent-color: var(--color-accent);
--color-label-bg: #2A2E3A;
color-scheme: dark; color-scheme: dark;
} }
} }

13
templates/scss/partials/_blurple_roots.scss
View File

@ -169,10 +169,10 @@
--color-input-text: #d5dbe6; --color-input-text: #d5dbe6;
--color-input-background: #232933; --color-input-background: #232933;
--color-input-toggle-background: #454a57; --color-input-toggle-background: #454a57;
--color-input-border: #454a57; --color-input-border: var(--color-secondary);
--color-input-border-hover: #505667; --color-input-border-hover: var(--color-secondary-dark-1);
--color-header-wrapper: #2a2e3a; --color-header-wrapper: #202430;
--color-header-wrapper-transparent: #2a2e3a00; --color-header-wrapper-transparent: #20243000;
--color-light: #00000028; --color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28; --color-light-border: #ffffff28;
@ -195,20 +195,19 @@
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: #ffffff12; --color-reaction-bg: #ffffff12;
--color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0; --color-tooltip-bg: #000000f0;
--color-nav-bg: #232834; --color-nav-bg: #232834;
--color-nav-hover-bg: #383c47; --color-nav-hover-bg: #383c47;
--color-label-text: #dfe3ec; --color-label-text: #dfe3ec;
--color-label-active-bg: #4c525e; --color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0; --color-label-hover-bg: #7c8497a0;
--color-label-active-bg: #7c8497ff; --color-label-active-bg: #7c8497ff;
--color-accent: var(--color-primary-light-1); --color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b; --color-active-line: #534d1b;
accent-color: var(--color-accent); accent-color: var(--color-accent);
--color-label-bg: #2A2E3A;
color-scheme: dark color-scheme: dark
} }
} }

265
templates/scss/partials/_theme_blurple.scss
View File

@ -3,14 +3,16 @@ DO NOT INCLUEDE ANY :root(s) IN THIS FILE!!!
**/ **/
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.chroma { .chroma {
background-color: var(--color-code-bg); background-color: var(--color-code-bg)
} }
.chroma .lntd { .chroma .lntd {
vertical-align: top; vertical-align: top;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0
} }
.chroma .lntable { .chroma .lntable {
border-spacing: 0; border-spacing: 0;
padding: 0; padding: 0;
@ -18,293 +20,376 @@ DO NOT INCLUEDE ANY :root(s) IN THIS FILE!!!
border: 0; border: 0;
width: auto; width: auto;
overflow: auto; overflow: auto;
display: block; display: block
} }
.chroma .hl { .chroma .hl {
display: block; display: block;
width: 100%; width: 100%
} }
.chroma .lnt, .chroma .lnt,
.chroma .ln { .chroma .ln {
margin-right: 0.4em; margin-right: .4em;
padding: 0 0.4em; padding: 0 .4em
} }
.chroma .gs { .chroma .gs {
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold)
} }
.chroma .gl { .chroma .gl {
text-decoration: underline; text-decoration: underline
} }
} }
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
.chroma .bp { .chroma .bp {
color: #fabd2f; color: #fabd2f
} }
.chroma .c, .chroma .c,
.chroma .c1, .chroma .c1,
.chroma .ch, .chroma .ch,
.chroma .cm { .chroma .cm {
color: #777e94; color: #777e94
} }
.chroma .cp { .chroma .cp {
color: #8ec07c; color: #8ec07c
} }
.chroma .cpf { .chroma .cpf {
color: #649bc4; color: #649bc4
} }
.chroma .cs { .chroma .cs {
color: #9075cd; color: #9075cd
} }
.chroma .dl { .chroma .dl {
color: #649bc4; color: #649bc4
} }
.chroma .gd { .chroma .gd {
color: #fff; color: #fff;
background-color: #5f3737; background-color: #5f3737
} }
.chroma .ge { .chroma .ge {
color: #ddee30; color: #ddee30
} }
.chroma .gh { .chroma .gh {
color: #ffaa10; color: #ffaa10
} }
.chroma .gi { .chroma .gi {
color: #fff; color: #fff;
background-color: #3a523a; background-color: #3a523a
} }
.chroma .go { .chroma .go {
color: #777e94; color: #777e94
} }
.chroma .gp { .chroma .gp {
color: #ebdbb2; color: #ebdbb2
} }
.chroma .gr { .chroma .gr {
color: #f43; color: #f43
} }
.chroma .gs { .chroma .gs {
color: #ebdbb2; color: #ebdbb2
} }
.chroma .gt { .chroma .gt {
color: #ff7540; color: #ff7540
} }
.chroma .gu { .chroma .gu {
color: #b8bb26; color: #b8bb26
} }
.chroma .il { .chroma .il {
color: #649bc4; color: #649bc4
} }
.chroma .k { .chroma .k {
color: #ff7540; color: #ff7540
} }
.chroma .kc { .chroma .kc {
color: #649bc4; color: #649bc4
} }
.chroma .kd { .chroma .kd {
color: #ff7540; color: #ff7540
} }
.chroma .kn { .chroma .kn {
color: #ffaa10; color: #ffaa10
} }
.chroma .kp { .chroma .kp {
color: #5f8700; color: #5f8700
} }
.chroma .kr { .chroma .kr {
color: #ff7540; color: #ff7540
} }
.chroma .kt { .chroma .kt {
color: #ff7b72; color: #ff7b72
} }
.chroma .m, .chroma .m,
.chroma .mb, .chroma .mb,
.chroma .mf, .chroma .mf,
.chroma .mh, .chroma .mh,
.chroma .mi, .chroma .mi,
.chroma .mo { .chroma .mo {
color: #649bc4; color: #649bc4
} }
.chroma .n { .chroma .n {
color: #c9d1d9; color: #c9d1d9
} }
.chroma .na { .chroma .na {
color: #b8bb26; color: #b8bb26
} }
.chroma .nb { .chroma .nb {
color: #fabd2f; color: #fabd2f
} }
.chroma .nc { .chroma .nc {
color: #ffaa10; color: #ffaa10
} }
.chroma .nd { .chroma .nd {
color: #8ec07c; color: #8ec07c
} }
.chroma .ne { .chroma .ne {
color: #ff7540; color: #ff7540
} }
.chroma .nf, .chroma .nf,
.chroma .ni { .chroma .ni {
color: #fabd2f; color: #fabd2f
} }
.chroma .nl { .chroma .nl {
color: #ff7540; color: #ff7540
} }
.chroma .nn { .chroma .nn {
color: #c9d1d9; color: #c9d1d9
} }
.chroma .no { .chroma .no {
color: #649bc4; color: #649bc4
} }
.chroma .nt { .chroma .nt {
color: #ff7540; color: #ff7540
} }
.chroma .nv { .chroma .nv {
color: #ebdbb2; color: #ebdbb2
} }
.chroma .nx { .chroma .nx {
color: #b6bac5; color: #b6bac5
} }
.chroma .o { .chroma .o {
color: #ff7540; color: #ff7540
} }
.chroma .ow { .chroma .ow {
color: #5f8700; color: #5f8700
} }
.chroma .p { .chroma .p {
color: #d2d4db; color: #d2d4db
} }
.chroma .s, .chroma .s,
.chroma .s1, .chroma .s1,
.chroma .s2 { .chroma .s2 {
color: #b8bb26; color: #b8bb26
} }
.chroma .sa { .chroma .sa {
color: #649bc4; color: #649bc4
} }
.chroma .sb { .chroma .sb {
color: #b8bb26; color: #b8bb26
} }
.chroma .sc { .chroma .sc {
color: #649bc4; color: #649bc4
} }
.chroma .sd { .chroma .sd {
color: #777e94; color: #777e94
} }
.chroma .se { .chroma .se {
color: #ff7540; color: #ff7540
} }
.chroma .sh { .chroma .sh {
color: #649bc4; color: #649bc4
} }
.chroma .si { .chroma .si {
color: #ffaa10; color: #ffaa10
} }
.chroma .sr { .chroma .sr {
color: #9075cd; color: #9075cd
} }
.chroma .ss { .chroma .ss {
color: #ff7540; color: #ff7540
} }
.chroma .sx { .chroma .sx {
color: #ffaa10; color: #ffaa10
} }
.chroma .vc { .chroma .vc {
color: #ff7540; color: #ff7540
} }
.chroma .vg, .chroma .vg,
.chroma .vi { .chroma .vi {
color: #ffaa10; color: #ffaa10
} }
.chroma .w { .chroma .w {
color: #7f8699; color: #7f8699
} }
} }
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
.CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-default .cm-property,
.CodeMirror.cm-s-paper .cm-property { .CodeMirror.cm-s-paper .cm-property {
color: #a0cc75; color: #a0cc75
} }
.CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-default .cm-header,
.CodeMirror.cm-s-paper .cm-header { .CodeMirror.cm-s-paper .cm-header {
color: #9daccc; color: #9daccc
} }
.CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-default .cm-quote,
.CodeMirror.cm-s-paper .cm-quote { .CodeMirror.cm-s-paper .cm-quote {
color: #090; color: #090
} }
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword { .CodeMirror.cm-s-paper .cm-keyword {
color: #cc8a61; color: #cc8a61
} }
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-default .cm-atom,
.CodeMirror.cm-s-paper .cm-atom { .CodeMirror.cm-s-paper .cm-atom {
color: #ef5e77; color: #ef5e77
} }
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-default .cm-number,
.CodeMirror.cm-s-paper .cm-number { .CodeMirror.cm-s-paper .cm-number {
color: #ff5656; color: #ff5656
} }
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def { .CodeMirror.cm-s-paper .cm-def {
color: #e4e4e4; color: #e4e4e4
} }
.CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-default .cm-variable-2,
.CodeMirror.cm-s-paper .cm-variable-2 { .CodeMirror.cm-s-paper .cm-variable-2 {
color: #00bdbf; color: #00bdbf
} }
.CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-default .cm-variable-3,
.CodeMirror.cm-s-paper .cm-variable-3 { .CodeMirror.cm-s-paper .cm-variable-3 {
color: #085; color: #085
} }
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment { .CodeMirror.cm-s-paper .cm-comment {
color: #8e9ab3; color: #8e9ab3
} }
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string { .CodeMirror.cm-s-paper .cm-string {
color: #a77272; color: #a77272
} }
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-default .cm-string-2,
.CodeMirror.cm-s-paper .cm-string-2 { .CodeMirror.cm-s-paper .cm-string-2 {
color: #f50; color: #f50
} }
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-default .cm-meta,
.CodeMirror.cm-s-paper .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
.CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-default .cm-qualifier,
.CodeMirror.cm-s-paper .cm-qualifier { .CodeMirror.cm-s-paper .cm-qualifier {
color: #ffb176; color: #ffb176
} }
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-default .cm-builtin,
.CodeMirror.cm-s-paper .cm-builtin { .CodeMirror.cm-s-paper .cm-builtin {
color: #b7c951; color: #b7c951
} }
.CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-default .cm-bracket,
.CodeMirror.cm-s-paper .cm-bracket { .CodeMirror.cm-s-paper .cm-bracket {
color: #997; color: #997
} }
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-default .cm-tag,
.CodeMirror.cm-s-paper .cm-tag { .CodeMirror.cm-s-paper .cm-tag {
color: #f1d273; color: #f1d273
} }
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-default .cm-attribute,
.CodeMirror.cm-s-paper .cm-attribute { .CodeMirror.cm-s-paper .cm-attribute {
color: #bfcc70; color: #bfcc70
} }
.CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-default .cm-hr,
.CodeMirror.cm-s-paper .cm-hr { .CodeMirror.cm-s-paper .cm-hr {
color: #999; color: #999
} }
.CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-default .cm-url,
.CodeMirror.cm-s-paper .cm-url { .CodeMirror.cm-s-paper .cm-url {
color: #c5cfd0; color: #c5cfd0
} }
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-paper .cm-link { .CodeMirror.cm-s-paper .cm-link {
color: #d8c792; color: #d8c792
} }
.CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-default .cm-error,
.CodeMirror.cm-s-paper .cm-error { .CodeMirror.cm-s-paper .cm-error {
color: #dbdbeb; color: #dbdbeb
}
} }
}
.emoji[aria-label="check mark"], .emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"], .emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"], .emoji[aria-label="TOP arrow"],
@ -325,5 +410,5 @@ DO NOT INCLUEDE ANY :root(s) IN THIS FILE!!!
.emoji[aria-label="paw prints"], .emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"], .emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] { .emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg)
} }