static/themes/rgb.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

:root {
  --bg-color: #111;
  --main-color: #eee;
  --caret-color: #eee;
  --sub-color: #444;
  --text-color: #eee;
  --error-color: #eee;
  --error-extra-color: #b3b3b3;
  --colorful-error-color: #eee;
  --colorful-error-extra-color: #b3b3b3;
}

@keyframes rgb {
  0% {
    color: #f44336;
  }
  25% {
    color: #ffc107;
  }
  50% {
    color: #4caf50;
  }
  75% {
    color: #3f51b5;
  }
  100% {
    color: #f44336;
  }
}

@keyframes rgb-bg {
  0% {
    background: #f44336;
  }
  25% {
    background: #ffc107;
  }
  50% {
    background: #4caf50;
  }
  75% {
    background: #3f51b5;
  }
  100% {
    background: #f44336;
  }
}

.button.discord::after,
#caret,
.pageSettings .section .buttons .button.active,
.pageSettings .section.languages .buttons .language.active,
.pageAccount .group.filterButtons .buttons .button.active {
  animation-name: rgb-bg !important;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#top.focus .button.discord::after,
#top .button.discord.dotHidden::after {
  animation-name: none !important;
}

.logo .bottom,
#top .config .group .buttons .text-button.active,
#result .stats .group .bottom,
#menu .icon-button:hover,
#top .config .group .buttons .text-button:hover,
a:hover,
#words.flipped .word {
  animation-name: rgb;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* .word letter.correct{
    animation-name: rgb;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}  */

#words.flipped .word letter.correct {
  color: var(--sub-color);
}

#words:not(.flipped) .word letter.correct {
  animation-name: rgb;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}