userChrome.css snippets

userChromeSnippets.css

/*
  You need this no matter what
  Credits: http://kb.mozillazine.org/index.php?title=UserChrome.css
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*
  Prevent tab overflow
  Credits: https://www.reddit.com/r/firefox/comments/6vnjgf/firefox_nightly_57_show_all_tabs_like_chromium/dm1lp00/
*/
@-moz-document url("chrome://browser/content/browser.xul") {
  #tabbrowser-tabs .tabbrowser-tab:not([pinned=true])[fadein] {
    min-width: 1px !important;
    max-width: 250px !important;
  }
  #tabbrowser-tabs toolbarbutton.scrollbutton-up,
  #tabbrowser-tabs toolbarbutton.scrollbutton-down,
  #tabbrowser-tabs spacer.arrowscrollbox-overflow-end-indicator {
    display: none !important;
  }
}

/*
  Hide unused buttons
  Credits: Eva#0111
*/
#back-button[disabled], #forward-button[disabled], #feed-button[disabled] {
  display: none;
}

#wrapper-feed-button > #feed-button, #wrapper-back-button > #back-button, #wrapper-forward-button > #forward-button {
  display: inherit;
}

/*
  Hide extension favicon (here New Tab Override)
  Credits: Eva#0111
*/
.tabbrowser-tab[image="moz-extension://dce19640-33a2-464c-b96f-5fa3e135be13/images/icon.svg"] .tab-icon-image {
  display: none;
}

/*
  Hide "loaded by extension" label (here New Tab Override)
  Credits: Eva#0111
*/
#extension-icon[tooltiptext="Loaded by extension: New Tab Override"], #extension-icon[tooltiptext="Loaded by extension: New Tab Override"] ~ #identity-icon-labels {
  display: none;
}

/*
  Rename tab loaded by an extension (here New Tab Override)
  Credits: Eva#0111
*/
.tabbrowser-tab[image="moz-extension://dce19640-33a2-464c-b96f-5fa3e135be13/images/icon.svg"] .tab-text.tab-label {
  font-size: 0;
}

.tabbrowser-tab[image="moz-extension://dce19640-33a2-464c-b96f-5fa3e135be13/images/icon.svg"] .tab-text.tab-label:after {
  font: inherit;
  content: 'new tab';
}

/*
  Only show url bar actions on hover
  Credits: Eva#0111
*/
.urlbar-page-action:not(#star-button-box):not([open]) {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  transition: all 0.15s;
}

#urlbar-container:hover .urlbar-page-action:not(#star-button-box):not(#pageActionSeparator)  {
  width: 28px !important;
  height: 28px !important;
  padding: var(--urlbar-icon-padding) !important;
}

/*
  Hide url bar actions separator
  Credits: Eva#0111
*/
#pageActionSeparator {
  display: none;
}

/*
  Only show container tab label on hover
  Credits: Eva#0111
*/
#urlbar-container #userContext-label {
  font-size: 0;
}

#urlbar-container:hover #userContext-label {
  font: inherit;
}

/*
  Hide vertical tab separators
  Credits: read#8476
*/
.tabbrowser-tab::after, .tabbrowser-tab::before {
  border: none !important;
}

/*
  Change active tab top border color
  Credits: read#8476
*/
:root {
  --tab-line-color: red !important;
}

/*
  Hide active tab top border
  Credits: read#8476
*/
.tab-line {
  display: none;
}

/*
  Hide tab bar gap in windowed mode
  Credits: read#8476
*/
.titlebar-placeholder {
  width: 0px !important;
  opacity: 0 !important;
}

/*
  Hide favicons (but not on pinned tabs)
  Credits: read#8476
*/
.tabbrowser-tab .tab-icon-image {
  display: none !important;
}

.tabbrowser-tab[pinned]:not([busy="true"]) .tab-icon-image {
  display: block !important;
}

/*
  Disable tab text overflow fading
  Credits: read#8476
*/
.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
}

/*
  No selection highlight when the urlbar is active
  Credits: read#8476
*/
#urlbar {
  border-color: transparent !important;
}

/*
  Hide 1px border under inactive tabs
  Credits: read#8476
*/
:root {
  --tabs-border: transparent;
}

/*
  Only display close button on hover
  Credits: Eva#0111
*/
.tabbrowser-tab .tab-close-button {
  display: none !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  display: inherit !important;
}

/*
  Overlay sound icon on favicon
  Credits: Eva#0111
*/
.tabbrowser-tab .tab-icon-overlay {
  display: inherit !important;
}

.tabbrowser-tab .tab-icon-sound {
  display: none;
}

/*
  Only show extension icons on hover
  Credits: Eva#0111
*/
#nav-bar-customization-target > .chromeclass-toolbar-additional, #nav-bar-overflow-button:not([disabled]) {
  overflow: hidden;
  width: 0;
  transition: all 0.15s;
}

#nav-bar:hover #nav-bar-customization-target > .chromeclass-toolbar-additional, #nav-bar:hover #nav-bar-overflow-button, #nav-bar [open], #downloads-button[attention] {
  width: 32px;
}

/*
  Only show pending update on hover
  Credits: Eva#0111
*/
#PanelUI-menu-button[badge-status] .toolbarbutton-badge {
  opacity: 0;
  transition: all 0.15s;
}

#nav-bar:hover #PanelUI-menu-button[badge-status] .toolbarbutton-badge {
  opacity: 1;
}

#nav-bar:not(:hover) #PanelUI-menu-button[badge-status] {
  list-style-image: url("chrome://browser/skin/menu.svg") !important;
}

/*
  URL bar color based on website security
  Credits: https://www.reddit.com/r/FirefoxCSS/comments/7dkhuh/color_your_url_bar_based_on_website_security/dpyehvz/
*/
#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;
}


/* There is also grantedPermissions, but irrelevant. */

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

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

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

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

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

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

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

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

/* https://self-signed.badssl.com/ but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after {
  background: #ffe900; /* Firefox Yellow 50 */
}

/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after {
  background: #a47f00; /* Firefox Yellow 70 */
}

/* https://mixed-script.badssl.com/ but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after {
  background: #d70022;  /* Firefox Red 60 */
}

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

Hello,
I would like to know the css code for the page: http://http-credit-card.badssl.com/
for http://http-login.badssl.com/ it's #urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after
Thank you very much.