mobile panel, UI bugfixes, security improvements

web/css/breadcrumbs.css

@@ -93,10 +93,6 @@ label {
     position: relative;
 }
 
-#data-ant {
-    margin-right: 15px !important;
-}
-
 #data-ps, #data-rt0, #data-rt1 {
     font-family: "Roboto Mono", monospace;
 }
@@ -153,33 +149,7 @@ table .form-group {
     border-radius: 0 0 15px 15px;
 }
 
-#settings, #users-online-container, .chatbutton {
-    background: transparent;
-    border: 0;
-    color: var(--color-4);
-    font-size: 16px;
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    border-radius: 15px;
-    transition: 300ms ease background;
-    cursor: pointer;
-    margin: 2px;
-}
-
-#users-online-container {
-    margin-left: 10px;
-}
-
-.chatbutton, #settings {
-    background-color: var(--color-1);
-}
-
-#settings:hover, #users-online-container:hover, .chatbutton:hover {
-    background: var(--color-2);
-}
-
-#users-online-container {
+.users-online-container {
     top: 80px;
 }
 
@@ -208,30 +178,6 @@ table .form-group {
     padding: 5px;
 }
 
-.checkbox input[type="checkbox"] {
-    padding: 0;
-    height: initial;
-    width: initial;
-    margin-bottom: 0;
-    display: none;
-    cursor: pointer;
-}
-
-.checkbox label {
-    cursor: pointer;
-    display: block;
-    user-select: none;
-    padding: 7px 20px;
-    border-radius: 15px;
-    text-align: center;
-    border: 2px solid var(--color-4);
-    box-sizing: border-box;
-    transition: 0.35s ease background-color, 0.35s ease color;
-}
-.checkbox label:hover {
-    background-color: var(--color-2);
-}
-
 .form-group input:checked + label {
     background-color: var(--color-4);
     color: var(--color-main);
@@ -351,6 +297,12 @@ pre {
     max-width: 200px;
 }
 
+@media (min-width: 768px) { 
+    .users-online-container {
+        margin-left: 10px;
+    }
+}
+
 @media (max-width: 768px) {
     canvas, #flags-container {
         display: none;
@@ -426,14 +378,6 @@ pre {
     .filter-controls {
         order: 2;
     }
-    .button-play-mobile {
-        order: 2;
-        margin: 0 !important;
-        border-radius: 0;
-    }
-    .button-play-mobile .playbutton {
-        border-radius: 0;
-    }
     .button-eq {
         order: 1;
     }
@@ -452,6 +396,16 @@ pre {
     .modal-panel-footer {
         width: auto !important;
     }
+    #mobileTray {
+        width: 100%;
+        height: 68px;
+        position: fixed;
+        bottom: 0;
+        background-color: var(--color-1-transparent);
+        backdrop-filter: blur(5px);
+        display: flex;
+        align-items: center;
+    }
 }
 
 @media only screen and (min-width: 769px) and (max-height: 720px) {

web/css/buttons.css

@@ -130,6 +130,28 @@ input[type="text"], textarea, input[type="password"] {
       border-radius: 0 15px 15px 0;
 }
 
+.settings, .users-online-container, .chatbutton, .button-dark {
+    background: transparent;
+    border: 0;
+    color: var(--color-4);
+    font-size: 16px;
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border-radius: 15px;
+    transition: 300ms ease background;
+    cursor: pointer;
+    margin: 2px;
+}
+
+.chatbutton, .settings, .button-dark {
+    background-color: var(--color-1);
+}
+
+.settings:hover, .users-online-container:hover, .chatbutton:hover {
+    background: var(--color-2);
+}
+
 input[type="range"] {
     margin: 0;
     /* removing default appearance */
@@ -314,7 +336,7 @@ input[type="range"]::-moz-range-thumb {
 .switch input[type=checkbox] {
     height: 0;
     width: 0;
-    visibility: hidden;
+    margin: 0;
 }
 .switch input[type=checkbox]:checked + label {
     background: var(--color-4);
@@ -374,7 +396,7 @@ select:hover {
     background: var(--color-5);
 }
 
-.popup {
+.mini-popup {
     position: relative;
     cursor: pointer;
     -webkit-user-select: none;
@@ -383,7 +405,7 @@ select:hover {
     user-select: none;
   }
   
-  .popup .popup-content {
+  .mini-popup .mini-popup-content {
     visibility: hidden;
     width: 230px;
     background-color: var(--color-2-transparent);
@@ -400,15 +422,15 @@ select:hover {
     border: 3px solid var(--color-3);
   }
   
-  .popup .show {
+  .mini-popup .show {
     visibility: visible;
   }
   
-  button[disabled] .popup-content {
+  button[disabled] .mini-popup-content {
     visibility: hidden;
   }
 
-  .popup .popup-content::after {
+  .mini-popup .mini-popup-content::after {
     content: "";
     position: absolute;
     bottom: calc(100% + 3px);
@@ -423,5 +445,9 @@ select:hover {
 @media only screen and (max-width: 768px) {
     #tune-buttons input[type="text"] {
         background-color: var(--color-1-transparent);
+        height: 64px;
+    }
+    #tune-buttons button {
+        height: 64px;
     }
 }

web/css/helpers.css

@@ -76,10 +76,22 @@
     margin: 10px;
 }
 
+.m-left-5 {
+    margin-left: 5px;
+}
+
+.m-left-15 {
+    margin-left: 15px !important;
+}
+
 .m-left-20 {
     margin-left: 20px;
 }
 
+.m-right-5 {
+    margin-right: 5px; 
+}
+
 .m-right-10 {
     margin-right: 10px;
 }
@@ -132,6 +144,10 @@
     background-color: var(--color-2-transparent);
 }
 
+.text-center {
+    text-align: center;
+}
+
 .text-left {
     text-align: left;
 }
@@ -207,6 +223,10 @@
     margin-bottom: 50px;
 }
 
+.p-0 {
+    padding: 0;
+}
+
 .p-10 {
     padding: 10px;
 }

web/css/main.css

@@ -157,4 +157,8 @@ hr {
     .setup-wrapper h2 {
         display: initial;
     }
+
+    .wrapper-outer {
+        justify-content: flex-start;
+    }
 }

web/css/modal.css

@@ -194,6 +194,7 @@ body.modal-open {
 
     .popup-window {
         width: 90%;
+        height: 60%;
     }
 }