1.explorer { display: flex; flex-direction: column; }
2.explorer > * { flex: none; }
3
4/* The chrome is spaced, not ruled: the pinned table header draws the one line between it and the list. */
5.explorer .bar { display: flex; align-items: center; gap: 6px; padding: 0 var(--gutter) 6px; min-height: 36px; }
6.crumbs { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; margin-left: -9px; color: var(--muted); font-size: 14px; }
7.crumbs a {
8 min-width: 0;
9 height: 30px;
10 padding: 0 9px;
11 overflow: hidden;
12 border-radius: var(--radius);
13 color: var(--text-2);
14 line-height: 30px;
15 white-space: nowrap;
16 text-overflow: ellipsis;
17 transition: background-color 150ms;
18}
19.crumbs svg { flex: none; }
20.crumbs a:hover { background: var(--hover); color: var(--text); }
21.crumbs a[aria-current] { color: var(--text); font-weight: 600; }
22.explorer .bar .total { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
23.explorer .bar .count { margin-right: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
24.explorer .bar .button.icon-only[aria-pressed="true"] { color: var(--accent); }
25
26.explorer .history {
27 inset: auto;
28 top: anchor(bottom);
29 right: anchor(right);
30 width: min(460px, calc(100vw - 32px));
31 max-height: min(360px, 60vh);
32 margin: 6px 0 0;
33 padding: 4px 0;
34 overflow: auto;
35 border: 1px solid var(--line);
36 border-radius: var(--radius-lg);
37 background: var(--surface);
38 color: var(--text);
39 box-shadow: 0 8px 28px #0005;
40 font-size: 13px;
41}
42.explorer .history:popover-open { animation: menu-in 200ms var(--ease-out); }
43.explorer .history .none { margin: 0; padding: 10px 14px; color: var(--muted); }
44.explorer .history .empty.failed { padding: 8px 14px; }
45.explorer .history .op { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; min-height: 32px; padding: 0 8px 0 14px; }
46.explorer .history .op:hover { background: var(--hover); }
47.explorer .history .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
48.explorer .history .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
49.explorer .history .undone { color: var(--muted); font-size: 12px; text-align: center; }
50.explorer .history .button { justify-self: stretch; }
51
52.explorer .map-slot { padding: 0 var(--gutter) 8px; }
53.explorer .folder-map { position: relative; height: clamp(120px, 22vh, 220px); }
54.explorer .folder-map.empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; border-radius: var(--radius); background: var(--well); }
55.explorer .folder-map .cell {
56 position: absolute;
57 overflow: hidden;
58 display: flex;
59 flex-direction: column;
60 padding: 4px 6px;
61 border: 1px solid var(--page);
62 border-radius: var(--radius);
63 background: color-mix(in srgb, var(--kind) 42%, var(--page));
64 font-size: 12px;
65 line-height: 1.3;
66 transition: background-color 150ms;
67}
68.explorer .folder-map .cell.dir { cursor: pointer; }
69.explorer .folder-map .cell.rest { background: repeating-linear-gradient(135deg, var(--raised) 0 4px, var(--page) 4px 8px); }
70.explorer .folder-map .cell.hover:not(.rest) { background: color-mix(in srgb, var(--kind) 62%, var(--page)); }
71.explorer .folder-map .cell.cursor { box-shadow: inset 0 0 0 2px var(--text); }
72.explorer .folder-map .cell > span { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
73.explorer .folder-map .name { color: var(--text); font-weight: 550; }
74.explorer .folder-map .size { color: var(--text-2); font-variant-numeric: tabular-nums; }
75
76.explorer .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 var(--gutter) 8px; font-size: 13px; white-space: nowrap; }
77.explorer .toolbar .clip { display: flex; align-items: center; gap: 4px; }
78.explorer .toolbar .matched { font-variant-numeric: tabular-nums; margin-right: 4px; }
79.explorer .toolbar .error { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
80.explorer .toolbar .pattern { flex: 0 1 240px; min-width: 132px; gap: 6px; }
81.explorer .toolbar .pattern input { font: 12px var(--mono); }
82.explorer .toolbar .pattern.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-wash); }
83.explorer .toolbar .pattern .clear { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted); cursor: pointer; }
84.explorer .toolbar .pattern .clear:hover { background: var(--hover); color: var(--text); }
85
86.explorer .files-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }
87.explorer .files-skeleton { display: grid; gap: 14px; padding: 36px var(--gutter) 12px calc(var(--gutter) + 24px); }
88
89.explorer table.files { user-select: none; outline: none; }
90.explorer table.files th {
91 position: sticky;
92 top: 0;
93 z-index: 1;
94 height: 28px;
95 padding: 0 8px;
96 border-bottom: 0;
97 box-shadow: inset 0 -1px var(--line);
98 background: var(--page);
99}
100.explorer table.files .num { width: 1%; }
101.explorer table.files tr > :first-child { padding-left: var(--gutter); }
102.explorer table.files tr > :last-child { padding-right: var(--gutter); }
103.explorer table.files td { padding: 0 8px; height: 26px; border-bottom: 0; color: var(--text-2); }
104/* Lets the name column shrink below its text, so long names ellipsize instead of widening the table. */
105.explorer table.files td:first-child { max-width: 0; }
106.explorer table.files .name {
107 display: flex;
108 align-items: center;
109 gap: 6px;
110 padding-left: calc(var(--depth, 0) * 20px);
111 color: var(--text);
112 min-width: 0;
113}
114.explorer table.files .twisty {
115 display: grid;
116 place-items: center;
117 flex: none;
118 width: 18px;
119 height: 22px;
120 margin-left: -4px;
121 padding: 0;
122 border: 0;
123 border-radius: 4px;
124 background: none;
125 color: var(--muted);
126 cursor: pointer;
127}
128.explorer table.files .twisty:hover { background: var(--hover); color: var(--text); }
129.explorer table.files .twisty svg { transition: transform 150ms; }
130.explorer table.files .twisty.open svg { transform: rotate(90deg); }
131.explorer table.files .twisty[aria-busy="true"] svg { opacity: 0.4; }
132.explorer table.files tr.up td { color: var(--muted); cursor: pointer; }
133.explorer table.files tr.up .name { color: var(--text-2); }
134.explorer table.files tr.up:hover .name { color: var(--text); }
135.explorer table.files tr.empty-row td { height: 64px; color: var(--muted); text-align: center; }
136.explorer table.files tr.empty-row:hover { background: none; }
137.explorer table.files tr.cut .name > :not(.twisty) { opacity: 0.45; }
138.explorer table.files .name .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
139.explorer table.files .icon { width: 15px; height: 15px; flex: none; }
140.explorer table.files tbody tr { cursor: default; }
141.explorer table.files tbody tr:hover { background: var(--hover); }
142.explorer table.files tbody tr.selected { background: var(--accent-wash); }
143.explorer table.files tbody tr.cursor td:first-child { box-shadow: inset 2px 0 var(--accent); }
144.explorer table.files:focus-visible tbody tr.cursor { outline: 2px solid var(--focus); outline-offset: -2px; }
145.explorer table.files .rename { flex: 1; height: 22px; padding: 0 6px; }
146.explorer table.files.lens tbody tr:not(.hit, .up) { opacity: 0.4; }
147.explorer table.files .badge {
148 flex: none;
149 padding: 0 6px;
150 border-radius: 5px;
151 background: var(--accent-wash);
152 color: var(--accent);
153 font-size: 11.5px;
154 line-height: 18px;
155 font-variant-numeric: tabular-nums;
156}
157
158.explorer table.files tbody tr.hover { background: var(--hover); }
159.explorer table.files .kind { display: grid; flex: none; }
160
161.explorer .legend {
162 display: flex;
163 flex-wrap: wrap;
164 gap: 4px 14px;
165 padding: 8px var(--gutter);
166 color: var(--muted);
167 font-size: 12px;
168}
169.explorer .legend span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
170.explorer .legend kbd { margin-right: 2px; }
171
172.dialog .match-list {
173 list-style: none;
174 margin: 0 0 8px;
175 padding: 6px 8px;
176 max-height: 180px;
177 overflow: auto;
178 background: var(--well);
179 border: 1px solid var(--line);
180 border-radius: var(--radius);
181 font-size: 12px;
182 line-height: 1.6;
183}
184.dialog .match-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
185.dialog .match-list .more { color: var(--muted); font-family: var(--sans); }
186.dialog .description:has(.match-list) { min-width: 0; }
187.dialog .description:has(.match-list) p { margin: 0; }
188
189.dialog:has(.bulk-rename) { width: min(640px, calc(100% - 32px)); }
190.bulk-rename { display: grid; gap: 12px; }
191.bulk-rename .segmented { justify-self: start; }
192.bulk-rename .row.format { grid-auto-flow: row; grid-template-columns: 1fr 96px; row-gap: 6px; }
193.bulk-rename .row.format .hint { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
194.bulk-rename .preview { max-height: 240px; overflow: auto; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius); }
195.bulk-rename .preview table { font-size: 12px; }
196.bulk-rename .preview td { height: 24px; padding: 0 8px; border-bottom: 0; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
197.bulk-rename .preview td:first-child { color: var(--text-2); }
198.bulk-rename .preview td.arrow { width: 1%; padding: 0; color: var(--muted); }
199.bulk-rename .preview tr.same td:last-child { color: var(--muted); font-family: var(--sans); }
200.bulk-rename .preview tr.clash td:last-child { color: var(--critical); }
201
202.dialog:has(.peek) { width: min(720px, calc(100% - 32px)); }
203.dialog .peek {
204 max-height: 55vh;
205 margin: 0 0 6px;
206 padding: 8px 10px;
207 overflow: auto;
208 background: var(--well);
209 border: 1px solid var(--line);
210 border-radius: var(--radius);
211 color: var(--text);
212 font: 12px/1.5 var(--mono);
213 white-space: pre-wrap;
214 overflow-wrap: anywhere;
215}