surtic86andClaude Opus 5.5
44084eaffa
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>
526 lines
26 KiB
CSS
526 lines
26 KiB
CSS
/*
|
||
* Page-specific styles: issue view, journals, wiki content and code,
|
||
* activity, roadmap, calendar, Gantt.
|
||
*/
|
||
|
||
/***** Issue view *****/
|
||
/* .details: calendar entries are div.issue too */
|
||
div.issue.details {
|
||
background: var(--md-sys-color-surface-container-low);
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
padding: 24px;
|
||
margin-block-end: 16px;
|
||
}
|
||
div.issue div.subject h3 { font: var(--md-sys-typescale-headline-small); }
|
||
div.issue p.author { color: var(--md-sys-color-on-surface-variant); }
|
||
div.issue .attributes .attribute .label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
|
||
div.issue hr { background: var(--md-sys-color-outline-variant); }
|
||
div.issue.overdue .due-date .value { color: var(--md-sys-color-error); }
|
||
div.issue table.list { background: var(--md-sys-color-surface); }
|
||
|
||
/* Sticky issue header while scrolling: an M3 top app bar in its scrolled state
|
||
(surface-container, no shadow). Core hard-codes a white background. */
|
||
div#sticky-issue-header {
|
||
padding-block: 12px;
|
||
padding-inline: 24px;
|
||
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
||
background-color: var(--md-sys-color-surface-container);
|
||
box-shadow: none;
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
font: var(--md-sys-typescale-title-medium);
|
||
}
|
||
div#sticky-issue-header .subject { color: var(--md-sys-color-on-surface); font-weight: 500; }
|
||
|
||
/* Progress bars inside list rows must not take the row padding and height */
|
||
table.list table.progress td, table.list table.progress td:first-child {
|
||
block-size: 4px;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
/***** Journals: each change is an outlined card, its header a band on top *****/
|
||
.journals .journal {
|
||
margin-block-end: 12px;
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
border: 1px solid var(--md-sys-color-outline-variant);
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
overflow: hidden;
|
||
}
|
||
.journals h4.journal-header {
|
||
margin: 0;
|
||
background-color: var(--md-sys-color-surface-container-high);
|
||
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
||
border-radius: 0;
|
||
padding-block: 8px;
|
||
padding-inline: 16px;
|
||
font: var(--md-sys-typescale-title-small);
|
||
}
|
||
.journals h4.journal-header .update-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
|
||
.journals div:target h4.journal-header { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
|
||
.journals div.journal:has(div:target), .journals div.journal:target { border-color: var(--md-sys-color-primary); }
|
||
.journals .journal-content { margin-block-end: 0; padding-block: 4px 12px; padding-inline: 16px; }
|
||
.journals .journal-content :is(.journal-details, .wiki):last-child, .journals .journal-content .wiki > :last-child { margin-block-end: 0; }
|
||
.journals .private-notes { border-inline-start: 4px solid var(--md-sys-color-error); }
|
||
.journals .journal-details, ul.revision-info { color: var(--md-sys-color-on-surface-variant); }
|
||
|
||
/***** Reading pages: the main content sits in one filled card, like the issue details *****/
|
||
#content > div.wiki.wiki-page,
|
||
#content > div.news,
|
||
.controller-documents.action-show #content > div.wiki,
|
||
#content > [data-controller="quote-reply"] > div.message {
|
||
margin-block-end: 16px;
|
||
padding: 24px;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
}
|
||
/* The card's padding is the gap: no paragraph margin on top of it (news and messages
|
||
open with a floated reaction button) */
|
||
:is(#content > div.wiki.wiki-page, #content > div.news, .controller-documents.action-show #content > div.wiki,
|
||
#content > [data-controller="quote-reply"] > div.message) {
|
||
& > :first-child, & > .reaction + * { margin-block-start: 0; }
|
||
& > :last-child, & > .wiki:last-child > :last-child { margin-block-end: 0; }
|
||
}
|
||
/* The wiki page's actions sit above its card, not on its edge */
|
||
#content > div.wiki.wiki-page { clear: both; }
|
||
|
||
/***** Wiki content *****/
|
||
div.wiki table { padding: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; }
|
||
div.wiki td, div.wiki th { border: 0; border-block-start: 1px solid var(--md-sys-color-outline-variant); padding-block: 8px; padding-inline: 12px; }
|
||
div.wiki tr:first-child td, div.wiki tr:first-child th { border-block-start: 0; }
|
||
div.wiki th { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }
|
||
div.wiki a.new { color: var(--md-sys-color-error); }
|
||
/* Wiki text mostly sits in a card, so the TOC steps one tone up from it */
|
||
div.wiki ul.toc {
|
||
background-color: var(--md-sys-color-surface-container);
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
padding: 12px 16px;
|
||
}
|
||
div.wiki ul.toc li.heading { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }
|
||
|
||
div.wiki pre {
|
||
margin-inline: 0;
|
||
padding: 16px;
|
||
background-color: var(--md-sys-color-surface-container);
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
}
|
||
div.wiki pre .syntaxhl, .syntaxhl { background: transparent; }
|
||
div.wiki *:not(pre) > code, div.wiki > code {
|
||
background: var(--md-sys-color-surface-container-high);
|
||
border-radius: var(--md-sys-shape-corner-extra-small);
|
||
padding-block: 0.1em;
|
||
padding-inline: 0.3em;
|
||
}
|
||
|
||
/* Syntax highlighting: core Rouge colors are fixed hex values, regrouped here onto roles */
|
||
.syntaxhl :is(.c, .ch, .cm, .cpf, .c1, .cs, .cp, .go, .w) { color: var(--md-sys-color-on-surface-variant); font-weight: normal; font-style: italic; }
|
||
.syntaxhl :is(.k, .kc, .kd, .kn, .kp, .kr, .ow) { color: var(--md-sys-color-primary); font-weight: 500; }
|
||
.syntaxhl :is(.nf, .fm, .na, .nt, .nb, .bp, .nd, .gh, .gu) { color: var(--md-sys-color-primary); font-weight: normal; }
|
||
.syntaxhl :is(.kt, .nc, .nn, .no, .m, .mb, .mf, .mh, .mi, .mo, .il) { color: var(--md-sys-color-tertiary); font-weight: normal; }
|
||
.syntaxhl :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss, .gi) { color: var(--md-sys-color-success); background-color: transparent; }
|
||
.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-surface-container-highest); } /* stays a surface tone at every contrast, so token colors stay readable */
|
||
|
||
/***** Activity *****/
|
||
/* One card per day (the <dl>), entries are M3 list rows. Each entry is a <dt> + <dd> pair:
|
||
dt is a grid (type icon | headline | time, project below), dd holds the clamped
|
||
description and the author. Follow-up events on the same item hang off a thread rail. */
|
||
div#activity h3 {
|
||
position: sticky;
|
||
inset-block-start: 0;
|
||
z-index: 1;
|
||
margin-block: 24px 8px;
|
||
padding-block: 8px;
|
||
padding-inline: 0;
|
||
background-color: var(--md-sys-color-surface);
|
||
color: var(--md-sys-color-on-surface);
|
||
font: var(--md-sys-typescale-title-medium);
|
||
}
|
||
div#activity h3:first-child { margin-block-start: 0; }
|
||
div#activity dl {
|
||
margin-inline-start: 0;
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
border: 1px solid var(--md-sys-color-outline-variant);
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
overflow: hidden;
|
||
}
|
||
|
||
div#activity dt, div#activity dl dt:first-child {
|
||
display: grid;
|
||
grid-template-columns: 40px minmax(0, 1fr) auto;
|
||
grid-template-areas: "icon title time" "icon project time";
|
||
column-gap: 16px;
|
||
align-items: center;
|
||
inline-size: auto;
|
||
margin: 0;
|
||
padding-block: 12px 0;
|
||
padding-inline: 16px;
|
||
background: none;
|
||
border: 0;
|
||
border-block-start: 1px solid var(--md-sys-color-outline-variant);
|
||
border-radius: 0;
|
||
}
|
||
div#activity dl dt:first-child { border-block-start: 0; }
|
||
|
||
/* Leading element: type icon in a tonal circle, author avatar as a badge on it */
|
||
div#activity dt > svg.icon-svg {
|
||
grid-area: icon;
|
||
box-sizing: content-box;
|
||
padding: 11px;
|
||
margin: 0;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
background-color: var(--md-sys-color-secondary-container);
|
||
color: var(--md-sys-color-on-secondary-container);
|
||
}
|
||
div#activity dt.issue > svg.icon-svg { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
|
||
div#activity dt.issue-closed > svg.icon-svg { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
|
||
div#activity dt:is(.wiki-page, .document, .news, .message, .attachment) > svg.icon-svg { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
|
||
div#activity dt > .avatar {
|
||
grid-area: icon;
|
||
align-self: end;
|
||
justify-self: end;
|
||
inline-size: 18px;
|
||
block-size: 18px;
|
||
margin: 0 -6px -4px 0;
|
||
font-size: 7px;
|
||
line-height: 18px;
|
||
box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low);
|
||
}
|
||
|
||
div#activity dt > a { grid-area: title; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: var(--md-sys-typescale-title-small); }
|
||
div#activity dt .time { grid-area: time; align-self: start; margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); }
|
||
div#activity dt.me .time { border-block-end: 0; }
|
||
div#activity span.project { grid-area: project; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
|
||
div#activity span.project::after { content: none; }
|
||
|
||
div#activity dd {
|
||
margin: 0;
|
||
padding-block: 2px 12px;
|
||
padding-inline: 72px 16px; /* 16 padding + 40 icon + 16 gap: under the headline */
|
||
background: none;
|
||
border: 0;
|
||
border-radius: 0;
|
||
font: var(--md-sys-typescale-body-medium);
|
||
}
|
||
div#activity dd span.description {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
margin-block: 0 2px; /* a top margin would collapse through dd */
|
||
color: var(--md-sys-color-on-surface);
|
||
font-style: normal;
|
||
}
|
||
div#activity dd span.description:empty { display: none; }
|
||
div#activity dd .author { font: var(--md-sys-typescale-label-medium); }
|
||
/* No project line (entry from the current project): the icon still spans two rows, so pull the details up */
|
||
div#activity dt:not(:has(> .project)) + dd { margin-block-start: -20px; }
|
||
|
||
/* Thread: follow-up events hang off a rail starting under the first event's icon */
|
||
div#activity dt.grouped, div#activity dd.grouped {
|
||
margin-inline-start: 36px;
|
||
box-shadow: inset 2px 0 0 var(--md-sys-color-outline-variant);
|
||
}
|
||
div#activity dt.grouped {
|
||
grid-template-columns: 32px minmax(0, 1fr) auto;
|
||
padding-inline-start: 18px;
|
||
border-block-start: 0;
|
||
}
|
||
div#activity dt.grouped > svg.icon-svg { padding: 7px; }
|
||
div#activity dd.grouped { padding-inline-start: 66px; } /* 18 + 32 + 16 */
|
||
|
||
/***** My page: each block is a card like .box; drop zones show only while dragging *****/
|
||
.mypage-box {
|
||
padding: 16px;
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
color: var(--md-sys-color-on-surface);
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
box-shadow: none;
|
||
}
|
||
.mypage-box .autoscroll { margin-block-end: 0; }
|
||
.block-receiver { border-color: transparent; border-radius: var(--md-sys-shape-corner-medium); }
|
||
.dragging .block-receiver { border-color: var(--md-sys-color-outline-variant); }
|
||
|
||
/***** Search results *****/
|
||
/* The type checkboxes' legend is only a "check all" icon: it leads their row */
|
||
#search-form fieldset.box > legend { inline-size: auto; padding: 0; margin-inline-end: 8px; }
|
||
#search-form fieldset.box > legend ~ * { clear: none; }
|
||
/* A checkbox stays with its label when the row wraps */
|
||
#search-form label { display: inline-block; white-space: nowrap; }
|
||
/* Results start at the content edge; the title wraps under its project, not beside it */
|
||
#search-results { margin-inline-start: 0; }
|
||
#search-results dt { display: block; }
|
||
div#activity dt .time, #search-results dt .time { color: var(--md-sys-color-on-surface-variant); }
|
||
#search-results dd span.description { color: var(--md-sys-color-on-surface-variant); }
|
||
|
||
/***** Projects board: each root project is a filled card *****/
|
||
#projects-index ul.projects li.root {
|
||
padding: 16px;
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
box-shadow: none;
|
||
}
|
||
#projects-index li.root ul.projects { border-inline-start: 1px solid var(--md-sys-color-outline-variant); }
|
||
|
||
/***** Documents: one filled card per category, documents are list rows inside *****/
|
||
#document-list .document-group {
|
||
margin-block-end: 16px;
|
||
padding-block: 8px;
|
||
padding-inline: 16px;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
}
|
||
#document-list .document-group h3 {
|
||
margin: 0;
|
||
padding-block: 8px;
|
||
padding-inline: 0;
|
||
background-color: transparent;
|
||
color: var(--md-sys-color-on-surface);
|
||
font: var(--md-sys-typescale-title-medium);
|
||
}
|
||
#document-list .document-item { padding-block: 12px; }
|
||
#document-list .document-item + .document-item { border-block-start: 1px solid var(--md-sys-color-outline-variant); }
|
||
#document-list .document-group h3 + .document-item { padding-block-start: 4px; }
|
||
|
||
/***** News list: each article is a filled card *****/
|
||
#news-list article.news-article {
|
||
margin-block-end: 12px;
|
||
padding: 16px;
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
background-color: var(--md-sys-color-surface-container-low);
|
||
}
|
||
/* Hanging indent: a wrapped title and the comment count line up past the avatar */
|
||
#news-list article.news-article header h3 {
|
||
margin-block: 0 4px;
|
||
padding-inline-start: 32px;
|
||
text-indent: -32px;
|
||
font: var(--md-sys-typescale-title-medium);
|
||
}
|
||
#news-list article.news-article header h3 .avatar { margin-inline-end: 4px; vertical-align: middle; text-indent: 0; } /* + the space after it = 8px */
|
||
/* Author and text line up with the title, past the 24px avatar and its gap */
|
||
#news-list article.news-article header p.author,
|
||
#news-list article.news-article .wiki { margin-inline-start: 32px; }
|
||
#news-list article.news-article header p.author { margin-block: 0 8px; color: var(--md-sys-color-on-surface-variant); }
|
||
#news-list article.news-article .wiki > :last-child { margin-block-end: 0; }
|
||
|
||
/***** Workflow: allowed transitions use the selected state *****/
|
||
table.transitions td.enabled { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
|
||
table.fields_permissions td.readonly { background-color: var(--md-sys-color-surface-container-highest); }
|
||
table.fields_permissions td.required { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
|
||
|
||
/***** Attachments, diffs, imports, headings *****/
|
||
div.thumbnail {
|
||
overflow: hidden;
|
||
border: 1px solid var(--md-sys-color-outline-variant);
|
||
border-radius: var(--md-sys-shape-corner-small);
|
||
background: transparent;
|
||
}
|
||
div.thumbnail img { margin: 0; }
|
||
pre.text-diff {
|
||
padding: 16px;
|
||
border-color: var(--md-sys-color-outline-variant);
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
}
|
||
h2 .avatar, h3 .avatar { margin-inline-end: 8px; }
|
||
/* "Replies (2)": the icon heading is a flex row, which drops the space before the count */
|
||
h3.comments .icon-label { margin-inline-end: 0.25em; }
|
||
#wiki_page_parent_id { min-inline-size: 240px; }
|
||
select#columns, select#criterias { margin-inline: 8px 16px; }
|
||
input#months { inline-size: 72px; }
|
||
/* Tabs start below the floated page actions, so their divider spans the page */
|
||
#content > .tabs { clear: both; }
|
||
|
||
/***** Roadmap *****/
|
||
div#roadmap .version-article {
|
||
padding: 16px;
|
||
margin-block-end: 16px;
|
||
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-surface-container-highest); }
|
||
div#version-summary { background-color: transparent; }
|
||
|
||
/* Overview and issue table share one left edge (core indents the overview by 1.5rem) */
|
||
div#roadmap article.version-article .version-overview,
|
||
div#roadmap article.version-article .wiki,
|
||
div#roadmap article.version-article form { padding-inline-start: 0; }
|
||
div#roadmap .related-issues td.assigned_to { padding-inline: 12px 4px; }
|
||
div#roadmap .related-issues caption { padding-block-end: 8px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }
|
||
|
||
/* Progress bar spans the width of the issue table below it; the percentage sits at its end */
|
||
.version-overview table.progress { inline-size: calc(100% - 56px); margin-block: 6px; }
|
||
.version-overview p.percent { font: var(--md-sys-typescale-label-large); line-height: 20px; text-align: end; }
|
||
.version-overview p.progress-info { margin-block: 4px 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
|
||
/* Version page: the issue table is 70% wide next to the summary */
|
||
body.controller-versions.action-show .version-overview table.progress { inline-size: calc(70% - 56px); }
|
||
body.controller-versions.action-show .version-overview p.percent { inline-size: 70%; }
|
||
|
||
/***** Calendar *****/
|
||
ul.cal {
|
||
overflow: hidden;
|
||
border-color: var(--md-sys-color-outline-variant);
|
||
border-radius: var(--md-sys-shape-corner-medium);
|
||
box-shadow: none;
|
||
}
|
||
.cal .calbody { box-shadow: none; }
|
||
.cal .calhead, .cal .week-number { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
|
||
.cal .calbody { border-color: var(--md-sys-color-outline-variant); }
|
||
.cal .calbody.this-month { background-color: var(--md-sys-color-surface); }
|
||
.cal .calbody.other-month, .cal .calbody.nwday:not(.other-month) { background-color: var(--md-sys-color-surface-container-low); }
|
||
.cal .calbody.today .day-value { color: var(--md-sys-color-on-primary); }
|
||
|
||
/* Month bar: ‹ [month] [year] › then Apply / Clear / Save. The arrows and the selects live
|
||
in separate containers, so those dissolve into one flex row. */
|
||
body.controller-calendars #query_form_with_buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; } /* p.buttons had it */
|
||
body.controller-calendars #query_form_content { flex: 1 1 100%; }
|
||
body.controller-calendars :is(#query_form_with_buttons > .pagination, #query_form_with_buttons > .pagination ul, #query_form_with_buttons > p.buttons) { display: contents; }
|
||
body.controller-calendars p.buttons label { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
|
||
body.controller-calendars .pagination li { margin: 0; }
|
||
body.controller-calendars .pagination li.next { order: 1; }
|
||
body.controller-calendars p.buttons a { order: 2; }
|
||
/* Previous / next month: icon buttons; the month name stays as the accessible text */
|
||
body.controller-calendars .pagination li a {
|
||
display: block;
|
||
inline-size: 40px;
|
||
block-size: 40px;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
font-size: 0;
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
}
|
||
body.controller-calendars .pagination li a:hover { background-image: var(--nm-state-hover); }
|
||
body.controller-calendars .pagination li a::before {
|
||
content: '';
|
||
display: block;
|
||
block-size: 100%;
|
||
background-color: currentColor;
|
||
mask: url(../images/chevron-left-idnt.svg) center / 24px no-repeat;
|
||
}
|
||
body.controller-calendars .pagination li.next a::before,
|
||
html[dir="rtl"] body.controller-calendars .pagination li.previous a::before { transform: scaleX(-1); }
|
||
html[dir="rtl"] body.controller-calendars .pagination li.next a::before { transform: none; }
|
||
|
||
/***** Gantt (gantt.css loads after the theme, hence the `html` prefix) *****/
|
||
/*
|
||
* Geometry is set inline by Redmine: rows every 20px, each with a 16px text line whose top is
|
||
* `header height + 8 + 20n` in the subjects column and `7 + 20n` inside #gantt_draw_area.
|
||
* Bars are centered on that 16px line; row bands run from 2px above to 2px below it.
|
||
*/
|
||
:root {
|
||
--nm-gantt-band: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
|
||
--nm-gantt-rows: repeating-linear-gradient(to bottom, var(--nm-gantt-band) 0 20px, transparent 20px 40px);
|
||
--nm-gantt-track: color-mix(in srgb, var(--md-sys-color-primary) 25%, var(--md-sys-color-surface-container-highest));
|
||
--nm-gantt-subjects-offset: 2px; /* (header height + 6) mod 20; the header has one 18px row per zoom level */
|
||
}
|
||
:root:has(#zoom[value="1"]) { --nm-gantt-subjects-offset: 4px; }
|
||
:root:has(#zoom[value="3"]) { --nm-gantt-subjects-offset: 0px; }
|
||
:root:has(#zoom[value="4"]) { --nm-gantt-subjects-offset: 18px; }
|
||
|
||
/* Redmine's geometry is fixed at 20px rows; `zoom` scales rows, bars, text and positions together.
|
||
The relation/progress SVG is drawn by JS from on-screen (already zoomed) positions, so it must
|
||
not be zoomed a second time. */
|
||
:root { --nm-gantt-zoom: 1.3; }
|
||
html table.gantt-table { zoom: var(--nm-gantt-zoom); }
|
||
html #gantt_draw_area svg { zoom: calc(1 / var(--nm-gantt-zoom)); overflow: visible; }
|
||
|
||
html #gantt_draw_area { background: var(--nm-gantt-rows) 0 5px; }
|
||
html .gantt_subjects_container { background: var(--nm-gantt-rows) 0 var(--nm-gantt-subjects-offset); }
|
||
|
||
/* Header: months / weeks / days */
|
||
html .gantt_hdr { border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); line-height: 18px; }
|
||
html .gantt_hdr[style*="background"] { background: var(--md-sys-color-surface-container) !important; }
|
||
html .gantt_hdr.nwday { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); color: var(--md-sys-color-on-surface-variant); }
|
||
html .gantt_hdr a { color: var(--md-sys-color-on-surface-variant); }
|
||
|
||
/* Subjects */
|
||
html .gantt_subjects, html .gantt_selected_column_content.gantt_hdr { font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-body-small-tracking); }
|
||
html .gantt_subjects div { line-height: 16px; }
|
||
html .gantt_subjects div.issue-subject:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent); }
|
||
html .gantt_subjects div.project-name, html .gantt_subjects div.version-name { font-weight: 500; }
|
||
|
||
/* Issue bars: 10px pills centered on the text line (core: 8px at the top of it) */
|
||
html .task_todo, html .task_done, html .task_late {
|
||
block-size: 10px;
|
||
margin-block-start: 3px;
|
||
box-sizing: border-box;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
background-image: none;
|
||
}
|
||
html .task_todo { background-color: var(--nm-gantt-track); border-color: var(--nm-gantt-track); }
|
||
html .task_done { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
|
||
html .task_late { background-color: var(--md-sys-color-error); border-color: var(--md-sys-color-error); }
|
||
|
||
/* Parent issues: thin bar with triangles at both ends */
|
||
html .task_todo.parent, html .task_done.parent, html .task_late.parent { block-size: 4px; margin-block-start: 6px; border-radius: 0; }
|
||
html .task_todo.parent { background-color: var(--md-sys-color-on-surface-variant); border-color: var(--md-sys-color-on-surface-variant); }
|
||
html .task.parent.marker.starting, html .task.parent.marker.ending {
|
||
background: var(--md-sys-color-on-surface-variant);
|
||
clip-path: polygon(0 7px, 8px 7px, 4px 14px);
|
||
}
|
||
|
||
/* Project and version milestones: 2px line with a diamond marker */
|
||
html .project.task_todo, html .project.task_done, html .project.task_late,
|
||
html .version.task_todo, html .version.task_done, html .version.task_late {
|
||
block-size: 2px;
|
||
margin-block-start: 7px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
html :is(.project, .version):is(.task_todo, .task_done, .task_late) { background-image: none; }
|
||
html :is(.project, .version).task_todo { background-color: var(--md-sys-color-outline); }
|
||
html :is(.project, .version).task_done { background-color: var(--md-sys-color-primary); }
|
||
html :is(.project, .version).task_late { background-color: var(--md-sys-color-error); }
|
||
html .version.marker, html .project.marker {
|
||
block-size: 10px;
|
||
margin-block-start: 3px;
|
||
background: var(--md-sys-color-tertiary);
|
||
clip-path: polygon(4px 0, 8px 5px, 4px 10px, 0 5px);
|
||
}
|
||
html .project.marker { background: var(--md-sys-color-primary); }
|
||
|
||
/* Labels next to bars ("New 80%") */
|
||
html .task { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-small); line-height: 16px; }
|
||
html .task.label.project, html .task.label.version { color: var(--md-sys-color-on-surface); font-weight: 500; }
|
||
html .version-behind-schedule a, html .issue-behind-schedule a { color: var(--md-sys-color-warning); }
|
||
html .version-overdue a, html .issue-overdue a, html .project-overdue a { color: var(--md-sys-color-error); }
|
||
|
||
/* Today line (inline style); the progress line takes its color from it */
|
||
html #today_line { border-inline-start: 2px solid var(--md-sys-color-error) !important; }
|
||
|
||
/* Relation arrows are drawn with fixed colors per relation type */
|
||
html #gantt_draw_area path[stroke="#228be6"] { stroke: var(--md-sys-color-primary); }
|
||
html #gantt_draw_area path[fill="#228be6"] { fill: var(--md-sys-color-primary); }
|
||
html #gantt_draw_area path[stroke="#fa5252"] { stroke: var(--md-sys-color-error); }
|
||
html #gantt_draw_area path[fill="#fa5252"] { fill: var(--md-sys-color-error); }
|
||
|
||
/***** Issue context menu (context_menu.css loads after the theme) *****/
|
||
html #context-menu { font: var(--md-sys-typescale-label-large); }
|
||
html #context-menu ul {
|
||
background: var(--md-sys-color-surface-container);
|
||
border: 0;
|
||
border-radius: var(--md-sys-shape-corner-extra-small);
|
||
box-shadow: var(--md-sys-elevation-level2);
|
||
padding-block: 8px;
|
||
}
|
||
html #context-menu li { border: 0; border-radius: 0; }
|
||
html #context-menu li:hover { border: 0; border-radius: 0; background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent); }
|
||
html #context-menu a { color: var(--md-sys-color-on-surface); padding-block: 8px; }
|
||
html #context-menu a:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
|
||
html #context-menu a.disabled, html #context-menu a.disabled:hover { color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent); }
|
||
html #context-menu a.disabled svg.icon-svg { color: inherit; }
|
||
|
||
.cal .calbody div.issue {
|
||
margin-block: 4px;
|
||
padding-block: 4px;
|
||
padding-inline: 8px;
|
||
background-color: var(--md-sys-color-surface-container);
|
||
border-radius: var(--md-sys-shape-corner-small);
|
||
font: var(--md-sys-typescale-body-small);
|
||
}
|