@hearthsound/design 0.2.8 → 0.2.10
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 +45 -0
- package/css/components/track.css +13 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,45 @@
|
|
|
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: beside a track row's title, where it is small and muted so it
|
|
10
|
+
* reads as a detail of the title rather than as a column of its own, and as a
|
|
11
|
+
* badge on the bottom-left of an album card's cover.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
.hs-library-mark {
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
flex: none;
|
|
17
|
+
align-items: center;
|
|
18
|
+
color: var(--hs-fg-muted);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* `.hs-icon` declares its own size on the element, so the mark's size is set
|
|
22
|
+
* there too rather than inherited from the wrapper. */
|
|
23
|
+
.hs-library-mark .hs-icon {
|
|
24
|
+
--hs-icon-size: 11px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Sits above the cover art and its play disc, and takes no pointer events: the
|
|
28
|
+
* card link and the disc stay the only targets (k13). */
|
|
29
|
+
.hs-card__library-mark {
|
|
30
|
+
position: absolute;
|
|
31
|
+
left: 8px;
|
|
32
|
+
bottom: 8px;
|
|
33
|
+
z-index: 2;
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
width: 24px;
|
|
38
|
+
height: 24px;
|
|
39
|
+
border-radius: var(--hs-radius-full);
|
|
40
|
+
background: var(--hs-accent-bg);
|
|
41
|
+
color: var(--hs-accent-fg);
|
|
42
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
--hs-icon-size: 14px;
|
|
45
|
+
}
|
package/css/components/track.css
CHANGED
|
@@ -144,6 +144,19 @@
|
|
|
144
144
|
min-width: 0;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
+
/* The title and the library mark share one line: the title keeps the ellipsis
|
|
148
|
+
* and the mark stays visible beside it at every width. */
|
|
149
|
+
.hs-track-row__title-line {
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
gap: 4px;
|
|
153
|
+
min-width: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.hs-track-row__title-line .hs-track-row__title {
|
|
157
|
+
min-width: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
147
160
|
.hs-track-row__title,
|
|
148
161
|
.hs-track-row__artist,
|
|
149
162
|
.hs-track-row__album {
|
package/css/index.css
CHANGED