Set loader background to black in dark mode.

altair-graphql · Oct 13, 2019 · dc7e2a4 · dc7e2a4
1 parent c6a4b39
commit dc7e2a4
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 50 deletions.
diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -160,7 +160,7 @@ linters:
 
   SelectorDepth:
     enabled: true
-    max_depth: 2
+    max_depth: 4
 
   SelectorFormat:
     enabled: false

diff --git a/src/scss/_loading-screen.scss b/src/scss/_loading-screen.scss
@@ -1,56 +1,73 @@
-.loading-screen{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 5;
-    background: var(--white-color);
+.loading-screen {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  background: var(--white-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.styled {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    &.styled{
-        display: flex;
+  }
+
+  .loading-screen-logo-container {
+    margin-bottom: 10px;
+    max-width: 100px;
+
+    img {
+      max-width: 100%;
+      height: auto;
     }
-    .loading-screen-logo-container{
-        margin-bottom: 10px;
-        max-width: 100px;
-        img{
-            max-width: 100%;
-            height: auto;
-        }
+  }
+
+  .loading-screen-loading-indicator {
+    text-align: center;
+  }
+
+  .loading-indicator-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin: 3px;
+    background: var(--blue-color);
+    animation: 1.5s loading-indicator-blink infinite linear;
+
+    &:nth-child(1) {
+      animation-delay: .5s;
     }
-    .loading-screen-loading-indicator{
-        text-align: center;
+
+    &:nth-child(2) {
+      animation-delay: 1s;
     }
-    .loading-indicator-dot{
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        margin: 3px;
-        background: var(--blue-color);
-        animation: 1.5s loading-indicator-blink infinite linear;
-
-        &:nth-child(1){
-            animation-delay: .5s;
-        }
-        &:nth-child(2){
-            animation-delay: 1s;
-        }
-        &:nth-child(3){
-            animation-delay: 1.5s;
-        }
+
+    &:nth-child(3) {
+      animation-delay: 1.5s;
     }
+  }
 }
+
 @keyframes loading-indicator-blink{
-    0% {
-        opacity: 1;
-    }
-    50%{
-        opacity: 0.2;
-    }
-    100%{
-        opacity: 1;
-    }
-}
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .loading-screen {
+    background: var(--black-color);
+    color: var(--white-color);
+  }
+}