Fix loading bar color

client/src/app/app.component.html

@@ -41,7 +41,7 @@
   </div>
 </div>
 
-<ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar>
+<ngx-loading-bar [includeSpinner]="false" color="var(--mainColor)"></ngx-loading-bar>
 
 <my-confirm></my-confirm>
 

client/src/sass/application.scss

@@ -10,7 +10,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 $assets-path: '../../assets/';
 @import './player/index';
-@import './loading-bar';
 
 @import './bootstrap';
 @import './primeng-custom';

client/src/sass/loading-bar.scss

@@ -1,94 +0,0 @@
-@import '_mixins';
-// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
-
-/* Make clicks pass-through */
-#loading-bar,
-#loading-bar-spinner {
-  pointer-events: none;
-  -webkit-pointer-events: none;
-  -webkit-transition: 350ms linear all;
-  -moz-transition: 350ms linear all;
-  -o-transition: 350ms linear all;
-  transition: 350ms linear all;
-  color: pvar(--mainColor);
-}
-
-#loading-bar .bar {
-  -webkit-transition: width 350ms;
-  -moz-transition: width 350ms;
-  -o-transition: width 350ms;
-  transition: width 350ms;
-
-  background: pvar(--mainColor);
-  position: fixed;
-  z-index: z(loadbar);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  border-bottom-right-radius: 1px;
-  border-top-right-radius: 1px;
-}
-
-/* Fancy blur effect */
-#loading-bar .peg {
-  position: absolute;
-  width: 70px;
-  right: 0;
-  top: 0;
-  height: 2px;
-  opacity: .45;
-  -moz-box-shadow: 1px 0 6px 1px;
-  -ms-box-shadow: 1px 0 6px 1px;
-  -webkit-box-shadow: 1px 0 6px 1px;
-  box-shadow: 1px 0 6px 1px;
-  color: inherit;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-}
-
-#loading-bar-spinner {
-  display: block;
-  position: fixed;
-  z-index: z(loadbar);
-  top: 10px;
-  left: 10px;
-}
-
-#loading-bar-spinner .spinner-icon {
-  width: 14px;
-  height: 14px;
-
-  border: solid 2px transparent;
-  border-top-color: inherit;
-  border-left-color: inherit;
-  border-radius: 50%;
-
-  -webkit-animation: loading-bar-spinner 400ms linear infinite;
-  -moz-animation:    loading-bar-spinner 400ms linear infinite;
-  -ms-animation:     loading-bar-spinner 400ms linear infinite;
-  -o-animation:      loading-bar-spinner 400ms linear infinite;
-  animation:         loading-bar-spinner 400ms linear infinite;
-}
-
-@-webkit-keyframes loading-bar-spinner {
-  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-moz-keyframes loading-bar-spinner {
-  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
-  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-o-keyframes loading-bar-spinner {
-  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
-  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-ms-keyframes loading-bar-spinner {
-  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
-  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@keyframes loading-bar-spinner {
-  0%   { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}