Increase the highlighted button bezel thickness (GNOME)

Solution 1:

From the image provided by the poster, it appears that the theme is Ambiance.

The following bit of code will provide some relief:

* {
    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;
}

Route #1:

This code can be added to ~/.config/gtk-3.0/gtk.css using a plain text editor. (If the file and folder don't exist, just create them.)

* {    
    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;
    outline-radius: 2px;
}

You can look at CSS outline properties for more options.

It should be noted that

• code placed in ~/.config/gtk-3.0/gtk.css will affect all gtk3 applications and all gtk3 themes.
• the values can be tweaked to one's needs.
• omitting a color maybe preferable so that contrast is available irrespective of the background color involved (as seen in the animation below).

Route #2:

If you like to try other themes, modifying ~/.config/gtk-3.0/gtk.css may not be the best way to go because the code in this file applies to all gtk3 themes: obviously, if a particular theme already has its own way of dealing with the outline issue there could be unwanted effects.

For this reason, I prefer to edit the theme itself so that the change is restricted to a particular theme.

In this case, I edited usr/share/themes/Ambiance/gtk-3.20/gtk-widgets.css so that the top few lines looked like this:

* {
    -GtkHTML-link-color: #f07746; /* @link_color */
    -GtkIMHtml-hyperlink-color: #f07746; /* @link_color */
    -GtkTextView-error-underline-color: #df382c; /* @error_color doesn't work due to a gtk bug */
    -WnckTasklist-fade-overlay-rect: 0;

    background-origin: border-box;
    background-clip: padding-box;

    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;
}

.background {
    color: @fg_color;
    background-color: @bg_color;
}

The three lines starting with "outline-" are the lines I added.

In the animation below, notice that the outline color differs depending on the background:

A couple of images showing the difference that can be made by editing the Ambiance theme or gtk.css as described above:

Before:

After: