An increasing number of GNOME applications take advantage of new possibilities with GTK+ header bars and client-side decorations.

Today I was asked if it is intentional that applications like nautilus cannot be moved or resized by border drag anymore when using themes such as Ambiance. Of course not! But client-side decorations move the responsibility for theming the titlebar and window borders from the window manager theme (which basically ceases to exist) to the toolkit theme. So, some adjustments are needed to make GTK+ themes take advantage of this.To figure out how this works in practice, I took a look at the Radiance theme. Here is how current nautilus looks with it:Very pointy, and neither shadows nor invisible borders – resizing the window is only possible via the window menu.

As a first step towards improving the situation, I added the following snipplet to the Radiance css:

.window-frame {
    border-color: darker(@bg_color);
    border-radius: 7px 7px 0 0;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 2px 8px 3px alpha(black, 0.5);
    margin: 10px;
}
.window-frame:backdrop {
     box-shadow: 0 2px 5px 1px alpha(black, 0.5);
}
.window-frame.tiled {
    border-radius: 0;
    background-color: @bg_color;
}

A few explanations are in order here: window-frame is the style class that GTK+ uses when deciding how to render the frame part of a client-side decorated window. The box-shadow gives our window a visible shadow, and the margin determines  the ‘invisible border’ around the window where it can be dragged. We set a less promient style for unfocused windows (in GTK+ parlance, that is called backdrop). Finally, we set a style without invisible borders and shadow for half-tiled windows. You may wonder why we don’t do the same for maximized windows: GTK+ enforces no borders for maximized windows, so the theme doesn’t have to do anything.

As a small refinement, I’ve added a some more css to make the title bar a little rounder:

.titlebar {
    border-radius: 7px 7px 0px 0px;
}

.tiled .titlebar {
    border-radius: 0;
}

.maximized .titlebar {
    border-radius: 0;
}

There is of course a lot more refinement that can be done here, like adjusting the padding around the titlebar buttons, and fixing the broken Home button. If you are interested in this, you should check out the relevant CSD section of the Adwaita theme.