80c0b6dPlate dynamics lab: plates in realizable mounts under gravity, explicit finite differences on WebGPUJeremy Magland 1/* Plate lab components. Prefix: pl- */
2:root {
3 --pl-bg: #ffffff;
4 --pl-panel: #f6f7f9;
5 --pl-border: #d9dde3;
6 --pl-text: #1c2430;
7 --pl-muted: #5b6573;
8 --pl-accent: #1f5fa8;
9 --pl-warn: #a35a00;
10 --pl-warn-bg: #fff4e0;
11 --pl-error: #a11d2b;
12 --pl-error-bg: #fde9eb;
13 --pl-ok: #1f7a3a;
14 --pl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
15 --pl-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16}
17.pl-panel {
18 background: var(--pl-panel);
19 border: 1px solid var(--pl-border);
20 border-radius: 6px;
21 padding: 10px 12px;
22}
23.pl-panel h3 {
24 margin: 0 0 8px;
25 font-size: 13px;
26 text-transform: uppercase;
27 letter-spacing: 0.04em;
28 color: var(--pl-muted);
29}
30.pl-muted {
31 color: var(--pl-muted);
32}
33.pl-small {
34 font-size: 12px;
35}
36.pl-mono {
37 font-family: var(--pl-mono);
38}
39.pl-row {
40 display: flex;
41 gap: 8px;
42 align-items: center;
43 flex-wrap: wrap;
44}
45.pl-badge {
46 display: inline-block;
47 padding: 1px 7px;
48 border-radius: 10px;
49 font-size: 11px;
50 font-weight: 600;
51}
52.pl-badge-ok {
53 background: #e3f4e8;
54 color: var(--pl-ok);
55}
56.pl-badge-warn {
57 background: var(--pl-warn-bg);
58 color: var(--pl-warn);
59}
60.pl-badge-error {
61 background: var(--pl-error-bg);
62 color: var(--pl-error);
63}
64.pl-badge-info {
65 background: #e6eef9;
66 color: var(--pl-accent);
67}
68.pl-note {
69 padding: 6px 8px;
70 border-left: 3px solid var(--pl-warn);
71 background: var(--pl-warn-bg);
72 font-size: 12px;
73 margin: 4px 0;
74}
75.pl-error {
76 padding: 8px 10px;
77 border-left: 3px solid var(--pl-error);
78 background: var(--pl-error-bg);
79 font-family: var(--pl-mono);
80 font-size: 12px;
81 white-space: pre-wrap;
82}
83button.pl-btn {
84 font: inherit;
85 padding: 5px 12px;
86 border-radius: 5px;
87 border: 1px solid var(--pl-border);
88 background: #fff;
89 cursor: pointer;
90 color: var(--pl-text);
91}
92button.pl-btn:hover {
93 border-color: var(--pl-accent);
94}
95button.pl-btn:disabled {
96 opacity: 0.5;
97 cursor: default;
98}
99button.pl-btn-primary {
100 background: var(--pl-accent);
101 color: #fff;
102 border-color: var(--pl-accent);
103}
104button.pl-btn-danger {
105 background: #fff;
106 color: var(--pl-error);
107 border-color: var(--pl-error);
108}
110/* Parameter panel */
111.pl-params {
112 display: flex;
113 flex-direction: column;
114 gap: 10px;
115}
116.pl-group {
117 border: 1px solid var(--pl-border);
118 border-radius: 6px;
119 padding: 8px 10px;
120 background: #fff;
121}
122.pl-group > summary,
123.pl-group-title {
124 font-weight: 600;
125 font-size: 13px;
126 cursor: pointer;
127 margin-bottom: 6px;
128}
129.pl-field {
130 display: grid;
131 grid-template-columns: 1fr 100px 46px;
132 gap: 6px;
133 align-items: center;
134 font-size: 12px;
135 margin: 3px 0;
136}
137.pl-field label {
138 color: var(--pl-text);
139}
140.pl-field input,
141.pl-field select,
142.pl-select {
143 font: inherit;
144 font-size: 12px;
145 padding: 3px 5px;
146 border: 1px solid var(--pl-border);
147 border-radius: 4px;
148 width: 100%;
149 box-sizing: border-box;
150}
151.pl-field input.pl-invalid {
152 border-color: var(--pl-error);
153 background: var(--pl-error-bg);
154}
155.pl-field .pl-unit {
156 color: var(--pl-muted);
157 font-size: 11px;
158}
159.pl-field-wide {
160 grid-template-columns: 1fr 2fr;
161}
162.pl-slider {
163 display: grid;
164 grid-template-columns: 1fr 70px;
165 gap: 8px;
166 align-items: center;
167 font-size: 12px;
168}
169.pl-slider input[type="range"] {
170 width: 100%;
171}
172.pl-issue {
173 font-size: 11px;
174 color: var(--pl-error);
175 margin: 2px 0 4px;
176}
177.pl-issue-warning {
178 color: var(--pl-warn);
179}
180.pl-disabled {
181 opacity: 0.55;
182}
183.pl-gpu {
184 margin-top: 8px;
185 padding-top: 6px;
186 border-top: 1px dashed var(--pl-border);
187}
188.pl-check {
189 display: flex;
190 gap: 6px;
191 align-items: center;
192 font-size: 12px;
193 cursor: pointer;
194}
195.pl-check input {
196 margin: 0;
197}
199/* Code view */
200.pl-code {
201 display: flex;
202 flex-direction: column;
203 border: 1px solid var(--pl-border);
204 border-radius: 6px;
205 overflow: hidden;
206 background: #fff;
207 min-height: 0;
208}
209.pl-code-tabs {
210 display: flex;
211 flex-wrap: wrap;
212 gap: 2px;
213 padding: 4px 6px;
214 background: var(--pl-panel);
215 border-bottom: 1px solid var(--pl-border);
216}
217.pl-code-tab {
218 font: inherit;
219 font-size: 12px;
220 font-family: var(--pl-mono);
221 padding: 3px 8px;
222 border: 1px solid transparent;
223 background: transparent;
224 border-radius: 4px;
225 cursor: pointer;
226 color: var(--pl-muted);
227}
228.pl-code-tab.pl-active {
229 background: #fff;
230 border-color: var(--pl-border);
231 color: var(--pl-text);
232}
233.pl-code-tab.pl-modified::after {
234 content: " *";
235 color: var(--pl-warn);
236}
237.pl-code-toolbar {
238 display: flex;
239 gap: 8px;
240 align-items: center;
241 padding: 4px 8px;
242 font-size: 12px;
243 border-bottom: 1px solid var(--pl-border);
244 color: var(--pl-muted);
245}
246.pl-code-editor {
247 flex: 1;
248 min-height: 200px;
249 overflow: auto;
250}
251.pl-code-editor .cm-editor {
252 height: 100%;
253 font-size: 12.5px;
254}
255.pl-code-editor .cm-scroller {
256 font-family: var(--pl-mono);
257}
259/* Field view */
260.pl-fieldview {
261 display: flex;
262 flex-direction: column;
263 gap: 6px;
264}
265.pl-fieldview-head {
266 display: flex;
267 justify-content: space-between;
268 align-items: baseline;
269 font-size: 12px;
270}
271.pl-fieldview-body {
272 display: grid;
273 grid-template-columns: 1fr 56px;
274 gap: 8px;
275 align-items: start;
276}
277.pl-fieldview canvas {
278 width: 100%;
279 height: auto;
280 display: block;
281 image-rendering: auto;
282 border: 1px solid var(--pl-border);
283 background: #fff;
284}
285.pl-colorbar {
286 display: grid;
287 grid-template-rows: auto minmax(0, 1fr) auto;
288 font-size: 10px;
289 color: var(--pl-muted);
290 text-align: left;
291}
292.pl-colorbar canvas {
293 width: 14px;
294 height: 100%;
295 min-height: 0;
296 border: 1px solid var(--pl-border);
297}
298.pl-player {
299 display: grid;
300 grid-template-columns: auto 1fr auto auto;
301 gap: 8px;
302 align-items: center;
303 font-size: 12px;
304}
305.pl-player input[type="range"] {
306 width: 100%;
307}
309/* Plots */
310.pl-plot {
311 position: relative;
312}
313.pl-plot canvas {
314 width: 100%;
315 height: auto;
316 display: block;
317}
318.pl-plot-title {
319 font-size: 12px;
320 font-weight: 600;
321 margin-bottom: 2px;
322}
323.pl-legend {
324 display: flex;
325 gap: 12px;
326 font-size: 11px;
327 color: var(--pl-muted);
328 flex-wrap: wrap;
329}
330.pl-legend span::before {
331 content: "";
332 display: inline-block;
333 width: 12px;
334 height: 3px;
335 margin-right: 4px;
336 vertical-align: middle;
337 background: var(--c);
338}
340/* Equations */
341.pl-equations {
342 display: flex;
343 flex-direction: column;
344 gap: 10px;
345}
346.pl-equation {
347 font-size: 13px;
348}
349.pl-equation .katex-display {
350 margin: 4px 0;
351 overflow-x: auto;
352 overflow-y: hidden;
353}
354.pl-equation-caption {
355 font-size: 12px;
356 color: var(--pl-muted);
357}
359/* Status */
360.pl-status {
361 font-size: 12px;
362 display: flex;
363 flex-direction: column;
364 gap: 6px;
365}
366.pl-status table {
367 border-collapse: collapse;
368}
369.pl-status td {
370 padding: 1px 10px 1px 0;
371 vertical-align: top;
372}
373.pl-status td:first-child {
374 color: var(--pl-muted);
375}
376.pl-log {
377 font-family: var(--pl-mono);
378 font-size: 11px;
379 white-space: pre-wrap;
380 max-height: 120px;
381 overflow: auto;
382 background: #fff;
383 border: 1px solid var(--pl-border);
384 padding: 4px 6px;
385}
386.pl-progress {
387 height: 4px;
388 background: var(--pl-border);
389 border-radius: 2px;
390 overflow: hidden;
391}
392.pl-progress > div {
393 height: 100%;
394 background: var(--pl-accent);
395 animation: pl-indeterminate 1.2s infinite ease-in-out;
396 width: 30%;
397}
398@keyframes pl-indeterminate {
399 0% {
400 margin-left: -30%;
401 }
402 100% {
403 margin-left: 100%;
404 }
405}
407/* Sub-groups (pads) */
408.pl-subgroup {
409 border-top: 1px dashed var(--pl-border);
410 margin-top: 6px;
411 padding-top: 4px;
412}
413.pl-linkbtn:disabled {
414 opacity: 0.4;
415 cursor: default;
416}
7540997Save the run as a movie: the scene, its caption and the soundJeremy Magland 418/* Movie export */
419.pl-movie {
420 display: flex;
421 gap: 10px;
422 align-items: center;
423 flex-wrap: wrap;
424 font-size: 12px;
425}
426.pl-movie .pl-bar {
427 width: 130px;
428 height: 7px;
429 border: 1px solid var(--pl-border);
430 border-radius: 4px;
431 overflow: hidden;
432 background: #fff;
433}
434.pl-movie .pl-bar > div {
435 height: 100%;
436 background: var(--pl-accent);
437 transition: width 0.1s linear;
438}
80c0b6dPlate dynamics lab: plates in realizable mounts under gravity, explicit finite differences on WebGPUJeremy Magland 440/* 3D scene */
441.pl-scene {
442 display: flex;
443 flex-direction: column;
444 gap: 6px;
445}
446.pl-scene-controls {
447 display: flex;
448 gap: 12px;
449 align-items: center;
450 flex-wrap: wrap;
451 font-size: 12px;
452}
453.pl-scene-controls label {
454 display: flex;
455 gap: 6px;
456 align-items: center;
457}
458.pl-scene-controls input[type="range"] {
459 width: 110px;
460}
462/* Plot interaction */
463.pl-linkbtn {
464 font: inherit;
465 font-size: 11px;
466 font-weight: 400;
467 margin-left: 8px;
468 border: 0;
469 background: none;
470 color: var(--pl-accent);
471 cursor: pointer;
472 text-decoration: underline;
473 padding: 0;
474}
475.pl-hint {
476 margin-left: auto;
477 font-style: italic;
478}
479.pl-legend .pl-hint::before {
480 display: none;
481}