userChrome.css

@import url("hide_tabs_toolbar.css");

:root {
  --arrowpanel-menuitem-border-radius: 0px !important;
  --toolbarbutton-border-radius: 0px !important;
  --toolbar-start-end-padding: 10px !important;
  --toolbarbutton-inner-padding: 4px !important;
  --urlbar-icon-border-radius: var(--custom-border-radius-s) !important;
  --focus-outline: none !important;

  --custom-transition: all 0.1s linear;
  --custom-urlbar-color: light-dark(white, rgb(50, 49, 58));
  --custom-border: 1px solid var(--chrome-content-separator-color);
  --custom-border-radius-s: 6px;
}

#toolbar-menubar {
  background-color: var(--toolbar-bgcolor);
}

#urlbar[breakout] {
  top: 0px !important;
}
#urlbar-background {
  background-color: var(--toolbar-bgcolor) !important;
  transition: var(--custom-transition);
}
#urlbar:not([focused="true"]) #urlbar-input-container {
  border: var(--custom-border) !important;
  border-radius: var(--custom-border-radius-s) !important;
  background-color: var(--custom-urlbar-color) !important;
  height: 26px !important;
  top: 4px;
  transition: border 0.1s linear;
}
#urlbar[focused="true"] #urlbar-background {
  border: var(--custom-border) !important;
  border-top: 0 !important;
  background-color: var(--custom-urlbar-color) !important;
  transition: var(--custom-transition);
}
#urlbar[breakout-extend="true"] #urlbar-background {
  border-radius: 0 0 12px 12px !important;
}
#urlbar[focused="true"]:not([breakout-extend="true"]) #urlbar-input-container {
  border: var(--custom-border) !important;
  border-radius: var(--custom-border-radius-s) !important;
  background-color: var(--custom-urlbar-color) !important;
  height: 26px !important;
  top: 4px;
  transition: border 0.1s linear;
}
#urlbar[focused="true"]:not([breakout-extend="true"]) #urlbar-background {
  border: none !important;
  box-shadow: none !important;
}
#urlbar-input-container {
  top: 1px;
}
.urlbarView {
  margin: 0px !important;
  width: 100% !important;
}
.urlbarView-action {
  border-radius: var(--custom-border-radius-s) !important;
}
.urlbarView-row, .urlbarView-action {
  transition: var(--custom-transition);
}
.urlbarView-row {
  width: 100% !important;
}

.search-one-offs {
  padding: 8px !important;
}
.searchbar-engine-one-off-item {
  border-radius: var(--custom-border-radius-s) !important;
  transition: var(--custom-transition);
}

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

#titlebar {
  height: 100%;
}

#nav-bar {
  height: 100%;
  width: auto;
  margin-top: -33px !important;
}

#sidebar-splitter {
  display: none;
}

#PanelUI-button {
  width: auto;
  aspect-ratio: 1 / 1;
}

#sidebar-box[checked="true"] ~ #appcontent> #tabbrowser-tabbox > #tabbrowser-tabpanels, #sidebar-box[checked="true"] ~ #appcontent> #tabbrowser-tabbox {
  clip-path: inset(0px 0px 0px round 12px 0 0 0) !important;
}

#appcontent {
  background-color: var(--toolbar-bgcolor);
}

#sidebar-box[checked="true"] ~ #appcontent> #tabbrowser-tabbox > #tabbrowser-tabpanels > .browserSidebarContainer > .browserContainer browser {
  border-left: 1px solid var(--chrome-content-separator-color);
  border-radius: 12px 0 0 0;
  margin: 0px;
}

.browserContainer browser {
  border-top: 1px solid var(--chrome-content-separator-color);
}

.devtools-toolbox-bottom-iframe {
  border-radius: 0 !important;;
}

#sidebar-header {
  background-color: var(--toolbar-bgcolor);
  border: 0px !important;
  padding: 8px 12px 4px 8px !important;
}
#sidebar-switcher-target {
  border-radius: var(--custom-border-radius-s) !important;
}

#sidebar-close, #sidebar-spacer {
  display: none;
}
#sidebar-switcher-target {
  margin-inline-end: 0 !important;;
}

.toolbarbutton-badge-stack {
  border-radius: var(--custom-border-radius-s) !important;
  aspect-ratio: 1 !important;
  width: auto !important;
  padding: 5px !important;
}

toolbar .toolbaritem-combined-buttons
{
  width: auto;
  aspect-ratio: 1;
  margin: 0 !important;
}

toolbar .toolbarbutton-1 {
  aspect-ratio: 1;
  padding-top: 2px !important;
  height: 100%;
  width: auto;
  & > .toolbarbutton-icon {
    height: 86% !important;
    width: auto !important;
    border-radius: var(--custom-border-radius-s) !important;
  }
}
#nav-bar-customization-target > .toolbarbutton-1:first-child {
  padding-left: 4px !important;
}

.urlbar-page-action {
  padding: 0 6px !important;
  height: 100% !important;
  .urlbar-icon {
    margin: auto;
  }
}

#notification-popup-box {
  height: 100% !important;
}

toolbarbutton,
.toolbarbutton-badge-stack,
.toolbarbutton-icon,
.identity-box-button,
#tracking-protection-icon-container,
.urlbar-page-action {
  transition: var(--custom-transition);
}