Reducing the size of GNOME 3.20's titlebars

Published: April 11, 2016

GNOME 3.20 has made it into the official Arch Linux repositories and with it came—as usual—some sort of breakage. I personally find the default width of the titlebars repulsive, and I used a small CSS hack to fix them. This broke, but thanks to reddit, I managed to fix it. Put the following in ~/.config/gtk-3.0/gtk.css (create the file if it does not exist):

/* shrink headerbars */
headerbar {
    min-height: 0px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    background-color: #2d2d2d;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 0px;
}

/* shrink ssd titlebars */
.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 0px;
    background-color: #2d2d2d;
}

.default-decoration .titlebutton {
    min-height: 0px; /* tweak these two props to reduce button size */
    min-width: 0px;
}

window.ssd headerbar.titlebar {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 3px;
    padding-bottom:3px;
    min-height: 0;
}

The above should cover all possible use cases and make GNOME 3.20 beautiful again.