Style: Fix contrast issues on dark mode (#4277)

Author: VitroidFPV

src/css/dark-theme.less

@@ -2,15 +2,8 @@ body.dark-theme {
     .helpicon {
         background-image: url(../images/icons/cf_icon_info_white.svg);
         opacity: 0.3;
-    }
-    .cf {
-        .helpicon {
-            background-image: url(../images/icons/cf_icon_info_grey.svg);
-            opacity: 0.4;
-            &:hover {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 1;
-            }
+        &:hover {
+            opacity: 0.5;
         }
     }
     .gui_box_titlebar {
@@ -37,35 +30,6 @@ body.dark-theme {
             }
         }
     }
-    .tab-pid_tuning {
-        .profile {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-        .rate_profile {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-        .pid_titlebar {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-    }
 
     .invertable {
         filter: invert(1)

src/css/main.less

@@ -1295,6 +1295,12 @@ dialog {
     &:hover {
         background-color: var(--primary-400);
     }
+    &.disabled {
+        background-color: var(--surface-500);
+        border: 1px solid var(--surface-400);
+        color: var(--surface-900);
+        cursor: default;
+    }
 }
 .regular-button.pushed {
     background-color: var(--primary-transparent-3);

src/js/tabs/pid_tuning.js

@@ -981,7 +981,7 @@ pid_tuning.initialize = function (callback) {
     }
 
     function drawAxes(curveContext, width, height) {
-        curveContext.strokeStyle = '#000000';
+        curveContext.strokeStyle = '#888888';
         curveContext.lineWidth = 4;
 
         // Horizontal
@@ -1512,7 +1512,7 @@ pid_tuning.initialize = function (callback) {
                 thrlabel = `${Math.round(thrPercent <= 0 ? 0 : realthr)}%` +
                     ` = ${Math.round(thrPercent <= 0 ? 0 : expothr)}%`,
                 textWidth = context.measureText(thrlabel);
-            context.fillStyle = '#000';
+            context.fillStyle = '#888888';
             context.scale(textWidth / throttleCurve.clientWidth, 1);
             context.fillText(thrlabel, 5, 5 + fontSize);
             context.restore();
@@ -2071,7 +2071,7 @@ pid_tuning.updateRatesLabels = function() {
 
         const drawAxisLabel = function(context, axisLabel, x, y, align, color) {
 
-            context.fillStyle = color || '#000000' ;
+            context.fillStyle = color || '#888888' ;
             context.textAlign = align || 'center';
             context.fillText(axisLabel, x, y);
         };

src/tabs/auxiliary.html

@@ -68,7 +68,7 @@
             <div class="marker"></div>
         </div>
         <div class="delete">
-            <a class="deleteRange" href="#">&nbsp;</a>
+            <a class="deleteRange invertable" href="#">&nbsp;</a>
         </div>
     </div>
     <div class="link">