]>
Commit | Line | Data |
---|---|---|
70f583c3 BW |
1 | .status { |
2 | font-size: 0.8rem; | |
3 | color: var(--text-title); | |
4 | ||
5 | &.offline:before, &.error:before { | |
6 | background-color: #d65c68; | |
7 | box-shadow: 0 0 5px 1px #d65c68; | |
8 | color: #d65c68; | |
9 | } | |
10 | ||
11 | &.pending:before { | |
12 | background-color: #e8bb7d; | |
13 | box-shadow: 0 0 5px 1px #e8bb7d; | |
14 | } | |
15 | ||
16 | &.online:before, &.ready:before { | |
17 | background-color: #94e185; | |
18 | box-shadow: 0 0 5px 1px #94e185; | |
19 | } | |
20 | ||
21 | &.in-progress:before { | |
22 | background-color: #8fe87d; | |
23 | box-shadow: 0 0 5px 1px #8fe87d; | |
24 | animation: pulse 1s alternate infinite; | |
25 | } | |
26 | ||
27 | @keyframes pulse { | |
28 | 0% { | |
29 | background: rgba(255, 255, 255, 0.2); | |
30 | box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3), | |
31 | 0px 0px 5px 2px rgba(0, 255, 135, 0.2); | |
32 | } | |
33 | 100% { | |
34 | background: rgba(255, 255, 255, 1); | |
35 | box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5), | |
36 | 0px 0px 15px 2px rgba(0, 255, 135, 1); | |
37 | } | |
38 | } | |
39 | ||
40 | &:before { | |
41 | content: " "; | |
42 | display: inline-block; | |
43 | width: 8px; | |
44 | height: 8px; | |
45 | margin-right: 10px; | |
46 | border-radius: 8px; | |
47 | } | |
48 | } |