tokono.ma
Experiment to rebuild Diffuse using web applets.
1@import "./variables.css";
2@import "../../diffuse/colors.css";
3@import "../../diffuse/fonts.css";
4
5/***********************************
6 * Base
7 ***********************************/
8body {
9 background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);
10 color: var(--text-color);
11 display: flex;
12 flex-direction: column;
13 overflow: hidden;
14 height: 100dvh;
15}
16
17iframe {
18 border: 0;
19}
20
21/***********************************
22 * Applets (No UI)
23 ***********************************/
24iframe[src*="/configurator/"],
25iframe[src*="/engine/"],
26iframe[src*="/input/"],
27iframe[src*="/orchestrator/"],
28iframe[src*="/processor/"],
29iframe[src*="/output/"] {
30 height: 0;
31 left: 110vw;
32 opacity: 0;
33 overflow: hidden;
34 pointer-events: none;
35 position: absolute;
36 top: 110vh;
37 width: 0;
38}
39
40/* Audio is a special case, iframe needs to be "visible" in order to play the audio. */
41#applet__engine__audio {
42 height: 1px;
43 left: 0;
44 opacity: 0;
45 pointer-events: none;
46 position: absolute;
47 top: 0;
48 width: 1px;
49}
50
51/***********************************
52 * Main
53 ***********************************/
54main {
55 display: grid;
56 gap: var(--space-2xs);
57 grid-template-columns: repeat(3, 1fr);
58 grid-template-rows: auto;
59 height: 100dvh;
60 overflow: hidden;
61 padding: var(--space-md) var(--space-md);
62
63 & iframe {
64 border-radius: 6px;
65 }
66}
67
68/***********************************
69 * Applets
70 ***********************************/
71
72iframe[src*="/artwork-controller/"] {
73 grid-column: 3;
74 height: 100%;
75 justify-self: end;
76 max-width: var(--container-3xs);
77 width: 100%;
78}