From 51bd3a668d1c20caf54f55a3c12d0af77b9a58a4 Mon Sep 17 00:00:00 2001 From: Philip Withnall Date: Fri, 13 Oct 2023 14:51:25 +0100 Subject: [PATCH] ui: Add explicit focus outline to carousel items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Since they’re custom widgets, they need custom CSS to define a focus outline, and can’t rely on GTK providing it for them. Ideally we’d be using the same `$focus_border_color` as GTK does, and adjusting it for dark and high-contrast themes, but GTK doesn’t export that colour so we have to work around it. Signed-off-by: Philip Withnall Fixes: #53 --- malcontent-control/carousel.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/malcontent-control/carousel.css b/malcontent-control/carousel.css index 1c414d6..a2a0660 100644 --- a/malcontent-control/carousel.css +++ b/malcontent-control/carousel.css @@ -28,3 +28,12 @@ carousel-item { border: none; color: @theme_fg_color; } + +carousel-item:focus:focus-visible avatar { + /* this should actually be $focus_border_color from + * gtk/theme/Default/_colors.scss, but we have to simplify the theming slightly */ + outline-color: @theme_selected_bg_color; + outline-offset: -2px; + outline-width: 2px; + outline-style: solid; +}