userChrome.css

window#main-window {
	/* *******************************************************************
	You can tweak the major colors here, the names should
	be self explanatory. If you want you can also import the stylesheet
	generated by pywal and pass the variables from that stylesheet on to
	--color-* vars.
 */

  --nice-pink: #cc759d;
  --faded-pink: #b898a7;

	--color-fg   : #fefefa;
	--color-bg   : #282a36;
	--color-0    : #43c9cf;
	--color-1    : #d0d01e;
	--color-2    : #fc6b89;
	--color-3    : #bc6ccc;
	--color-4    : #f79130;
	--color-5    : #ead2ef;

	--color-tab-active-end       : var(--color-4);
	--color-tab-active-start     : var(--color-2);
	--color-tab-hover-end        : var(--color-0);
	--color-tab-hover-start      : var(--color-3);
	--color-tab-normal-end       : var(--color-bg);
	--color-tab-normal-start     : var(--color-bg);
	--color-tab-pinned-active    : var(--color-2);
	--color-tab-pinned-normal    : var(--color-5);
	--color-urlbar-buttons-bg    : #fc6b89;
	--color-urlbar-text          : var(--color-5);

	
	/* Easy way to tweak most params */

	--gap-between-tabs                   : 5px;
	--margin-around-urlbar               : 4px;
	--margin-before-back-button          : 9px;
	--padding-around-searchengine-opts   : 10px;
	--pinned-tab-favicon-dim             : 27px;
	--tab-height                         : 30px;
	--tabs-container-height              : 70px;
	--tab-text-font                      : "Hasklug Nerd Font", sans-serif;
	--tab-text-font-size                 : 10pt;
	--margin-before-tab-list             : 8px;
	--margin-after-tab-list              : -8px;
	--urlbar-text-font                   : "mononoki Nerd Font", sans-serif;
	--urlbar-text-size                   : 10pt;
	--urlbar-text-weight                 : 600;
	--urlbar-list-width                  : 50%;
	--urlbar-container-margin            : 0px;


	/* ******************************************************************* */

	--arrowpanel-background: var(--color-bg) !important;
	--arrowpanel-border-color: var(--color-bg) !important;
	--arrowpanel-color: var(--color-fg) !important;
	--arrowpanel-dimmed-even-further: rgba(249, 249, 250, .2);
	--arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
	--arrowpanel-dimmed: rgba(249, 249, 250, .1);

	--autocomplete-popup-background: var(--color-bg) !important;
	--autocomplete-popup-color: var(--color-fg) !important;
	--autocomplete-popup-highlight-background: var(--color-bg) !important;

	--backbutton-active-background: var(--color-fg) !important;
	--backbutton-background: var(--color-fg) !important;
	--backbutton-border-color: var(--color-bg) !important;
	--backbutton-hover-background: var(--color-fg) !important;

	--chrome-content-separator-color: var(--color-bg) !important;
	--chrome-content-separator-color: var(--color-bg) !important;

	--downloads-item-details-opacity: 0.6;
	--downloads-item-font-size-factor: 0.9;
	--downloads-item-height: 5.5em;

	--drag-drop-transition-duration: .3s;

	--in-content-button-background-active: var(--color-bg) !important;
	--in-content-button-background-hover: var(--color-bg) !important;
	--lwt-accent-color: var(--color-fg) !important;
	--lwt-text-color: var(--color-fg) !important;
	--lwt-toolbar-field-background-color: var(--color-bg) !important;
	--lwt-toolbar-field-color: var(--color-bg) !important;
	--lwt-toolbar-field-color: var(--color-fg) !important;
	--lwt-toolbarbutton-icon-fill: var(--color-5) !important;

	--panel-disabled-color: var(--color-0) !important;
	--panel-separator-color: var(--color-bg) !important;

	--tab-min-height: 15px;
	--tabs-top-border-width: 0px;

	--toolbar-bgcolor: var(--color-bg) !important;
	--toolbar-bgimage: none;
	--toolbar-color: var(--color-fg) !important;
	--toolbar-non-lwt-bgimage: var(--color-bg) !important;
	--toolbarbutton-active-background: var(--color-bg) !important;
	--toolbarbutton-focus-outline: var(--color-bg) !important;
	--toolbarbutton-height: 0;
	--toolbarbutton-hover-background: var(--color-bg) !important;
	--toolbarbutton-hover-transition-duration: 150ms;
	--toolbarbutton-icon-fill-opacity: 1;
	--toolbarbutton-inner-padding: 12px !important;
	--toolbarbutton-outer-padding: 4px !important;

	--urlbar-popup-action-color: var(--color-fg) !important;
	--urlbar-popup-url-color: var(--color-fg) !important;
	--urlbar-separator-color: var(--color-bg) !important;
	--urlbar-separator-color: var(--color-bg) !important;
}

window#bookmarksPanel {
	--lwt-sidebar-background-color: var(--color-bg) !important;
}

window#history-panel {
	--lwt-sidebar-background-color: var(--color-bg) !important;
	--lwt-sidebar-text-color: var(--color-fg) !important;
}




/*
======================================================================
* Rules for side bar stuff
======================================================================
*/

vbox#sidebar-box {
	--sidebar-background-color: var(--color-bg) !important;
	--sidebar-text-color: var(--color-fg) !important;
}

hbox#browser {
	--sidebar-border-color: var(--color-bg) !important;
}

.sidebar-splitter {
	display: none !important;
}




/*
======================================================================
* Rules for urlbar + navbar buttons etc
======================================================================
*/

#urlbar-container {
	margin: var(--urlbar-container-margin) !important;

}
.toolbarbutton-1 {
	color: inherit !important;
	fill: var(--color-fg) !important;
	fill-opacity: 1 !important;
}
#nav-bar-customization-target {
	background-color: var(--color-bg) !important;
}

/* This positions the tabs under the navaigator container */
#titlebar {
	-moz-box-ordinal-group: 3 !important;
}

#back-button {
	list-style-image: url("left-arrow.svg") !important;
	margin-left: var(--margin-before-back-button) !important;
	opacity: 1 !important;
}

#forward-button {
	list-style-image: url("right-arrow.svg") !important;
	opacity: 1 !important;
}

#navigator-toolbox {
	--tabs-border-color: var(--color-bg) !important;
	background-color: var(--color-bg) !important;
	border: none !important;
	border: none !important;
	box-shadow: none !important;
	height: var(--tabs-container-height); /* This controls the height of the container that holds the tabs */
}

:root:not([uidensity="compact"]):not([chromehidden~="toolbar"]) #PanelUI-button {
	border-image-slice: 0 !important;
}

.titlebar-spacer {
	display: none !important;
}

/* Hacky way to make the url input bar centered */
input#urlbar-input {
	caret-color: transparent !important;
	width: 99999px !important;
	text-align: center !important;
	font-weight: var(--urlbar-text-weight) !important;
	font-family: var(--urlbar-text-font) !important;
	font-size: var(--urlbar-text-size) !important;
}

hbox#urlbar[focused=true] {
	color: var(--color-urlbar-text) !important;
}

#urlbar:not(.megabar),
#urlbar.megabar > #urlbar-background,
#searchbar {
	border: none !important;
	box-shadow: none !important;
}

.urlbar-history-dropmarker,
#star-button,
#identity-box {
	display: none !important;
}

#urlbar {
	background-color: var(--color-fg);
	background: none !important;
	border: none !important;
	margin: var(--margin-around-urlbar) !important;
}

.urlbar-one-offs-header-label {
	color: var(--color-fg) !important;
}

.search-one-offs {
	padding: var(--padding-around-searchengine-opts) !important;
}

.chromeclass-location {
	border: none !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* This centers and reduces the width of the urlbar list */
.urlbarView:not(.megabar) {
	box-shadow: none !important;
	background-color: var(--color-bg) !important;
	width: var(--urlbar-list-width) !important;
	margin-left: calc(var(--urlbar-list-width) / 2) !important;
	border-radius: 0 8px 8px !important;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 25%) !important;
}

.urlbarView-favicon {
	display: none !important;
}

.urlbarView-row {
	text-align: center !important;
}

.urlbarView-row[selected] {
	background: var(--color-5) !important;
	color: var(--color-bg) !important;
	fill-opacity: 1 !important;
}

.panel-arrowbox {
	margin: 0 !important;
	display: none !important;
}

.panel-arrowcontent {
	margin: 0 !important;
}

:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
	background-color: var(--color-bg) !important;
}




/*
======================================================================
* Rules for Tabs
======================================================================
*/
.tab-line,
.tab-background,
.tabbrowser-tab::before,
.tabbrowser-tab::after,
.tabbrowser-tab {
	margin-inline-end: var(--gap-between-tabs) !important;
	/* --tab-line-color: none !important; */
	background-color: var(--color-bg) !important;
	/* border-radius: var(--tab-height) !important; */
	max-height: var(--tab-height) !important;
	min-height: var(--tab-height) !important;
	/* transition: opacity 0.25, background-image 0.25 !important; */
}

.tabbrowser-tab[pinned=true] {
	background-image: linear-gradient(
		to left,
		var(--color-tab-pinned-normal),
		var(--color-tab-pinned-normal)
	) !important;
}

.tab-content {
	text-align: center;
	font-family: var(--tab-text-font) !important;
	font-size: var(--tab-text-font-size) !important;
}

.tabbrowser-tab:hover {
	background-color: var(--faded-pink) !important;
	/* border-radius: var(--tab-height) !important; */
}

/* Pinned tabs */
/* TODO: Find a way to add spacing between the pinned tabs when tab list scrolling is triggered. Adding a margin just screws everything up */
.tabbrowser-tab[pinned="true"] {
	background-color: var(--color-bg) !important;
	background-image: none !important;
	color: var(--color-bg) !important;
	min-width: var(--tab-height) !important;
	max-width: var(--tab-height) !important;
}

.tabbrowser-tab[selected="true"] {
  background-color: var(--nice-pink) !important;
  background: var(--nice-pink) !important;
	background-image: linear-gradient(
		  to left,
		  var(--nice-pink),
		  var(--nice-pink)
	) !important;
	border: none !important;
	/* border-radius: var(--tab-height); */
}

.tabbrowser-tab[selected="true"] .tab-content {
	  text-align: center;
	  font-family: var(--tab-text-font) !important;
	  font-size: var(--tab-text-font-size) !important;
    background-color: var(--nice-pink) !important;
}

/* The round pinned tab favicon */
.tabbrowser-tab[pinned="true"] .tab-icon-image {
	display: inline-block !important;
	align-items: center !important;
	min-width: var(--pinned-tab-favicon-dim) !important;
	min-height: var(--pinned-tab-favicon-dim) !important;
}

.tabbrowser-tab[pinned="true"] .tab-label-container {
	display: none !important;
}

.tabbrowser-tab[pinned="true"][selected="true"] {
    background-color: var(--nice-pink) !important;

#tabs-newtab-button {
	background-image: none !important;
}

#tabs-newtab-button:hover {
	background: none !important;
	background-image: none !important;
	/* border-radius: 50%; */
}

.tab-close-button {
	opacity: 0;
  transition: opacity 0.2s ease !important;
	-moz-transition: opacity 0.2s ease !important; 
}

.tab-close-button:hover {
	  opacity: 100;
}

.tab-stack {
	display: flex !important;
	justify-content: center !important;
}

/* Modify these values to tweak the start point of the tab list */
.tabbrowser-arrowscrollbox {

	margin-inline-start: var(--margin-before-tab-list) !important;
	margin-inline-end: var(--margin-after-tab-list) !important;
}