diff options
author | Chocobozzz <me@florianbigard.com> | 2020-08-07 11:34:22 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2020-08-07 11:34:22 +0200 |
commit | 193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad (patch) | |
tree | 26de328ee639a8ea296c8eeabcd35541189c37c7 /client/src/sass/loading-bar.scss | |
parent | be59656c82d641118cd6d468cd11be1e057428d1 (diff) | |
download | PeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.tar.gz PeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.tar.zst PeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.zip |
Fix loading bar color
Diffstat (limited to 'client/src/sass/loading-bar.scss')
-rw-r--r-- | client/src/sass/loading-bar.scss | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss deleted file mode 100644 index d7c308911..000000000 --- a/client/src/sass/loading-bar.scss +++ /dev/null | |||
@@ -1,94 +0,0 @@ | |||
1 | @import '_mixins'; | ||
2 | // Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css | ||
3 | |||
4 | /* Make clicks pass-through */ | ||
5 | #loading-bar, | ||
6 | #loading-bar-spinner { | ||
7 | pointer-events: none; | ||
8 | -webkit-pointer-events: none; | ||
9 | -webkit-transition: 350ms linear all; | ||
10 | -moz-transition: 350ms linear all; | ||
11 | -o-transition: 350ms linear all; | ||
12 | transition: 350ms linear all; | ||
13 | color: pvar(--mainColor); | ||
14 | } | ||
15 | |||
16 | #loading-bar .bar { | ||
17 | -webkit-transition: width 350ms; | ||
18 | -moz-transition: width 350ms; | ||
19 | -o-transition: width 350ms; | ||
20 | transition: width 350ms; | ||
21 | |||
22 | background: pvar(--mainColor); | ||
23 | position: fixed; | ||
24 | z-index: z(loadbar); | ||
25 | top: 0; | ||
26 | left: 0; | ||
27 | width: 100%; | ||
28 | height: 2px; | ||
29 | border-bottom-right-radius: 1px; | ||
30 | border-top-right-radius: 1px; | ||
31 | } | ||
32 | |||
33 | /* Fancy blur effect */ | ||
34 | #loading-bar .peg { | ||
35 | position: absolute; | ||
36 | width: 70px; | ||
37 | right: 0; | ||
38 | top: 0; | ||
39 | height: 2px; | ||
40 | opacity: .45; | ||
41 | -moz-box-shadow: 1px 0 6px 1px; | ||
42 | -ms-box-shadow: 1px 0 6px 1px; | ||
43 | -webkit-box-shadow: 1px 0 6px 1px; | ||
44 | box-shadow: 1px 0 6px 1px; | ||
45 | color: inherit; | ||
46 | -moz-border-radius: 100%; | ||
47 | -webkit-border-radius: 100%; | ||
48 | border-radius: 100%; | ||
49 | } | ||
50 | |||
51 | #loading-bar-spinner { | ||
52 | display: block; | ||
53 | position: fixed; | ||
54 | z-index: z(loadbar); | ||
55 | top: 10px; | ||
56 | left: 10px; | ||
57 | } | ||
58 | |||
59 | #loading-bar-spinner .spinner-icon { | ||
60 | width: 14px; | ||
61 | height: 14px; | ||
62 | |||
63 | border: solid 2px transparent; | ||
64 | border-top-color: inherit; | ||
65 | border-left-color: inherit; | ||
66 | border-radius: 50%; | ||
67 | |||
68 | -webkit-animation: loading-bar-spinner 400ms linear infinite; | ||
69 | -moz-animation: loading-bar-spinner 400ms linear infinite; | ||
70 | -ms-animation: loading-bar-spinner 400ms linear infinite; | ||
71 | -o-animation: loading-bar-spinner 400ms linear infinite; | ||
72 | animation: loading-bar-spinner 400ms linear infinite; | ||
73 | } | ||
74 | |||
75 | @-webkit-keyframes loading-bar-spinner { | ||
76 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } | ||
77 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } | ||
78 | } | ||
79 | @-moz-keyframes loading-bar-spinner { | ||
80 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } | ||
81 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } | ||
82 | } | ||
83 | @-o-keyframes loading-bar-spinner { | ||
84 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } | ||
85 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } | ||
86 | } | ||
87 | @-ms-keyframes loading-bar-spinner { | ||
88 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } | ||
89 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } | ||
90 | } | ||
91 | @keyframes loading-bar-spinner { | ||
92 | 0% { transform: rotate(0deg); } | ||
93 | 100% { transform: rotate(360deg); } | ||
94 | } | ||