As base I use boomerang Windows 10 (v3.2.1) dark theme and the boomerang Windows 10 icon set, with some modifications to the cinnamon.css and gtk.css files to adjust it towards my liking.
My question is about the headerbar / titlebar buttons..
I seem to be unable to adjust their size independently (horizontally, adjustable via padding all together only), while their vertical position seems to be tied to 'middle' (influence-able via margin to a degree). Are there more direct controls available or is that it?
The part I'm working on in gtk.css in the gtk-3.20 folder:
Code: Select all
...
headerbar {
/* margin: top, right, bottom, left */
margin: -1px -2px 0px -2px; /* makes gtk3-widget-factory work */
padding: 0px 0px 0px 0px;
min-height: 23px;
color: #DDDDDD; /* title text color */
background-color: rgba(16, 16, 16, 1.0);
border-top: 1px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-radius: 0px 0px 0px 0px; }
headerbar:backdrop {
color: #888888; /* title text color */
background-color: rgba(16, 16, 16, 0.3); }
...
headerbar .titlebutton.close, headerbar .titlebutton.maximize, headerbar .titlebutton.minimize, headerbar .titlebutton:not(separator) {
/* margin: top, right, bottom, left */
margin: 0px 2px 3px -6px; <<<<----
padding: 0px 15px 2px 15px; <<<<----
background-image: url("assets/close-focused.svg");
border: 0px;
-gtk-icon-shadow: none;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
box-shadow: none; }
/* RED stuff */
headerbar .titlebutton.close {
background-color: rgba(180, 80, 50, 1.0);
box-shadow: none; }
headerbar .titlebutton.close:backdrop {
background-color: rgba(50, 50, 50, 0.8);
background-image: url("assets/close-unfocused.svg");
box-shadow: none; }
...