Experiment to rebuild Diffuse using web applets.
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*="/engine/"] {
54 height: 0;
55 left: 110vw;
56 opacity: 0;
57 overflow: hidden;
58 pointer-events: none;
59 position: absolute;
60 top: 110vh;
61 width: 0;
62}
63
64/* Audio is special case, iframe needs to be "visible" in order to play the audio. */
65#applet__engine__audio {
66 height: 1px;
67 left: 0;
68 opacity: 0;
69 pointer-events: none;
70 position: absolute;
71 top: 0;
72 width: 1px;
73}