mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-26 09:45:28 +03:00
Style: Fix contrast issues on dark mode (#4277)
This commit is contained in:
parent
15a404071e
commit
69bed5eb6f
4 changed files with 12 additions and 42 deletions
|
@ -2,15 +2,8 @@ body.dark-theme {
|
||||||
.helpicon {
|
.helpicon {
|
||||||
background-image: url(../images/icons/cf_icon_info_white.svg);
|
background-image: url(../images/icons/cf_icon_info_white.svg);
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
&:hover {
|
||||||
.cf {
|
opacity: 0.5;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gui_box_titlebar {
|
.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 {
|
.invertable {
|
||||||
filter: invert(1)
|
filter: invert(1)
|
||||||
|
|
|
@ -1295,6 +1295,12 @@ dialog {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--primary-400);
|
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 {
|
.regular-button.pushed {
|
||||||
background-color: var(--primary-transparent-3);
|
background-color: var(--primary-transparent-3);
|
||||||
|
|
|
@ -981,7 +981,7 @@ pid_tuning.initialize = function (callback) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawAxes(curveContext, width, height) {
|
function drawAxes(curveContext, width, height) {
|
||||||
curveContext.strokeStyle = '#000000';
|
curveContext.strokeStyle = '#888888';
|
||||||
curveContext.lineWidth = 4;
|
curveContext.lineWidth = 4;
|
||||||
|
|
||||||
// Horizontal
|
// Horizontal
|
||||||
|
@ -1512,7 +1512,7 @@ pid_tuning.initialize = function (callback) {
|
||||||
thrlabel = `${Math.round(thrPercent <= 0 ? 0 : realthr)}%` +
|
thrlabel = `${Math.round(thrPercent <= 0 ? 0 : realthr)}%` +
|
||||||
` = ${Math.round(thrPercent <= 0 ? 0 : expothr)}%`,
|
` = ${Math.round(thrPercent <= 0 ? 0 : expothr)}%`,
|
||||||
textWidth = context.measureText(thrlabel);
|
textWidth = context.measureText(thrlabel);
|
||||||
context.fillStyle = '#000';
|
context.fillStyle = '#888888';
|
||||||
context.scale(textWidth / throttleCurve.clientWidth, 1);
|
context.scale(textWidth / throttleCurve.clientWidth, 1);
|
||||||
context.fillText(thrlabel, 5, 5 + fontSize);
|
context.fillText(thrlabel, 5, 5 + fontSize);
|
||||||
context.restore();
|
context.restore();
|
||||||
|
@ -2071,7 +2071,7 @@ pid_tuning.updateRatesLabels = function() {
|
||||||
|
|
||||||
const drawAxisLabel = function(context, axisLabel, x, y, align, color) {
|
const drawAxisLabel = function(context, axisLabel, x, y, align, color) {
|
||||||
|
|
||||||
context.fillStyle = color || '#000000' ;
|
context.fillStyle = color || '#888888' ;
|
||||||
context.textAlign = align || 'center';
|
context.textAlign = align || 'center';
|
||||||
context.fillText(axisLabel, x, y);
|
context.fillText(axisLabel, x, y);
|
||||||
};
|
};
|
||||||
|
|
|
@ -68,7 +68,7 @@
|
||||||
<div class="marker"></div>
|
<div class="marker"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="delete">
|
<div class="delete">
|
||||||
<a class="deleteRange" href="#"> </a>
|
<a class="deleteRange invertable" href="#"> </a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="link">
|
<div class="link">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue