From 44084eaffafa8271ba2212b85cc2f588e97c8fd3 Mon Sep 17 00:00:00 2001 From: surtic86 Date: Mon, 12 Oct 2026 09:43:14 +0200 Subject: [PATCH] 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 --- tonalmine/stylesheets/components.css | 7 ++++--- tonalmine/stylesheets/layout.css | 15 +++++++++++---- tonalmine/stylesheets/pages.css | 4 ++-- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css index 6c0acbd..90769b0 100644 --- a/tonalmine/stylesheets/components.css +++ b/tonalmine/stylesheets/components.css @@ -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) *****/ diff --git a/tonalmine/stylesheets/layout.css b/tonalmine/stylesheets/layout.css index 6bcaac0..ebf7f7d 100644 --- a/tonalmine/stylesheets/layout.css +++ b/tonalmine/stylesheets/layout.css @@ -202,6 +202,8 @@ html .dropdown-content .dropdown-items a:hover, } #main-menu .menu-children li a:hover::after { display: none; } .drdn-items > .selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } +/* At medium/high contrast secondary-container turns into a dark block; the check mark already marks the item */ +:root:is([data-contrast="medium"], [data-contrast="high"]) .drdn-items > .selected { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } #project-jump .drdn-items > a:hover { background-color: transparent; color: var(--md-sys-color-on-surface) !important; } div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { border-color: var(--md-sys-color-outline-variant); } #account .dropdown-content .user-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); } @@ -288,8 +290,8 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde #sidebar ul + ul, #sidebar ul + p { margin-block-start: 12px; } /* Navigation-drawer style items for plain link lists in the sidebar (queries, sort order, - versions, wiki index, …): a link that is alone in its list item */ -#sidebar li > a:only-child, #admin-menu li a { + versions, wiki index, …): a link that is alone in its list item, or a saved query */ +#sidebar li > a:is(:only-child, .query), #admin-menu li a { display: flex; align-items: center; min-block-size: 36px; @@ -300,8 +302,8 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde letter-spacing: var(--md-sys-typescale-label-large-tracking); transition: var(--nm-transition); } -#sidebar li > a:only-child:hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; } -#sidebar li > a.selected:only-child, #admin-menu li a.selected { +#sidebar li > a:is(:only-child, .query):hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; } +#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected { margin-inline-start: 0; /* core: -6px, inset marker bar */ padding-block: 0; box-shadow: none; @@ -310,6 +312,11 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde color: var(--md-sys-color-on-secondary-container); } #admin-menu li { padding-block-end: 2px; } +/* The selected query also holds its "clear" icon: it sits at the end, inside the pill */ +#sidebar li:has(> .icon-clear-query) { display: grid; align-items: center; } +#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; } +#sidebar li:has(> .icon-clear-query) > a.query { padding-inline-end: 40px; } +#sidebar li > .icon-clear-query { justify-self: end; margin-inline-end: 12px; color: var(--md-sys-color-on-secondary-container); } /***** Footer *****/ #footer { diff --git a/tonalmine/stylesheets/pages.css b/tonalmine/stylesheets/pages.css index 03b01bf..5099437 100644 --- a/tonalmine/stylesheets/pages.css +++ b/tonalmine/stylesheets/pages.css @@ -122,7 +122,7 @@ div.wiki *:not(pre) > code, div.wiki > code { .syntaxhl :is(.nv, .vc, .vg, .vi, .vm, .nl, .ni) { color: var(--md-sys-color-warning); font-weight: normal; } .syntaxhl :is(.err, .gd, .gr, .ne, .gt) { color: var(--md-sys-color-error); background-color: transparent; } .syntaxhl :is(.o) { color: var(--md-sys-color-on-surface); } -.syntaxhl .hll { background-color: var(--md-sys-color-secondary-container); } +.syntaxhl .hll { background-color: var(--md-sys-color-surface-container-highest); } /* stays a surface tone at every contrast, so token colors stay readable */ /***** Activity *****/ /* One card per day (the
), entries are M3 list rows. Each entry is a
+
pair: @@ -342,7 +342,7 @@ div#roadmap .version-article { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); } -div#roadmap header:target { background-color: var(--md-sys-color-secondary-container); } +div#roadmap header:target { background-color: var(--md-sys-color-surface-container-highest); } div#version-summary { background-color: transparent; } /* Overview and issue table share one left edge (core indents the overview by 1.5rem) */