1
0
Fork 0
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:
Vít Semrád 2024-12-18 17:07:06 +01:00 committed by GitHub
parent 15a404071e
commit 69bed5eb6f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 12 additions and 42 deletions

View file

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

View file

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

View file

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

View file

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