Customisation help wanted

[p00f]

I have edited dark.css and enabled system icons and like it so far :

1) How do I change colours and disable borders only for headerbar CSD buttons?
2) How do I use the maximise/minimise/close buttons from my system GTK theme (and possibly use all assets from the theme)?
3) How do I use a separate file for my edited dark.css (name it dracula.css or something and add it to gitignore?) for easy updates w/o conflicts?

[rafaelmardojai]

2. How do I use the maximise/minimise/close buttons from my system GTK theme?

It should work out of the box, i will investigate and provide a fix.

3. How do I use a separate file for my edited dark.css (name it dracula.css or something and add it to gitignore?) for easy updates w/o conflicts?

Create customChrome.css file as described here.

[p00f]

Create customChrome.css file as described here.

Ok I'm obviously doing it wrong.
I named it dracula.css and added @import "theme/colors/dracula.css"; to customChrome.css, it doesn't work (uses Adwaita colours). Also this

I'm an idiot, I missed a semicolon.

[p00f]

1) How do I change colours and disable borders only for headerbar CSD buttons?

Now I need help with this too, please

[rafaelmardojai]

2. How do I use the maximise/minimise/close buttons from my system GTK theme?

It should work out of the box, i will investigate and provide a fix.

It's working fine, looks like the issue is you want to archive the windows buttons of you theme.
Try removing the window buttons styling from csd.css and play around:

firefox-gnome-theme/theme/parts/csd.css

Line 117 in 2d10822

/* Window buttons style */

---

1. How do I change colours and disable borders only for headerbar CSD buttons?

The correct selector for those buttons is #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), append :not(#hack) to it so you override my theme styles.

I suppose you will need something similar to what i have done for flat buttons:

#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(#hack) {
	background: transparent !important;
	box-shadow: none !important;
	border-color: transparent !important;
	border-radius: 5px !important;
}
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(#hack):hover {
	box-shadow: var(--gnome-button-box-shadow) !important;
	border-color: var(--gnome-button-border-color) !important;
	border-bottom-color: var(--gnome-button-border-accent-color) !important;
}

[p00f]

It's working fine, looks like the issue is you want to archive the windows buttons of your theme. Try removing the window buttons styling from csd.css and play around:

I commented out that section (ie 118-EOF). It looks like this:

Issues -

1. Too close to the top (Should I refer my gtk theme for padding values? Where do I find them? What do I change?)
   The gtk theme looks like this for reference:
   

2. It has Adwaita's cross/square/minus icons along with the ones from the gtk theme:
   (The gtk theme's minus icon appeared because I hovered over the minimise button)
   
   Without hovering:
   

Also, how do I do this via customChrome.css? (I was able to do this via customChrome.css :

How do I change colours and disable borders only for headerbar CSD buttons?

)

Thanks for all the help!!

[rafaelmardojai]

Too close to the top (Whould I refer my gtk theme for padding values? Where do I find them? What do I change?)

You should play with the :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container paddings:

firefox-gnome-theme/theme/parts/csd.css

Lines 102 to 112 in 2d10822

	/* Window buttons box */
	:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container,
	:root[tabsintitlebar] #titlebar-buttonbox-container,
	:root[tabsintitlebar][inFullscreen] #window-controls {
	-moz-appearance: none !important;
	padding: 6px 3px;
	position: absolute !important;
	right: 0;
	top: 0;
	display: block !important;
	}

Also don't forget to modify the padding that defines how much space window buttons take based on how many buttons are enabled:

firefox-gnome-theme/theme/parts/csd.css

Lines 14 to 33 in 2d10822

	/* Window buttons: at least 1 button */
	@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
	padding-right: 50px !important;
	}
	}
	/* Window buttons: at least 2 buttons */
	@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
	(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
	(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
	padding-right: 90px !important;
	}
	}
	/* Window buttons: 3 buttons */
	@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
	padding-right: 130px !important;
	}
	}

---

It has adwaita's cross/square/minus icons along with the ones from the gtk theme:

The icons part are in parts/icons.css and system-icons.css. Override them with this:

:root[tabsintitlebar] #titlebar .titlebar-buttonbox .toolbarbutton-icon:not(#hack) {
	list-style-image: none !important;
}

[rafaelmardojai]

Too close to the top (Should I refer my gtk theme for padding values? Where do I find them? What do I change?)

Watching you screenshot, something like this could work: (or at least as an start point)

:root[tabsintitlebar]:not([inFullscreen]) #nav-bar:not(#hack) { 
 	padding-right: 72px !important; 
} 
:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container:not(#hack) { 
 	padding: 15px 3px !important; 
} 

[p00f]

I suppose you will need something similar to what I have done for flat buttons:

This highlights even the disabled icons when hovered over:
.
Also, how do I change the space between the close/maximise/minimise buttons?

[rafaelmardojai]

This highlights even the disabled icons when hovered over:

Try adding :not([disabled]) to the selector.

#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(#hack):not([disabled]):hover {
	/* hover code */
}

Also, how do I change the space between the close/maximise/minimise buttons?

Modify :root[tabsintitlebar] #titlebar .titlebar-button margins:

:root[tabsintitlebar] #titlebar .titlebar-button:not(#hack) {
	margin: 0 !important;
}

[p00f]

One last thing: How do I do this via customChrome.css?

I tried changing values of everything here to auto !important in customChrome.css but it makes the buttons dissapear.

[rafaelmardojai]

This one was a little tricky, but i got something. Try with:

:root[tabsintitlebar] #titlebar .titlebar-button:hover:not(#hack) {
	box-shadow: none !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close:not(#hack) {
	-moz-appearance: -moz-window-button-close !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max:not(#hack) {
	-moz-appearance: -moz-window-button-restore !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min:not(#hack) {
	-moz-appearance: -moz-window-button-minimize !important;
}

[p00f]

@import "theme/normal-width-tabs.css";
@import "theme/system-icons.css";
@import "theme/colors/dracula.css";


/*Make CSD buttons flat*/
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(#hack) {
	background: transparent !important;
	box-shadow: none !important;
	border-color: transparent !important;
	border-radius: 5px !important;
}
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(#hack):not([disabled]):hover {
	box-shadow: var(--gnome-button-box-shadow) !important;
	border-color: rgba(0, 0, 0, 0) !important;
	border-bottom-color: rgba(0, 0, 0, 0) !important;
	background: #565B6B !important;
}



/*Don't use Adwaita's buttons*/
:root[tabsintitlebar] #titlebar .titlebar-buttonbox .toolbarbutton-icon:not(#hack) {
	list-style-image: none !important;
}

/*Margin b/w close/max/min buttons*/
:root[tabsintitlebar] #titlebar .titlebar-button:not(#hack) {
	margin: 1px !important;
}

/*Fix padding*/
 /* Window buttons box */
 :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container,
 :root[tabsintitlebar] #titlebar-buttonbox-container,
 :root[tabsintitlebar][inFullscreen] #window-controls {
 	-moz-appearance: none !important;
 	padding: 15px 9px;
 	position: absolute !important;
 	right: 0;
 	top: 0;
 	display: block !important;
 }



 /* Window buttons: at least 1 button */
 @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
 	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar:not(#hack) {
 	 padding-right: 30px !important;
  }
 }
 /* Window buttons: at least 2 buttons */
 @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
        (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
        (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
 	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar:not(#hack) {
 		padding-right: 50px !important;
 	}
 }
 /* Window buttons: 3 buttons */
 @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
 	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar:not(#hack) {
 	 padding-right: 80px !important;
  }
 }

With this customChrome.css and lines 118-EOF commented out in csd.css, it is fine :

With

This one was a little tricky, but i got something. Try with:

added to customChrome.css and csd.css uncommented, it looks like this:

[rafaelmardojai]

:root[tabsintitlebar] #titlebar .titlebar-button:not(#hack) {
	height: auto !important;
	width: auto !important;
	padding: 0  !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button:hover:not(#hack) {
	box-shadow: none !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close:not(#hack) {
	-moz-appearance: -moz-window-button-close !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max:not(#hack) {
	-moz-appearance: -moz-window-button-restore !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min:not(#hack) {
	-moz-appearance: -moz-window-button-minimize !important;
}

[p00f]

White border around popup: