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) {