firefox userChrome.css, chrome style stuffs

userChrome.css

/* IMPORTANT: CHANGE ALL THE url(...) LINKS TO BE VALID */
panelview,  
.panel-arrowcontent{ 
  background: #15141a !important;  
  color: #afafab !important;
}

/* bookmark bar */
.bookmark-item[container] {
  list-style-image: url("file:///D:/Images/firefox/folder.png") !important; /* bookmark folder icon */
}
#PersonalToolbar {
  max-height: 36px;
}
#personal-bookmarks {
  height: 36px;
}
menuitem.menuitem-iconic hbox.menu-iconic-left {
  margin-left: 2px;
}
menuitem hbox.menu-accel-container {
  width: 3px;
}
toolbarbutton.bookmark-item:not(.subviewbutton) {
  border-radius: 20px !important;
  margin: 4px 2px 4px 2px !important;
  padding: 4px 6px 4px 6px !important;
  transition: background-color 0.27s cubic-bezier(.45,.22,.26,1);
  &:not([disabled], [open]):hover {
    background-color: #424348 !important;
  }
  &:hover:active:not([disabled]), &[open="true"] {
    background-color: #505154 !important;
  }
}
.toolbarbutton-text {
  padding-bottom: 2px !important;
}
.openintabs-menuitem {
  display: none;
}
.bookmarks-actions-menuseparator {
  display: none;
}
.toolbar-menupopup {
  &, & menupopup {
    --panel-border-radius: 0px !important;
    --panel-padding: 2px !important;
    --panel-background: #292a2d !important;
    --panel-border-color: #3c4043 !important;
  }
}
menuitem.bookmark-item,menu.bookmark-item {
  padding: 0px 3px 0px 3px !important;
  margin: 0px !important;
  border-radius: 0px !important;
}

/* better context menu */
#mainPopupSet menupopup {
  --panel-padding: 2px !important;
  --panel-border-radius: 0px !important;
  --panel-background: #292a2d !important;
}
#mainPopupSet menupopup {
  @media (-moz-platform: windows) {
    & > menu, & > menuitem {
      /* padding-block: 0.5em; */
      padding: 2px;
      max-height: 22px;
    }
  }
}
#mainPopupSet menupopup menuitem > label:nth-child(1) {
  padding: 0px;
}
menu,menuitem {
  &:where([_moz-menuactive]:not([disabled="true"])) {
    background-color: #3f4042 !important;
  }
}

/* better navbar */
.browser-toolbar {
  &:not(.titlebar-color) {
    background-color: #34353a !important;
  }
}
#navigator-toolbox {
  border-bottom: 0.01px solid #606164 !important;
}
toolbaritem#urlbar-container:not(:has([breakout-extend])) {
  --toolbarbutton-border-radius: 40px !important;
}
toolbaritem#urlbar-container:has([breakout-extend]) {
  --toolbarbutton-border-radius: 12px !important;
}
#urlbar[breakout] {
  & > #urlbar-input-container {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}
[pageproxystate="invalid"] #identity-icon-box {  /* search icon in navbar */
  padding-left: 4px !important;
}
#tracking-protection-icon-container, .identity-box-button, .urlbar-page-action, #urlbar-go-button, .search-go-button {
  border-radius: 40px !important;
  padding-inline: 4px !important;
  height: 24px !important;
  margin: 2px !important;
  transition: background-color 0.27s cubic-bezier(.45,.22,.26,1);
}
.urlbar-page-action, #urlbar-go-button, .search-go-button {
  justify-content: center;
  width: 24px !important;
}
#identity-icon-box:not(:has([value="Firefox"]),:hover) {
  background: none !important;
}
#identity-icon {
  margin-left: 1px !important;
  margin-right: 1px !important;
}
#tracking-protection-icon-box {
  justify-content: center;
  align-items: center;
}
.urlbar-page-action {
  padding-top: calc(var(--urlbar-icon-padding) - 1px) !important;
  padding-bottom: calc(var(--urlbar-icon-padding) + 1px) !important;
}
.urlbar-icon,#identity-icon,#tracking-protection-icon {
  width: 14px !important;
  height: 14px !important;
}
#tracking-protection-icon-container {
  margin-left: 1px;
}
:root {
  --toolbar-field-background-color: #232428 !important;
  --tab-min-height: 34px !important;
  --toolbarbutton-hover-background: #454649 !important;
}
#TabsToolbar {
  background-color: #242528 !important;
}
#urlbar:is([focused="true"],[open]) > #urlbar-background, #searchbar:focus-within {
  background-color: rgb(48, 47, 53) !important;
}
#identity-box #identity-icon-box #identity-icon-label {
  display: none;
}
#back-button {
  list-style-image: url("file:///D:/Images/firefox/left.svg") !important; /* back arrow */
  stroke-width: 4;
}
.toolbarbutton-icon:is([label="Back"],[label="Forward"]) {
  width: 26px !important;
  height: 26px !important;
  border-radius: 40px !important;
  padding: calc(var(--toolbarbutton-inner-padding) - 4px) !important;
}
.toolbarbutton-icon[label="Reload"],.toolbarbutton-icon[label="Stop"] {
  width: 27px !important;
  height: 27px !important;
  border-radius: 40px !important;
  padding: calc(var(--toolbarbutton-inner-padding) - 4px) !important;
}
toolbar .toolbarbutton-1 {
  &:not([disabled]) {
    & > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
      transition: background-color 0.4s cubic-bezier(.4,.53,.43,1);
    }
  }
}

#forward-button {
  list-style-image: url("file:///D:/Images/firefox/right.svg") !important; /* right arrow */
}
#reload-button {
  list-style-image: url("file:///D:/Images/firefox/reload.svg") !important; /* reload arrow */
}
#reload-button .toolbarbutton-animatable-box {
  display: none !important;
}
vbox.tab-label-container .tab-text {
  margin-bottom: 3px !important;
}
.tab-background {
  --tab-border-radius: 8px 8px 0px 0px;
  --tab-min-height: 34px;
  margin-block: 0px !important;
}
tab.tabbrowser-tab {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
arrowscrollbox#tabbrowser-arrowscrollbox {
  margin-left: 8px !important;
}
vbox.tab-background {
  box-shadow: none !important;
  transition: background-color 0.2s cubic-bezier(.15,.68,.43,1);
}
vbox.tab-background:is([selected], [multiselected]) {
  background-color: #34353a !important;
  transition: none;
}
#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
  background-color: #292a2d !important;
}
:root[tabsintitlebar] #titlebar {
  #TabsToolbar:-moz-window-inactive {
    background-color: #3c4043 !important;
  }
  &:-moz-window-inactive {
    opacity: 1 !important;
  }
}

#tabs-newtab-button {
  margin-left: 7px !important;
}
#tabs-newtab-button .toolbarbutton-icon {
  border-radius: 200px !important;
  margin: 3px 0px 3px 0px;
  height: 28px !important;
  width: 28px !important;
  padding: 6px !important;
}
.tab-icon-image {
  margin-left: 3px;
}
#urlbar-background,#TabsToolbar {
  background-color: rgb(32, 33, 36) !important;
}
#stop-button .toolbarbutton-animatable-image {
  animation-duration: 0s !important;
}