fuzzyworld

basin / files / src / style.css

style.css

Blame: the commit that last changed each line · file · history

9e605e0f 2026-06-30 Pavel Safronov1:root {
2 color-scheme: light dark;
3 font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
4}
5
6body {
7 margin: 0;
bfd86d6e 2026-07-01 Pavel Safronov8 display: flex;
9 justify-content: center;
10 align-items: flex-start;
9e605e0f 2026-06-30 Pavel Safronov11 min-height: 100vh;
12 background: #11151c;
13 color: #e7ecf3;
14}
15
16#app {
17 padding: 16px;
18 display: flex;
bfd86d6e 2026-07-01 Pavel Safronov19 flex-direction: row;
20 align-items: flex-start;
21 gap: 24px;
22 width: 100%;
23 min-width: 0;
24 max-width: 1100px;
25 box-sizing: border-box;
26}
27
28/* Controls live in a sidebar beside the board rather than stacked on top of it. */
29.panel {
30 flex: 0 0 300px;
31 width: 300px;
32 display: flex;
9e605e0f 2026-06-30 Pavel Safronov33 flex-direction: column;
34 gap: 12px;
bfd86d6e 2026-07-01 Pavel Safronov35 position: sticky;
36 top: 16px;
37}
38
39.board-area {
40 flex: 1 1 auto;
41 min-width: 0;
42 display: flex;
43 justify-content: center;
44 align-items: flex-start;
9e605e0f 2026-06-30 Pavel Safronov45}
46
47header {
48 display: flex;
49 align-items: center;
50 gap: 12px;
51 width: 100%;
52}
53
54.logo {
55 height: 34px;
56 width: 34px;
57 /* Asset is black line-art; invert so it reads on the dark header. */
58 filter: invert(1);
59}
60
61h1 {
62 margin: 0;
63 font-size: 1.6rem;
64}
65
66button {
67 padding: 6px 14px;
68 border: 0;
69 border-radius: 8px;
70 background: #2d6cdf;
71 color: white;
72 font-size: 0.95rem;
73 cursor: pointer;
74}
75
76button:hover {
77 background: #3b7bf0;
78}
79
a7bf123a 2026-07-01 Pavel Safronov80header button {
81 margin-left: auto;
82}
83
84.config {
85 display: flex;
bfd86d6e 2026-07-01 Pavel Safronov86 flex-direction: column;
87 align-items: stretch;
a7bf123a 2026-07-01 Pavel Safronov88 gap: 10px 16px;
89 width: 100%;
90 padding: 10px 12px;
91 box-sizing: border-box;
92 border-radius: 10px;
93 background: rgba(255, 255, 255, 0.04);
94 font-size: 0.8rem;
95}
96
97.ctl {
98 display: flex;
99 flex-direction: column;
100 gap: 4px;
101 opacity: 0.85;
102}
103
b9acd697 2026-07-01 Pavel Safronov104/* Header row of a control: its label on the left, its lock toggle on the right. */
105.ctl-head {
106 display: flex;
107 align-items: center;
108 justify-content: space-between;
109 gap: 8px;
110}
111
112/* Small, unobtrusive icon button that pins a config axis against Randomize. */
113.lock {
114 padding: 0 3px;
115 background: none;
116 color: inherit;
117 font-size: 0.85rem;
118 line-height: 1.2;
119 border-radius: 4px;
120 opacity: 0.4;
121}
122
123.lock:hover {
124 background: rgba(255, 255, 255, 0.08);
125 opacity: 0.85;
126}
127
128.lock[aria-pressed='true'] {
129 opacity: 1;
130}
131
132/* Locked axes read at full strength and get an accent rail, so it's obvious at a
133 glance which settings Randomize will leave untouched. */
134.ctl.locked {
135 opacity: 1;
136 border-left: 2px solid #2d6cdf;
137 margin-left: -8px;
138 padding-left: 6px;
139}
140
a7bf123a 2026-07-01 Pavel Safronov141.ctl .val {
142 opacity: 0.6;
143 font-variant-numeric: tabular-nums;
144}
145
146.config input[type='number'],
147.config input[type='text'] {
148 padding: 4px 6px;
149 border: 1px solid rgba(255, 255, 255, 0.15);
150 border-radius: 6px;
151 background: #0d1017;
152 color: #e7ecf3;
153 font: inherit;
154}
155
156.config input[type='number'] {
157 width: 4.5em;
158}
159
160.config .code {
161 flex: 1 1 12em;
162}
163
164.config .code input {
165 width: 100%;
166 box-sizing: border-box;
167 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
168 letter-spacing: 0.03em;
169}
170
171.seedrow {
172 display: flex;
173 gap: 4px;
174}
175
bfd86d6e 2026-07-01 Pavel Safronov176/* The seed is a free-text field (paste a number or reroll) rather than a spinner,
177 so let it grow to fit a full 32-bit value beside the reroll button. */
178.seedrow input {
179 flex: 1;
180 min-width: 0;
181}
182
a7bf123a 2026-07-01 Pavel Safronov183.seedrow button {
184 padding: 4px 8px;
185}
186
187.edges {
bfd86d6e 2026-07-01 Pavel Safronov188 /* Override the column layout `.ctl` applies, so the four sides sit on one row. */
189 display: block;
a7bf123a 2026-07-01 Pavel Safronov190 border: 1px solid rgba(255, 255, 255, 0.15);
191 border-radius: 6px;
192 padding: 2px 8px 6px;
193 margin: 0;
194}
195
196.edges legend {
b9acd697 2026-07-01 Pavel Safronov197 /* Full-width so the lock toggle can sit at the far right, beside a dimmed
198 "Walls" label (dimming lives on the label span, not the whole legend). */
199 display: flex;
200 align-items: center;
201 justify-content: space-between;
202 width: 100%;
a7bf123a 2026-07-01 Pavel Safronov203 padding: 0 4px;
b9acd697 2026-07-01 Pavel Safronov204 box-sizing: border-box;
205}
206
207.edges legend > span {
a7bf123a 2026-07-01 Pavel Safronov208 opacity: 0.6;
209}
210
211.edges label {
212 display: inline-flex;
213 align-items: center;
214 gap: 2px;
bfd86d6e 2026-07-01 Pavel Safronov215 margin-right: 10px;
a7bf123a 2026-07-01 Pavel Safronov216}
217
9e605e0f 2026-06-30 Pavel Safronov218canvas {
219 border-radius: 8px;
220 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
221 touch-action: manipulation;
222}
223
a7bf123a 2026-07-01 Pavel Safronov224.status {
225 margin: 0;
226 font-size: 1rem;
227 font-weight: 600;
228 font-variant-numeric: tabular-nums;
229}
230
9e605e0f 2026-06-30 Pavel Safronov231.hint {
232 margin: 0;
233 font-size: 0.85rem;
234 opacity: 0.65;
bfd86d6e 2026-07-01 Pavel Safronov235 line-height: 1.4;
9e605e0f 2026-06-30 Pavel Safronov236}
237
238.credit {
239 margin: 4px 0 0;
240 font-size: 0.75rem;
241 opacity: 0.5;
242}
243
244.credit a {
245 color: inherit;
246}
bfd86d6e 2026-07-01 Pavel Safronov247
b9acd697 2026-07-01 Pavel Safronov248/* Loading overlay — covers the whole viewport while the worker generates a board. */
249.loading {
250 position: fixed;
251 inset: 0;
252 display: flex;
253 align-items: center;
254 justify-content: center;
255 background: rgba(11, 14, 20, 0.75);
256 backdrop-filter: blur(4px);
257 z-index: 100;
258 opacity: 0;
259 pointer-events: none;
260 transition: opacity 0.15s ease;
261}
262
263.loading--visible {
264 opacity: 1;
265 pointer-events: all;
266}
267
268.loading-box {
269 background: #1a2030;
270 border: 1px solid rgba(255, 255, 255, 0.1);
271 border-radius: 14px;
272 padding: 24px 32px;
273 display: flex;
274 flex-direction: column;
275 align-items: center;
276 gap: 14px;
277 min-width: 220px;
278 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
279}
280
281.loading-label {
282 margin: 0;
283 font-size: 0.95rem;
284 opacity: 0.8;
285 letter-spacing: 0.02em;
286}
287
288.progress-track {
289 width: 100%;
290 height: 6px;
291 background: rgba(255, 255, 255, 0.1);
292 border-radius: 3px;
293 overflow: hidden;
294}
295
296.progress-bar {
297 height: 100%;
298 width: 0%;
299 background: #2d6cdf;
300 border-radius: 3px;
301 transition: width 0.1s linear;
302}
303
bfd86d6e 2026-07-01 Pavel Safronov304/* Narrow screens: fall back to the stacked layout, controls above the board. */
305@media (max-width: 720px) {
306 #app {
307 flex-direction: column;
308 align-items: stretch;
309 }
310
311 .panel {
312 flex-basis: auto;
313 width: 100%;
314 position: static;
315 }
316
317 .config {
318 flex-direction: row;
319 flex-wrap: wrap;
320 align-items: flex-end;
321 }
322}