30-list.css RawHistoryFolder
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 {
32 & .c-name { width: 26%; font-family: var(--mono); font-weight: 700; }
33 & th.c-name { font-family: var(--font); }
34 & .c-desc { width: auto; }
35 & .c-when { width: 130px; }
36 & .c-ref { width: 120px; }
37 & .c-lang { width: 120px; }
38 }
39 .list.tree {
40 & .c-kind { width: 36px; color: var(--ink-mute); padding-right: 0; text-align: center; }
41 /* --depth is set by files.js on the rows opened in place */
42 & .c-name { width: 32%; font-family: var(--mono); font-size: var(--fs-s); padding-inline-start: calc(var(--s3) + var(--depth, 0) * 1.25ch); }
43 & tr[aria-busy=true] .c-kind { opacity: .4; }
44 & .tree-more td { padding-inline-start: calc(var(--s3) + 36px + var(--depth, 0) * 1.25ch); color: var(--ink-dim); font-size: var(--fs-s); }
45 & .c-size { width: 90px; text-align: right; }
46 & .c-when { width: 100px; }
47 & .c-sub { width: auto; }
48 & .c-who { width: 130px; }
49 }
50 .list.passkeys {
51 & .c-name { width: auto; font-weight: 600; }
52 & .c-when { width: 120px; font-size: var(--fs-s); }
53 & .c-sync { width: 80px; font-size: var(--fs-s); }
54 & .c-act { width: 110px; text-align: right; }
55 }
56 .passkey-add {
57 display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4);
58 & input {
59 flex: 1; min-width: 12ch; max-width: 320px; height: 32px; padding: 0 var(--s3);
60 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
61 }
62 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
63 & input::placeholder { color: var(--ink-mute); opacity: 1; }
64 }
65 .list.commits, .list.refs {
66 & .c-sha { width: 96px; }
67 & .c-who { width: 140px; }
68 & .c-when { width: 100px; }
69 }
70
71 /* filter: a search field above a list */
72 .filter {
73 position: relative; display: flex; max-width: 420px;
74 &::before {
75 content: ""; position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; pointer-events: none;
76 background: var(--ink-mute); mask: url(icons/search.svg) center / contain no-repeat;
77 }
78 &::after {
79 content: "/"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
80 font: 600 var(--fs-xs) / 18px var(--mono); color: var(--ink-mute); padding: 0 6px;
81 border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; pointer-events: none;
82 }
83 & input {
84 flex: 1; min-width: 0; height: 36px; padding: 0 36px 0 34px;
85 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
86 }
87 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
88 & input::placeholder { color: var(--ink-mute); opacity: 1; }
89 &:focus-within::after { display: none; }
90 }
91
92 /* file finder: the results replace the tree while the field has a query */
93 #finder {
94 margin-top: var(--s3);
95 & #finder-status { margin-bottom: var(--s2); font-size: var(--fs-s); }
96 }
97
98 /* section headings inside a page */
99 .rule-h {
100 display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5);
101 font-size: var(--fs);
102 & > :first-child { color: var(--ink-hi); }
103 }
104 main > .rule-h:first-child { margin-top: 0; }
105
106 /* empty / 404 / error / sign in: one card in the middle */
107 .state {
108 max-width: 560px; margin: var(--s7) auto 0 !important; padding: var(--s6);
109 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
110 & .eyebrow { font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s2); }
111 & h1 { margin-bottom: var(--s3); }
112 & p.dim { color: var(--ink-dim); }
113 & .state-act { margin-top: var(--s5); }
114 & .state-back { margin-top: var(--s5); display: flex; gap: var(--s4); font-size: var(--fs-s); }
115 & .clone { margin-top: var(--s4); }
116 }
117
118 /* copyable shell lines */
119 .clone {
120 display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0;
121 & .clone-line {
122 min-width: 0;
123 display: flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s1) var(--s1) var(--s3);
124 background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
125 font-size: var(--fs-code);
126 }
127 & .clone-line > .mute { user-select: none; font-family: var(--mono); }
128 & code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; scrollbar-width: none; }
129 & .copy { height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); }
130 }
131}