A music player that connects to your cloud/distributed storage.
chore: css clean up 🧹
+18
-20
+2
-2
src/_components/grid.vto
+2
-2
src/_components/grid.vto
···
1
1
<div class="grid-filter">
2
2
<span class="grid-filter--label">Filter by</span>
3
3
4
-
<button class="button--border button--tiny button--bg-neutral" data-filter="all">All</button>
5
-
<button class="button--border button--tiny button--tr-accent button--transparent" data-filter="prelude">Features</button>
4
+
<button class="button--border button--tiny" data-filter="all">All</button>
5
+
<button class="button--border button--tiny button--bg-accent button--tr-accent button--transparent" data-filter="prelude">Features</button>
6
6
<button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
7
7
</div>
8
8
+1
-1
src/_includes/layouts/kitchen.vto
+1
-1
src/_includes/layouts/kitchen.vto
+3
-3
src/common/pages/dashboard.js
+3
-3
src/common/pages/dashboard.js
···
115
115
</div>
116
116
<div style="display: flex; gap: var(--space-xs); margin-top: var(--space-sm)">
117
117
<button type="submit">Add</button>
118
-
<button class="button--bg-neutral" type="button" id="add-uri-cancel">
118
+
<button type="button" id="add-uri-cancel">
119
119
Cancel
120
120
</button>
121
121
</div>
···
243
243
<div class="grid-filter">
244
244
<span class="grid-filter--label">Filter by</span>
245
245
<button
246
-
class="button--border button--tiny button--bg-neutral ${filter === "all"
246
+
class="button--border button--tiny ${filter === "all"
247
247
? ""
248
248
: "button--transparent"}"
249
249
@click="${() => activeFilter.set("all")}"
···
251
251
All
252
252
</button>
253
253
<button
254
-
class="button--border button--tiny button--tr-accent ${filter ===
254
+
class="button--border button--tiny button--bg-accent button--tr-accent ${filter ===
255
255
"prelude"
256
256
? ""
257
257
: "button--transparent"}"
+1
-1
src/index.vto
+1
-1
src/index.vto
···
50
50
<li><a href="featured/">Featured</a></li>
51
51
</ul>
52
52
<p style="margin: var(--space-lg) 0">
53
-
<a class="button" href="dashboard/">Open Diffuse</a>
53
+
<a class="button button--bg-accent" href="dashboard/">Open Diffuse</a>
54
54
</p>
55
55
<p>
56
56
<small style="line-height: var(--leading-relaxed)">
+10
-12
src/styles/diffuse/page.css
+10
-12
src/styles/diffuse/page.css
···
98
98
}
99
99
100
100
.filler {
101
-
background: oklch(from var(--accent) l c h / 0.2);
101
+
background: oklch(from var(--text-color) l c h / 0.2);
102
102
flex: 1;
103
+
104
+
&.filler--bg-accent {
105
+
background-color: oklch(from var(--accent) l c h / 0.2);
106
+
}
103
107
104
108
&.filler--bg-twist-1 {
105
109
background-color: oklch(from var(--accent-twist-1) l c h / 0.2);
···
119
123
120
124
&.filler--bg-twist-5 {
121
125
background-color: oklch(from var(--accent-twist-5) l c h / 0.2);
122
-
}
123
-
124
-
&.filler--bg-neutral {
125
-
background-color: oklch(from currentColor l c h / 0.2);
126
126
}
127
127
}
128
128
···
371
371
372
372
h2 {
373
373
/* color: oklch(from var(--bg-color) calc(l - 0.25) c h); */
374
-
color: var(--accent);
375
-
376
374
font-size: var(--fs-xl);
377
375
font-weight: 900;
378
376
letter-spacing: -0.0125em;
···
413
411
button,
414
412
a.button {
415
413
--button-bg-opacity: 0.6;
416
-
background: oklch(from var(--accent) l c h / var(--button-bg-opacity));
414
+
background: oklch(from var(--text-color) l c h / var(--button-bg-opacity));
417
415
border: 0;
418
416
border-radius: 999px;
419
417
color: var(--bg-color);
···
440
438
--button-bg-opacity: 1;
441
439
}
442
440
441
+
&.button--bg-accent {
442
+
background-color: oklch(from var(--accent) l c h / var(--button-bg-opacity));
443
+
}
444
+
443
445
&.button--bg-twist-1 {
444
446
background-color: oklch(from var(--accent-twist-1) l c h / var(--button-bg-opacity));
445
447
}
···
458
460
459
461
&.button--bg-twist-5 {
460
462
background-color: oklch(from var(--accent-twist-5) l c h / var(--button-bg-opacity));
461
-
}
462
-
463
-
&.button--bg-neutral {
464
-
background-color: oklch(from var(--text-color) l c h / calc(0.5 * var(--button-bg-opacity)));
465
463
}
466
464
467
465
&.button--border {