GNOME – Increase Highlighted Button Bezel Thickness

appearancebuttongnomegtkwindow

Is there any way to increase the visibility (e.g. thickness, contrast or colour) of bezel that surrounds the highlighted (aka selected) button in gnome window?
TBH sometimes it is barely visible in default version.
PS: I am using GNOME 3.28.2.

Here is a screenshot illustrating the issue (from a link posted in a comment):

Best Answer

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:

Related Solutions

Ubuntu – hide the title bar of MPlayer in gnome

If it's just for MPlayer you could use the -noborder argument.

mplayer -noborder my_video.ogg

Screenshot of How fast.ogg

As a more general option, if you're using Compiz (default), you can:

Install and launch the CompizConfig Settings Manager
Select the Window Decoration plugin and hit the "plus" sign next to "Decoration Windows".
Describe the type of window you do not want title bars on with an "And" relationship, and mark "Invert". For example:

Window Class: MPlayer, And relation, Inverted

Click "Add" and enjoy!

Mouse Button to Raise and Move a Window in Unity

I have more or less solved the problem. It's not ideal but it works. In CompizConfig Settings, General Options -> Key Bindings, there are two settings for "Raise Window", mouse and keyboard controls. I set the mouse control to Super+Button1, which does not conflict with Alt+Button1 in the "Move Window" options. I also set "Lower Window" to Super+Button2, for orthogonal operating with clicking the title bar.

Although this does not combine raise+lower like I am used to, it allows me to access raise/lower while using the mouse, so it's good enough for my purposes.