65-ci.css RawHistoryFolder

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  .c-ck { width: 1%; white-space: nowrap; }
19
20  .runs .c-st { width: 1%; }
21  .runs .c-dur, .runs .c-who { white-space: nowrap; }
22  .runs tr[data-new] { background: var(--bg-raised); }
23
24  .run-h { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); }
25  .run-err, .job-err {
26    max-width: var(--measure); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); white-space: pre-wrap; overflow-wrap: anywhere;
27    background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--r-s);
28    font: inherit; font-size: var(--fs-s);
29  }
30
31  .jobs { display: grid; gap: var(--s4); padding: 0; list-style: none; }
32  .jobs > li { padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
33  .job-h { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
34  .steps { display: grid; gap: 2px; padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); }
35  .steps li { display: flex; align-items: center; gap: var(--s1); }
36  .attempts { padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); }
37  .checks { display: grid; gap: var(--s1); padding: 0; margin: 0; list-style: none; font-size: var(--fs-s); }
38  .checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
39
40  .joblog { margin-top: var(--s4); }
41  .log {
42    margin: 0; padding: var(--s2) 0; list-style: none; overflow-x: auto;
43    font: var(--fs-s) / 1.5 var(--mono); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
44  }
45  .log .lg { display: flex; gap: var(--s3); padding: 0 var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
46  .log .lg:target { background: var(--bg-raised); }
47  .log .lg time { flex: none; color: var(--ink-dim); user-select: none; }
48  .log .lg .t { min-width: 0; }
49  .log .group .t { font-weight: 700; }
50  .log .endgroup { display: none; }
51  .log .error .t { color: var(--red); }
52  .joblog .more { margin: var(--s2) 0; font-size: var(--fs-s); }
53}