Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-26 01:35:28 +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; right: 0;
width: 40px; width: 40px;
text-align: left; text-align: left;
color: silver; color: var(--surface-800);
margin-left: -8px; margin-left: -8px;
padding-right: 4px; 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 { .tab-pid_tuning {
.profile { .profile {
.helpicon { .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 { .invertable {
filter: invert(1) filter: invert(1)
} }

46
src/css/main.less
View file

@ -1658,6 +1658,52 @@ each(range(12), {
gap: 1rem; gap: 1rem;
grid-template-columns: auto max-content; 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) { @media not all and (max-width: 575px) {
.visible-on-phone-only { .visible-on-phone-only {
display: none !important; display: none !important;

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

@ -226,7 +226,6 @@
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
.table { .table {
display: table; display: table;
width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: separate; border-collapse: separate;
border-spacing: 5px; border-spacing: 5px;
@ -270,18 +269,9 @@
} }
.value { .value {
padding: 3px; padding: 3px;
color: #fff; color: black;
border-radius: 3px; border-radius: 3px;
} }
.x {
background-color: #0000F0;
}
.y {
background-color: #026303;
}
.z {
background-color: #AB0202;
}
.rms { .rms {
background-color: #00D800; background-color: #00D800;
} }
@ -319,36 +309,11 @@
fill: none; 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 { text {
stroke: none; stroke: none;
fill: var(--text); fill: var(--text);
font-size: 10px; font-size: 10px;
} }
.line {
&:nth-child(1) {
stroke: #0000F0;
}
&:nth-child(2) {
stroke: #026303;
}
&:nth-child(3) {
stroke: #AB0202;
}
}
.motorblock { .motorblock {
margin-bottom: 0; margin-bottom: 0;
background-color: var(--surface-200); background-color: var(--surface-200);

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

@ -844,13 +844,16 @@
} }
} }
.pid_roll { .pid_roll {
background-color: #FF8080; background-color: #e24761;
} }
.pid_pitch { .pid_pitch {
background-color: #80FF80; background-color: #97d800;
} }
.pid_yaw { .pid_yaw {
background-color: #8080FF; background-color: #1fb1f0;
}
.pid_roll, .pid_pitch, .pid_yaw {
color: black;
} }
.show { .show {
width: 130px; width: 130px;

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

@ -317,20 +317,6 @@
stroke-width: 2px; stroke-width: 2px;
fill: none; 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 { text {
stroke: none; stroke: none;
fill: var(--text); fill: var(--text);

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

@ -47,15 +47,6 @@
padding: 0.25rem; padding: 0.25rem;
text-align: center; text-align: center;
} }
.x {
background-color: #0000F0;
}
.y {
background-color: #026303;
}
.z {
background-color: #AB0202;
}
} }
svg { svg {
width: 100%; width: 100%;
@ -76,50 +67,18 @@
fill: none; 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 { text {
stroke: none; stroke: none;
fill: var(--text); fill: var(--text);
font-size: 10px; font-size: 10px;
} }
.line { .line {
&:nth-child(1) {
stroke: #0000F0;
}
&:nth-child(2) {
stroke: #026303;
}
&:nth-child(3) {
stroke: #AB0202;
}
&:nth-child(4) { &:nth-child(4) {
stroke: #4DA74D; stroke: #4DA74D;
} }
} }
.legend { .legend {
.item { .item {
&:nth-child(1) {
fill: #0000F0;
}
&:nth-child(2) {
fill: #026303;
}
&:nth-child(3) {
fill: #AB0202;
}
&:nth-child(4) { &:nth-child(4) {
fill: #4DA74D; fill: #4DA74D;
} }

6
src/tabs/motors.html
View file

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