tokono.ma
A music player that connects to your cloud/distributed storage.
1<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/themes/default.css" />
2<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/utilities/layout.css" />
3<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/utilities/gap.css" />
4
5<div>
6 <main id="layout"></main>
7
8 <div id="edit-bar">
9 <wa-button
10 id="edit-toggle"
11 appearance="filled"
12 variant="neutral"
13 size="small"
14 pill
15 aria-label="Edit layout"
16 >
17 <wa-icon id="edit-icon" name="border-all"></wa-icon>
18 </wa-button>
19 <wa-button
20 id="save-copy-btn"
21 appearance="filled"
22 variant="neutral"
23 size="small"
24 pill
25 aria-label="Save simplified copy"
26 style="display: none"
27 >
28 <wa-icon id="save-copy-icon" name="floppy-disk"></wa-icon>
29 </wa-button>
30 </div>
31
32 <wa-dialog id="facet-picker" label="Choose a facet" style="--width: 360px">
33 <div class="wa-stack wa-gap-s">
34 <wa-select id="facet-select" placeholder="Built-in facets…">
35 {{ for item of facets }}
36 {{ if item.url !== "facets/misc/split-view/index.html" && item.kind !== "prelude" }}
37 <wa-option value="{{ item.url }}">{{ item.title }}</wa-option>
38 {{ /if }}
39 {{ /for }}
40 </wa-select>
41 <wa-input
42 id="custom-path"
43 placeholder="facets/playback/auto-queue/index.html"
44 style="flex: 1"
45 ></wa-input>
46 <wa-button id="custom-confirm" variant="neutral" appearance="filled" pill>Load</wa-button>
47 </div>
48 </wa-dialog>
49</div>
50
51<style>
52 body {
53 margin: 0;
54 height: 100dvh;
55 overflow: hidden;
56 }
57
58 #layout,
59 #layout > * {
60 height: 100%;
61 }
62
63 wa-button {
64 max-width: 300px;
65 }
66
67 wa-button::part(base),
68 wa-input::part(base),
69 wa-select::part(combobox) {
70 border-width: 2px;
71 }
72
73 wa-split-panel {
74 height: 100%;
75 }
76
77 [slot="start"],
78 [slot="end"] {
79 height: 100%;
80 }
81
82 .pane {
83 position: relative;
84 height: 100%;
85 display: flex;
86 flex-direction: column;
87 }
88
89 .pane iframe {
90 flex: 1;
91 border: none;
92 width: 100%;
93 }
94
95 .dragging iframe {
96 pointer-events: none;
97 }
98
99 .pane-overlay {
100 position: absolute;
101 inset: 0;
102 display: none;
103 flex-direction: column;
104 align-items: center;
105 justify-content: center;
106 gap: var(--wa-space-xs);
107 background: color-mix(in srgb, var(--wa-color-surface-default) 85%, transparent);
108 backdrop-filter: blur(4px);
109 z-index: 10;
110 padding: var(--wa-space-m);
111 }
112
113 .pane--empty .pane-overlay {
114 display: flex;
115 }
116
117 .edit-mode .pane:not(.pane--empty) .pane-overlay {
118 display: flex;
119 }
120
121 .pane-name {
122 font-size: var(--wa-font-size-xs);
123 color: var(--wa-color-text-quiet);
124 margin-bottom: var(--wa-space-2xs);
125 text-align: center;
126 }
127
128 #edit-bar {
129 position: fixed;
130 top: var(--wa-space-xs);
131 left: var(--wa-space-xs);
132 z-index: 100;
133 display: flex;
134 flex-direction: column;
135 gap: var(--wa-space-2xs);
136 }
137
138 #facet-select {
139 width: 100%;
140 }
141</style>
142
143<script type="module" src="facets/misc/split-view/index.inline.js"></script>