tokono.ma
A music player that connects to your cloud/distributed storage.
1:host {
2 --transition-durition: 750ms;
3}
4
5main {
6 background: var(--color-3);
7 color: white;
8 display: flex;
9 flex-direction: column;
10 font-size: var(--fs-sm);
11 height: 100%;
12 opacity: 1 !important;
13 overflow: hidden;
14 position: relative;
15 transition:
16 background-color var(--transition-durition),
17 color var(--transition-durition),
18 opacity var(--transition-durition);
19}
20
21/* Artwork */
22
23.artwork {
24 app-region: drag;
25 flex: 1;
26 position: relative;
27 user-select: none;
28}
29
30.artwork img {
31 height: 100%;
32 left: 0;
33 object-fit: cover;
34 opacity: 0;
35 position: absolute;
36 top: 0;
37 transition-duration: var(--transition-durition);
38 transition-property: opacity;
39 width: 100%;
40 z-index: 0;
41}
42
43.artwork label {
44 background: oklch(0 0 0);
45 border-radius: var(--radius-sm);
46 box-shadow: var(--box-shadow-lg);
47 font-size: var(--fs-2xs);
48 font-weight: 600;
49 left: var(--space-xs);
50 letter-spacing: var(--tracking-wide);
51 line-height: 1;
52 padding: 8px 6px;
53 position: absolute;
54 text-box: trim-both cap alphabetic;
55 text-transform: uppercase;
56 top: var(--space-xs);
57 transition:
58 background-color var(--transition-durition),
59 color var(--transition-durition);
60 z-index: 10;
61}
62
63/* Progress bars */
64
65progress {
66 appearance: none;
67 border: 0;
68 display: block;
69 height: 4px;
70 width: 100%;
71}
72
73progress,
74progress::-webkit-progress-bar {
75 background-color: color-mix(in oklch, currentColor 40%, transparent);
76 overflow: hidden;
77 border-radius: 4px;
78}
79
80progress[value]::-webkit-progress-value {
81 border-radius: 4px;
82 background-color: color-mix(in oklch, currentColor 90%, transparent);
83}
84
85progress[value]::-moz-progress-bar {
86 border-radius: 4px;
87 background-color: color-mix(in oklch, currentColor 50%, transparent);
88}
89
90/* Controller */
91
92.controller {
93 flex-shrink: 0;
94 padding: 0 var(--space-md) var(--space-md);
95 position: relative;
96}
97
98.controller__background {
99 inset: 0;
100 opacity: 0.5;
101 position: absolute;
102 transition: background-color var(--transition-durition);
103 z-index: 1;
104}
105
106.controller__inner {
107 position: relative;
108 transition-duration: var(--transition-durition);
109 transition-property: color;
110 z-index: 10;
111}
112
113.controller__inner.controller__inner--light-mode {
114 color: rgba(0, 0, 0, 0.6);
115}
116
117/* Button row */
118
119.button-row {
120 display: inline-flex;
121 gap: 1px;
122
123 button {
124 background: color-mix(in oklch, currentColor 7.5%, transparent);
125 border: 0;
126 color: color-mix(in oklch, currentColor 50%, transparent);
127 cursor: pointer;
128 font-size: var(--fs-base);
129 font-size: calc(var(--fs-base) * 0.9);
130 padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs);
131
132 &[data-enabled="t"] {
133 background-color: color-mix(in oklch, currentColor 25%, transparent);
134 color: currentColor;
135 }
136 }
137
138 button:first-child {
139 border-bottom-left-radius: var(--radius-xl);
140 border-top-left-radius: var(--radius-xl);
141 }
142
143 button:last-child {
144 border-bottom-right-radius: var(--radius-xl);
145 border-top-right-radius: var(--radius-xl);
146 }
147}
148
149/* Now playing */
150
151cite {
152 display: block;
153 font-style: normal;
154 text-shadow: var(--text-shadow-sm);
155
156 & > span,
157 & > strong {
158 display: block;
159 overflow: hidden;
160 text-overflow: ellipsis;
161 white-space: nowrap;
162 }
163}
164
165.controller__inner--light-mode cite {
166 text-shadow: none;
167}
168
169/* Progress */
170
171.progress {
172 cursor: pointer;
173 margin: var(--space-xs) 0;
174 padding-top: var(--space-2xs);
175}
176
177.timestamps {
178 display: flex;
179 font-size: var(--fs-2xs);
180 font-weight: 500;
181 justify-content: space-between;
182 margin-top: var(--space-3xs);
183 opacity: 0.4;
184 text-shadow: var(--text-shadow-xs);
185}
186
187.controller__inner--light-mode .timestamps {
188 text-shadow: none;
189}
190
191/* Controls */
192
193.controller menu {
194 align-items: center;
195 display: flex;
196 font-size: var(--fs-lg);
197 gap: var(--space-lg);
198 justify-content: center;
199 margin: var(--space-md) 0;
200 padding: 0;
201 text-align: center;
202}
203
204.controller .menu__loader {
205 line-height: 0;
206 transform-origin: center;
207}
208
209.controller li {
210 cursor: pointer;
211 line-height: 0;
212 list-style: none;
213 transition-duration: var(--transition-durition);
214 transition-property: opacity;
215}
216
217.controller .ph-pause,
218.controller .ph-play,
219.controller .menu__loader {
220 font-size: var(--fs-xl);
221}
222
223/* Volume */
224
225.volume {
226 align-items: center;
227 display: flex;
228 font-size: var(--fs-xs);
229 gap: var(--space-2xs);
230 justify-content: space-between;
231}
232
233.volume .progress-bar {
234 cursor: pointer;
235 flex: 1;
236 padding: var(--space-2xs) 0;
237}
238
239.volume i {
240 cursor: pointer;
241}
242
243/* Footer */
244
245footer {
246 align-items: center;
247 display: flex;
248 gap: var(--space-2xs);
249 justify-content: center;
250 margin-top: var(--space-sm);
251}
252
253/* Gradient blur */
254
255.gradient-blur {
256 bottom: 0;
257 height: 150%;
258 left: 0;
259 pointer-events: none;
260 position: absolute;
261 right: 0;
262 z-index: 2;
263}
264
265.gradient-blur > div {
266 position: absolute;
267 inset: 0;
268}
269
270.gradient-blur > div:nth-of-type(1) {
271 backdrop-filter: blur(1px);
272 mask: linear-gradient(
273 to bottom,
274 rgba(0, 0, 0, 0) 0%,
275 rgba(0, 0, 0, 1) 4.166666665%,
276 rgba(0, 0, 0, 1) 8.333333332%,
277 rgba(0, 0, 0, 0) 12.499999999%
278 );
279 z-index: 1;
280}
281
282.gradient-blur > div:nth-of-type(2) {
283 backdrop-filter: blur(2px);
284 mask: linear-gradient(
285 to bottom,
286 rgba(0, 0, 0, 0) 4.166666665%,
287 rgba(0, 0, 0, 1) 8.333333332%,
288 rgba(0, 0, 0, 1) 12.499999999%,
289 rgba(0, 0, 0, 0) 16.666666666%
290 );
291 z-index: 2;
292}
293
294.gradient-blur > div:nth-of-type(3) {
295 backdrop-filter: blur(4px);
296 mask: linear-gradient(
297 to bottom,
298 rgba(0, 0, 0, 0) 8.333333332%,
299 rgba(0, 0, 0, 1) 12.499999999%,
300 rgba(0, 0, 0, 1) 16.666666666%,
301 rgba(0, 0, 0, 0) 20.833333333%
302 );
303 z-index: 3;
304}
305
306.gradient-blur > div:nth-of-type(4) {
307 backdrop-filter: blur(8px);
308 mask: linear-gradient(
309 to bottom,
310 rgba(0, 0, 0, 0) 12.499999999%,
311 rgba(0, 0, 0, 1) 16.666666666%,
312 rgba(0, 0, 0, 1) 20.833333333%,
313 rgba(0, 0, 0, 0) 25%
314 );
315 z-index: 4;
316}
317
318.gradient-blur > div:nth-of-type(5) {
319 backdrop-filter: blur(16px);
320 mask: linear-gradient(
321 to bottom,
322 rgba(0, 0, 0, 0) 16.666666666%,
323 rgba(0, 0, 0, 1) 20.833333333%,
324 rgba(0, 0, 0, 1) 25%,
325 rgba(0, 0, 0, 0) 100%
326 );
327 z-index: 5;
328}
329
330.gradient-blur > div:nth-of-type(6) {
331 backdrop-filter: blur(32px);
332 mask: linear-gradient(
333 to bottom,
334 rgba(0, 0, 0, 0) 20.833333333%,
335 rgba(0, 0, 0, 1) 25%,
336 rgba(0, 0, 0, 1) 100%
337 );
338 z-index: 6;
339}
340
341.gradient-blur > div:nth-of-type(7) {
342 backdrop-filter: blur(64px);
343 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%);
344 z-index: 7;
345}