Firefox Custom CSS

userChrome.css

@namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul');

/* Center the bookmar toolbar */
#PlacesToolbarItems {
  -moz-box-pack: center;
}

/* Remove the space on the sides of the tabs on windowed mode */
.titlebar-placeholder[type='pre-tabs'],
.titlebar-placeholder[type='post-tabs'] {
  display: none;
}

/* Change the search bar to the top right */
@keyframes scale-in {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

.browserContainer {
  position: relative;
}

findbar {
  animation: 0.2s scale-in;
  transform-origin: top center;
  background-color: var(--toolbar-bgcolor) !important;
  padding: 4px 6px 6px 6px;
  border: 1px solid var(--toolbox-border-bottom-color);
  border-top-width: 0;
  border-radius: 0 0 2px 2px;
  position: absolute;
  top: -2px;
  right: 38px;
}

findbar[hidden='true'] {
  animation: 0.2s scale-out;
}

findbar .findbar-container {
  padding: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

findbar .findbar-container .findbar-textbox {
  padding: 6px 8px !important;
}

findbar .findbar-container .findbar-find-previous,
findbar .findbar-container .findbar-find-next {
  background: transparent !important;
  border-color: var(--backbutton-border-color) !important;
}

findbar .findbar-container .findbar-find-previous:hover,
findbar .findbar-container .findbar-find-previous:focus,
findbar .findbar-container .findbar-find-next:hover,
findbar .findbar-container .findbar-find-next:focus {
  background-color: var(--toolbarbutton-hover-background) !important;
}

findbar .findbar-button {
  border: 1px solid var(--backbutton-border-color);
  border-radius: var(--toolbarbutton-border-radius) !important;
}

findbar .findbar-closebutton {
  margin-right: 4px !important;
  padding-inline-end: 0 !important;
  position: relative;
  top: 6px;
}

/* Set URL toolbar color depending on the security of the site */

#urlbar {
  position: relative;
  z-index: 1;
}

#identity-box:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  background: white;
  opacity: 0.2;
}

#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity:after {
  background: #ff0039; /* Firefox Red 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.chromeUI:after {
  background: #0a84ff; /* Firefox Blue 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.extensionPage:after {
  background: #45a1ff; /* Firefox Blue 40 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity:after {
  background: #058b00; /* Firefox Green 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain:after {
  background: #12bc00; /* Firefox Green 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked:after {
  background: #30e60b; /* Firefox Green 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent:after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid']
  #identity-box.mixedDisplayContentLoadedActiveBlocked:after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after {
  background: #ffe900; /* Firefox Yellow 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after {
  background: #a47f00; /* Firefox Yellow 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after {
  background: #d70022; /* Firefox Red 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after {
  background: #a4000f; /* Firefox Red 70 */
}