cleaner command system + phone UI changes + iMS/EQ

web/css/breadcrumbs.css

@@ -49,4 +49,69 @@ h3 {
     font-size: 14px;
     max-height: 380px;
     overflow-y: auto;
-}
+}
+
+#af-list a {
+    cursor: pointer;
+}
+
+#flags-container-phone {
+    display: none;
+}
+
+@media (max-width: 960px) {
+    canvas, #flags-container {
+        display: none;
+    }
+    #ps-container {
+        background-color: var(--color-1);
+        height: 100px !important;
+    }
+    h2 {
+        display: none;
+    }
+    #data-pi {
+        font-size: 24px;
+        margin-top: 50px;
+        color: #aaa;
+    }
+    h2.show-phone {
+        display: inline;
+        padding: 0 !important;
+    }
+    #data-ps {
+        font-size: 60px;
+    }
+    #data-frequency {
+        font-size: 72px;
+    }
+    #data-rt0, #data-rt1 {
+        font-size: 10px;
+        text-align: left;
+        width: 100%;
+    }
+    #rt-container {
+        height: 32px !important;
+    }
+    ul {
+        font-size: 16px;
+    }
+    ul li {
+        display: inline;
+        margin-right: 5px;
+    }
+    li:not(:last-child)::after {
+        content: " •";
+        color: #aaa;
+    }
+    #flags-container-desktop {
+        display: none;
+    }
+    #flags-container-phone {
+        display: block;
+    }
+    #tune-buttons {
+        height: 64px;
+    }
+}
+

web/css/buttons.css

@@ -1,4 +1,4 @@
-.play-button {
+button {
     width: 100%;
     height: 100%;
     border: 0;
@@ -6,9 +6,10 @@
     transition: 0.3s ease-in-out background-color;
     background-color: var(--color-4);
     cursor: pointer;
+    font-family: inherit;
 }
 
-.play-button:hover {
+button:hover {
     background-color: var(--color-main-bright);
 }
 

web/css/entry.css

@@ -2,6 +2,6 @@
 @import url("main.css"); /* Root stuff that affects the entire webpage (body, wrapper etc.) */
 @import url("breadcrumbs.css"); /* Stuff that applies to random elements only once/twice */
 @import url("buttons.css"); /* Buttons, inputs, select boxes, checkboxes... */
-@import url("helpers.css"); /* Stuff that is used often such as text changers etc */
 @import url("panels.css"); /* Different panels and their sizes */
-@import url("modal.css"); /* Modal window */
+@import url("modal.css"); /* Modal window */
+@import url("helpers.css"); /* Stuff that is used often such as text changers etc */

web/css/helpers.css

@@ -6,6 +6,10 @@
     background: #100d1f;
 }
 
+.bg-gray {
+    background: #999;
+}
+
 .bg-none {
     background: transparent !important;
 }
@@ -30,6 +34,22 @@
     border-radius: 5px;
 }
 
+.m-0 {
+    margin: 0;
+}
+
+.m-left-20 {
+    margin-left: 20px;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.no-bg {
+    background-color: transparent;
+}
+
 .flex-container {
     display: flex;
 }
@@ -81,6 +101,10 @@
     font-size: 11px;
 }
 
+.text-bold {
+    font-weight: bold;
+}
+
 .text-gray {
     color: #666;
 }
@@ -130,4 +154,7 @@
     .flex-phone {
         display: flex;
     }
+    .hide-phone {
+        display: none;
+    }
 }

web/css/panels.css

@@ -48,5 +48,12 @@
         margin: auto;
         width: 90%;
         margin-bottom: 20px;
+        background-color: transparent;
+    }
+    .flex-phone {
+        display: flex;
+    }
+    .panel-90 {
+        margin-top: 100px;
     }
 }