Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/trash.css

4.6 KiB, 1 run

created by r2519314175:1137, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* trash.css — the Trash panel, and the one line the shared tile component
2 needed in order to take a third caller.
3
4 `.arte-row` is the tile the crystal footer, the chat footer and this panel
5 all draw (ATTACH_CONTRACT.md §9). Its "cannot be opened" state, `shut`, and
6 the reason it draws in `.arte-why` are app.css's and are used here unchanged
7 -- this file adds only what an attachment has no use for.
8
9 Written after a rebase onto seq 110, which generalised the same tile from the
10 other side: the two views, the cap, the `+`. Both halves are one component,
11 which is what §9 asked for in advance. */
12
13/* The FACTS about the item, under the reason: the day it stops existing and
14 what it weighs. Laid out exactly as `.arte-why` is -- a full-width line at
15 the foot of a wrapping row, indented past the kind badge -- because they are
16 the same kind of thing, a line the tile is too narrow to carry inline, and
17 two different layouts for that would drift. One order later, so the reason
18 comes first: why you cannot open it, then what keeping it costs.
19
20 IT WRAPS. The first screenshot of the finished panel, before the rebase, had
21 this line ellipsised to "Deleted -- it is only here. · Un…" in a dock column:
22 the date and the size, which are the whole reason it exists, cut off. A label
23 may be shortened, because its full text is in its `title` and the user chose
24 the name. A fact the user is meant to act on may not. */
25.arte-note { flex-basis: 100%; order: 10; padding: 0 0 3px 40px;
26 font-size: var(--fs-3xs-2xs); color: var(--text-muted); line-height: 1.4;
27 white-space: normal; overflow-wrap: anywhere; }
28/* An icon cell has no room for a sentence, and app.css already answers the
29 reason there with a `?`; a date and a size are no different. */
30.attach-icon .arte-note { display: none; }
31
32/* ── The panel ──────────────────────────────────────────────── */
33
34/* The head's controls, in a row. Without this they stack into a vertical
35 column down the right of the heading — which is what the first screenshot of
36 the finished panel showed, the three buttons one above the other and the
37 count pushed off on its own line. The other panels each declare the same
38 thing for their own action group; see `.mail-actions`, `.spend-actions`. */
39.trash-actions { display: flex; align-items: center; gap: 4px; }
40
41/* What the trash is holding, and for how long. It sits under the head and
42 above the list, where a person reading the panel meets it before the tiles
43 rather than after them. */
44.trash-note { padding: 6px 10px; font-size: var(--fs-xs); color: var(--text-secondary);
45 border-bottom: 1px solid var(--border); }
46
47.trash-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0;
48 border: none; border-radius: 0; background: none; }
49.trash-list .rail-note { padding: 12px 10px; }
50
51/* Restore is the affirmative act on a tile whose other button destroys, so it
52 is a word rather than a glyph and it is the one that looks pressable.
53
54 `--border-strong`, the CONTROL boundary, not `--border-2`, which divides one
55 region from another -- the rule `verify_theme` keeps, and whose named failure
56 is "a new control written by copying an old one". This was copied from
57 `.attach-state` beside it, which is exactly that. */
58.trash-restore { flex-shrink: 0; background: none; border: 1px solid var(--border-strong);
59 border-radius: 999px; cursor: pointer; color: var(--text-secondary);
60 font-size: var(--fs-3xs-2xs); line-height: 1.6; padding: 0 8px; }
61.trash-restore:hover { border-color: var(--accent); color: var(--accent-text); }
62/* Keep as a Diamond, on a trashed CHAT only. Identical to Restore rather than
63 louder: they are two honest answers to the same question, and a chat arriving
64 here on its own now means this panel is where somebody meets a conversation
65 they had forgotten. Making one of the two shout would be the panel guessing
66 which they meant. Same `--border-strong` control boundary, per verify_theme. */
67.trash-keep { flex-shrink: 0; background: none; border: 1px solid var(--border-strong);
68 border-radius: 999px; cursor: pointer; color: var(--text-secondary);
69 font-size: var(--fs-3xs-2xs); line-height: 1.6; padding: 0 8px; }
70.trash-keep:hover { border-color: var(--accent); color: var(--accent-text); }
71.trash-purge:hover { color: var(--danger, #e5534b); }
72
73/* Emptying the trash is the one control in this panel's head that destroys, so
74 it is the one that carries the colour. */
75.trash-actions .addbtn.danger:hover { color: var(--danger, #e5534b); }