494 lines
24 KiB
CSS
494 lines
24 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-secondary-container); }
|
|
|
|
/***** 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-secondary-container); }
|
|
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); }
|
|
|
|
/***** 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);
|
|
}
|