Experiment to rebuild Diffuse using web applets.
tokono.ma
1@import "./variables.css";
2
3/***********************************
4 * Fonts
5 ***********************************/
6:root {
7 font-family: "Inter", sans-serif;
8 font-size: var(--fs-base);
9}
10
11@supports (font-variation-settings: normal) {
12 :root {
13 font-family: "InterVariable", sans-serif;
14 font-feature-settings:
15 "ss03" 2,
16 "ss02" 2;
17 font-optical-sizing: auto;
18 }
19}
20
21body {
22 background-color: var(--delicate-cloud);
23 color: var(--made-in-the-shade);
24 display: flex;
25 flex-direction: column;
26 overflow: hidden;
27 height: 100dvh;
28}
29
30iframe {
31 border: 0;
32}
33
34/***********************************
35 * Applets (UI)
36 ***********************************/
37#applet__ui__audio {
38 opacity: 0;
39 pointer-events: none;
40 transition: 375ms opacity;
41 transition-delay: 250ms;
42 width: 100%;
43
44 &.has-loaded {
45 opacity: 1;
46 pointer-events: initial;
47 }
48}
49
50/***********************************
51 * Applets (No UI)
52 ***********************************/
53iframe[src*="/configurator/"],
54iframe[src*="/engine/"],
55iframe[src*="/input/"],
56iframe[src*="/orchestrator/"],
57iframe[src*="/processor/"],
58iframe[src*="/output/"] {
59 height: 0;
60 left: 110vw;
61 opacity: 0;
62 overflow: hidden;
63 pointer-events: none;
64 position: absolute;
65 top: 110vh;
66 width: 0;
67}
68
69/* Audio is a special case, iframe needs to be "visible" in order to play the audio. */
70#applet__engine__audio {
71 height: 1px;
72 left: 0;
73 opacity: 0;
74 pointer-events: none;
75 position: absolute;
76 top: 0;
77 width: 1px;
78}