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:
@@ -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) *****/
|
||||
|
||||
Reference in New Issue
Block a user