userChrome.css

@import url("icons.css");

* {
  font-family: 'system-ui' !important;
}

:root {
  --bg1: #101010;
  --bg2: #161616;
  --bg3: #202020;
  --fg1: #d4be98;
  --fg2: #aa9e7a;
  --fg3: #80775d;
  --fg4: #635945;
  --tab-font-size: 12px;
  --max-tab-width: 25%;
  --tab-height: 20px;
  --toolbar-start-end-padding: 2px !important;
  --urlbar-container-height: 36px !important;
  --panel-item-hover-bgcolor: var(--bg3) !important;
  --button-background-color: var(--bg3) !important;
  --button-background-color-hover: var(--bg1) !important;
  --panel-border-color: transparent !important;
  --focus-outline: transparent !important;
  --urlbarView-hover-background: var(--bg3) !important;
  --urlbarView-result-button-hover-background-color: var(--fg1) !important;
  --urlbarView-result-button-hover-color: var(--bg1) !important;
  --toolbarbutton-active-background: var(--bg2) !important;
  --toolbarbutton-hover-background: var(--bg2) !important;
  --arrowpanel-background: var(--bg2) !important;
  --arrowpanel-border-color: transparent !important;
  --panel-item-active-bgcolor: var(--bg3) !important;
}

::selection {
  background: var(--fg1) !important;
  color: var(--bg1) !important;
}

toolbar#nav-bar {
  border: none !important;
  background-color: var(--bg1) !important;
}

#tabbrowser-tab-tooltip {
  display: none !important;
}

#tabbrowser-tabs {
  border-inline-start: none !important;
  padding-inline-start: 0px !important;
  margin-inline-start: 0px !important;
}

#tabbrowser-tabpanels,
#webextpanels-window,
#webext-panels-stack,
#webext-panels-browser {
  background: var(--bg1) !important;
}

.tab-icon-image {
  opacity: 0.5 !important;
}

.tab-icon-image:is([selected], [multiselected]) {
  opacity: 1.0 !important;
}

* {
  border-radius: 0px !important;
  box-shadow: none !important;
}

#statuspanel-label {
  display: none !important;
}

.tab-background:is([selected],
  [multiselected]) {
  background-color: var(--bg2) !important;
}

#TabsToolbar #firefox-view-button:hover:not([open])>.toolbarbutton-icon,
.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected],
  [multiselected]) {
  background-color: var(--bg2) !important;
}

.tabbrowser-tab {
  color: var(--fg3) !important;
}

.tabbrowser-tab:hover {
  color: var(--fg2) !important;
}

.tabbrowser-tab[selected] {
  color: var(--fg1) !important;
}

.tab-label-container[textoverflow]:not([pinned]),
.urlbar-input {
  mask-image: unset !important;
}

#firefox-view-button,
#save-to-pocket-button,
#tracking-protection-icon-container,
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"],
tab[muted] .tab-label::before,
.tab-icon-overlay,
.tab-throbber,
.tab-close-button,
#tabs-newtab-button,
#new-tab-button,
#star-button-box,
#urlbar .search-one-offs:not([hidden]),
#picture-in-picture-button,
#urlbar-zoom-button,
[title="Flexible Space"],
#private-browsing-indicator-with-label,
#forward-button,
#back-button,
.titlebar-buttonbox-container,
#titlebar spacer,
#firefox-view-button,
#scrollbutton-up,
.tab-secondary-label,
#alltabs-button,
image.urlbar-icon.urlbar-go-button,
#scrollbutton-down,
#reader-mode-button,
box#sidebar-header,
.tab-loading-burst {
  display: none !important;
}

box#identity-box {
  opacity: 0;
  width: 0px;
  margin: 0;
  padding: 0;
}

.tab-icon-image {
  padding-right: 5px !important;
  height: 10px !important;
  width: 10px !important;
}

#tab-notification-deck .container.infobar {
  background: -moz-Dialog !important;
}

#tab-notification-deck .notificationbox-stack {
  background: transparent !important;
}

#fullscreen-warning {
  border: none !important;
  background: -moz-Dialog !important;
}

:root:not([customizing]) #TabsToolbar {
  margin-left: 1px !important;
  margin-right: 1px !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.tabbrowser-tab * {
  margin: 0 !important;
  border-radius: 0 !important;
}

.tabbrowser-tab {
  height: var(--tab-height);
  font-size: var(--tab-font-size) !important;
  min-height: 0 !important;
  align-items: center !important;
  margin: 0px !important;
  padding: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--max-tab-width) !important;
}

#nav-bar {
  border-inline: var(--uc-window-drag-space-width) solid var(--toolbar-bgcolor);
}

#titlebar {
  overflow: none !important;
}

:root[sizemode="normal"] #nav-bar {
  --uc-window-drag-space-width: 20px;
}

#TabsToolbar {
  display: none !important;
}

#TabsToolbar {
  min-height: 0px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs>.tabbrowser-arrowscrollbox,
#tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #tabs-newtab-button,
:root:not([customizing]) #TabsToolbar-customization-target>.toolbarbutton-1,
:root:not([customizing]) #TabsToolbar .titlebar-button {
  -moz-appearance: none !important;
  height: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  -moz-box-align: stretch;
  margin: 0 !important;
}

.accessibility-indicator,
.private-browsing-indicator {
  height: unset !important;
}

.accessibility-indicator>hbox {
  padding-block: 0 !important;
}

#urlbar-background {
  background-color: unset !important;
  border-color: transparent !important;
}

#urlbar[focused] {
  background-color: var(--bg2) !important;
  text-align: start;
}

#urlbar {
  text-align: center;
}

[privatebrowsingmode="temporary"] #PanelUI-menu-button>.toolbarbutton-badge-stack {
  fill: currentColor !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.4607598 4.7745347c-1.6558046-0.022972-3.308558 0.6945846-4.38033889 2.1016252-0.24667376 0.9746947 0.1329625 4.5740951 0.34896868 5.1407791 0.43334585 2.286732 2.30300841 4.007931 4.54440651 4.007931 1.1186988 0 2.1336268-0.446805 2.9349832-1.161493l0.4869937-0.419283a2.4174054 2.4174054 0 0 1 3.138115-0.02344l0.734397 0.606788v-0.0026c0.772021 0.621352 1.717989 1.002634 2.752686 1.002634 2.240064 0 4.109726-1.721199 4.544406-4.007931 0.214673-0.569353 0.608977-4.1526899 0.348969-5.1433851-1.905389-2.5014054-5.647401-2.8223737-7.976801-0.682312l-1.302122 1.1979524h-1.2760796l-1.302122-1.1979524c-1.0196962-0.936277-2.3086136-1.4014458-3.5964616-1.4193132zm1.0390935 3.6954225c0.9293602 0 1.7557821 0.389533 2.2891309 0.992217a0.86669252 0.86669252 0 0 1 0 1.1302418c-0.5333488 0.602685-1.3597707 0.989614-2.2891309 0.989614-0.9293601 0-1.7557821-0.386929-2.2891308-0.989614a0.86669252 0.86669252 0 0 1 0-1.1302418c0.5333487-0.602684 1.3597707-0.992217 2.2891308-0.992217zm9.0002687 0c0.929359 0 1.755781 0.389533 2.289131 0.992217a0.86669252 0.86669252 0 0 1 0 1.1302418c-0.53335 0.602685-1.359772 0.989614-2.289131 0.989614-0.92936 0-1.755782-0.386929-2.289131-0.989614a0.86669252 0.86669252 0 0 1 0-1.1302418c0.533349-0.602684 1.359771-0.992217 2.289131-0.992217z' fill='context-fill' stroke-width='1.33337'/%3E%3C/svg%3E%0A");
}

#private-browsing-indicator-with-label {
  display: none;
}

#navigator-toolbox {
  margin: 18px 18px 0px 18px;
  padding: 2px 4px 2px 4px !important;
  border: 2px solid var(--bg3) !important;
  transition: border-color 0.2s ease !important;

  &:hover,
  &:focus {
    border-color: var(--fg2) !important;
  }
}

#tabbrowser-tabbox {
  margin: 18px 18px 18px 0px !important;
  padding: 6px !important;
  border: 2px solid var(--bg3) !important;
  transition: border-color 0.2s ease;

  &:hover,
  &:focus {
    border-color: var(--fg2) !important;
  }
}

#tabbrowser-tabbox::before {
  content: "browser";
  transition: color 0.2s ease;
  background-color: var(--bg1);
  position: absolute;
  color: var(--fg4);
  margin: -17px 2px;
  padding: 0 4px;
  z-index: 2;
  font-size: 14px;
}

#tabbrowser-tabbox:hover::before {
  color: var(--fg2);
}

#navigator-toolbox::before {
  content: "navbar";
  transition: color 0.2s ease;
  background-color: var(--bg1);
  position: absolute;
  color: var(--fg4);
  margin: -13px 4px;
  padding: 0 4px;
  z-index: 2;
  font-size: 14px;
}

#navigator-toolbox:hover::before {
  color: var(--fg2);
}

#sidebar-splitter {
  opacity: 0 !important;
  width: 18px !important;
}

#sidebar-splitter[hidden=true]+#tabbrowser-tabbox {
  margin: 18px !important;
}

#sidebar-box {
  background: var(--bg1) !important;
  margin: 18px 0px 18px 18px;
  padding: 6px !important;
  border: 2px solid var(--bg3) !important;
  transition: border-color 0.2s ease;
  max-width: 400px !important;
  min-width: 100px !important;

  &:hover,
  &:focus {
    border-color: var(--fg2) !important;
  }
}

#sidebar-box::before {
  content: "sidebar";
  transition: color 0.2s ease;
  background-color: var(--bg1);
  position: absolute;
  color: var(--fg4);
  margin: -17px 2px;
  padding: 0 4px;
  z-index: 2;
  font-size: 14px;
}

#sidebar-box:hover::before {
  color: var(--fg2);
}

/*temp fix for offscreen in hyprland*/
panel#notification-popup {
  margin-right: -1000px !important;
}

#browser:not(.browser-toolbox-background) {
  background-color: var(--bg1) !important;
}

:root[inFullscreen="true"] {

  #tabbrowser-tabbox,
  #navigator-toolbox,
  #sidebar-box {
    margin: 0px;
    border: none !important;
    padding: 0px !important;
  }

  #tabbrowser-tabbox {
    margin: 0px !important;
  }

  #tabbrowser-tabbox::before,
  #sidebar-box::before,
  #navigator-toolbox::before {
    display: none !important;
  }

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

  #sidebar-splitter[hidden=true]+#tabbrowser-tabbox {
    margin: 0px !important;
  }
}