Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/tools.css

6.0 KiB, 1 run

created by r2519314175:1133, 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/* tools.css — the Tools panel: what Daimond can do for you, and what more it could.
2 *
3 * One card shape for every capability, whether it is included, owned or for sale. The
4 * shelf is a section inside Tools, not a different room — a thing you have and a thing
5 * you could have are the same kind of thing, and the only difference is the button.
6 *
7 * The card is two layers on purpose. The head is written for a person and is the only
8 * part most readers will ever look at; the disclosure below it holds the individual
9 * functions, in the mono face that says plainly "this is a name for the machine". Those
10 * are the only monospace glyphs on the panel, so opening a card looks like opening a
11 * lid. */
12
13.tools-body {
14 flex: 1; min-height: 0; overflow-y: auto;
15 padding: 12px 14px 18px;
16 display: flex; flex-direction: column; gap: 8px;
17}
18/* A column flex item shrinks by default, and this column always overflows: the panel is
19 a scroller. Without this every card was squeezed to fit the viewport and the blurbs
20 were cut off mid-sentence with the disclosure button pushed out of existence — the
21 whole redesign invisible, on a rule nothing on the panel had written. */
22.tools-body > * { flex: 0 0 auto; }
23
24.tools-intro {
25 font-size: var(--fs-sm); line-height: 1.55;
26 color: var(--text-secondary);
27}
28.tools-count {
29 font-size: var(--fs-xs-sm); line-height: 1.5;
30 color: var(--text-muted);
31 padding-bottom: 2px;
32}
33.tools-count b { color: var(--text-primary); font-weight: 600; }
34
35.tools-sec {
36 margin-top: 12px;
37 font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em;
38 color: var(--text-muted);
39}
40
41.tools-none {
42 font-size: var(--fs-xs-sm); line-height: 1.5;
43 color: var(--text-muted);
44 padding: 10px 12px;
45 border: 1px dashed var(--border);
46 border-radius: var(--radius);
47}
48
49/* ── One capability ─────────────────────────────────────────── */
50
51.cap {
52 display: flex; flex-direction: column;
53 background: var(--bg-tertiary);
54 border: 1px solid var(--border);
55 border-radius: var(--radius);
56 overflow: hidden;
57}
58/* A capability that is for sale is the one thing here asking for a decision, so it is
59 the one thing that is not the colour of the furniture. */
60.cap[data-state="locked"] { background: var(--bg-secondary); border-color: var(--border-2); }
61
62.cap-head {
63 /* Wrapping, not two fixed tracks. In a narrow stage seat an Unlock button is a
64 third of the width, and a two-track grid gave the sentence beside it four words
65 a line. Here the button drops to a line of its own the moment the text would be
66 squeezed below `240px`, and `margin-left: auto` keeps it right where it lands. */
67 display: flex; flex-wrap: wrap;
68 align-items: flex-start;
69 gap: 8px 12px;
70 padding: 11px 12px;
71}
72
73/* `min-width: 0` because a flex item's automatic minimum is its MIN-CONTENT, and one
74 long unbreakable word would otherwise push the card's right border outside the panel
75 it lives in. */
76.cap-text { flex: 1 1 240px; min-width: 0; }
77.cap-name {
78 font-size: var(--fs-sm-base); font-weight: 600;
79 color: var(--text-primary);
80 overflow-wrap: break-word;
81}
82.cap-blurb {
83 margin-top: 3px;
84 font-size: var(--fs-xs-sm); line-height: 1.5;
85 color: var(--text-secondary);
86}
87/* Why a locked row is locked, said where the row is rather than in a tooltip: a
88 capability that simply reads "£25" tells the reader the price and not the position. */
89.cap-why {
90 margin-top: 5px;
91 font-size: var(--fs-xs); line-height: 1.45;
92 color: var(--accent-text);
93}
94
95.cap-side {
96 flex: 0 0 auto;
97 margin-left: auto;
98 display: flex; align-items: center;
99}
100.cap-chip {
101 font-size: var(--fs-2xs);
102 color: var(--text-muted);
103 white-space: nowrap;
104}
105.cap-chip.on { color: var(--ok); }
106
107.tools-buy {
108 background: var(--accent); color: var(--on-fill, #fff);
109 border: 1px solid var(--accent); border-radius: var(--radius-sm);
110 padding: 8px 14px; font-size: var(--fs-sm);
111 white-space: nowrap;
112}
113.tools-buy:hover { filter: brightness(1.08); }
114.tools-buy:disabled { opacity: 0.6; cursor: default; }
115
116/* ── The lid ────────────────────────────────────────────────── */
117
118.cap-more {
119 align-self: flex-start;
120 margin: 0 0 2px 8px;
121 padding: 4px 4px 8px;
122 background: none; border: 0;
123 font-size: var(--fs-2xs);
124 color: var(--text-muted);
125 cursor: pointer;
126 text-align: left;
127}
128.cap-more:hover { color: var(--text-secondary); }
129.cap-more::before {
130 content: '▸';
131 display: inline-block;
132 margin-right: 5px;
133 transition: transform 0.12s ease;
134}
135.cap-more[aria-expanded="true"]::before { transform: rotate(90deg); }
136
137.cap-fns {
138 border-top: 1px solid var(--border);
139 padding: 4px 12px 10px;
140 display: flex; flex-direction: column;
141}
142/* `display` beats `hidden`. The browser hides a `[hidden]` element with a UA rule of
143 `display: none`, and any author `display` at all — the `flex` above — outranks it. The
144 lid therefore did nothing at all: the functions sat open under every capability while
145 the button said "What it does (9)". A verifier that asked the CLASS rather than
146 `checkVisibility()` would have called that green. */
147.cap-fns[hidden] { display: none; }
148.cap-fn {
149 display: grid;
150 grid-template-columns: minmax(0, 1fr);
151 gap: 1px;
152 padding: 7px 0;
153 border-bottom: 1px solid var(--border);
154}
155.cap-fn:last-child { border-bottom: 0; }
156
157.cap-fn-name {
158 font-family: var(--font-mono);
159 font-size: var(--fs-xs-sm);
160 color: var(--text-primary);
161 /* `break-word`, not `anywhere`: it breaks only when the identifier alone will not
162 fit, so a name that does fit is never split for the sake of it. */
163 overflow-wrap: break-word;
164}
165.cap-fn-blurb {
166 font-size: var(--fs-xs); line-height: 1.45;
167 color: var(--text-secondary);
168}
169.cap-fn-pack {
170 font-size: var(--fs-2xs);
171 color: var(--accent-text);
172}
173
174.tools-fine {
175 font-size: var(--fs-xs); line-height: 1.5;
176 color: var(--text-muted);
177 padding: 2px 2px 0;
178}
179.tools-err {
180 font-size: var(--fs-xs); line-height: 1.45;
181 padding: 7px 9px; border-radius: var(--radius-sm);
182 color: var(--accent-text); background: var(--accent-soft);
183}