65-ci.css Raw History Folder

1@layer components {
2  /* CI: runs, jobs, steps, checks and the log. Hue only where it carries a
3     verdict, and every mark has its word beside it or in its label. */
4  .ck {
5    display: inline-block; width: 14px; height: 14px; margin-right: var(--s1); vertical-align: -2px;
6    border: 2px solid var(--ink-dim); border-radius: 50%; box-sizing: border-box; flex: none;
7  }
8  .ck-ok { background: var(--teal); border-color: var(--teal); }
9  .ck-bad { background: var(--red); border-color: var(--red); border-radius: 3px; transform: rotate(45deg) scale(.85); }
10  .ck-cancelled { border-style: dashed; }
11  .ck-skipped { border-color: var(--border-strong); background: var(--bg-raised); }
12  .ck-queued { border-style: dotted; }
13  .ck-running { border-color: var(--teal); border-top-color: transparent; animation: ck-spin 1s linear infinite; }
14  @keyframes ck-spin { to { transform: rotate(360deg); } }
15  @media (prefers-reduced-motion: reduce) { .ck-running { animation: none; border-top-color: var(--teal); } }
16
17  .ck-sum { display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s2); font-size: var(--fs-xs); white-space: nowrap; }
18  /* The lists are table-layout: fixed, where a percentage is only a sliver:
19     the check column holds the mark, its count and the padding of the cells;
20     the refs list has the mark next to the sha. */
21  .c-ck { width: 1%; white-space: nowrap; }
22  .list .c-ck { width: 92px; }
23  /* the commit table of a rail lays out on its content (50-code.css) */
24  .rail .list.commits .c-ck { width: 1%; }
25  .list.refs .c-sha { width: 150px; }
26
27  /* the table is fixed: the status column is the icon, its margin and the
28     padding of the cells (a percentage would leave a sliver) */
29  .runs .c-st { width: calc(14px + var(--s1) + 2 * var(--s3)); }
30  /* the recent runs of the summary rail */
31  .rruns {
32    display: grid; padding: 0; list-style: none; font-size: var(--fs-s);
33    & li { display: flex; align-items: center; gap: var(--s1); min-width: 0; padding: 2px 0; }
34    & .ck { margin-right: var(--s1); }
35    & .rr-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-hi); text-decoration: none; }
36    & .rr-name:hover { text-decoration: underline; }
37    & .rr-ref { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: var(--s1); font-family: var(--mono); color: var(--ink-dim); text-decoration: none; }
38    & time { flex: none; margin-left: auto; padding-left: var(--s2); white-space: nowrap; }
39  }
40  .runs .c-dur, .runs .c-who { white-space: nowrap; }
41  .runs tr[data-new] { background: var(--bg-raised); }
42
43  .run-h { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); }
44  .run-err, .job-err {
45    max-width: var(--measure); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); white-space: pre-wrap; overflow-wrap: anywhere;
46    background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--r-s);
47    font: inherit; font-size: var(--fs-s);
48  }
49
50  .jobs { display: grid; gap: var(--s4); padding: 0; list-style: none; }
51  .jobs > li { padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
52  .job-h { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
53  .steps { display: grid; gap: 2px; padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); }
54  /* a long step name (a whole shell command) wraps inside the rail; the icon
55     stays on its first line and the duration at the right */
56  .steps li { display: flex; align-items: flex-start; gap: var(--s1); min-width: 0; }
57  .steps li > .ck { flex: none; margin-top: 3px; }
58  .steps li > :is(a, span:not(.ck, .dim)) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
59  .steps li > .dim { flex: none; margin-left: auto; }
60  .attempts { padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); }
61  .checks { display: grid; gap: var(--s1); padding: 0; margin: 0; list-style: none; font-size: var(--fs-s); }
62  .checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
63  .checks .ck-group { font-size: var(--fs-xs); color: var(--ink-dim); margin-top: var(--s2); }
64  .checks .ck-group:first-child { margin-top: 0; }
65  .checks .ck-group a { color: inherit; }
66  /* the merge rule under the checks: a note about them, not one of them */
67  .rail section > .rule-note {
68    display: flex; gap: 6px; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--border);
69    font-size: var(--fs-xs); font-style: italic; line-height: 1.4; color: var(--ink-mute);
70    &::before { content: "i"; flex: none; width: 14px; height: 14px; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%; font: 700 9px / 12px var(--mono); font-style: normal; text-align: center; }
71  }
72
73  /* annotations and summaries of a run */
74  .annots { margin: 0 0 var(--s4); }
75  .annots h3, .summaries h3 { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--fs-s); }
76  .annot-list { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
77  .annot {
78    display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3);
79    background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-s);
80    font-size: var(--fs-s);
81  }
82  .annot-failure { border-left-color: var(--red); }
83  .annot-warning { border-left-style: dashed; border-left-color: var(--ink-dim); }
84  .annot-notice { border-left-color: var(--teal); }
85  .annot p { margin: 0; }
86  .annot-step { flex-basis: 100%; font-weight: 700; }
87  .annot:has(.annot-step) { flex-wrap: wrap; }
88  .annot-body { min-width: 0; }
89  .annot-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
90  .annot-level { font-weight: 700; }
91  .annot-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
92  .annot-where { color: var(--ink-dim); font-family: var(--mono); overflow-wrap: anywhere; }
93  .an { display: inline-block; flex: none; width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--ink-dim); box-sizing: border-box; }
94  .an-failure { background: var(--red); border-color: var(--red); border-radius: 3px; transform: rotate(45deg) scale(.85); }
95  .an-warning { border-radius: 50% 50% 0 0; border-style: dashed; }
96  .an-notice { border-radius: 50%; border-color: var(--teal); }
97  .summaries { margin: var(--s5) 0 0; }
98  .summary { padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
99  .summary + .summary { margin-top: var(--s3); }
100  .summary-step { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--ink-dim); }
101
102  .joblog { margin-top: var(--s4); }
103  .log {
104    margin: 0; padding: var(--s2) 0; list-style: none; overflow-x: auto;
105    font: var(--fs-s) / 1.5 var(--mono); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
106  }
107  .log .lg { display: flex; gap: var(--s3); padding: 0 var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
108  .log .lg:target { background: var(--bg-raised); }
109  .log .lg time { flex: none; color: var(--ink-dim); user-select: none; }
110  .log .lg .t { min-width: 0; }
111  .log .group .t { font-weight: 700; }
112  .log .endgroup { display: none; }
113  .log .error .t { color: var(--red); }
114  .joblog .more { margin: var(--s2) 0; font-size: var(--fs-s); }
115}
65-ci.css RawHistoryFolder

65-ci.css Raw History Folder
