Nice little directory browser :D
1/*
2 This file is part of Utatane.
3
4 Utatane is free software: you can redistribute it and/or modify it under the
5 terms of the GNU Affero General Public License as published by the Free
6 Software Foundation, either version 3 of the License, or (at your option)
7 any later version.
8
9 Utatane is distributed in the hope that it will be useful, but WITHOUT ANY
10 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
11 FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
12 more details.
13
14 You should have received a copy of the GNU Affero General Public License
15 along with Utatane. If not, see <http://www.gnu.org/licenses/>.
16*/
17
18/*
19 i dont like prettier
20 REQUIRED tailwindcss >= v4.1.15 (https://github.com/tailwindlabs/tailwindcss/issues/19127)
21 Tailwind Sort Order:
22 display:
23 table-*, flex-*
24 align-*, justify-*, gap-*, grow-*
25 position:
26 static, fixed, absolute, relative, sticky
27 top-*, left-*, bottom-*, right-*
28 z-*
29 size:
30 w-*, h-*
31 background:
32 bg-*
33 from-*, to-*
34 text:
35 text-*, font-*, leading-*, decoration-*, sr-only, whitespace-*
36 spacing:
37 m.-*, p.-*
38 border:
39 border-*, rounded-*
40 overflow:
41 overflow-*
42 cursor:
43 cursor-*, pointer-events-*, select-*
44 filter:
45 filter-*, drop-shadow-*, opacity-*
46 animation:
47 transition-*, duration-*, animate-*
48*/
49
50@import "tailwindcss" source(none);
51@import "../public/font/IBMPlexMono-Regular/IBMPlexMono-Regular.css";
52@import "../public/font/IBMPlexSansJP-Regular/IBMPlexSansJP-Regular.css";
53@import "../public/font/IBMPlexSansJP-Bold/IBMPlexSansJP-Bold.css";
54
55@source "../**/*.{razor,cs,html,css,md}";
56@source not "../public";
57
58@source inline("hidden");
59@source inline("invisible");
60@source inline("opacity-0");
61
62@theme {
63 --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
64 Consolas, "Liberation Mono", "Courier New", monospace,
65 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
66 "Noto Color Emoji";
67 --font-sans: "IBM Plex Sans JP", ui-sans-serif, system-ui, sans-serif,
68 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
69 "Noto Color Emoji";
70}
71
72body {
73 @apply
74 bg-linear-to-b bg-fixed
75 from-green-100 to-green-300
76 dark:from-sky-800 dark:to-sky-950
77 text-black leading-[1.65]
78 dark:text-white
79 font-sans;
80}
81
82body * {
83 @apply transition-colors duration-100;
84}
85
86a:not(td > a):not(.clickable) {
87 /* all links except those in a table since they get colored from td */
88 &:hover {
89 /* like https://phk.freebsd.dk/ */
90 @apply bg-blue-400/15;
91 }
92
93 @apply text-blue-500 underline;
94}
95
96hr {
97 @apply
98 text-zinc-400
99 my-4;
100}
101
102#main {
103 @apply h-fit;
104}
105
106.n-box {
107 @apply
108 w-[min(80%,_var(--container-6xl))]
109 max-md:w-full
110 bg-white
111 dark:bg-zinc-600
112 flex flex-col
113 mx-auto my-8 p-4
114 border border-solid border-black rounded-sm
115 drop-shadow-xl;
116
117 /* subsequent `n-box`es have their bottom margin shrunk */
118 &:has(+ .n-box) {
119 @apply mb-2;
120 }
121
122 &:has(> #main) {
123 @apply max-md:!px-0;
124 }
125}
126
127.m-box {
128 @apply
129 bg-white
130 dark:bg-zinc-600
131 m-2 p-2
132 border border-solid border-black rounded-sm
133 drop-shadow-2xl;
134}
135
136.clickable {
137 @apply
138 bg-gray-100
139 dark:bg-zinc-500
140 no-underline
141 px-[0.5ch]
142 border border-solid border-black rounded-sm;
143
144 &:hover {
145 @apply bg-gray-200 dark:bg-zinc-400;
146 }
147
148 &:disabled, &[aria-disabled="true"] {
149 @apply
150 text-stone-400
151 border-stone-400
152 pointer-events-none;
153 }
154}
155
156/*
157rows have no spacing between them, so when hovering on an even row it made
158this weird looking sequence of rounded corners. this makes it so when those
159even rows are hovered, the corners of the previous and next rows are squared
160*/
161tr {
162 /* the <td> of an odd <tr> whose next sibling <tr> is :hover-ed */
163 &:nth-child(odd of :not(.hidden)):has(+ tr:hover) td {
164 @apply rounded-b-none;
165 }
166
167 /* the <td> of even <tr>s who are :hover-ed */
168 &:nth-child(even of :not(.hidden)):hover td {
169 @apply rounded-none;
170 }
171
172 /* the <td> of the next odd sibling <tr> of a :hover-ed <tr> */
173 &:hover + tr:nth-child(odd of :not(.hidden)) td {
174 @apply rounded-t-none;
175 }
176}
177
178tr:nth-child(odd of :not(.hidden)) {
179 & td {
180 @apply bg-green-100 dark:bg-zinc-500;
181 }
182
183 &:hover td {
184 @apply bg-green-200/75 dark:bg-zinc-400/75;
185 }
186}
187
188tr td {
189 @apply
190 bg-transparent
191 duration-200;
192}
193
194tr:hover td {
195 @apply
196 bg-green-100/50 dark:bg-zinc-500/75
197 duration-0;
198}
199
200td, th {
201 @apply
202 bg-clip-padding
203 overflow-hidden;
204}
205
206td {
207 @apply whitespace-nowrap;
208
209 /* left-most <td> */
210 &:first-child {
211 @apply rounded-l-sm;
212 }
213
214 /* right-most <td> */
215 &:last-child {
216 @apply rounded-r-sm;
217 }
218}
219
220.fsobject > abbr {
221 @apply mx-[0.5ch];
222}
223
224abbr {
225 @apply
226 no-underline
227 cursor-help;
228}
229
230th {
231 @apply
232 top-0
233 bg-white
234 p-[6px]
235 cursor-pointer;
236
237 & div {
238 @apply flex justify-center gap-[1ch];
239
240 &::before {
241 @apply
242 content-center
243 text-gray-500
244 dark:text-gray-300
245 text-[xx-small];
246 }
247 }
248}
249
250th {
251 &[aria-sort="ascending"] {
252 & div::before {
253 content: "▲";
254 }
255
256 &#filetable-head-name div::before {
257 content: "A→Z";
258 }
259
260 &#filetable-head-size div::before {
261 content: "0→9";
262 }
263
264 &#filetable-head-time div::before {
265 content: "0→9";
266 }
267 }
268
269 &[aria-sort="descending"] {
270 & div::before {
271 content: "▼";
272 }
273
274 &#filetable-head-name div::before {
275 content: "Z→A";
276 }
277
278 &#filetable-head-size div::before {
279 content: "9→0";
280 }
281
282 &#filetable-head-time div::before {
283 content: "9→0";
284 }
285 }
286}
287
288#breadcrumbs {
289 @apply
290 flex gap-[1ch];
291
292 & > a {
293 white-space: nowrap;
294 overflow: hidden;
295 }
296
297 & > span {
298 @apply my-auto mx-[0.1ch];
299 }
300}
301
302#toolbar {
303 @apply
304 flex justify-stretch gap-[2ch]
305 max-md:gap-[1ch]
306 whitespace-nowrap
307 mt-4;
308
309 #go-back {
310 @apply cursor-pointer;
311 }
312
313 #search-label {
314 @apply
315 my-auto ms-[0.5ch] cursor-default!
316 max-md:hidden;
317 }
318}
319
320#rx-label, #case-label {
321 @apply my-auto ms-[0ch] font-mono cursor-default!
322}
323
324#use-rx-for-search {
325 transform: scale(1.2);
326}
327
328#search {
329 @apply
330 grow
331 w-full
332 px-[0.5ch]
333 border border-solid rounded-sm;
334}
335
336#redirect-notice code {
337 @apply
338 bg-green-100
339 dark:bg-zinc-500
340 px-2
341 rounded-sm
342 whitespace-nowrap
343 select-all;
344}
345
346#filetable {
347 @apply
348 w-full
349 table-fixed;
350
351 s, .dotfile {
352 @apply text-current/40;
353 }
354
355 & th {
356 @apply
357 sticky
358 bg-white
359 dark:bg-zinc-600
360 z-999;
361 }
362
363 & th {
364 @apply text-center;
365
366 /*&#filetable-head-dl {
367 @apply w-[2.25ch];
368 }*/
369
370 &#filetable-head-icon {
371 @apply w-[3ch];
372 }
373
374 /* implicitly take up the rest of available width */
375 &#filetable-head-name {
376 }
377
378 &#filetable-head-size {
379 @apply w-[10ch];
380 }
381
382 &#filetable-head-time {
383 @apply w-[15.25ch];
384 }
385 }
386}
387
388.file-icon {
389 @apply px-2;
390}
391
392.file-name {
393 text-indent: 4ch md:hanging;
394
395 overflow:unset;
396 white-space: normal;
397
398 @apply font-mono;
399
400 & a {
401 @apply
402 inline-block
403 py-0;
404 }
405}
406
407.dir-slash {
408 @apply
409 text-gray-400
410 cursor-pointer! select-none;
411}
412
413.visually-hidden {
414 @apply sr-only;
415}
416
417#readme {
418 @apply max-w-full;
419}
420
421.dir-indicator {
422 @apply
423 font-bold
424 pe-[1ch];
425}
426
427.htmx-indicator {
428 @apply opacity-100!
429}
430
431.htmx-request tr {
432 @apply animate-pulse;
433}
434
435@keyframes yt-spinner {
436 0% {
437 transform: translate(-50%, -50%) rotate(0deg);
438 }
439
440 100% {
441 transform: translate(-50%, -50%) rotate(360deg);
442 }
443}
444
445.htmx-request {
446 &#filetable-head-time,
447 &#filetable-head-size,
448 &#filetable-head-name {
449 @apply text-current/25;
450 }
451}
452
453.spinner {
454 @apply
455 hidden
456 absolute left-1/2 top-1/2
457 align-middle
458 bg-[auto_100%] bg-no-repeat
459 [background-image:_url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjIiIGZpbGw9IiNmZmZmZmYiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIzLjc2IiBjeT0iMy43NiIgZmlsbD0iI2UwZTBlMCIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjIiIGN5PSI4IiBmaWxsPSIjYzBjMGMwIiByPSIyIi8+CiAgPGNpcmNsZSBjeD0iMy43NiIgY3k9IjEyLjI0IiBmaWxsPSIjYTBhMGEwIiByPSIyIi8+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjE0IiBmaWxsPSIjODA4MDgwIiByPSIyIi8+CiAgPGNpcmNsZSBjeD0iMTIuMjQiIGN5PSIxMi4yNCIgZmlsbD0iIzYwNjA2MCIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjE0IiBjeT0iOCIgZmlsbD0iIzQwNDA0MCIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjEyLjI0IiBjeT0iMy43NiIgZmlsbD0iIzIwMjAyMCIgcj0iMiIvPgo8L3N2Zz4=")]
460 dark:![background-image:_url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjIiIGZpbGw9IiNmZmZmZmZmZiIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjMuNzYiIGN5PSIzLjc2IiBmaWxsPSIjZmZmZmZmZTAiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIyIiBjeT0iOCIgZmlsbD0iI2ZmZmZmZmMwIiByPSIyIi8+CiAgPGNpcmNsZSBjeD0iMy43NiIgY3k9IjEyLjI0IiBmaWxsPSIjZmZmZmZmYTAiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iMTQiIGZpbGw9IiNmZmZmZmY4MCIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjEyLjI0IiBjeT0iMTIuMjQiIGZpbGw9IiNmZmZmZmY2MCIgcj0iMiIvPgogIDxjaXJjbGUgY3g9IjE0IiBjeT0iOCIgZmlsbD0iI2ZmZmZmZjQwIiByPSIyIi8+CiAgPGNpcmNsZSBjeD0iMTIuMjQiIGN5PSIzLjc2IiBmaWxsPSIjZmZmZmZmMjAiIHI9IjIiLz4KPC9zdmc+")]
461 p-[0.6rem]
462 filter-[drop-shadow(0px_0px_4px_#a0a0a0)]
463 dark:[filter:_none];
464
465 animation: yt-spinner 0.75s steps(8, end) infinite;
466}
467
468.spinner.htmx-request {
469 @apply block;
470}
471
472.header-label {
473 @apply relative inline-block;
474}