dandri/meshcore-bot
1
0 Fork 0
mirror of https://github.com/agessaman/meshcore-bot.git synced 2026-10-30 09:32:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web_viewer): tag chips and Multibyte's filter buttons pass contrast

Browse Source 
Tag chips draw their readout color on a 14% tint of itself, and on that tint several fell short of 4.5:1: orange 4.2:1 on the dashboard in light, blue 4.47:1 on dark cards and 3.76:1 across Greeter's dark table (207 chips). The readout colors move a step darker in light and lighter in dark so each holds 4.5:1 on its own tint over paper, paper-sunk, night-raised and night-sunk; violet in light already did.

Multibyte's "MB Relay" and "Direct MB" filters used Bootstrap's outline info and success, whose text is the fill tone (1.95:1 and 3.03:1). They now resolve through --text-info and --text-success like the other outline buttons.

axe-core finds no contrast failures on any page in either theme.
This commit is contained in:
agessaman committed 2026-10-24 13:28:34 -07:00
1 parent 319a69b401
commit 3b491e1537
1 file changed
+24 -8
Download Patch File Download Diff File Expand all files Collapse all files
modules/web_viewer/templates/base.html
+24 -8
View File
@@ -101,19 +101,21 @@
/* Readout colors for stat tiles: each tile reads in its own hue so a
row of counts can be told apart at a glance. Text-safe on both
themes; a tile showing a problem uses --text-danger instead. */
themes; a tile showing a problem uses --text-danger instead.
Tag chips set these on a 14% tint of themselves, so each holds 4.5:1
on its own tint over paper, paper-sunk, night-raised and night-sunk. */
:root {
--readout-blue: #0a58ca;
--readout-teal: #0f7a5f;
--readout-blue: #0a53be;
--readout-teal: #0a6650;
--readout-violet: #6d28d9;
--readout-orange: #b4501a;
--readout-orange: #9a4316;
}
[data-theme="dark"] {
--readout-blue: #6ea8fe;
--readout-teal: #4fd1ae;
--readout-violet: #c4b5fd;
--readout-orange: #f4a26b;
--readout-blue: #9ec5fe;
--readout-teal: #6fdcbf;
--readout-violet: #d0c4fe;
--readout-orange: #f6b384;
}
.readout-blue { color: var(--readout-blue); }
@@ -409,6 +411,20 @@
[data-theme="dark"] .btn-outline-primary.active {
color: #fff;
}
.btn-outline-info {
color: var(--text-info);
}
.btn-outline-info:hover,
.btn-outline-info.active {
color: #212529;
}
.btn-outline-success {
color: var(--text-success);
}
.btn-outline-success:hover,
.btn-outline-success.active {
color: #fff;
}
.btn-outline-warning {
color: var(--text-warning);
}