aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-07 11:34:22 +0200
committerChocobozzz <me@florianbigard.com>2020-08-07 11:34:22 +0200
commit193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad (patch)
tree26de328ee639a8ea296c8eeabcd35541189c37c7 /client/src/sass
parentbe59656c82d641118cd6d468cd11be1e057428d1 (diff)
downloadPeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.tar.gz
PeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.tar.zst
PeerTube-193b9ba7c0f7bfe7baa4e2214b0705bd2230c8ad.zip
Fix loading bar color
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/loading-bar.scss94
2 files changed, 0 insertions, 95 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index eacfad30b..9668da39d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -10,7 +10,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
10 10
11$assets-path: '../../assets/'; 11$assets-path: '../../assets/';
12@import './player/index'; 12@import './player/index';
13@import './loading-bar';
14 13
15@import './bootstrap'; 14@import './bootstrap';
16@import './primeng-custom'; 15@import './primeng-custom';
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}