New player dialog and bugfixes

view-webapp/src/main/sass/main.scss

@@ -93,7 +93,7 @@
     background-color: black;
     opacity: 0;
     transition: opacity 0.5s;
-    z-index: 1000;
+    z-index: 50;
     pointer-events: none;
   }
 
@@ -268,17 +268,20 @@
     color: red;
   }
 
+  body.initial {
+    .popup-body {
+      transition: initial;
+    }
+  }
   .popup {
-    /* display: none; */
     position: fixed;
-    top: 50%;
+    top: 10vh;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0px);
     max-width: max(90vw, 800px);
-    max-height: 90vh;
+    max-height: 80vh;
     margin: auto;
     z-index: 100;
-    border-radius: 3px;
     pointer-events: none;
     div.close {
       position: absolute;
@@ -293,23 +296,25 @@
       }
     }
     .popup-body {
-      max-height: 70vh;
-      max-width: 100vw;
+      max-height: 80vh;
+      max-width: 80vw;
       transform: rotate3d(1, 0, 0, 90deg);
+      transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
+      background-color: white;
+      padding: 1em;
+      border-radius: 5px;
+      overflow-x: hidden;
+      overflow-y: auto;
       .popup-content {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         justify-content: start;
-        padding: 2em;
         text-align: justify;
         max-height: inherit;
-        overflow: auto;
       }
       .popup-footer {
         position: relative;
-        color: rgba(255, 255, 255, 0.6);
-        padding: 2em;
         text-align: justify;
         display: flex;
         flex-flow: row wrap;
@@ -319,6 +324,7 @@
       }
     }
     &.shown {
+      pointer-events: initial;
       transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
       display: block;
       .popup-body {
@@ -326,4 +332,33 @@
       }
     }
   }
+
+  .checkbox {
+    width: 50px;
+    height: 26px;
+    border-radius: 18px;
+    background-color: #F7D6A3;
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    padding-right: 5px;
+    cursor: pointer;
+    .circle {
+      background-color: #6B5E8A;
+      transform: translateX(0px);
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      transition: 300ms;
+    }
+    input {
+      display: none;
+    }
+    &.active {
+      background-color: rgb(218, 114, 80);
+      .circle {
+        transform: translateX(20px);
+      }
+    }
+  }
 }