Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
style: improve kanban card ui
+25
-16
+25
-16
packages/kanban/src/ui/ui.css.ts
+25
-16
packages/kanban/src/ui/ui.css.ts
···
1
-
import { style } from "@vanilla-extract/css";
1
+
import { globalStyle, style } from "@vanilla-extract/css";
2
2
import { vars } from "@exosphere/client/theme.css";
3
3
4
4
// ---- Board layout ----
···
51
51
52
52
// ---- Task card (compact, in column) ----
53
53
54
-
export const taskCard = style({
55
-
display: "block",
56
-
paddingBlock: vars.space.sm,
57
-
paddingInline: vars.space.md,
58
-
borderRadius: vars.radius.sm,
59
-
border: `1px solid ${vars.color.border}`,
60
-
backgroundColor: vars.color.surface,
61
-
textDecoration: "none",
62
-
color: vars.color.text,
63
-
transition: "border-color 0.15s",
64
-
":hover": {
65
-
borderColor: vars.color.primary,
66
-
},
67
-
});
68
-
69
54
export const taskNumber = style({
70
55
fontSize: "0.8125rem",
71
56
color: vars.color.textMuted,
72
57
fontWeight: 500,
58
+
cursor: "pointer",
73
59
});
74
60
75
61
export const taskTitle = style({
···
82
68
display: "-webkit-box",
83
69
WebkitLineClamp: 2,
84
70
WebkitBoxOrient: "vertical",
71
+
cursor: "pointer",
72
+
transition: "color 0.15s",
73
+
});
74
+
75
+
export const taskCard = style({
76
+
display: "block",
77
+
paddingBlock: vars.space.sm,
78
+
paddingInline: vars.space.md,
79
+
borderRadius: vars.radius.sm,
80
+
border: `1px solid ${vars.color.border}`,
81
+
backgroundColor: vars.color.surface,
82
+
textDecoration: "none",
83
+
color: vars.color.text,
84
+
transition: "border-color 0.15s",
85
+
":hover": {
86
+
borderColor: vars.color.primary,
87
+
textDecoration: "none",
88
+
},
89
+
});
90
+
91
+
globalStyle(`${taskCard}:hover .${taskTitle}`, {
92
+
color: vars.color.primary,
85
93
});
86
94
87
95
export const taskMeta = style({
···
91
99
marginBlockStart: vars.space.xs,
92
100
fontSize: "0.75rem",
93
101
color: vars.color.textMuted,
102
+
cursor: "pointer",
94
103
});
95
104
96
105
// ---- Task detail ----