Firefox 66 User Chome Styles

userChrome.css

/*
  Created by Emily Mabrey via modification of the CSS provided by the Timvde/UserChrome-Tweaks project under the terms of the GPL-3.0.
  
  Visit that project at https://github.com/Timvde/UserChrome-Tweaks
*/

/* 
  Settings which will be used when compact layout is active.
  These configured values make things super compact and much more space is available for the webpage.
*/

#main-window{
  --custom-theme-base-color: rebeccapurple;
  --custom-theme-lighter-color: #ab8fc7;
  --custom-theme-darker-color: #542a7e;
  --custom-theme-windows-theme-color: -moz-win-accentcolor;
  
  
  --lwt-toolbarbutton-icon-fill-attention: var(--custom-theme-base-color) !important;
}

[uidensity="compact"]:root {
  --tab-min-height: 29px !important;
  --tab-margin: 2px 2px -2px -2px !important;
  
  --tabs-bar-padding-top: 0px !important;
  --tabs-bar-grab-area-width: 1.5em;
  
  --navbar-textarea-height: 22px !important;
  
  --toolbar-button-padding: 0px 0px 0px 0px !important;
  
  --bookmark-bar-padding: 0px 2px 0px 2px !important;
  --bookmark-bar-height:  auto !important;
  --bookmark-bar-width: 100% !important;
  
  --bookmark-item-padding-left: 2px !important;
  --bookmark-item-padding-right: 2px !important;
  --bookmark-item-inline-margin: 2px;
}

/* Configure tab bar and tab colors */

:root:not(:-moz-window-inactive) #TabsToolbar {
    background-color: var(--custom-theme-darker-color) !important;
}

:root:not(:-moz-window-inactive) tabs#tabbrowser-tabs{
  --tab-line-color: var(--custom-theme-lighter-color) !important;
}

tabs#tabbrowser-tabs{
  --tab-line-color: var(--custom-theme-lighter-color) !important;
}

#TabsToolbar {
    background-color: var(--custom-theme-base-color) !important;
}

/* Display tab close button on mouse over */
.tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button {
  display: none !important;
}

.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
  display: -moz-box !important;
}

.tabbrowser-tab {
    max-height: var(--tab-min-height) !important;
}

#TabsToolbar > .toolbar-items{
    padding-top: var(--tabs-bar-padding-top) !important;
}

.tabs-newtab-button{
  margin: var(--tab-margin) !important;
}

/* Resize the grab areas on the tab bar*/
.titlebar-spacer {
  width: var(--tabs-bar-grab-area-width) !important;;
}

/* Configure the size of the search bar and toolbar buttons*/
#urlbar, .searchbar-textbox {
  font-size: unset !important;
  min-height: var(--navbar-textarea-height) !important;
}

#identity-box {
  max-height: var(--navbar-textarea-height) !important;
}

#nav-bar .toolbarbutton-1 {
  padding: var(--toolbar-button-padding) !important;
}

/* Configure bookmark bar height and padding */
#nav-bar ~ #PersonalToolbar:not([customizing]) {
  padding: var(--bookmark-bar-padding) !important;
  height: var(--bookmark-bar-height) !important;
  width: var(--bookmark-bar-width) !important;
}

/* Configure the bookmark items padding */
#PlacesToolbarItems .bookmark-item {
  padding-left: var(--bookmark-item-padding-left) !important;
  padding-right: var(--bookmark-item-padding-right) !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon {
    margin-inline-end: var(--bookmark-item-inline-margin) !important;
}