uchrome

@import url('dark_checkboxes_and_radios.css');
@import url('dark_additional_windows.css');
@import url('dark_context_menus.css');

/*
V A R I A B L E S
Here you can change the opacity level and the main color of the browser. Also the color of the selections (When you select text)
*/

:root {
  --urlbar-width:25vw;
  --srf-color-primary: rgba(10, 10, 10);
  /*
  WARNING: Transparency breakes the window behavior,
  you can still add transparency but the
  window manager will have some bugs.
  */
  --srf-color-selection: #66a6d9;
}

/*
G E N E R A L
*/

window,
#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar {
  background-color: var(--srf-color-primary) !important;
  -moz-appearance: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

::selection {
  background-color: var(--srf-color-selection);
  /* Text color of your selection */
  color: #141414;
}

/*
T A B S
*/

:root {
  --tabs-border: transparent !important;
  --toolbox-border-bottom-color: transparent !important;
}

#navigator-toolbox {
  border: 0px !important;
}

#TabsToolbar {
  margin-top: -1px !important;
  margin-bottom: 1px !important;
  margin-left: var(--urlbar-width) !important;
  max-height: 32px !important;
}

.tab-background {
  border: none !important;
}

.tab-background[selected='true'] {
  -moz-appearance: none !important;
  background-image: none !important;
}

.tabbrowser-tabs {
  border: none !important;
  opacity: 0 !important;
}

.tabbrowser-tab::before {
  opacity: 0 !important;
  border-left: none !important;
}

.tabbrowser-tab::after {
  opacity: 0 !important;
  border-left: none !important;
}

.titlebar-placeholder {
  border: none !important;
}

.tab-line {
  display: none !important;
}

.tabbrowser-arrowscrollbox {
  height: 32px !important;
  min-height: 32px !important;
}

.titlebar-placeholder[type='pre-tabs'] {
  display: none !important;
}

/*
B U T T O N S
Here you can comment if you want your buttons to be showed up!
*/

/* This one is the forward button  */
#forward-button {
  display: none !important;
}

/* This one is the back button  */
#back-button {
  display: none !important;
}

/* This one is the spacer between tabs and border  */
.titlebar-spacer {
  display: none !important;
}

/* This one is the "shield" icon  */
#tracking-protection-icon-container {
  display: none !important;
}

/* This one is the hamburger menu!  */
#PanelUI-button {
  display: none !important;
}

/* This one removes the close button  */
.tabbrowser-tab:not([pinned]) .tab-close-button {
  display: none !important;
}

/* This one clears the tabs icon when they're not pinned  */
.tabbrowser-tab:not([pinned]) .tab-icon-image {
  display: none !important;
}

/* Removing the zoom button  */
#urlbar-zoom-button {
  display: none !important;
}

/* Page action (right three dash button)  */
#pageActionButton {
  display: none !important;
}

/*
N A V B A R
*/

#navigator-toolbox::after {
  border: 0px !important;
}

#nav-bar {
  border: none !important;
  box-shadow: none !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
  margin-top: -32px !important;
  margin-bottom: -1px !important;
  margin-right: calc(100vw - var(--urlbar-width)) !important;
  height: 32px !important;
}

/*
S I D E - B A R
*/

#history-panel,
#sidebar-search-container,
#bookmarksPanel {
  background: var(--srf-color-primary) !important;
}

#search-box {
  -moz-appearance: none !important;
  background: var(--srf-color-primary) !important;
  border-radius: 6px !important;
}

#sidebar-icon {
  display: none !important;
}

.sidebar-placesTree {
  color: var(--srf-color-selection) !important;
}

#sidebar-switcher-target {
  color: var(--srf-color-selection) !important;
}

#sidebar-header {
  background: var(--srf-color-primary) !important;
}

#sidebar-splitter {
  border: none !important;
  opacity: 1 !important;
  background-color: var(--srf-color-primary) !important;
}

splitter#sidebar-splitter {
  border: none !important;
}

/*
U R L - B A R
*/

#urlbar[breakout] {
  margin-inline-start: 0px !important;
  width: 100% !important;
  left: 0 !important;
  top: calc(
    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  ) !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml)
{
  #urlbar[breakout][breakout-extend] > #urlbar-background {
    animation-name: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  }
}

#urlbar[breakout]:not([open]) {
  bottom: calc(
    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  ) !important;
}

#urlbar[breakout-extend] {
  top: calc(
    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  ) !important;
  left: calc(
    (var(--urlbar-toolbar-width) - var(--urlbar-width)) / 2
  ) !important;
  width: 100% !important;
}

#urlbar[breakout-extend] #urlbar-input-container {
  height: calc(var(--tab-min-height) - 3px) !important;
  padding: 0px !important;
}

#urlbar-input-container {
  padding: 0 !important;
  height: 100% !important;
}

#identity-box {
  display: none;
}

.urlbarView-row {
  padding: 0px !important;
}

#searchbar {
  background: var(--bf-bg) !important;
  border: none !important;
}

.searchbar-textbox {
  color: var(--bf-focus-fg) !important;
  font-weight: 700 !important;
}

#urlbar-container {
  min-width: 150px !important;
}

#urlbar {
  border: none !important;
  box-shadow: none !important;
}

#page-action-buttons {
  display: none !important;
}

.urlbarView {
  margin: 0px !important;
  width: 100% !important;
}

#urlbar-label-box,
#urlbar-search-mode-indicator {
  display: none !important;
}

/*
If you want to show the URLBar extended you must
change this two blocks:
In order to show it, you must change the value of "transparent" in the first block
and erease the second block.
*/

#urlbar-background {
  background: transparent !important;
  border: transparent !important;
  animation: none !important;
}

#urlbar .urlbarView {
  display: none !important;
}