fix: contrast of progress bars, selections and selected query

At medium and high contrast, secondary-container turns dark. The empty
part of progress bars, highlighted code lines and a targeted roadmap
header now use surface-container-highest, so the fill and the text stay
readable. The selected project in the project jump is light at these
levels too; its check mark marks it.

The selected sidebar query gets the pill style even with its "clear"
icon next to it. The icon sits inside the pill and takes the pill's
text color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-12 09:43:14 +02:00
co-authored by Claude Opus 5.5
parent db58c6e86f
commit 44084eaffa
3 changed files with 17 additions and 9 deletions
+4 -3
View File
@@ -359,8 +359,9 @@ table.progress { border-radius: var(--md-sys-shape-corner-full); overflow: hidde
table.progress td { block-size: 4px; padding: 0; }
.version-overview table.progress td { block-size: 8px; }
table.progress td.closed { background: var(--md-sys-color-primary); }
table.progress td.done { background: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-secondary-container)); }
table.progress td.todo { background: var(--md-sys-color-secondary-container); }
table.progress td.done { background: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-surface-container-highest)); }
/* Not secondary-container: at medium/high contrast it is dark and the empty track looks filled */
table.progress td.todo { background: var(--md-sys-color-surface-container-highest); }
/***** Tooltips (plain) *****/
/* jQuery UI also adds .ui-widget.ui-widget-content, which would win over a bare .ui-tooltip. */
@@ -510,7 +511,7 @@ a.icon:hover .icon-svg, a.icon-only:hover .icon-svg, span.icon-actions:hover .ic
.icon-warning svg.icon-svg { color: var(--md-sys-color-warning); }
div.flash svg.icon-svg, #errorExplanation svg.icon-svg, .conflict svg.icon-svg,
.top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg,
#main-menu svg.icon-svg, #sidebar a.selected svg.icon-svg, .drdn-items svg.icon-svg { color: inherit; }
#main-menu svg.icon-svg, #sidebar :is(a.selected, .icon-clear-query) svg.icon-svg, .drdn-items svg.icon-svg { color: inherit; }
html .context-menu-selection svg.icon-svg { color: var(--md-sys-color-on-secondary-container) !important; }
/***** Wiki toolbar (jstoolbar.css loads after the theme) *****/