userChrome.css

userChrome.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {
  :root {
    --toolbarbutton-inner-padding: 2px !important;
    --chrome-background-color: #e8e8e8 !important;
    --chrome-secondary-background-color: #fff !important;
    --focus-ring-box-shadow: none !important;
    --toolbarbutton-hover-background: ;
    --toolbarbutton-border-radius: 0 !important;
    --tab-loading-fill: #808080 !important;
  }

  /*-- Tabs --*/
  #titlebar, #tabbrowser-tabs {
    --tab-min-height: 22px !important
  }
  #tabbrowser-tabs {
    min-height: 0 !important;
  }

  #navigator-toolbox > #TabsToolbar {
    margin: 0 !important;
    -moz-appearance: none !important;
  }

  .tab-background {
    border: 0 none !important;
    background: transparent none !important;
  }
  .tab-background[selected=true] {
    background: var(--chrome-secondary-background-color) !important;
  }
  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
    background: rgba(255, 255, 255, 0.25) !important;
  }
  .tab-line {
    display: none;
  }

  .tab-label-container:not([selected="true"]){
    opacity: 1 !important;
    color: #808080 !important;
  }

  .tabbrowser-tab::after, .tabbrowser-tab::before {
    border: 0 none !important;
  }

  .tab-icon-image, .tab-close-button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .close-icon > .button-icon, .close-icon > .button-box > .button-icon, .close-icon > .toolbarbutton-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
  .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
    display: none !important;
  }

  /*-- Navigator Bar --*/
  #nav-bar {
    border: 0 none !important;
    padding: 0 4px !important;
    height: 24px !important;
    box-shadow: none !important;
  }
  toolbar .toolbarbutton-1 > .toolbarbutton-icon {
    background: transparent none !important;
    width: 18px !important;
  }


  #urlbar, .searchbar-textbox {
    border: 0 none !important;
    margin: 0 2px !important;
    min-height: 0 !important;
    background-color: transparent !important;
    outline: 0 none !important;
    box-shadow: none !important;
  }
  #urlbar, .searchbar-textbox {
    font-size: 12px !important;
  }
  #page-action-buttons {
    display: none !important;
  }

  #identity-box {
    margin: 0 !important;
    border: none !important;
    padding: 0 6px !important;
  }

  #identity-icon, #tracking-protection-icon, #connection-icon, .notification-anchor-icon, #blocked-permissions-container > .blocked-permission-icon, #extension-icon, .urlbar-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 1px !important;
    border-radius: unset !important;
    background: unset !important;
  }

  #PanelUI-button {
    display: none;
  }

  /*-- Contet menu --*/
  #context-navigation,
  #context-sep-navigation {
    display: none;
  }





  
  /*-- Resize animation for 16px to 14px --*/
  @keyframes reload-to-stop-s {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-393.75px);
    }
  }

  @keyframes reload-to-stop-rtl-s {
    from {
      transform: scaleX(-1) translateX(0);
    }
    to {
      transform: scaleX(-1) translateX(-393.75px);
    }
  }

  @keyframes stop-to-reload-s {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-393.75px);
    }
  }

  @keyframes stop-to-reload-rtl-s {
    from {
      transform: scaleX(-1) translateX(0);
    }
    to {
      transform: scaleX(-1) translateX(-393.75px);
    }
  }

  #stop-reload-button[animate] > #reload-button,
  #stop-reload-button[animate] > #stop-button {
    position: relative !important;
  }

  #reload-button > .toolbarbutton-animatable-box,
  #stop-button > .toolbarbutton-animatable-box {
    position: absolute !important;
    overflow: hidden !important;
    top: calc(50% - 8.75px) !important; /* Vertically center the 20px tall animatable image */
    /* Since .toolbarbutton-icon uses a different width than the animatable-box,
       we need to set a padding relative to the difference in widths. */
    margin-inline-start: calc((14px + 2 * var(--toolbarbutton-inner-padding) - 17.5px) / 2) !important;
    /* Set the min- and max- width and height of the box equal to that
       of each frame of the SVG sprite. Setting the width and height via
       the `width` and `height` CSS properties causes an assertion for
       `inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
    min-width: 15.75px !important;
    max-width: 15.75px !important;
    min-height: 17.5px !important;
    max-height: 17.5px !important;
  }

  #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
  #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    height: var(--toolbarbutton-height) !important; /* Height must be equal to height of toolbarbutton padding-box */
  }

  #stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    background-image: url("chrome://browser/skin/reload-to-stop.svg") !important;
    background-size: cover;
    height: 17.5px !important;
    width: 409.5px !important;
  }

  #stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: reload-to-stop-s !important;
  }

  #stop-reload-button[animate] > #reload-button:not([displaystop]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: reload-to-stop-rtl-s !important;
  }

  #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-timing-function: steps(25) !important;
    animation-duration: 417ms !important;
  }

  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    background-image: url("chrome://browser/skin/stop-to-reload.svg") !important;
    background-size: cover;
    height: 17.5px !important;
    width: 409.5px !important;
  }

  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: stop-to-reload-s !important;
  }

  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: stop-to-reload-rtl-s !important;
  }

  #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-timing-function: steps(25) !important;
    animation-duration: 417ms !important;
  }

  #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    transform: translateX(-393.75px);
  }

  #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    transform: scaleX(-1) translateX(-393.75px);
  }

  #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    transform: translateX(-393.75px);
  }

  #reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    transform: scaleX(-1) translateX(-393.75px);
  }
}