@hearthsound/design 0.2.8 → 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/library-mark.css +39 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
|
@@ -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