Style: Fix various small UI inconsistencies (#4616)

* Style Fix: Remove unnecessary padding from mobile tabs

* Style Fix: Even padding on tabs

* Style Fix: Unify mid content box color with the rest of the UI

* Style Fix: Adjust PID/Rateprofile selection

* Style Fix: Large overhaul of PID Tuning tab

* Style Fix: Prevent width shifting when ARM prevention flags change

* Style Fix: Unify presets dropdown with pid/rateprofile dropdown

* Style Fix: Adjust motor settings layout and improve spacing

* Style Fix: Use custom scrollbar not just for tabs

* Style Fix: Correct parent element hiding for auto disarm delay input

* Style Fix: Improve layout and spacing for help icons in configuration inputs

* Style Fix: Update small button styles

* Style Fix: Replace 'select' with 'number' for GPS configuration

* Style Fix: Re-adjust spacing for motor/esc settings

* Style Fix: Address SonarCloud

* Fix: Re-name JS selectors to match updated classes

* Fix: Forgot dots

Author: VitroidFPV

src/css/main.less

@@ -23,6 +23,14 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
+
+    ::-webkit-scrollbar {
+        width: 0.3rem;
+        height: 2em;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--surface-600);
+    }
 }
 &::backdrop {
     background-image: none;
@@ -197,9 +205,16 @@ input[type="number"] {
         padding-bottom: 0;
         margin-bottom: 0;
     }
-    .helpicon,
     label {
         margin: 0 !important;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .helpicon {
+        margin-right: 7px !important;
+        margin-left: auto !important;
+        float: none;
     }
 }
 .clear-both {
@@ -664,16 +679,7 @@ input[type="number"] {
     width: 17rem;
     overflow: auto;
     padding: 1rem;
-    padding-right: 0.5rem;
     background-color: var(--surface-100);
-
-    &::-webkit-scrollbar {
-        width: 0.3rem;
-        height: 2em;
-    }
-    &::-webkit-scrollbar-thumb {
-        background: var(--surface-600);
-    }
 }
 
 #content {
@@ -963,6 +969,7 @@ dialog {
     background-color: var(--primary-transparent-2);
     border: 1px solid var(--primary-500);
     margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
     border-radius: 0.5rem;
     padding: 0.5rem;
 }
@@ -971,6 +978,7 @@ dialog {
     border: 1px solid var(--error-600);
     color: #fff;
     margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
     border-radius: 0.5rem;
     padding: 0.5rem;
 }
@@ -1274,6 +1282,7 @@ dialog {
     .select {
         display: flex;
         gap: 1rem;
+        align-items: center;
     }
 }
 .fixed_band {
@@ -1999,7 +2008,6 @@ each(range(12), {
         font-size: 13px;
         padding-top: 0.2rem;
         padding-bottom: 0.25rem;
-        padding-left: 2.5rem;
     }
     #side_menu_swipe {
         display: block;

src/css/tabs/configuration.less

@@ -83,14 +83,15 @@
         margin-bottom: 0.5rem;
         display: flex;
         gap: 0.25rem;
-
         .btn {
-            padding: 0.15rem 0.5rem;
+            text-align: center;
+            background-color: var(--primary-500);
+            border-radius: 0.5rem;
+            border: 1px solid var(--primary-600);
+            color: #000;
+            font-weight: 600;
             font-size: 10px;
-            border: 1px solid var(--surface-400);
-            background: var(--primary-300);
             cursor: pointer;
-            border-radius: 999px;
             white-space: nowrap;
             height: 1.4rem;
             display: flex;
@@ -100,12 +101,15 @@
                 background-color 200ms;
 
             &:hover {
-                background: var(--primary-500);
-                border-color: var(--surface-500);
+                background-color: var(--primary-400);
+                color: #000;
+                transition: all ease 0.2s;
+                text-decoration: none;
             }
-
             &:active {
-                background: var(--surface-300);
+                background-color: var(--primary-400);
+                transition: all ease 0s;
+                box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
             }
         }
     }

src/css/tabs/landing.less

@@ -17,7 +17,7 @@
         margin-bottom: 15px;
     }
     .content_mid {
-        background-color: var(--surface-300);
+        background-color: var(--surface-100);
         overflow: hidden;
         padding: 0 15px;
         margin-top: auto;

src/css/tabs/motors.less

@@ -4,6 +4,11 @@
         flex-direction: column;
         gap: 1rem;
     }
+    .motorstop {
+        .spacer_box {
+            gap: 0;
+        }
+    }
     .configuration {
         display: flex;
         flex-direction: column;
@@ -44,6 +49,18 @@
             line-height: 18px;
         }
     }
+    table.featuresMultiple {
+        border-collapse: collapse;
+        margin-bottom: 0.5rem;
+        tbody {
+            border-bottom: 1px solid var(--surface-500);
+            tr {
+                td {
+                    padding: 0 0 0.5rem 0;
+                }
+            }
+        }
+    }
     .number {
         input {
             width: 55px;
@@ -70,11 +87,6 @@
         span {
             margin-left: 0;
         }
-        margin-bottom: 5px;
-        clear: left;
-        padding-bottom: 5px;
-        border-bottom: 1px solid var(--surface-500);
-        width: 100%;
         &:last-child {
             border-bottom: none;
             padding-bottom: 0;
@@ -127,9 +139,8 @@
         }
     }
     .selectProtocol {
-        margin-bottom: 5px;
-        clear: left;
-        padding-bottom: 5px;
+        padding: 0.5rem 0;
+        margin-bottom: 0.5rem;
         border-bottom: 1px solid var(--surface-500);
         width: 100%;
     }
@@ -147,16 +158,6 @@
     .modelAndGraph {
         width: 100%;
     }
-    .btn {
-        .disabled {
-            cursor: default;
-            color: #fff;
-            background-color: #afafaf;
-            border: none;
-            pointer-events: none;
-            opacity: 0.5;
-        }
-    }
     #dialogMotorOutputReorder-closebtn {
         margin-right: 0px;
         margin-bottom: 0px;