Blame src/embed.css at c110c8ca10ceebf9c9d39a6923d263fdf0162e98

e01df49 Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 12 days ago1/* Styles of the embedded widget (src/embed.ts), on top of style.css. The widget takes the

2 host page's colors and font when it defines jeremy.magland.org's variables (--bg, --text,

3 --text-muted, --border, --link, --bg-code, --font-ui), with the app's colors otherwise.

4 Names the two share (--border, --text-muted) go through --tis-* on the host first, since a

5 property cannot refer to itself. */

7:host {

8 display: block;

9 margin: 1.5em 0;

10 --tis-bg: var(--bg, #fcfcfb);

11 --tis-code: var(--bg-code, #f4f3f0);

12 --tis-text: var(--text, #0b0b0b);

13 --tis-muted: var(--text-muted, #77756f);

14 --tis-border: var(--border, #e2e0da);

15 --tis-link: var(--link, #2a78d6);

16}

17.tis {

18 --surface-1: var(--tis-bg);

19 --page: var(--tis-code);

20 --text-primary: var(--tis-text);

21 --text-secondary: var(--tis-muted);

22 --text-muted: var(--tis-muted);

23 --border: var(--tis-border);

24 --accent: var(--tis-link);

25 --accent-ink: var(--tis-bg);

26 --series-1: #2a78d6;

27 --series-2: #eb6834;

28 --series-3: #1baf7a;

3760879 Widget: Open the full app, the bundle's own instrument page in a closeable full-window overlay; unedited form fields keep their exact values, so the page and the widget hash the same cache keys; vault1 site in READMEJeremy Magland 12 days ago29 --grid: #ecebe7;

30 --axis: #b9b7b0;

31 --warn-bg: #fdf3dc;

32 --warn-ink: #6b4a00;

33 --ramp: #fcfcfb, #cde2fb, #86b6ef, #3987e5, #1c5cab, #0d366b;

34 --diverging: #1c5cab, #86b6ef, #f0efec, #f0a3a2, #b42d2c;

e01df49 Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 12 days ago35 font: 14px/1.45 var(--font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);

36 color: var(--text-primary);

37 background: var(--surface-1);

38 border: 1px solid var(--border);

39 border-radius: 10px;

40 padding: 12px;

41}

42.tis.dark {

43 --series-1: #3987e5;

44 --series-2: #d95926;

45 --series-3: #199e70;

47 --axis: #4a4a46;

48 --warn-bg: #3a2e12;

49 --warn-ink: #f3d18a;

50 --ramp: #1a1a19, #104281, #1c5cab, #3987e5, #86b6ef, #cde2fb;

51 --diverging: #6da7ec, #1c5cab, #383835, #a83434, #e66767;

53.scene-wrap { height: 340px; }

f89ae61 Widget: spectrogram of the sound (light entry loaded when near the viewport), fmax attribute and choice; axes and spectrogram read colors at their canvasJeremy Magland 12 days ago54.spec-block { margin-top: 12px; }

55.spec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-secondary); }

56.spec-wrap { height: 220px; margin-top: 4px; }

e01df49 Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 12 days ago57@media (max-width: 600px) { .scene-wrap { height: 260px; } }

58.status { margin: 10px 0 0; color: var(--text-secondary); font-size: 13px; }

59.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

60.actions:empty { display: none; }

4e56865 Embedded widget for readers: Play sound and Play motion buttons that download on first press, no setup/replay tabs or view controls; exaggeration attribute (default 5, not in the cache key)Jeremy Magland 12 days ago61/* one row each for sound and motion, so expanding one never moves the other */

62.players { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }

63.player.wide { justify-self: stretch; }

64.player .audio-row, .player .viewer-bar { margin: 0; }

e01df49 Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 12 days ago65.error { color: #b42d2c; font-size: 13px; margin: 8px 0 0; }

66.tis.dark .error { color: #e66767; }

68.footer .cache-ctl { margin: 0; flex: 1; }

69.cache-ctl { font-size: 12px; }

71/* the full app over the whole window */

72.overlay { position: fixed; inset: 0; z-index: 2147483000; background: var(--page); color: var(--text-primary); overflow: auto; overscroll-behavior: contain; }

73.overlay-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); font-weight: 600; }

74.overlay .instrument { padding-top: 12px; }

75.overlay .panel { top: 60px; max-height: calc(100vh - 76px); }

76.overlay .btn { color: var(--accent-ink); }