Last active
December 5, 2019 14:10
-
-
Save ewasion/a85e770e64b03b1a1da555c4b9d2e2d8 to your computer and use it in GitHub Desktop.
userChrome.css snippets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.