ui: Add explicit focus outline to carousel items

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 <pwithnall@endlessos.org>

Fixes: #53
This commit is contained in:
Philip Withnall 2023-10-13 14:51:25 +01:00
parent cbad81565e
commit 51bd3a668d
1 changed files with 9 additions and 0 deletions

View File

@ -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;
}