Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-25 09:15:49 +03:00
Code Issues Wiki Activity

Style: Fix contrast issues (#4125)

Browse source 
* Style: Fix contrast issues

* Style: Fix Motors tab graph layout

* Fix: re-include code commented out during testing
This commit is contained in:
Vít Semrád 2024-08-07 22:29:22 +02:00 • committed by GitHub
parent d14e90dd27
commit d649a9ca40
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 58 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/quad-status/BatteryLegend.vue
View file

@ -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;
}

71
src/css/dark-theme.less
View file

@ -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)
}

46
src/css/main.less
View file

@ -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;

37
src/css/tabs/motors.less
View file

@ -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);

9
src/css/tabs/pid_tuning.less
View file

@ -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;

14
src/css/tabs/receiver.less
View file

@ -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);

41
src/css/tabs/sensors.less
View file

@ -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;
}

6
src/tabs/motors.html
View file

@ -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">