added 2 more colors to each theme to make sure errors are visible with extra color enabled

This commit is contained in:
Jack 2020-06-09 01:32:34 +01:00
parent c37d486a25
commit d9b0950e82
36 changed files with 113 additions and 35 deletions

View file

@ -810,6 +810,12 @@ key {
& letter.correct{
color: var(--main-color);
}
& letter.incorrect{
color: var(--extra-error-color);
}
& letter.incorrect.extra{
color: var(--extra-error-extra-color);
}
}
}
@ -819,9 +825,21 @@ key {
& letter.correct{
color: var(--sub-color);
}
& letter.incorrect{
color: var(--extra-error-color);
}
& letter.incorrect.extra{
color: var(--extra-error-extra-color);
}
}
}
#words.flipped.extraColor .word.error,
#words.extraColor .word.error
{
border-bottom: 2px solid var(--extra-error-color);
}
.pageTest #resultExtraButtons{
opacity: 0;
display: grid;

View file

@ -6,4 +6,6 @@
--text-color: #e9ecf0;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #c5da33;
--extra-error-extra-color: #849224;
}

View file

@ -5,7 +5,9 @@
--sub-color: #99947f;
--text-color: #080909;
--error-color: #c87e74;
--extra-error-color: #a56961;
--extra-error-color: #a56961;
--extra-error-color: #c87e74;
--extra-error-extra-color: #a56961;
}
.word letter.incorrect{

View file

@ -7,6 +7,8 @@
--text-color: #ebe6ea;
--error-color: #921341;
--error-extra-color: #640b2c;
--extra-error-color: #921341;
--extra-error-extra-color: #640b2c;
}
/* .word.error{

View file

@ -1,9 +1,11 @@
:root {
--bg-color: #262727;
--main-color: #665957;
--main-color: #f0d3c9;
--caret-color: #f0d3c9;
--sub-color: #f0d3c9;
--sub-color: #665957;
--text-color: #fff;
--error-color: #bd4141;
--error-extra-color: #883434;
--error-extra-color: #883434;
--extra-error-color: #bd4141;
--extra-error-extra-color: #883434;
}

View file

@ -5,5 +5,7 @@
--sub-color: #495755;
--text-color: #eaf1f3;
--error-color: #f6c9b4;
--error-extra-color: #f59a71;
--error-extra-color: #f59a71;
--extra-error-color: #f6c9b4;
--extra-error-extra-color: #f59a71;
}

View file

@ -5,5 +5,7 @@
--sub-color: #596172;
--text-color: #f6f0e9;
--error-color: #ec4c56;
--error-extra-color: #9b333a;
--error-extra-color: #9b333a;
--extra-error-color: #ecdc4c;
--extra-error-extra-color: #bdb03d;
}

View file

@ -6,4 +6,6 @@
--text-color: #f5e6c8;
--error-color: #e72d2d;
--extra-error-color: #b62828;
--extra-error-color: #a5e72d;
--extra-error-extra-color: #74a120;
}

View file

@ -6,4 +6,6 @@
--text-color: #eee;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #da3333;
--extra-error-extra-color: #791717;
}

View file

@ -6,6 +6,8 @@
--text-color: #fff;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #da3333;
--extra-error-extra-color: #791717;
}
#menu{

View file

@ -6,6 +6,8 @@
--text-color: #f2f2f2;
--error-color: #f758a0;
--error-extra-color: #732e51;
--extra-error-color: #f758a0;
--extra-error-extra-color: #732e51;
}

View file

@ -4,6 +4,8 @@
--caret-color: #458588;
--sub-color: #b8bb26;
--text-color: #ebdbb2;
--error-color: #fb4934 ;
--error-color: #fb4934;
--error-extra-color: #cc241d;
--extra-error-color: #fb4934;
--extra-error-extra-color: #cc241d;
}

View file

@ -6,4 +6,6 @@
--text-color: #3c3836;
--error-color: #cc241d;
--error-extra-color: #9d0006;
--extra-error-color: #cc241d;
--extra-error-extra-color: #9d0006;
}

View file

@ -6,4 +6,6 @@
--text-color: #dbe7e8;
--error-color: #a8d400;
--error-extra-color: #668000;
--extra-error-color: #a8d400;
--extra-error-extra-color: #668000;
}

View file

@ -6,4 +6,6 @@
--text-color: #111;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #da3333;
--extra-error-extra-color: #791717;
}

View file

@ -6,4 +6,6 @@
--text-color: #e8e8e8;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #d7da33;
--extra-error-extra-color: #737917;
}

View file

@ -2,8 +2,10 @@
--bg-color: #f35588;
--main-color: #05dfd7;
--caret-color: #a3f7bf;
--text-color: #231e20;
--sub-color: #fff591;
--error-color: #9d72ff;
--error-extra-color: #7353bd;
--text-color: #f0e9ec;
--sub-color: #94294c;
--error-color: #fff591;
--error-extra-color: #b9b269;
--extra-error-color: #fff591;
--extra-error-extra-color: #b9b269;
}

View file

@ -2,8 +2,10 @@
--bg-color: #18181a;
--main-color: #e4609b;
--caret-color: #e4609b;
--sub-color: #fff;
--text-color: #e4609b;
--sub-color: #47bac0;
--text-color: #fff;
--error-color: #fff591;
--error-extra-color: #b6af68;
--extra-error-color: #fff591;
--extra-error-extra-color: #b6af68;
}

View file

@ -4,6 +4,8 @@
--caret-color: #5cdb95;
--sub-color: #20688a;
--text-color: #edf5e1;
--error-color: #F35588;
--error-extra-color: rgb(163, 56, 90);
--error-color: #f35588;
--error-extra-color: #a3385a;
--extra-error-color: #f35588;
--extra-error-extra-color: #a3385a;
}

View file

@ -6,4 +6,6 @@
--text-color: #1a2633;
--error-color: #bf616a;
--error-extra-color: #793e44;
--extra-error-color: #bf616a;
--extra-error-extra-color: #793e44;
}

View file

@ -6,4 +6,6 @@
--text-color: #e3e6eb;
--error-color: #d36a7b;
--error-extra-color: #994154;
--extra-error-color: #d36a7b;
--extra-error-extra-color: #994154;
}

View file

@ -6,4 +6,6 @@
--text-color: #E6DB74;
--error-color: #F92672;
--error-extra-color: #FD971F;
--extra-error-color: #F92672;
--extra-error-extra-color: #FD971F;
}

View file

@ -1,11 +1,13 @@
:root {
--bg-color: #6c7072;
--bg-color: #d1d7da;
--main-color: #daa99b;
--caret-color: #8fadc9;
--sub-color: #878c91;
--sub-color: #9a9fa1;
--text-color: #1d1d1d;
--error-color: #bf6464;
--error-extra-color: #793e44;
--extra-error-color: #8fadc9;
--extra-error-extra-color: #667c91;
}
#top .logo .bottom{

View file

@ -6,4 +6,6 @@
--text-color: #1cbaac;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #da3333;
--extra-error-extra-color: #791717;
}

View file

@ -6,4 +6,6 @@
--text-color: #d8dee9;
--error-color: #bf616a;
--error-extra-color: #793e44;
--extra-error-color: #bf616a;
--extra-error-extra-color: #793e44;
}

View file

@ -3,9 +3,11 @@
--main-color: #a5a096;
--caret-color: #a5a096;
--sub-color: #5d6263;
--text-color: #e7e3db;
--text-color: #f7f5f1;
--error-color: #dd452e;
--error-extra-color: #9e3423;
--extra-error-color: #dd452e;
--extra-error-extra-color: #9e3423;
}
#menu .button:nth-child(1){

View file

@ -6,4 +6,6 @@
--text-color:#f2efed;
--error-color: #bf616a;
--error-extra-color: #793e44;
--extra-error-color: #e03d4e;
--extra-error-extra-color: #aa2f3b;
}

View file

@ -4,6 +4,8 @@
--caret-color: #c79e6e;
--sub-color: #55131b;
--text-color: #e2dad0;
--error-color: #da3333;
--error-extra-color: #791717;
--error-color: #33bbda;
--error-extra-color: #176b79;
--extra-error-color: #33bbda;
--extra-error-extra-color: #176779;
}

View file

@ -6,4 +6,6 @@
--text-color: #1d1b17;
--error-color: #bf616a;
--error-extra-color: #793e44;
--extra-error-color: #bf616a;
--extra-error-extra-color: #793e44;
}

View file

@ -5,7 +5,9 @@
--sub-color: #444;
--text-color: #eee;
--error-color: #eee;
--error-extra-color: rgb(179, 179, 179);
--error-extra-color: #b3b3b3;
--extra-error-color: #eee;
--extra-error-extra-color: #b3b3b3;
}
@keyframes rgb{

View file

@ -6,4 +6,6 @@
--text-color:#323437;
--error-color: #da3333;
--error-extra-color: #791717;
--extra-error-color: #da3333;
--extra-error-extra-color: #791717;
}

View file

@ -5,5 +5,7 @@
--sub-color: #646669;
--text-color: #d1d0c5;
--error-color: #ca4754;
--error-extra-color: #7e2a33;
--error-extra-color: #7e2a33;
--extra-error-color: #ca4754;
--extra-error-extra-color: #7e2a33;
}

View file

@ -4,6 +4,10 @@
--caret-color: #eee;
--sub-color: #444;
--text-color: #eee;
--error-color: #fff;
--error-extra-color: #d8d8d8;
--extra-error-color: #fff;
--extra-error-extra-color: #d8d8d8;
}
@keyframes shadow {
@ -21,18 +25,6 @@
}
}
.word.error {
border-bottom: 2px solid #fff;
}
.word letter.incorrect {
color: #fff;
}
.word letter.incorrect.extra {
color: #fff;
}
#liveWpm{
color: white;
}

View file

@ -5,5 +5,7 @@
--sub-color: #0f2d4e;
--text-color: #d6dbd9;
--error-color: #fb4934;
--extra-error-color: #cc241d;
--error-extra-color: #cc241d;
--extra-error-color: #fb4934;
--extra-error-extra-color: #cc241d;
}

View file

@ -7,6 +7,8 @@
--text-color: #130f1a;
--error-color: #ffe23e;
--error-extra-color: #fff1c3;
--extra-error-color: #ffe23e;
--extra-error-extra-color: #fff1c3;
}
.word.error{

View file

@ -6,4 +6,6 @@
--text-color: #e7eae0;
--error-color: #a61717;
--error-extra-color: #731010;
--extra-error-color: #a61717;
--extra-error-extra-color: #731010;
}