Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language learners. *No dusting required.
shlf.space
feat(ui): add colours
Signed-off-by: brookjeynes <me@brookjeynes.dev>
authored by
brookjeynes
and committed by
Tangled
ece5eb47
670d5775
+23
-24
+4
-5
input.css
+4
-5
input.css
···
2
2
@import "./internal/ui/views/shelf/shelf.css";
3
3
4
4
@theme {
5
-
--color-ink: #000;
6
-
--color-paper: #fff;
7
-
--color-muted: #eee;
8
-
--color-mid: #888;
5
+
--color-primary: #1a1a1a;
6
+
--color-secondary: #757575;
7
+
--color-neutral: #fdfbf7;
9
8
}
10
9
11
10
.container {
···
24
23
padding: theme(spacing.1) theme(spacing.2);
25
24
26
25
&:hover {
27
-
background-color: var(--color-muted);
26
+
background-color: var(--color-secondary);
28
27
}
29
28
30
29
&:disabled {
+3
-3
internal/ui/components/header/header.templ
+3
-3
internal/ui/components/header/header.templ
···
10
10
if params.User != nil {
11
11
<details class="relative inline-block text-left">
12
12
<summary class="cursor-pointer list-none flex gap-2 items-center">
13
-
<div class="flex items-center justify-center w-7 h-7 rounded-full bg-gray-100">
13
+
<div class="flex items-center justify-center w-7 h-7 rounded-full bg-secondary">
14
14
<i class="w-4 h-4" data-lucide="user"></i>
15
15
</div>
16
16
<span class="text-sm">{ params.User.Account.Handle }</span>
17
17
</summary>
18
-
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
18
+
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-neutral drop-shadow-sm">
19
19
<a
20
20
href={ templ.SafeURL(fmt.Sprintf("/%s/shelf", params.User.Account.Did)) }
21
21
class="button border-none text-sm w-full"
···
33
33
<summary class="cursor-pointer list-none flex gap-2 items-center">
34
34
<span>🇰🇷</span>
35
35
</summary>
36
-
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
36
+
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-neutral drop-shadow-sm">
37
37
<button
38
38
type="button"
39
39
@click="localStorage.setItem('shlf-language', 'ko');"
+16
-16
internal/ui/views/shelf/shelf.css
+16
-16
internal/ui/views/shelf/shelf.css
···
4
4
5
5
> :first-child,
6
6
> :last-child {
7
-
background: var(--color-ink);
7
+
background: var(--color-primary);
8
8
}
9
9
}
10
10
11
11
.shelf-base {
12
12
display: grid;
13
13
grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
14
-
background: var(--color-ink);
15
-
border-block: 2px solid var(--color-ink);
14
+
background: var(--color-primary);
15
+
border-block: 2px solid var(--color-primary);
16
16
row-gap: 8px;
17
17
min-height: 25rem;
18
18
}
···
39
39
40
40
@layer components {
41
41
.item-slot {
42
-
background: var(--color-paper);
43
-
border: 1px dashed var(--color-muted);
42
+
background: var(--color-neutral);
43
+
border: 1px dashed var(--color-secondary);
44
44
border-bottom: none;
45
45
display: flex;
46
46
align-items: flex-end;
···
50
50
padding-top: 1rem;
51
51
52
52
&:hover {
53
-
background: var(--color-muted);
53
+
background: var(--color-secondary);
54
54
}
55
55
56
56
&.slot-occupied {
···
58
58
}
59
59
60
60
&.slot-drag-over {
61
-
background: var(--color-muted);
62
-
border: 2px solid var(--color-ink);
61
+
background: var(--color-secondary);
62
+
border: 2px solid var(--color-primary);
63
63
border-bottom: none;
64
64
}
65
65
}
66
66
67
67
.book {
68
-
background: var(--color-paper);
68
+
background: var(--color-neutral);
69
69
width: 2rem;
70
70
cursor: grab;
71
71
flex-shrink: 0;
···
88
88
gap: 0.625rem;
89
89
position: fixed;
90
90
width: 17.5rem;
91
-
background: var(--color-paper);
92
-
border: 1px solid var(--color-ink);
91
+
background: var(--color-neutral);
92
+
border: 1px solid var(--color-primary);
93
93
padding: theme(spacing.3);
94
94
z-index: 100;
95
95
pointer-events: none;
···
125
125
inset: 0;
126
126
background: repeating-linear-gradient(
127
127
45deg,
128
-
var(--color-muted),
129
-
var(--color-muted) 2px,
130
-
var(--color-paper) 2px,
131
-
var(--color-paper) 8px
128
+
var(--color-secondary),
129
+
var(--color-secondary) 2px,
130
+
var(--color-neutral) 2px,
131
+
var(--color-neutral) 8px
132
132
);
133
-
border: 1px dashed var(--color-mid);
133
+
border: 1px dashed var(--color-secondary);
134
134
cursor: grab;
135
135
}
136
136