1@layer components {
2 /* tables in a card, with a row cursor (j/k) */
3 .list {
4 width: 100%; table-layout: fixed;
5 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
6 border-collapse: separate; overflow: hidden;
7 & th {
8 height: 40px; padding: 0 var(--s3); white-space: nowrap;
9 font: 600 var(--fs-xs) / 1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute);
10 background: var(--bg-raised); border-bottom: 1px solid var(--border);
11 }
12 & th a { text-decoration: none; }
13 & th a:hover { color: var(--ink-hi); }
14 & th[aria-sort="ascending"], & th[aria-sort="descending"] { color: var(--ink-hi); }
15 & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); }
16 & tbody tr:first-child td { border-top: 0; }
17 & th.cur, & td.cur { width: 3px; padding: 0; }
18 & tbody tr:hover { background: var(--bg-raised); }
19 & tbody tr[data-cursor] { background: var(--bg-raised); }
20 & tbody tr[data-cursor] .cur { background: var(--ink-hi); }
21 & tbody tr[hidden] { display: none; }
22 & td > a { text-decoration: none; }
23 & td > a:first-child { color: var(--ink-hi); }
24 & tr:hover td > a:first-child, & tr[data-cursor] td > a:first-child { text-decoration: underline; }
25 & .c-sha, & .c-ref, & .c-kind, & .c-size, & .c-n { font-family: var(--mono); font-size: var(--fs-s); }
26 & .c-sha a { color: var(--ink-dim); }
27 & .c-when, & .c-who { font-size: var(--fs-s); }
28 & .c-sub { color: var(--ink-dim); }
29 }
30
31 /* home: the repositories as rows in a vertical list; the page is a stack of
32 sections, so others can sit beside or below */
33 .home {
34 display: flex; flex-direction: column; gap: var(--s5);
35 & .home-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
36 & .home-bar .filter { flex: 1 1 260px; }
37 & .sort { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-s); }
38 & .sort > .mute { margin-right: var(--s1); }
39 & .sort a {
40 display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--s2);
41 color: var(--ink-dim); text-decoration: none; border: 1px solid transparent; border-radius: var(--r-s);
42 }
43 & .sort a:hover { color: var(--ink-hi); background: var(--bg-raised); }
44 & .sort a[aria-current="true"] { color: var(--ink-hi); background: var(--bg-raised); border-color: var(--border-strong); }
45 }
46 /* a row: name, description and facts on the left; the state of the latest
47 run at the top right, the newest commits under it. Stacked on a phone. */
48 .repos {
49 display: flex; flex-direction: column; gap: var(--s3);
50 margin: 0; padding: 0; list-style: none;
51 & .repo {
52 display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "main ci" "main recent";
53 grid-template-rows: auto 1fr; column-gap: var(--s6); min-width: 0;
54 padding: var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
55 }
56 & .repo:hover { background: var(--bg-raised); border-color: var(--border-strong); }
57 & .repo[data-cursor] { background: var(--bg-raised); border-color: var(--ink-mute); box-shadow: inset 3px 0 0 var(--ink-hi); }
58 & .repo[hidden] { display: none; }
59 & .repo-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
60 & .repo-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); font-family: var(--mono); font-size: 17px; line-height: 26px; overflow-wrap: anywhere; }
61 & .repo-name a { color: var(--ink-hi); text-decoration: none; }
62 & .repo:hover .repo-name a, & .repo[data-cursor] .repo-name a { text-decoration: underline; }
63 & .repo-name .pill { margin-left: 0; }
64 & .repo-desc {
65 color: var(--ink-dim);
66 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
67 }
68 & .repo-desc.mute { color: var(--ink-mute); font-style: italic; }
69 & .repo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); font-size: var(--fs-s); color: var(--ink-mute); }
70 & .repo-meta time { color: var(--ink-dim); }
71 & .repo-branch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); color: var(--ink-dim); }
72 & .repo-ci {
73 grid-area: ci; justify-self: end; display: inline-flex; align-items: center; gap: var(--s1); margin-bottom: var(--s2);
74 font-size: var(--fs-s); color: var(--ink-dim); text-decoration: none;
75 }
76 & .repo-ci:hover { color: var(--ink-hi); text-decoration: underline; }
77 & .repo-ci .ck { margin: 0; }
78 & .repo-commits { grid-area: recent; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
79 & p.repo-commits { font-style: italic; }
80 & .repo-commits li { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; padding: 2px 0; }
81 & .rc-sha { flex: none; font-family: var(--mono); color: var(--ink-dim); text-decoration: none; }
82 & .rc-sha:hover { color: var(--ink-hi); text-decoration: underline; }
83 & .rc-subject { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-hi); }
84 & .repo-commits time { flex: none; white-space: nowrap; }
85 @media (max-width: 720px) {
86 & .repo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "ci" "recent"; grid-template-rows: none; row-gap: var(--s3); }
87 & .repo-ci { justify-self: start; margin-bottom: 0; }
88 }
89 }
90 .list.passkeys {
91 & .c-name { width: auto; font-weight: 600; }
92 & .c-when { width: 120px; font-size: var(--fs-s); }
93 & .c-sync { width: 80px; font-size: var(--fs-s); }
94 & .c-act { width: 110px; text-align: right; }
95 }
96 .passkey-add {
97 display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4);
98 & input {
99 flex: 1; min-width: 12ch; max-width: 320px; height: 32px; padding: 0 var(--s3);
100 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
101 }
102 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
103 & input::placeholder { color: var(--ink-mute); opacity: 1; }
104 }
105 .list.commits, .list.refs {
106 & .c-sha { width: 96px; }
107 & .c-who { width: 140px; }
108 & .c-when { width: 100px; }
109 }
110
111 /* filter: a search field above a list */
112 .filter {
113 position: relative; display: flex; max-width: 420px;
114 &::before {
115 content: ""; position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; pointer-events: none;
116 background: var(--ink-mute); mask: url(icons/search.svg) center / contain no-repeat;
117 }
118 &::after {
119 content: "/"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
120 font: 600 var(--fs-xs) / 18px var(--mono); color: var(--ink-mute); padding: 0 6px;
121 border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; pointer-events: none;
122 }
123 & input {
124 flex: 1; min-width: 0; height: 36px; padding: 0 36px 0 34px;
125 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
126 }
127 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
128 & input::placeholder { color: var(--ink-mute); opacity: 1; }
129 &:focus-within::after { display: none; }
130 }
131
132 /* file finder: the results replace the tree while the field has a query */
133 #finder {
134 & #finder-status { padding: var(--s3) var(--s4) var(--s2); font-size: var(--fs-s); }
135 & #finder-list { padding: 0 var(--s2) var(--s2); }
136 }
137
138 /* the Files view: the finder on top, the tree in a card under it */
139 .tree-find {
140 display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3);
141 & .filter { flex: 1; max-width: none; }
142 & .filter::before { top: 14px; left: 14px; }
143 & .filter::after { right: 12px; }
144 & .filter input { height: 44px; padding-left: 42px; font-size: var(--fs); background: var(--bg-surface); }
145 }
146 .tree-keys { flex: none; color: var(--ink-mute); font-size: var(--fs-xs); white-space: nowrap; }
147 .tree-card {
148 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
149 }
150 .tree-head {
151 display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s4);
152 background: var(--bg-raised); border-bottom: 1px solid var(--border); font-size: var(--fs-s);
153 & .tree-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-hi); }
154 & .tree-up { flex: none; font: 600 var(--fs-s) / 1 var(--mono); color: var(--ink-dim); text-decoration: none; }
155 & .tree-up:hover { color: var(--ink-hi); text-decoration: underline; }
156 & .tree-count { flex: none; color: var(--ink-mute); }
157 }
158 .tree-card > :is(.lede, .note) { margin: var(--s3) var(--s4); }
159
160 /* The tree: one flat list, a row per entry, each as deep as --depth says
161 (files.js sets it on the rows it opens in place). A row draws, from the
162 left: a vertical guide per level above it, the branch tick to its node,
163 the node, its name; then size, last commit and date, which are secondary. */
164 ul.tree {
165 --indent: 22px; --rowh: 32px; --guide: var(--border-strong);
166 & > li {
167 display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.2fr) 96px; align-items: center;
168 min-height: var(--rowh); padding-right: var(--s4); font-size: var(--fs-s);
169 }
170 & > li:hover, & > li[data-cursor] { background: var(--bg-raised); }
171 & > li[data-cursor] { box-shadow: inset 3px 0 0 var(--ink-hi); }
172 & > li:focus-visible { outline-offset: -2px; border-radius: 0; }
173 & .t-main { display: flex; align-items: stretch; min-width: 0; min-height: var(--rowh); padding-left: var(--s3); }
174 & .t-twig {
175 flex: none; width: calc(var(--depth, 0) * var(--indent));
176 background: repeating-linear-gradient(90deg,
177 transparent 0 calc(var(--indent) / 2), var(--guide) calc(var(--indent) / 2) calc(var(--indent) / 2 + 1px),
178 transparent calc(var(--indent) / 2 + 1px) var(--indent));
179 }
180 & .t-node { position: relative; flex: none; width: var(--indent); }
181 & .t-node::before, & .t-node::after { content: ""; position: absolute; }
182 /* the branch tick, from the guide of the directory to this node */
183 & .t-node::before { top: 50%; left: calc(var(--indent) / -2); right: calc(50% + 6px); height: 1px; background: var(--guide); }
184 & > li[data-depth="0"] .t-node::before { display: none; }
185 /* an open directory continues its guide down, to its first entry */
186 & > li[aria-expanded="true"] .t-node {
187 background: linear-gradient(var(--guide), var(--guide)) center bottom / 1px calc(50% - 8px) no-repeat;
188 }
189 /* the node: a ring for a file, a chevron for a directory (it turns down
190 once open), a diamond for a link, a square for a submodule */
191 & .t-node::after {
192 top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px;
193 background: var(--bg-surface); border: 1px solid var(--ink-mute); border-radius: 50%;
194 }
195 & > li:hover .t-node::after, & > li[data-cursor] .t-node::after { background: var(--bg-raised); border-color: var(--ink-hi); }
196 & > li[data-kind="dir"] .t-node::after {
197 width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 0; border-radius: 0; background: var(--ink-dim);
198 mask: url(icons/chevron.svg) center / contain no-repeat; transform: rotate(-90deg);
199 }
200 & > li[data-kind="dir"][aria-expanded="true"] .t-node::after { transform: none; background: var(--ink-hi); }
201 & > li[data-kind="link"] .t-node::after { border-radius: 1px; transform: rotate(45deg); }
202 & > li[data-kind="module"] .t-node::after { border-radius: 1px; }
203 & > li[aria-busy="true"] .t-node { opacity: .4; }
204 & .t-name {
205 align-self: center; min-width: 0; padding: 4px var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
206 font-family: var(--mono); font-size: var(--fs); color: var(--ink); text-decoration: none; cursor: pointer;
207 }
208 & > li[data-kind="dir"] .t-name { font-weight: 700; color: var(--ink-hi); }
209 & > li[data-kind="link"] .t-name, & > li[data-kind="module"] .t-name { color: var(--ink-dim); cursor: default; }
210 & > li:hover .t-name, & > li[data-cursor] .t-name { text-decoration: underline; }
211 & .t-size { padding-right: var(--s4); text-align: right; font: var(--fs-xs) / 1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
212 & .t-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
213 & .t-sub a { color: inherit; text-decoration: none; }
214 & .t-sub a:hover { color: var(--ink-hi); text-decoration: underline; }
215 & .t-when { text-align: right; white-space: nowrap; color: var(--ink-mute); font-size: var(--fs-xs); }
216 & > li.tree-more { grid-template-columns: minmax(0, 1fr); }
217 & > li.tree-more .t-name { font-size: var(--fs-s); font-weight: 400; color: var(--ink-dim); text-decoration: underline; }
218 & > li.tree-more .t-node::after { display: none; }
219 }
220 @media (max-width: 900px) {
221 ul.tree > li { grid-template-columns: minmax(0, 1fr) 64px 80px; }
222 ul.tree .t-sub { display: none; }
223 }
224 @media (max-width: 720px) {
225 .tree-keys { display: none; }
226 ul.tree { --indent: 18px; }
227 ul.tree > li { grid-template-columns: minmax(0, 1fr) 72px; }
228 ul.tree .t-size { display: none; }
229 }
230
231 /* section headings inside a page */
232 .rule-h {
233 display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5);
234 font-size: var(--fs);
235 & > :first-child { color: var(--ink-hi); }
236 }
237 main > .rule-h:first-child { margin-top: 0; }
238
239 /* empty / 404 / error / sign in: one card in the middle */
240 .state {
241 max-width: 560px; margin: var(--s7) auto 0 !important; padding: var(--s6);
242 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
243 & .eyebrow { font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s2); }
244 & h1 { margin-bottom: var(--s3); }
245 & p.dim { color: var(--ink-dim); }
246 & .state-act { margin-top: var(--s5); }
247 & .state-back { margin-top: var(--s5); display: flex; gap: var(--s4); font-size: var(--fs-s); }
248 & .clone { margin-top: var(--s4); }
249 }
250
251 /* copyable shell lines */
252 .clone {
253 display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0;
254 & .clone-line {
255 min-width: 0;
256 display: flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s1) var(--s1) var(--s3);
257 background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
258 font-size: var(--fs-code);
259 }
260 & .clone-line > .mute { user-select: none; font-family: var(--mono); }
261 & code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; scrollbar-width: none; }
262 & .copy { height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); }
263 }
264}