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) */