fix(shell): concentric hover-highlight radius on host cards
The FlowBoxChild draws the hover/selection highlight AROUND the card (it wraps it with its own padding ring), so its default corner radius ran visibly tighter than the card's 12px inside it. The host grids now scope a 15px radius onto their children — card radius + the ring — so the highlight's corners run concentric with the card's. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -23,6 +23,10 @@ pub const APP_ID: &str = "io.unom.Punktfunk";
|
||||
/// named palette so dark mode just works.
|
||||
const CSS: &str = "
|
||||
.pf-host-card { padding: 16px; }
|
||||
/* The FlowBoxChild draws the hover/selection highlight AROUND the card (it wraps it
|
||||
with its own padding), so its corners must run concentric with the card's 12px —
|
||||
radius = card radius + the child's padding ring. */
|
||||
.pf-host-grid > flowboxchild { border-radius: 15px; }
|
||||
.pf-pill { font-size: 0.72em; font-weight: bold; padding: 2px 10px; border-radius: 999px;
|
||||
color: alpha(currentColor, 0.8); background: alpha(currentColor, 0.1); }
|
||||
.pf-pill.pf-green { color: @success_color; background: alpha(@success_color, 0.15); }
|
||||
|
||||
@@ -386,7 +386,7 @@ impl SimpleComponent for HostsPage {
|
||||
sender: ComponentSender<Self>,
|
||||
) -> ComponentParts<Self> {
|
||||
let make_flow = || {
|
||||
gtk::FlowBox::builder()
|
||||
let f = gtk::FlowBox::builder()
|
||||
.selection_mode(gtk::SelectionMode::None)
|
||||
.activate_on_single_click(true)
|
||||
.homogeneous(true)
|
||||
@@ -394,7 +394,10 @@ impl SimpleComponent for HostsPage {
|
||||
.max_children_per_line(4)
|
||||
.column_spacing(12)
|
||||
.row_spacing(12)
|
||||
.build()
|
||||
.build();
|
||||
// Scopes the concentric hover-highlight radius (see app.rs CSS).
|
||||
f.add_css_class("pf-host-grid");
|
||||
f
|
||||
};
|
||||
let heading = |text: &str| {
|
||||
let l = gtk::Label::new(Some(text));
|
||||
|
||||
Reference in New Issue
Block a user