Layer reading-list cover with pink + blue overlays

The Continue card's reading-list cover was a flat 2-stop gradient. The
design layers a cream base with a pink upper-right glow and a blue
lower-left glow. Add two diagonal overlay layers that fade to
transparent so the cover feels more atmospheric without changing the
clickable surface. Adds purposeful hover/active feedback so the cover
acts visibly clickable.
This commit is contained in:
2026-05-09 19:02:20 -04:00
parent b0b4ac3791
commit a84db2a152
+23 -1
View File
@@ -179,7 +179,29 @@ fn render_reading_list_cover(
linear_color_stop(hsla(20.0 / 360.0, 0.36, 0.78, 1.0), 0.0),
linear_color_stop(hsla(220.0 / 360.0, 0.30, 0.71, 1.0), 1.0),
))
.cursor_pointer();
.cursor_pointer()
.hover(|style| style.opacity(0.96))
.active(|style| style.opacity(0.88))
.child(
div()
.absolute()
.inset_0()
.bg(linear_gradient(
225.0,
linear_color_stop(hsla(345.0 / 360.0, 1.0, 0.85, 0.55), 0.0),
linear_color_stop(hsla(345.0 / 360.0, 1.0, 0.85, 0.0), 0.6),
)),
)
.child(
div()
.absolute()
.inset_0()
.bg(linear_gradient(
45.0,
linear_color_stop(hsla(228.0 / 360.0, 0.52, 0.62, 0.55), 0.0),
linear_color_stop(hsla(228.0 / 360.0, 0.52, 0.62, 0.0), 0.7),
)),
);
if let Some(target) = url {
cover = cover.on_click(cx.listener(move |shell, _, window, cx| {