aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/assets
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets')
-rw-r--r--src/assets/app.scss2
-rw-r--r--src/assets/components/status.scss48
2 files changed, 49 insertions, 1 deletions
diff --git a/src/assets/app.scss b/src/assets/app.scss
index d112482..4ce417a 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -1,8 +1,8 @@
1@charset "utf-8"; 1@charset "utf-8";
2 2
3@import "./webfonts/webfonts.scss"; 3@import "./webfonts/webfonts.scss";
4
5@import "../../node_modules/bulma/bulma"; 4@import "../../node_modules/bulma/bulma";
5@import "./components/status.scss";
6 6
7// Themes import 7// Themes import
8@import "./themes/sui.scss"; 8@import "./themes/sui.scss";
diff --git a/src/assets/components/status.scss b/src/assets/components/status.scss
new file mode 100644
index 0000000..b5fd20b
--- /dev/null
+++ b/src/assets/components/status.scss
@@ -0,0 +1,48 @@
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 } \ No newline at end of file