Add auto dark mode loader screen

frontend/static/css/index.css

@@ -6,6 +6,24 @@ body {
   font-family: 'Roboto';
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background: rgb(0, 0, 0);
+  }
+  .loaderSpinner {
+    color: #90caf9;
+  }
+  .loaderSpinner:before{
+    background: rgb(0, 0, 0);
+  }
+  .loaderSpinner:after{
+    background: rgb(0, 0, 0);
+  }
+  .slider{
+    color: #fff;
+  }
+}
+
 #main {
   position: fixed;
   width: 100%;

frontend/static/css/loader.css

@@ -11,320 +11,320 @@
     text-align: center;
   }
 
-  .loaderSpinner,
+.loaderSpinner,
-  .loaderSpinner:before,
+.loaderSpinner:before,
-  .loaderSpinner:after {
+.loaderSpinner:after {
-    border-radius: 50%;
+  border-radius: 50%;
+}
+.loaderSpinner {
+  color: #1976d2;
+  font-size: 11px;
+  text-indent: -99999em;
+  margin: 55px auto;
+  position: relative;
+  width: 10em;
+  height: 10em;
+  box-shadow: inset 0 0 0 1em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.loaderSpinner:before,
+.loaderSpinner:after {
+  position: absolute;
+  content: '';
+}
+.loaderSpinner:before {
+  width: 5.2em;
+  height: 10.2em;
+  background: #ffffff;
+  border-radius: 9.2em 0 0 10.2em;
+  top: -0.1em;
+  left: -0.1em;
+  -webkit-transform-origin: 5.1em 5.1em;
+  transform-origin: 5.1em 5.1em;
+  -webkit-animation: load2 2s infinite ease 1.5s;
+  animation: load2 2s infinite ease 1.5s;
+}
+.loaderSpinner:after {
+  width: 5.2em;
+  height: 10.2em;
+  background: #ffffff;
+  border-radius: 0 10.2em 10.2em 0;
+  top: -0.1em;
+  left: 4.9em;
+  -webkit-transform-origin: 0.1em 5.1em;
+  transform-origin: 0.1em 5.1em;
+  -webkit-animation: load2 2s infinite ease;
+  animation: load2 2s infinite ease;
+}
+@-webkit-keyframes load2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-  .loaderSpinner {
+  100% {
-    color: #1976d2;
+    -webkit-transform: rotate(360deg);
-    font-size: 11px;
+    transform: rotate(360deg);
-    text-indent: -99999em;
-    margin: 55px auto;
-    position: relative;
-    width: 10em;
-    height: 10em;
-    box-shadow: inset 0 0 0 1em;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
   }
-  .loaderSpinner:before,
+}
-  .loaderSpinner:after {
+@keyframes load2 {
-    position: absolute;
+  0% {
-    content: '';
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-  .loaderSpinner:before {
+  100% {
-    width: 5.2em;
+    -webkit-transform: rotate(360deg);
-    height: 10.2em;
+    transform: rotate(360deg);
-    background: #ffffff;
-    border-radius: 9.2em 0 0 10.2em;
-    top: -0.1em;
-    left: -0.1em;
-    -webkit-transform-origin: 5.1em 5.1em;
-    transform-origin: 5.1em 5.1em;
-    -webkit-animation: load2 2s infinite ease 1.5s;
-    animation: load2 2s infinite ease 1.5s;
-  }
-  .loaderSpinner:after {
-    width: 5.2em;
-    height: 10.2em;
-    background: #ffffff;
-    border-radius: 0 10.2em 10.2em 0;
-    top: -0.1em;
-    left: 4.9em;
-    -webkit-transform-origin: 0.1em 5.1em;
-    transform-origin: 0.1em 5.1em;
-    -webkit-animation: load2 2s infinite ease;
-    animation: load2 2s infinite ease;
-  }
-  @-webkit-keyframes load2 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes load2 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
   }
+}
 
 .content-slider {
-    width: 100%;
+  width: 100%;
-    height: 180px;
+  height: 180px;
+}
+
+.slider {
+  height: 140px;
+  width: 350px;
+  margin: 40px auto 0;
+  overflow: visible;
+  position: relative;
+}
+
+.mask {
+  overflow: hidden;
+  height: 140px;
+}
+
+.slider ul {
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.slider li {
+  text-align: center;
+  width: 350px;
+  height: 140px;
+  position: absolute;
+  top: -105px;
+  list-style: none;
+}
+
+.slider .quote {
+  text-align: center;
+  font-size: 20px;
+}
+
+.slider li.anim1 {
+  animation: cycle 12s linear infinite;
+}
+
+.slider li.anim2 {
+  animation: cycle2 12s linear infinite;
+}
+
+.slider li.anim3 {
+  animation: cycle3 12s linear infinite;
+}
+
+.slider li.anim4 {
+  animation: cycle4 12s linear infinite;
+}
+
+.slider li.anim5 {
+  animation: cycle5 12s linear infinite;
+}
+
+.slider:hover li {
+  animation-play-state: paused;
+}
+
+@keyframes cycle {
+  0% {
+    top: 0px;
   }
-  
+  4% {
-  .slider {
+    top: 0px;
-    height: 140px;
-    width: 350px;
-    margin: 40px auto 0;
-    overflow: visible;
-    position: relative;
   }
-  
+  16% {
-  .mask {
+    top: 0px;
-    overflow: hidden;
+    opacity: 1;
-    height: 140px;
+    z-index: 0;
   }
-  
+  20% {
-  .slider ul {
+    top: 105px;
-    margin: 0;
+    opacity: 0;
-    padding: 0;
+    z-index: 0;
-    position: relative;
   }
-  
+  21% {
-  .slider li {
-    text-align: center;
-    width: 350px;
-    height: 140px;
-    position: absolute;
     top: -105px;
-    list-style: none;
+    opacity: 0;
+    z-index: -1;
   }
-  
+  50% {
-  .slider .quote {
+    top: -105px;
-    text-align: center;
+    opacity: 0;
-    font-size: 20px;
+    z-index: -1;
   }
-  
+  92% {
-  .slider li.anim1 {
+    top: -105px;
-    animation: cycle 12s linear infinite;
+    opacity: 0;
+    z-index: 0;
   }
-  
+  96% {
-  .slider li.anim2 {
+    top: -105px;
-    animation: cycle2 12s linear infinite;
+    opacity: 0;
   }
-  
+  100% {
-  .slider li.anim3 {
+    top: 0px;
-    animation: cycle3 12s linear infinite;
+    opacity: 1;
   }
-  
+}
-  .slider li.anim4 {
+
-    animation: cycle4 12s linear infinite;
+@keyframes cycle2 {
+  0% {
+    top: -105px;
+    opacity: 0;
   }
-  
+  16% {
-  .slider li.anim5 {
+    top: -105px;
-    animation: cycle5 12s linear infinite;
+    opacity: 0;
   }
-  
+  20% {
-  .slider:hover li {
+    top: 0px;
-    animation-play-state: paused;
+    opacity: 1;
   }
-  
+  24% {
-  @keyframes cycle {
+    top: 0px;
-    0% {
+    opacity: 1;
-      top: 0px;
-    }
-    4% {
-      top: 0px;
-    }
-    16% {
-      top: 0px;
-      opacity: 1;
-      z-index: 0;
-    }
-    20% {
-      top: 105px;
-      opacity: 0;
-      z-index: 0;
-    }
-    21% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
-    50% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
-    92% {
-      top: -105px;
-      opacity: 0;
-      z-index: 0;
-    }
-    96% {
-      top: -105px;
-      opacity: 0;
-    }
-    100% {
-      top: 0px;
-      opacity: 1;
-    }
   }
-  
+  36% {
-  @keyframes cycle2 {
+    top: 0px;
-    0% {
+    opacity: 1;
-      top: -105px;
+    z-index: 0;
-      opacity: 0;
-    }
-    16% {
-      top: -105px;
-      opacity: 0;
-    }
-    20% {
-      top: 0px;
-      opacity: 1;
-    }
-    24% {
-      top: 0px;
-      opacity: 1;
-    }
-    36% {
-      top: 0px;
-      opacity: 1;
-      z-index: 0;
-    }
-    40% {
-      top: 105px;
-      opacity: 0;
-      z-index: 0;
-    }
-    41% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
-    100% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
   }
-  
+  40% {
-  @keyframes cycle3 {
+    top: 105px;
-    0% {
+    opacity: 0;
-      top: -105px;
+    z-index: 0;
-      opacity: 0;
-    }
-    36% {
-      top: -105px;
-      opacity: 0;
-    }
-    40% {
-      top: 0px;
-      opacity: 1;
-    }
-    44% {
-      top: 0px;
-      opacity: 1;
-    }
-    56% {
-      top: 0px;
-      opacity: 1;
-      z-index: 0;
-    }
-    60% {
-      top: 105px;
-      opacity: 0;
-      z-index: 0;
-    }
-    61% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
-    100% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
   }
-  
+  41% {
-  @keyframes cycle4 {
+    top: -105px;
-    0% {
+    opacity: 0;
-      top: -105px;
+    z-index: -1;
-      opacity: 0;
-    }
-    56% {
-      top: -105px;
-      opacity: 0;
-    }
-    60% {
-      top: 0px;
-      opacity: 1;
-    }
-    64% {
-      top: 0px;
-      opacity: 1;
-    }
-    76% {
-      top: 0px;
-      opacity: 1;
-      z-index: 0;
-    }
-    80% {
-      top: 105px;
-      opacity: 0;
-      z-index: 0;
-    }
-    81% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
-    100% {
-      top: -105px;
-      opacity: 0;
-      z-index: -1;
-    }
   }
-  
+  100% {
-  @keyframes cycle5 {
+    top: -105px;
-    0% {
+    opacity: 0;
-      top: -105px;
+    z-index: -1;
-      opacity: 0;
+  }
-    }
+}
-    76% {
+
-      top: -105px;
+@keyframes cycle3 {
-      opacity: 0;
+  0% {
-    }
+    top: -105px;
-    80% {
+    opacity: 0;
-      top: 0px;
+  }
-      opacity: 1;
+  36% {
-    }
+    top: -105px;
-    84% {
+    opacity: 0;
-      top: 0px;
+  }
-      opacity: 1;
+  40% {
-    }
+    top: 0px;
-    96% {
+    opacity: 1;
-      top: 0px;
+  }
-      opacity: 1;
+  44% {
-      z-index: 0;
+    top: 0px;
-    }
+    opacity: 1;
-    100% {
+  }
-      top: 105px;
+  56% {
-      opacity: 0;
+    top: 0px;
-      z-index: 0;
+    opacity: 1;
-    }
+    z-index: 0;
-  }
+  }
+  60% {
+    top: 105px;
+    opacity: 0;
+    z-index: 0;
+  }
+  61% {
+    top: -105px;
+    opacity: 0;
+    z-index: -1;
+  }
+  100% {
+    top: -105px;
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+@keyframes cycle4 {
+  0% {
+    top: -105px;
+    opacity: 0;
+  }
+  56% {
+    top: -105px;
+    opacity: 0;
+  }
+  60% {
+    top: 0px;
+    opacity: 1;
+  }
+  64% {
+    top: 0px;
+    opacity: 1;
+  }
+  76% {
+    top: 0px;
+    opacity: 1;
+    z-index: 0;
+  }
+  80% {
+    top: 105px;
+    opacity: 0;
+    z-index: 0;
+  }
+  81% {
+    top: -105px;
+    opacity: 0;
+    z-index: -1;
+  }
+  100% {
+    top: -105px;
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+@keyframes cycle5 {
+  0% {
+    top: -105px;
+    opacity: 0;
+  }
+  76% {
+    top: -105px;
+    opacity: 0;
+  }
+  80% {
+    top: 0px;
+    opacity: 1;
+  }
+  84% {
+    top: 0px;
+    opacity: 1;
+  }
+  96% {
+    top: 0px;
+    opacity: 1;
+    z-index: 0;
+  }
+  100% {
+    top: 105px;
+    opacity: 0;
+    z-index: 0;
+  }
+}