Style: Fix contrast issues (#4125)

* Style: Fix contrast issues * Style: Fix Motors tab graph layout * Fix: re-include code commented out during testing
betaflight · Aug 7, 2024 · d649a9c · d649a9c
1 parent d14e90d
commit d649a9c
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 168 deletions.
diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue
@@ -39,7 +39,7 @@ export default {
   right: 0;
   width: 40px;
   text-align: left;
-  color: silver;
+  color: var(--surface-800);
   margin-left: -8px;
   padding-right: 4px;
 }

diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less
@@ -37,30 +37,6 @@ body.dark-theme {
             }
         }
     }
-    .tab-motors {
-        .plot_control {
-            .x {
-                background-color: #00A8F0;
-            }
-            .y {
-                background-color: #C0D800;
-            }
-            .z {
-                background-color: #CB4B4B;
-            }
-        }
-        .line {
-            &:nth-child(1) {
-                stroke: #00A8F0;
-            }
-            &:nth-child(2) {
-                stroke: #C0D800;
-            }
-            &:nth-child(3) {
-                stroke: #CB4B4B;
-            }
-        }
-    }
     .tab-pid_tuning {
         .profile {
             .helpicon {
@@ -90,52 +66,7 @@ body.dark-theme {
             }
         }
     }
-    .pid_roll {
-        background-color: #A00000;
-    }
-    .pid_pitch {
-        background-color: #00A000;
-    }
-    .pid_yaw {
-        background-color: #0000A0;
-    }
-    .tab-sensors {
-        .plot_control {
-            .x {
-                background-color: #00A8F0;
-            }
-            .y {
-                background-color: #C0D800;
-            }
-            .z {
-                background-color: #CB4B4B;
-            }
-        }
-        .line {
-            &:nth-child(1) {
-                stroke: #00A8F0;
-            }
-            &:nth-child(2) {
-                stroke: #C0D800;
-            }
-            &:nth-child(3) {
-                stroke: #CB4B4B;
-            }
-        }
-        .legend {
-            .item {
-                &:nth-child(1) {
-                    fill: #00A8F0;
-                }
-                &:nth-child(2) {
-                    fill: #C0D800;
-                }
-                &:nth-child(3) {
-                    fill: #CB4B4B;
-                }
-            }
-        }
-    }
+
     .invertable {
         filter: invert(1)
     }

diff --git a/src/css/main.less b/src/css/main.less
@@ -1658,6 +1658,52 @@ each(range(12), {
     gap: 1rem;
     grid-template-columns: auto max-content;
 }
+.plot_control {
+    .x {
+        background-color: #1fb1f0;
+    }
+    .y {
+        background-color: #97d800;
+    }
+    .z {
+        background-color: #e24761;
+    }
+    .x, .y, .z {
+        color: black;
+    }
+}
+.line {
+    &:nth-child(1) {
+        stroke: #1fb1f0;
+    }
+    &:nth-child(2) {
+        stroke: #97d800;
+    }
+    &:nth-child(3) {
+        stroke: #e24761;
+    }
+}
+.legend {
+    .item {
+        &:nth-child(1) {
+            fill: #1fb1f0;
+        }
+        &:nth-child(2) {
+            fill: #97d800;
+        }
+        &:nth-child(3) {
+            fill: #e24761;
+        }
+    }
+}
+.axis {
+    path, line {
+        fill: none;
+        stroke: var(--text);
+        stroke-width: 1px;
+        shape-rendering: crispEdges;
+    }
+}
 @media not all and (max-width: 575px) {
     .visible-on-phone-only {
         display: none !important;

diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less
@@ -226,7 +226,6 @@
 		border-bottom-right-radius: 3px;
 		.table {
 			display: table;
-			width: 100%;
 			table-layout: fixed;
 			border-collapse: separate;
 			border-spacing: 5px;
@@ -270,18 +269,9 @@
 		}
 		.value {
 			padding: 3px;
-			color: #fff;
+			color: black;
 			border-radius: 3px;
 		}
-		.x {
-			background-color: #0000F0;
-		}
-		.y {
-			background-color: #026303;
-		}
-		.z {
-			background-color: #AB0202;
-		}
 		.rms {
 			background-color: #00D800;
 		}
@@ -319,36 +309,11 @@
 			fill: none;
 		}
 	}
-	.axis {
-		path {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-		line {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-	}
 	text {
 		stroke: none;
 		fill: var(--text);
 		font-size: 10px;
 	}
-	.line {
-		&:nth-child(1) {
-			stroke: #0000F0;
-		}
-		&:nth-child(2) {
-			stroke: #026303;
-		}
-		&:nth-child(3) {
-			stroke: #AB0202;
-		}
-	}
 	.motorblock {
 		margin-bottom: 0;
 		background-color: var(--surface-200);

diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less
@@ -844,13 +844,16 @@
 	}
 }
 .pid_roll {
-	background-color: #FF8080;
+    background-color: #e24761;
 }
 .pid_pitch {
-	background-color: #80FF80;
+    background-color: #97d800;
 }
 .pid_yaw {
-	background-color: #8080FF;
+    background-color: #1fb1f0;
+}
+.pid_roll, .pid_pitch, .pid_yaw {
+    color: black;
 }
 .show {
 	width: 130px;

diff --git a/src/css/tabs/receiver.less b/src/css/tabs/receiver.less
@@ -317,20 +317,6 @@
 		stroke-width: 2px;
 		fill: none;
 	}
-	.axis {
-		line {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-		path {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-	}
 	text {
 		stroke: none;
 		fill: var(--text);

diff --git a/src/css/tabs/sensors.less b/src/css/tabs/sensors.less
@@ -47,15 +47,6 @@
             padding: 0.25rem;
             text-align: center;
         }
-		.x {
-			background-color: #0000F0;
-		}
-		.y {
-			background-color: #026303;
-		}
-		.z {
-			background-color: #AB0202;
-		}
 	}
 	svg {
 		width: 100%;
@@ -76,50 +67,18 @@
 			fill: none;
 		}
 	}
-	.axis {
-		path {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-		line {
-			fill: none;
-			stroke: #ccc;
-			stroke-width: 1px;
-			shape-rendering: crispEdges;
-		}
-	}
 	text {
 		stroke: none;
 		fill: var(--text);
 		font-size: 10px;
 	}
 	.line {
-		&:nth-child(1) {
-			stroke: #0000F0;
-		}
-		&:nth-child(2) {
-			stroke: #026303;
-		}
-		&:nth-child(3) {
-			stroke: #AB0202;
-		}
 		&:nth-child(4) {
 			stroke: #4DA74D;
 		}
 	}
 	.legend {
 		.item {
-			&:nth-child(1) {
-				fill: #0000F0;
-			}
-			&:nth-child(2) {
-				fill: #026303;
-			}
-			&:nth-child(3) {
-				fill: #AB0202;
-			}
 			&:nth-child(4) {
 				fill: #4DA74D;
 			}

diff --git a/src/tabs/motors.html b/src/tabs/motors.html
@@ -202,15 +202,15 @@
 
                     <!-- SENSOR GRAPH SECTION -->
                     <div class="gui_box grey">
-                        <div class="wrapper modelAndGraph grid-box col4">
-                            <svg id="graph" class="col-span-3">
+                        <div class="graph-grid">
+                            <svg id="graph">
                                 <g class="grid x" transform="translate(40, 120)"></g>
                                 <g class="grid y" transform="translate(40, 10)"></g>
                                 <g class="data" transform="translate(41, 10)"></g>
                                 <g class="axis x" transform="translate(40, 120)"></g>
                                 <g class="axis y" transform="translate(40, 10)"></g>
                             </svg>
-                            <div class="plot_control col-span-1">
+                            <div class="plot_control">
                                 <div class="table">
                                     <div class="sensor row">
                                         <div class="left-cell motor-button">