settings

3 files changed, 92 insertions, 14 deletions

diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 7c3f9bc..3f0230c 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -3,6 +3,7 @@
   height: 100vh;
   background: var(--color-bg);
   background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+  position: relative;
 }
 
 .icon {
@@ -24,7 +25,7 @@
   }
 
   &:focus p {
-    background-color: var(--color-glass);
+    background-color: var(--color-selected);
   }
 }
 
@@ -41,12 +42,15 @@
 
   input[type=email],
   input[type=password]  {
+    color: var(--color-text-alt);
+    background: var(--color-window-content);
     padding: .5em;
     margin: .5em 0;
     border: 1px dashed var(--color-decor);
     border-radius: .5px;
   }
-  .error {
+
+  p {
     text-align: center;
     color: var(--color-error);
     margin: 1rem 0 0;
@@ -156,3 +160,46 @@
     color: var(--color-error);
   }
 }
+
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.loader,
+.connection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex-direction: column;
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  svg {
+    font-size: 600%;
+    color: #ccc;
+  }
+
+  p {
+    padding-top: 1em;
+    color: #ccc;
+    font-weight: 600;
+  }
+}
+
+.loader {
+  svg {
+    animation: rotating 1s linear infinite;
+  }
+}
diff --git a/styles/_themes.scss b/styles/_themes.scss
index fbf63cc..9319fa5 100644
--- a/styles/_themes.scss
+++ b/styles/_themes.scss
@@ -1,4 +1,4 @@
-.light {
+.green {
   --color-bg: #50a3a2;
   --color-bg-alt: #53e3a6;
   --color-text: #333;
@@ -13,6 +13,7 @@
   --color-window-border-top: rgba(255,255,255,.7);
   --color-window-border-bottom: #ccc;
   --color-window-content: #fff;
+  --color-window-popup: #fff;
   --color-window-buttons: #666;
   --color-window-buttons-alt: #222;
   --color-window-menu: #eee;
@@ -20,14 +21,42 @@
   --color-button: #9cdbb5;
   --color-button-alt: #a4eac0;
   --color-button-border: #8ecca6;
-  --color-popup-bg: #fff;
   --color-popup-error-bg: #ffe1e1;
   --color-popup-error-button: #ffbebe;
   --color-popup-error-button-alt: #ffa1a1;
   --color-popup-error-border: #ffb6b6;
 }
 
-.dark {
+.blue {
+  --color-bg: #71b0d7;
+  --color-bg-alt: #a4e4fd;
+  --color-text: #333;
+  --color-text-alt: #111;
+  --color-decor: #ccc;
+  --color-glass: rgba(151, 192, 230, 0.9);
+  --color-glass-alt: rgba(255, 255, 255, 0.5);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(0,0,0,.1);
+  --color-window-border-top: rgba(255,255,255,.7);
+  --color-window-border-bottom: #ccc;
+  --color-window-content: #fff;
+  --color-window-popup: #fff;
+  --color-window-buttons: #666;
+  --color-window-buttons-alt: #222;
+  --color-window-menu: #eee;
+  --color-window-menu-alt: #ddd;
+  --color-button: #81d5ff;
+  --color-button-alt: #ace0ff;
+  --color-button-border: #67c1f9;
+  --color-popup-error-bg: #ffe1e1;
+  --color-popup-error-button: #ffbebe;
+  --color-popup-error-button-alt: #ffa1a1;
+  --color-popup-error-border: #ffb6b6;
+}
+
+.black {
   --color-bg: #000;
   --color-bg-alt: #222;
   --color-text: #eee;
@@ -38,10 +67,11 @@
   --color-error: #a00;
   --color-success: #0a0;
   --color-link: #006dd0;
-  --color-selected: rgba(0,0,0, .5);
+  --color-selected: rgba(255,255,255,.2);
   --color-window-border-top: rgba(255,255,255,.3);
   --color-window-border-bottom: #444;
   --color-window-content: #222;
+  --color-window-popup: #333;
   --color-window-buttons: #ccc;
   --color-window-buttons-alt: #fff;
   --color-window-menu: #282828;
@@ -49,7 +79,6 @@
   --color-button: #555;
   --color-button-alt: #444;
   --color-button-border: #666;
-  --color-popup-bg: #666;
   --color-popup-error-bg: #6f0b0b;
   --color-popup-error-button: #934e4e;
   --color-popup-error-button-alt: #a21010;
diff --git a/styles/_window.scss b/styles/_window.scss
index 5ce6e71..a2d0438 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -1,10 +1,9 @@
 .window {
   position: absolute;
-  border-bottom-left-radius: .5em;
-  border-bottom-right-radius: .5em;
   transition-property: opacity, visibility, transform, width, height, top, left;
   transition-duration: .3s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: .5em;
   color: var(--color-text);
 
   &.moving {
@@ -13,14 +12,17 @@
 
   &--popup {
     padding: 1em;
-    background: var(--color-popup-bg);
+    background: var(--color-window-popup);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 21rem;
     margin: 0 auto;
-    border-top-left-radius: .5em;
-    border-top-right-radius: .5em;
+
+    &:not(.window--popup-with-title) {
+      border-top-left-radius: .5em;
+      border-top-right-radius: .5em;
+    }
   }
 
   &:not(.window--popup) {
@@ -41,7 +43,6 @@
     }
   }
 
-
   &__title {
     position: absolute;
     background-color: var(--color-glass);
@@ -72,7 +73,6 @@
     top: .5em;
     right: .5em;
     // cursor: pointer;
-    z-index: 1;
 
     & > span {
       padding: .5em;
@@ -97,6 +97,8 @@
     bottom: 0;
     left: 0;
     padding: 1em;
+    border-bottom-left-radius: .5em;
+    border-bottom-right-radius: .5em;
   }
 
   &--with-submenu {