30-list.css RawHistoryFolder

1@layer components {
2  /* plain-text tables with a ▸ row cursor */
3  .list {
4    width: 100%; table-layout: fixed;
5    & th { color: var(--ink-mute); font-weight: normal; white-space: nowrap; border-bottom: 1px solid var(--rule); }
6    & th a { text-decoration: none; }
7    & th a:hover { text-decoration: underline; color: var(--ink); }
8    & th[aria-sort="ascending"], & th[aria-sort="descending"] { color: var(--ink); font-weight: bold; }
9    & td, & th { padding-right: 2ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
10    & .cur { width: 2ch; padding: 0; }
11    & tbody tr[data-cursor] { background: var(--row); }
12    & tbody tr[data-cursor] .cur::before { content: "▸"; font-weight: bold; }
13    & tbody tr:hover { background: var(--row); }
14    & tbody tr[hidden] { display: none; }
15    & td > a { text-decoration: none; }
16    & tr:hover td > a:first-child, & tr[data-cursor] td > a:first-child { text-decoration: underline; }
17    & .c-sub { color: var(--ink-dim); }
18    & .c-sub .refs { color: var(--ink); }
19  }
20
21  .home {
22    & .c-name { width: 24ch; font-weight: bold; }
23    & th.c-name { font-weight: normal; }
24    & th.c-name[aria-sort] { font-weight: bold; }
25    & .c-desc { width: auto; }
26    & .c-when { width: 13ch; }
27    & .c-ref { width: 10ch; }
28    & .c-lang { width: 12ch; padding-right: 0; }
29  }
30  .list.tree {
31    & .c-kind { width: 2ch; color: var(--ink-mute); padding-right: 0; }
32    & .c-name { width: 34ch; }
33    & .c-size { width: 9ch; text-align: right; padding-right: 3ch; }
34    & .c-when { width: 11ch; }
35    & .c-sub { width: auto; }
36    & .c-who { width: 12ch; }
37  }
38  .list.commits, .list.refs {
39    & .c-sha { width: 8ch; }
40    & .c-who { width: 12ch; }
41    & .c-when { width: 11ch; }
42  }
43
44  /* filter line (home, tree, commits) */
45  .filter {
46    display: flex; gap: 1ch; height: var(--lh); margin: var(--lh) 0 0;
47    & label { color: var(--ink-mute); }
48    & input { flex: 1; min-width: 0; }
49    & input::placeholder { color: var(--ink-mute); opacity: 1; }
50  }
51
52  /* headings inside pages read as pager section rules */
53  .rule-h {
54    display: flex; gap: 1ch; margin: var(--lh) 0 0; color: var(--ink-dim);
55    &::after { content: ""; flex: 1; align-self: center; border-top: 1px solid var(--rule); }
56    & > :first-child { font-weight: bold; color: var(--ink); }
57  }
58
59  /* empty / 404 / error */
60  .state {
61    margin-top: var(--lh); max-width: var(--measure);
62    & h1 { margin-bottom: var(--lh); }
63    & .code { display: inline-block; min-width: 6ch; }
64    & .state-back { margin-top: var(--lh); display: flex; gap: 2ch; }
65    & .state-act { margin-top: var(--lh); }
66    & .state-act button { color: var(--ink-hi); font-weight: bold; }
67    & .state-act button:hover { text-decoration: underline; }
68  }
69  .clone {
70    margin: var(--lh) 0 0; border: 1px solid var(--rule); padding: 0 1ch;
71    & .clone-line { display: flex; gap: 1ch; align-items: baseline; }
72    & code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; }
73    & .copy { color: var(--ink-dim); white-space: nowrap; min-width: 9ch; text-align: right; }
74    & .copy:hover { color: var(--ink); text-decoration: underline; }
75  }
76}