1.paper-clover > :is(.grid, .card) + :is(.grid, .card) { margin-top: 8px; }
2.paper-clover ul { list-style: none; margin: 0; padding: 0; }
3
4.paper-clover .page-head h1 { white-space: nowrap; }
5.paper-clover .page-head h1 a { border-radius: 4px; transition: color 150ms; }
6.paper-clover .page-head h1 a:hover { color: var(--accent); }
7
8.paper-clover .file-name { display: grid; min-width: 0; line-height: 1.3; }
9.paper-clover .file-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
10.paper-clover .file-name a { justify-self: start; max-width: 100%; border-radius: 3px; transition: color 150ms; }
11.paper-clover .file-name a:hover { color: var(--accent); }
12.paper-clover .file-name .folder { color: var(--muted); font-size: 12px; }
13
14.paper-clover :is(.issues ul, .files) > li { border-top: 1px solid var(--grid); }
15.paper-clover :is(.issues ul, .files) > li:first-child { border-top: 0; }
16
17/* Rows share their parent's columns so the error and time line up down the card. */
18.paper-clover .issues ul { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto auto; column-gap: 12px; }
19.paper-clover .issues li {
20 grid-column: 1 / -1;
21 display: grid;
22 grid-template-columns: subgrid;
23 align-items: center;
24 padding: 5px 0;
25 min-height: 44px;
26}
27.paper-clover .issues li > .button { align-self: stretch; height: auto; }
28.paper-clover .issues li > time { color: var(--muted); font-size: 12px; white-space: nowrap; }
29.paper-clover .issues .what { font-weight: 500; }
30.paper-clover .issues .why { display: grid; min-width: 0; font-size: 12.5px; color: var(--text-2); }
31.paper-clover .issues button.why {
32 padding: 2px 6px;
33 margin: -2px -6px;
34 border: 0;
35 border-radius: 6px;
36 background: none;
37 text-align: left;
38 cursor: pointer;
39 transition: background-color 150ms;
40}
41.paper-clover .issues button.why:hover:not(:disabled) { background: var(--hover); }
42.paper-clover .issues button.why > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
43.paper-clover .issues .detail { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; font-size: 12.5px; }
44.paper-clover .issues .detail p { margin: 0; color: var(--text-2); }
45.paper-clover .issues .trace {
46 margin: 0;
47 padding: 8px 10px;
48 max-height: 240px;
49 overflow: auto;
50 border-radius: var(--radius);
51 background: var(--well);
52 font: 12px/1.45 var(--mono);
53 color: var(--text-2);
54}
55
56.paper-clover .files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 0; }
57.paper-clover .files .num { font-size: 12.5px; line-height: 1.3; }
58
59
60/* The progress tree, drawn like @clo/lib/progress draws it in a terminal. */
61.paper-clover .running { padding: 10px 16px; font: 12.5px/20px var(--mono); }
62.paper-clover .running .empty { padding: 12px 0; font-family: var(--sans); }
63.paper-clover .running li { position: relative; }
64.paper-clover .running ul ul > li { padding-left: 3ch; }
65.paper-clover .running ul ul > li::before,
66.paper-clover .running ul ul > li:not(:last-child)::after {
67 content: "";
68 position: absolute;
69 top: 0;
70 left: 0.5ch;
71 border-left: 1px solid var(--axis);
72}
73.paper-clover .running ul ul > li::before { width: 1.6ch; height: 10px; border-bottom: 1px solid var(--axis); }
74.paper-clover .running ul ul > li:not(:last-child)::after { bottom: 0; }
75.paper-clover .running .line { display: flex; gap: 1ch; align-items: center; height: 20px; min-width: 0; white-space: nowrap; }
76.paper-clover .running .line > * { flex: none; }
77.paper-clover .running .dim { color: var(--muted); }
78.paper-clover .running .step { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
79.paper-clover .running a { border-radius: 3px; transition: color 150ms; }
80.paper-clover .running a:hover { color: var(--accent); }
81.paper-clover .running .path { display: flex; min-width: 0; flex-shrink: 1; }
82.paper-clover .running .path > .dim { overflow: hidden; text-overflow: ellipsis; }
83.paper-clover .running .path > :last-child { flex: none; }
84.paper-clover .running .log { padding-left: 1ch; }
85.paper-clover .running .log > :last-child { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; color: var(--text-2); }
86.paper-clover .running .warn { color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
87.paper-clover .running .error { color: color-mix(in srgb, var(--critical) 75%, var(--text)); }
88.paper-clover .running .more { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
89.paper-clover .running .more:hover { color: var(--text); }
90
91.paper-clover .spinner { width: 1ch; color: var(--series-1); text-align: center; }
92.paper-clover .spinner::before { content: "⠋"; animation: paper-clover-spinner 800ms infinite; }
93@keyframes paper-clover-spinner {
94 0% { content: "⠋"; } 10% { content: "⠙"; } 20% { content: "⠹"; } 30% { content: "⠸"; } 40% { content: "⠼"; }
95 50% { content: "⠴"; } 60% { content: "⠦"; } 70% { content: "⠧"; } 80% { content: "⠇"; } 90% { content: "⠏"; }
96}
97@media (prefers-reduced-motion: reduce) { .paper-clover .spinner::before { animation: none; } }
98
99.paper-clover .running .bar { width: 12ch; height: 12px; background: var(--raised); }
100.paper-clover .running .bar > span { display: block; height: 100%; background: var(--series-1); transition: width 300ms var(--ease-out); }
101
102.paper-clover .space { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: end; }
103.paper-clover .space .total { justify-self: end; margin-bottom: -3px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
104.paper-clover .space .total b { color: var(--text); font-weight: 600; }
105.paper-clover .space a.total[href] { border-radius: 4px; transition: color 150ms; }
106.paper-clover .space a.total[href]:hover { color: var(--accent); }
107.paper-clover .segments { display: flex; gap: 2px; }
108.paper-clover .segment { flex: 0 1 0; min-width: 1px; display: grid; gap: 3px; container-type: inline-size; border-radius: 3px; }
109/* A size that doesn't fit beside its name wraps onto a clipped second line. */
110.paper-clover .segment .label {
111 display: flex;
112 flex-wrap: wrap;
113 column-gap: 0.5ch;
114 height: 1lh;
115 overflow: hidden;
116 font-size: 11.5px;
117 line-height: 15px;
118 white-space: nowrap;
119 color: var(--text-2);
120}
121.paper-clover .segment .label > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
122.paper-clover .segment .mark { height: 10px; border-radius: 3px; transition: filter 150ms; }
123.paper-clover .segment:is(:hover, :focus-visible) .mark { filter: brightness(1.2); }
124@container (width < 30px) { .paper-clover .segment .label { visibility: hidden; } }
125
126.paper-clover .folders { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(52px, 1fr); gap: 4px; margin-top: 14px; overflow-x: auto; }
127.paper-clover .folders .folder {
128 display: grid;
129 justify-items: center;
130 min-width: 0;
131 padding: 4px 4px 2px;
132 border-radius: 6px;
133 font-size: 12px;
134 line-height: 1.35;
135 font-variant-numeric: tabular-nums;
136 transition: background-color 150ms;
137}
138.paper-clover .folders :is(.name, .muted) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
139.paper-clover .folders .folder[href]:hover { background: var(--hover); }
140.paper-clover .folders .column { display: flex; align-items: flex-end; width: 100%; height: 48px; margin-bottom: 4px; border-bottom: 1px solid var(--axis); }
141.paper-clover .folders .column > span { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--other); transition: background-color 150ms; }
142.paper-clover .folders .folder[href]:hover .column > span { background: var(--accent); }
143
144.paper-clover .processors table.data { font-size: 12.5px; }
145.paper-clover .processors table.data :is(th, td) { padding: 3px 6px; }
146.paper-clover .processors table.data :is(th, td):first-child { padding-left: 0; }
147.paper-clover .processors table.data :is(th, td):last-child { padding-right: 0; }
148.paper-clover .processors tbody tr:last-child td { border-bottom: 0; }
149.paper-clover .processors td:first-child { white-space: nowrap; }
150.paper-clover .processors .swatch { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; }
151.paper-clover .processors .failed { color: color-mix(in srgb, var(--critical) 75%, var(--text)); }
152.paper-clover .processors .status-label { justify-content: flex-end; gap: 4px; white-space: nowrap; }