noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: contrast of progress bars, selections and selected query

Browse Source 
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:
surtic86
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
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/layout.css
+11 -4
View File
@@ -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 {