@hearthsound/design 0.2.7 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/admin.css +10 -1
- package/css/components/library-mark.css +39 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
package/css/components/admin.css
CHANGED
|
@@ -206,7 +206,8 @@
|
|
|
206
206
|
font-size: 13px;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
-
/* p26: Library acid, Cache acid at 55% over the view, Folders muted,
|
|
209
|
+
/* p26: Library acid, Cache acid at 55% over the view, Folders muted, Other a
|
|
210
|
+
neutral between the two, the rest free. */
|
|
210
211
|
.hs-storage-bar__library,
|
|
211
212
|
.hs-storage-legend__swatch--library {
|
|
212
213
|
background: var(--hs-accent-bg);
|
|
@@ -222,6 +223,14 @@
|
|
|
222
223
|
background: var(--hs-fg-muted);
|
|
223
224
|
}
|
|
224
225
|
|
|
226
|
+
/* p26: the space on the same filesystems that is neither library, downloads,
|
|
227
|
+
cache nor free; a neutral between Folders and Free that stays apart from both
|
|
228
|
+
because the tokens adapt to the scheme. */
|
|
229
|
+
.hs-storage-bar__other,
|
|
230
|
+
.hs-storage-legend__swatch--other {
|
|
231
|
+
background: color-mix(in srgb, var(--hs-fg) 30%, transparent);
|
|
232
|
+
}
|
|
233
|
+
|
|
225
234
|
.hs-storage-bar__free,
|
|
226
235
|
.hs-storage-legend__swatch--free {
|
|
227
236
|
background: color-mix(in srgb, var(--hs-fg) 12%, transparent);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @hearthsound/design - library mark
|
|
3
|
+
*
|
|
4
|
+
* A song or album the user's library holds. The glyph is `adwaita-check`; the
|
|
5
|
+
* mark never relies on colour alone, because the markup carries the accessible
|
|
6
|
+
* name and the glyph says what it is. Items that are not in the library carry
|
|
7
|
+
* no mark at all.
|
|
8
|
+
*
|
|
9
|
+
* Two placements: inline in a track row's status cell, and as a badge on the
|
|
10
|
+
* bottom-left of an album card's cover.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
.hs-library-mark {
|
|
14
|
+
--hs-icon-size: 16px;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
color: var(--hs-accent-text);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Sits above the cover art and its play disc, and takes no pointer events: the
|
|
22
|
+
* card link and the disc stay the only targets (k13). */
|
|
23
|
+
.hs-card__library-mark {
|
|
24
|
+
position: absolute;
|
|
25
|
+
left: 8px;
|
|
26
|
+
bottom: 8px;
|
|
27
|
+
z-index: 2;
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
width: 24px;
|
|
32
|
+
height: 24px;
|
|
33
|
+
border-radius: var(--hs-radius-full);
|
|
34
|
+
background: var(--hs-accent-bg);
|
|
35
|
+
color: var(--hs-accent-fg);
|
|
36
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
|
|
37
|
+
pointer-events: none;
|
|
38
|
+
--hs-icon-size: 14px;
|
|
39
|
+
}
|
package/css/index.css
CHANGED