userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* #################
WINDOWS UWP DRAG BAR
################# */
toolbarbutton#alltabs-button {
	-moz-binding: url("userChrome.xml#js");
}


/* #################
- - - FONTS
################# */
#urlbar, #TabsToolbar .tabbrowser-tab, menu, .autocomplete-richlistbox, #menubar-items, statuspanel[type="overLink"] .statuspanel-label, toolbarbutton, #placeContent, #placesList, .editBMPanel_rowLabel, .textbox-input-box, .viewer-title.label.toolbar, .downloadTarget, .downloadDetails, #bookmarks-view-children, #sidebar-search-label, #sidebar-title, .menubar-text {
  font-family: "NotoSans-Regular", !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#clientBox {
  font-family: "NotoSans-Regular", !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

:root
{
/* #################
- - - COLORS
################# */
  /*var(--tab-bg)*/
  --alt-bg: #222 !important;          /* tab bg (selected) */

  --url-bg: #222 !important;          /* nav bar/url section */
  --browser-bg: #191919 !important;   /* tabs (unselected) + background */

  --main-text: #888 !important;       /* tab text */
  --secondary-text: #ccc !important;  /* selected tab text*/
  --third-text: #ddd !important;      /* url bar text*/

  --debug-color: rgba(255, 0, 0, 0.5) !important;


/* #################
- - - - ROOT
################# */
  --chrome-background-color: var(--browser-bg) !important;

  /* remove 1px line under background tabs */
  --toolbox-border-bottom-color: transparent !important;
  /* remove border around url bar */
  --chrome-nav-bar-controls-border-color: transparent !important;
}



/* #################
- - - NAV BAR
################# */

/* Color */
#nav-bar {
  background: var(--url-bg) !important; /* bg, same as url bar */

  /* Round buttons on hover*/
  --toolbarbutton-border-radius: 12px !important;
}


/* Make Toolbar Buttons Grayscale */
.toolbarbutton-1 {
  filter: grayscale(100%) brightness(1000%) invert(10%) !important;
}


/* #################
- - - URL BAR
################# */

#urlbar {
  /* No full url */
  /* -moz-binding: url("bindings.xml#urlbar") !important; */

  /* Color */
  color: var(--third-text) !important;   /* text */
  background: var(--url-bg) !important; /* bg */
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  /*max-width: 474px !important;*/
}
/* Center */
#urlbar .urlbar-input-box {
	text-align: center;
  margin-bottom: 1px;
  /*margin-left: -53px !important;*/
  box-shadow: none !important;
  margin-left: -25px !important;
  margin-right: 35px !important;
}

/*
 * Originally from:
 * http://forums.mozillazine.org/viewtopic.php?p=14404121#p14404121
 */

 #urlbar {
  position: relative;
  z-index: 1;
}

#identity-box:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  opacity: 0.2;
}

/* uBlock Origin Dashboard */
#urlbar[pageproxystate='valid'] #identity-box.extensionPage:after {
  background: #45a1ff; /* Firefox Blue 40 */
}
/* https://mixed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent:after {
  background: rgb(255, 136, 0); /* Firefox Yellow 60 */
}
/* https://very.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked:after {
  background: rgb(255, 136, 0); /* Firefox Yellow 60 */
}
/* https://self-signed.badssl.com/ but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after {
  background: rgb(255, 136, 0); /* Firefox Yellow 50 */
}
/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after {
  background: rgb(255, 136, 0); /* Firefox Yellow 70 */
}
/* https://mixed-script.badssl.com/ but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after {
  background: #f30323;  /* Firefox Red 60 */
}
/* http://http-login.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after {
  background: #f30323;  /* Firefox Red 70 */
}

#identity-box {
  background: rgb(255, 0, 0,0) !important; /* REMOVE ALPHA TO DEBUG*/
  color: rgba(0, 0, 0, 0) !important;
  width: 70px !important;
}

/* Unhide when hovering/active */
#identity-box:hover {
  color: var(--secondary-text) !important;
}
#identity-box[open="true"] {
  color: var(--secondary-text) !important;
}
#tracking-protection-icon-animatable-box, #connection-icon
{
  opacity: 0 !important;
}
#identity-box:hover #tracking-protection-icon-animatable-box, #identity-box[open="true"] #tracking-protection-icon-animatable-box, #identity-box:hover #connection-icon, #identity-box[open="true"] #connection-icon
{
  opacity: 100 !important;
}

#context-stop,#context-reload[hidden="true"]
{
  display: none;
}



/* #################
- - - - TABS
################# */

/* Unselected Color */
#TabsToolbar {
  color: var(--main-text) !important;      /*text color*/
}

/* Selected Color */
.tab-background[selected="true"] {
  background-attachment: none!important;
  background-color: var(--alt-bg) !important; /* bg color */
  background-image: none!important;
}
#TabsToolbar .tabbrowser-tab[selected] {
  color: var(--secondary-text) !important;   /*text color*/
}

/* New tab button color */
#new-tab-button, .tabs-newtab-button {
  list-style-image: url("newtab.png") !important;
  -moz-image-region: auto !important;
}

/* Close tab color */
#TabsToolbar .close-icon {
  filter: opacity(17%) !important;
}

/* FAVICONS Color */
/* Default */
.tab-icon-image
{
  filter: grayscale(100%) opacity(90%) !important;
  /*display: none !important;*/
}
/* Selected */
.tabbrowser-tab[selected] .tab-icon-image
{
  filter: grayscale(50%) opacity(90%) !important;
  /*display: none !important;*/
}

/* Pinned */
.tabbrowser-tab[pinned] .tab-icon-image
{
  filter: grayscale(0%) opacity(90%) !important;
  /*display: none !important;*/
}

/* Unhide the tab close button on hover
#TabsToolbar .close-icon {
  display: none !important;
}
#TabsToolbar .tabbrowser-tab:hover .close-icon {
  visibility: visible !important;
}
*/

/* tab line - adjust color & size, default #0a84ff 2px */
.tab-line {
  background-color: #0a84ff !important;
  height: 0px !important;
}

/*Remove border between tabs */
.tabbrowser-tab::after, .tabbrowser-tab::before {
  border-left: none !important;

  color: #111 !important;
  opacity: 1 !important;
}

/* Center Text */
.tab-text {
  text-align: center !important;
}
.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}





/* #################
- - HIDE STUFF
################# */
/* Menu */
#appMenu-fxa-container,
#appMenu-fxa-container+toolbarseparator,
/* #appMenuRestoreLastSession, */
#appMenu-zoom-controls,
#appMenu-zoom-controls+toolbarseparator,
#appMenu-edit-controls,
#appMenu-edit-controls+toolbarseparator,
#appMenu-library-button,
#appMenu-customize-button,
#appMenu-customize-button+toolbarseparator,
#appMenu-open-file-button,
#appMenu-save-file-button,
#appMenu-find-button,
#appMenu-more-button,


#dropmarker-icon,
#historydropmarker,
#autocomplete-history-dropmarker,
#urlbar-history-dropmarker,
#dropmarker,
#autocomplete-history-dropmarker,
#urlbar-history-dropmarker,
#urlbar-reload-button,
#urlbar-zoom-button,
#plugins-notification-icon,
#notification-anchor-icon,
#notification-popup-box,
.scrollbutton-up,
.scrollbutton-down,
#alltabs-button,
.autocomplete-history-dropmarker.urlbar-history-dropmarker,
.toolbarbutton-menubutton-dropmarker,
#memfx-toolbar-button,
#reload-button,
.box-inherit.toolbarbutton-menubutton-button,
.scrollbutton-up,
.scrollbutton-down,

#stop-button,


/* URL Bar */
#pageActionButton,
#pocket-button-box,
#ar-button,
.autocomplete-history-dropmarker,

#page-action-buttons {
  /*** ICONS AND BUTTONS ***/
  display: none !important;
}
#dropmarker-icon,


/* #################
- SIZE & LOCATIONS
################# */

/* Move Tab-bar beside Nav-bar */
#TabsToolbar {
  margin-bottom: 0px !important;             /* not needed anymore? */
  margin-top: 0px !important;                /*  */
  margin-left: 35vw !important;
  margin-right: -34px !important;
  max-height: 32px !important;
}
#nav-bar {
  margin-bottom: -1px !important;            /* remove navbar bottom 1px border */
  margin-top: -32px !important;
  margin-right: 65vw !important;
  border: none !important;
}
/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: initial !important;
}
/* Back & Forward buttons */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  transform: scale(0.9, 0.9) !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
}
/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow {
  -moz-box-ordinal-group: 0 !important;
  margin-right: -6px !important;
}
#appMenu-popup {
  margin-right: -258px !important;
}
#appMenu-popup .panel-arrow {
  margin-right: 248px !important;
}
/* More tools... button */
#nav-bar-overflow-button {
  transform: scale(0.9, 0.9) !important;
  fill: var(--color-overflow) !important;
}
/* Tabs */
.tabbrowser-tab {
  height: 32px !important;
}
.tab-content[pinned] {
  padding: 0 30px !important;
}
/* Remove empty space before first tab
Delete this rule if you need a space to drag the window*/
#TabsToolbar .titlebar-placeholder[type="pre-tabs"]{
    display: none !important;
}


/* #################
- - CLOSE BUTTONS
################# */

/* #titlebar-buttonbox:-moz-window-inactive > * {
  list-style-image: url(buttons/nofocus.png) !important;
 } */


 .titlebar-min {
  padding: 0px  !important;
  padding-left:  14px !important;
  padding-right: 14px !important;

  margin-left: 0px !important;
  margin-right: -2px !important;
  margin-top: 0px  !important;
  margin-bottom: 0px  !important;


  background-color: transparent !important;
  list-style-image: url(buttons/minus_WAIT.png) !important;
  transform: scale(0.8,0.8) !important;
 }
 .titlebar-min:hover {
  list-style-image: url(buttons/minus_FULL.png) !important;
 }

 .titlebar-max {
  padding: 0px  !important;
  padding-left:  14px !important;
  padding-right: 14px !important;

  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px  !important;
  margin-bottom: 0px  !important;

  background-color: transparent !important;
  list-style-image: url(buttons/plus_WAIT.png) !important;
  transform: scale(0.8,0.8) !important;
 }
 .titlebar-max:hover {
     list-style-image: url(buttons/plus_FULL.png) !important;
 }

 .titlebar-close {
  padding: 0px  !important;
  padding-left:  14px !important;
  padding-right: 14px !important;

  margin-left: 0px !important;
  margin-right: 33px !important;
  margin-top: 0px  !important;
  margin-bottom: 0px  !important;

  background-color: transparent !important;
  list-style-image: url(buttons/cross_WAIT.png) !important;
  transform: scale(0.8,0.8) !important;
 }
 .titlebar-close:hover {
     list-style-image: url(buttons/cross_FULL.png) !important;
 }

/* #################
 SEARCH POPOUT MODS
################# */

/*
https://www.jeffersonscher.com/gm/url-bar-tweaks.html
*/
@-moz-document url(chrome://browser/content/browser.xul) {
  /* Remove " - Visit" or " - Search with" bar in the drop-down */
  #PopupAutoCompleteRichResult richlistitem:first-of-type[type*="heuristic"],
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="searchengine"],
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="visiturl"],
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="keyword"] {
    display:none !important;
  }
  /* Hide line for searching sld.tld below "Visit" Line */
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="visiturl"] +
  richlistitem[actiontype="searchengine"] {
    display:none !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistbox {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Display drop-marker only when URL bar is hovered (Firefox default) */
  /* Set max-height for items visible without scrolling */
  #PopupAutoCompleteRichResult .autocomplete-richlistbox {
    /* height:auto doesn't work in photon */
    max-height: calc(45.5px * 10) !important;
  }
  /* Set drop-down width */
  #PopupAutoCompleteRichResult {
    width: 500px !important;
    max-width: 500px !important;
    margin-left: 0 !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-title-text,
  #PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-url-text {
    min-width: 610px !important;
  }
  /* Create sufficient height for two lines */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) {
    position: relative !important;
    height: 45.5px !important;
  }
  /* Subtle border between results */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem {
    border-bottom-color: #eee !important;
  }
  /* Position page title, set font-size */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-title {
    position: absolute !important;
    left: 54px;
    top: 1px;
    font-size: 14px !important;
  }
  /* Position page url / action, set font-size */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-url,
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-action {
    position: absolute !important;
    left: 54px;
    top: 20px;
    font-size: 12px !important;
  }

  /* Position bookmark tags */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-tags {
    position: absolute !important;
    right: 0px;
    top: 3px;
  }
  /* Hide separator between title and URL */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-separator {
    display: none !important;
  }
  /* Position special icon (bookmark, switch-to-tab) */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-type-icon {
    margin-left: 4px !important;
 }
  /* Prevent excess indenting of icons in Photon */
  #PopupAutoCompleteRichResult .autocomplete-richlistitem [anonid="type-icon-spacer"] {
    display: none !important;
  }
  #PopupAutoCompleteRichResult {
     --item-padding-start: 0 !important;
  }

  .autocomplete-richlistitem[selected=true] {
    background-color: Highlight !important;
  }
  .autocomplete-richlistitem[selected=true] .ac-title,
  .ac-title[selected],
  .autocomplete-richlistitem[selected=true] .ac-url,
  .ac-url[selected],
  .autocomplete-richlistitem[selected=true] .ac-action,
  .ac-action[selected],
  .autocomplete-richlistitem[selected=true] .ac-separator,
  .ac-separator[selected] {
    color: HighlightText !important;
  }
  /* Use default text matching style */
  /* Ability to scroll in Fx57 */
  #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
    overflow-y: auto !important;
    padding-right: 3px !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistbox {
    padding-right: 0 !important;
  }
}