Firefox OneBar style

userChrome.css

/* This style will merge the tab- and urlbar into one bar and hide colors, indicators,
 * icons, seperators, ... . The goal is to provide a minimal and non distractive UX,
 * while still being fully useable.
 *
 * Currently tested on MacOS Sierra with Firefox 65 (dark theme) (desity compact)
 *
 * Inspiration and some parts taken from:
 * https://github.com/Timvde/UserChrome-Tweaks/tree/master/navbar
 * https://github.com/TheBreno123p/dotfiles/blob/master/Firefox/userChrome.css
 * https://www.reddit.com/r/FirefoxCSS/comments/8cnmwt/new_ui_to_maximise_screen_real_estate_let_me_know/
 * https://www.reddit.com/r/firefox/comments/3ygejp/i_find_the_addon_buttons_too_colourful_and/
 * https://gitlab.com/markonius/my-cool-userchrome
 */

/* TODO: Backround color selected tab should be same as url bar, and not hard coded (depending on theme) */
/* TODO: Right border from leftmost tab is missing, when seperators are shown */
/* TODO: nav-bar-overflow-button to the right (where uBlock is) */
/* TODO: Position ssl lock, info, tracking protection ... */
/* TODO: Animation tracking protection, page info only when not standard */
/* TODO: Expand url search bar, when selected and url to long */
/* TODO: Dim color of container indicator line or make transparent/grayscale ... */
/* TODO: Hide reader icon ??? */
/* TODO: Hide new tab (+) button */
/* TODO: Show bookmark star only when stared */
/* TODO: Only show download icon when downloading (check auto hide tick box) */
/* TODO: stlye url dropdown list  */
/* TODO: split file into smaller ones and import them */
/* TODO: grayscale fav icons (spotify) like ublock icon */

/* TOFIX: import not working */
@import url("private-tabs.css") screen;
/* TOFIX: Move url-dropdown-list slightly up to remove gap */
@import url("url-dropdown-list.css") screen;

/* Grayscale all toolbar icons */
toolbarbutton { filter: grayscale(100%); }
#ublock0_raymondhill_net-browser-action { filter: grayscale(100%) invert(80%);}

/* Grayscale all favicons */
tab .tab-icon, .tab-icon-image { filter: grayscale(100%); }

/* Clean up the tab- / titlebar */
/* #titlebar { display: none !important; } */
/* #main-window { -moz-appearance:none !important; } */
/* .titlebar-placeholder { display: none; } */
.titlebar-spacer {display: none}
.titlebar-buttonbox-container {display: none}
  
/* Move hamburger menu to top left */
#PanelUI-button {
    -moz-box-ordinal-group: 0 !important;
  margin-top: 1px !important;
/*   margin-left: -3px !important; */
  margin-right: -3px !important;
/*   display: none; */
}

/* Replace hamburger menu icon with firefox icon */
#PanelUI-menu-button {
  list-style-image: url(chrome://branding/content/identity-icons-brand.svg) !important;
/*   list-style-image: url("chrome://branding/content/icon64.png") !important; */
}

/* Move overflow button to the left an hide it */
#nav-bar-overflow-button {
/*   -moz-box-ordinal-group: 0 !important;  */
  margin-top: 1px !important;
/*   visibility: collapse; */
}

/* Hides the labels of _permanent_ overflow menu items, making them show only as icons. */
#widget-overflow-fixed-list {
    padding-left: 1em;
    display: grid;
    grid-template-rows: repeat(1, 3.0em);
    grid-template-columns: repeat(8, 3.4em);
}

/* TOFIX: */
/* https://www.reddit.com/r/FirefoxCSS/comments/7xje39/grey_bar_and_customize_toolbar_in_overflow_menu/ */
/* #customization-panelHolder {
    min-width: 275px !important;
    max-width: 275px !important;
} */

/* Hide the back and forward buttons */
#main-window :-moz-any(#back-button, #forward-button) {
  display: none !important;
}

/* Move tabs over to right to make room for address bar */
#TabsToolbar {
  margin: 0 0 0 35vw !important;
/*   height: 30 !important;/ */
  max-height: 29px !important; /* fixed tab hight while dragging tabs */
}

/* Move address bar to titlebar with tabs */
#nav-bar {
  margin: -30px 65vw 0px 0px !important;
  height: 30px !important;
}


/* Hide seperator line under address- and tab bar */
#navigator-toolbox::after{ content: none !important; }

/* URL bar width adjustments */
#urlbar-container {
/*   border: none !important; */
/*   width: 100px !important; */
}

#urlbar {
  background: none !important;
  border: none !important;
/*   margin-left: 0px !important; */
  min-width: 40px !important;
/*   max-width: 9950px !important; */
  font-size: 12px !important;
/*   height: 44px !important; */
  box-shadow: none !important;
}

/* Clean up the identity box */
#identity-box {
/*   display: none; */
/*   direction: rtl;  */
  padding: 0px !important;
  margin-inline-end: 0px !important;
    border-inline-end: 0px !important;
  margin-left: 2px !important;
}

/* Hide the EV SSL label, location abbrevation (when present), extension-icon. */
#identity-icon-label, #identity-icon-country-label, /*#identity-icon,*/ #connection-icon, #extension-icon {
  display: none;
/*   visibility: collapse !important; */
}

/* Hide tracking protection and info icon for sites that don't have permissions */
/* #tracking-protection-icon-box, */
/* #urlbar :not(.grantedPermissions) #identity-icon */
{
  visibility: collapse !important;
  transition: 125ms !important; /* Animate icon hiding */
  opacity: 0 !important; /* Make icons transparent */
    -moz-margin-end: -1.1em !important; /* Hide icons by offsetting them */
}

#tracking-protection-icon-animatable-image { margin-top: 1px !important;}

/* Shows tracking protection and info icon on identity-box hover */
/* #identity-box:hover #identity-icon, */
/* #identity-box:hover #tracking-protection-icon-box */
{
  visibility: visible !important;
  transition: 125ms !important; /* Animate icon showing */
  opacity: 1 !important; /* Make icons opaque */
  -moz-margin-end: initial !important; /* Use initial margins to show icons */
}

.urlbar-go-button.urlbar-icon{ display: none !important;}

/* Hide the address bar history dropmarker */
.urlbar-history-dropmarker{ display: none !important; }

/* Hide container info in url-bar (Container extensions)*/
#userContext-label { display: none !important; }
#userContext-indicator { display: none !important; }

/* Hide the "Reader mode button", when available */
#reader-mode-button { display: none !important; }

/* Hides the separator between address bar pageAction extensions and internal icons (Containers, Reader, etc.) */
#pageActionSeparator{ display: none !important; }

/* Hide the "pageAction Button" */
#pageActionButton { display: none !important; }

/* Hide the bookmarks star button */
#star-button { display: none !important; }

/* Reduce width of pinned tabs by reducing the left and right padding */
#TabsToolbar .tab-content[pinned] { padding: 0 5px !important; }

/* Hide separators between tabs */
.tabbrowser-tab::before, .tabbrowser-tab::after, .titlebar-placeholder {
  border: none !important;
}

/* Change color of selected tab and nav-bar*/
.tab-background[selected="true"], #nav-bar, #navigator-toolbox, #identity-box {
/*     background-color: #F9F9FA !important; */
/*     background-color: #323234 !important; */
/*     background-image: none !important; */
}

/* Hide tab line indicator for selected tab */
.tab-line { display: none !important; }

/* TOFIX: Hide new tab (+) button */
/* #tabs-newtab-button_toolbarbutton-1 { display: none !important; } */

/* NOTE: Not super relevant with a light theme */
/* Disable White Flash of Death */
/* https://www.reddit.com/r/FirefoxCSS/comments/7ignsk/oneline_flat_interface_dark_light/dqzo3om/ */
/* browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content {
  background-color: var(--ui-basecolor) !important;
  background-color: #0d0d0d !important;
} */

/* :root
{
  --in-content-page-background: #36393f
} */

/*changes "flash" on tab open color*/
#browser vbox#appcontent tabbrowser, #content, #tabbrowser-tabpanels,
browser[type=content-primary], browser[type=content] > html
{
/*   background: #36393f !important; */
}