UI changes, accessibility features, ffmpeg adjustments

web/css/breadcrumbs.css

@@ -8,12 +8,30 @@ h3 {
     font-size: 22px;
 }
 
+.canvas-container {
+    width: 100%;
+    height: 200px;
+}
+
+#data-ant {
+    margin-right: 15px !important;
+}
+
 #data-ps, #data-rt0, #data-rt1 {
-    font-family: monospace;
+    font-family: "Roboto Mono", monospace;
+}
+
+#data-rt0, #data-rt1 {
+    font-size: 14px;
+}
+
+#data-ps {
+    font-weight: 500;
 }
 
 .form-group {
-    display: inline-block;
+    float: left;
+    margin-bottom: 20px;
 }
 
 #color-settings, #settings {
@@ -66,6 +84,8 @@ h3 {
     #ps-container {
         background-color: var(--color-1);
         height: 100px !important;
+        margin: auto !important;
+        width: 100%;
     }
     h2 {
         display: none;
@@ -80,7 +100,7 @@ h3 {
         padding: 0 !important;
     }
     #data-ps {
-        font-size: 54px;
+        font-size: 42px;
     }
     #data-frequency {
         font-size: 72px;
@@ -96,7 +116,7 @@ h3 {
     ul {
         font-size: 16px;
     }
-    ul li {
+    #af-list ul li {
         display: inline-table;
         margin-right: 5px;
         width: 40px;
@@ -130,3 +150,14 @@ h3 {
     }
 }
 
+@media only screen and (min-width: 960px) and (max-height: 860px) {
+    #rt-container {
+        height: 90px !important;
+    }
+    #ps-container {
+        margin-left: 15px;
+    }
+    .canvas-container {
+        height: 120px;
+    }
+}

web/css/buttons.css

@@ -14,6 +14,10 @@ button:hover {
     background-color: var(--color-main-bright);
 }
 
+.btn-disabled {
+    opacity: 0.6;
+}
+
 #tune-buttons input[type="text"] {
     width: 50%;
     height: 100%;
@@ -27,10 +31,6 @@ button:hover {
     font-family: 'Titillium Web', sans-serif;
   }
   
-  input[type="text"]:hover {
-      border: 2px solid var(--color-main-bright);
-  }
-  
   #tune-buttons button {
       box-sizing: border-box;
       background-color: var(--color-4);

web/css/dropdown.css

@@ -0,0 +1,80 @@
+.dropdown {
+    width: 200px;
+    height: 48px;
+    background: var(--color-4);
+    position: relative;
+    margin-right: 20px;
+    /*border-bottom: 4px solid var(--color-2);*/
+  }
+  @media (max-width: 400px) {
+    .dropdown {
+      width: 240px;
+    }
+  }
+  .dropdown::before {
+    content: "";
+    position: absolute;
+    right: 10px;
+    top: 18px;
+    z-index: 9999;
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--color-main);
+    border-top: transparent;
+    border-right: transparent;
+    transform: rotate(-45deg);
+    pointer-events: none;
+  }
+  .dropdown ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  .dropdown input {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    cursor: pointer;
+    border: none;
+    user-select: none;
+    background-color: var(--color-4);
+    color: var(--color-main);
+  }
+  .dropdown input:focus {
+    outline: none;
+  }
+  .dropdown input::placeholder {
+    color: var(--color-main);
+    opacity: 1;
+  }
+  .dropdown .options {
+    width: 100%;
+    cursor: pointer;
+    border: none;
+    font-size: 16px;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+    background: var(--color-main);
+    color: var(--color-4);
+    border: 1px solid var(--color-4);
+    position: relative;
+    z-index: 999;
+  }
+  .dropdown .options .option {
+    color: var(--color-4);
+    padding: 7px;
+  }
+  .dropdown .options .option:hover {
+    color: var(--color-main);
+    background: var(--color-4);
+  }
+  .dropdown.opened .options {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  .dropdown.opened::before {
+    transform: rotate(-225deg);
+    top: 22px;
+  }

web/css/entry.css

@@ -1,7 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap');
 @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("dropdown.css"); /* Custom dropdown menus */
 @import url("panels.css"); /* Different panels and their sizes */
 @import url("modal.css"); /* Modal window */
 @import url("helpers.css"); /* Stuff that is used often such as text changers etc */

web/css/helpers.css

@@ -35,7 +35,7 @@
 }
 
 .m-0 {
-    margin: 0;
+    margin: 0 !important;
 }
 
 .m-left-20 {
@@ -173,4 +173,17 @@
     .hide-desktop {
         display: none;
     }
+}
+
+/* Laptop compact view */
+@media only screen and (min-width: 960px) and (max-height: 860px) {
+    .text-big {
+        font-size: 40px;
+    }
+    .text-medium-big {
+        font-size: 34px;
+    }
+    .text-medium {
+        font-size: 30px;
+    }
 }

web/css/main.css

@@ -52,15 +52,16 @@ body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: auto;
+    width: 1180px;
     max-width: 1180px;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1180px) {
     #wrapper {
         position: static;
         transform: none;
         margin: 50px auto;
+        width: 100%;
     }
 }
 

web/css/panels.css

@@ -56,4 +56,22 @@
     .panel-90 {
         margin-top: 100px;
     }
+}
+
+/* Laptop compact view */
+@media only screen and (min-width: 960px) and (max-height: 860px) {
+    *[class^="panel-"] {
+        margin-top: 20px;
+    }
+    .panel-10, .panel-90 {
+        margin-top: 0;
+    }
+    .panel-10 {
+        margin: 0;
+        padding-bottom: 20px;
+        padding-right: 20px;
+    }
+    .panel-10.hide-phone {
+        padding: 0;
+    }
 }