How to change style of selected widget in GtkListView

Development
,
1

Hello, I’d like to make the selected row/widget in a GtkListView have a simple highlighted border, that does not affect the actual size of the widget. Right now I have this:

.list row:selected {
    border: 3px solid @theme_fg_color;
}

.list row {
    background-color: @theme_entry_bg_color;
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
}

However this causes the size of contents of the row to visibly change, which I don’t want:

video

Any tips? Thanks.

2

You can either use outline:

.list row:selected {
    outline: 3px solid @theme_fg_color;
}

or give the row a transparent border so there’s no layout shift:

.list row:selected {
    border: 3px solid @theme_fg_color;
}

.list row {
    background-color: @theme_entry_bg_color;
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
    border: 3px solid transparent; /* <--- */
}