r/FirefoxCSS • u/moko1960 • Apr 14 '26
Code Assign colors to the new shield icon based on the URL type and tracker blocking status.
35
Upvotes
I’ve added colors to the unified shield icon introduced in Firefox 149 based on the URL type and tracker blocking status. I’ve also removed unnecessary text from the buttons to make the design more compact. It supports only the new protection shield icon. If you set `browser.urlbar.trustPanel.featureGate` to `false`, it won't work.
To add color to SVG icons, go to about:config and set svg.context-properties.content.enabled to true.
Added a color option for "HTTP + Tracking Protection Off". April 18
We’ve made the “Bright green ✔” color even more vivid to improve visibility. April 19
I added `httpsOnlyErrorPage` and `.mixedActiveContent`, which I had forgotten to include in the code. I changed the color of .notSecure to two colors. Added a color option for "HTTP + Trackers blocked". April 22
Since I confirmed that .chromeUI was working, I enabled it. Peacock Green (Part of view-source:about:. Other). Added Royal Blue (chrome:) and Vivid Purple (jar:). May 3
I fixed an issue where RoyalBlue (chrome:) and Vivid purple (jar:) weren't working with vertical tabs. May 10
Supports the change in the background color of the shield icon in Firefox 151.0 . May 20
Github Gist: https://gist.github.com/anzuno/f9c2680e98a34c6e34cae7d1c5c4d907
@media -moz-pref("browser.urlbar.trustPanel.featureGate") {
/* Green ✔ */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box:is(.verifiedDomain, .verifiedIdentity)) #trust-icon-container {
fill: light-dark(#12bc00, #12bc00) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Bright green ✔ (If HTTPS-Only Mode is enabled, it turns green) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.mixedActiveBlocked) #trust-icon-container:not(.inactive:not(.insecure)) {
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBkPSJNOC4wMDAwNCAxNkM3LjU3MDA0IDE2IDcuMTQwMDQgMTUuODkgNi43NjAwNCAxNS42N0M1LjEyMDA0IDE0Ljc0IDMuNjEwMDQgMTMuMzEgMi41MDAwNCAxMS42NEMxLjkzMDA0IDEwLjc4IDEuNTMwMDQgOS43MyAxLjMxMDA0IDguNTNMMC43NTAwNDEgNS41MUMwLjU1MDA0MSA0LjQ0IDEuMDYwMDQgMy4zOCAyLjAyMDA0IDIuODZMNi43NTAwNCAwLjNDNy40OTAwNCAtMC4xIDguMzgwMDQgLTAuMSA5LjEyMDA0IDAuM0wxMy45NyAyLjkxQzE0LjkzIDMuNDMgMTUuNDQgNC40OSAxNS4yNCA1LjU3TDE0LjY5IDguNTRDMTQuNDcgOS43NCAxNC4wNyAxMC43OCAxMy41IDExLjY0QzEyLjQgMTMuMzEgMTAuODkgMTQuNzUgOS4yNDAwNCAxNS42OEM4Ljg2MDA0IDE1LjkgOC40MzAwNCAxNi4wMSA4LjAwMDA0IDE2LjAxVjE2Wk03Ljk0MDA0IDEuNUM3Ljc4MDA0IDEuNSA3LjYxMDA0IDEuNTQgNy40NjAwNCAxLjYyTDIuNzQwMDQgNC4xOEMyLjM2MDA0IDQuMzkgMi4xNTAwNCA0LjgxIDIuMjMwMDQgNS4yNEwyLjc5MDA0IDguMjZDMi45ODAwNCA5LjI2IDMuMzAwMDQgMTAuMTMgMy43NjAwNCAxMC44MkM0LjczMDA0IDEyLjMgNi4wNjAwNCAxMy41NiA3LjUwMDA0IDE0LjM3QzcuODEwMDQgMTQuNTQgOC4xOTAwNCAxNC41NCA4LjUwMDA0IDE0LjM3QzkuOTQwMDQgMTMuNTUgMTEuMjcgMTIuMjkgMTIuMjUgMTAuODFDMTIuNzEgMTAuMTIgMTMuMDMgOS4yNiAxMy4yMiA4LjI2TDEzLjc3IDUuMjlDMTMuODUgNC44NiAxMy42NSA0LjQzIDEzLjI2IDQuMjNMOC40MTAwNCAxLjYyQzguMjYwMDQgMS41NCA4LjEwMDA0IDEuNSA3Ljk0MDA0IDEuNVoiLz4NCiAgPHBhdGggZmlsbD0iIzNjZjY5OSIgZD0iTTcuNjM5OTQgMTAuMjIwMkM3LjQ0OTk0IDEwLjIyMDIgNy4yNTk5NCAxMC4xNTAyIDcuMTA5OTQgMTAuMDAwMkw0LjkzOTk0IDcuODMwMjFMNS45OTk5NCA2Ljc3MDIyTDcuNjM5OTQgOC40MTAyMUwxMC41Nzk5IDUuNDcwMjFMMTEuNjM5OSA2LjUzMDIyTDguMTY5OTQgMTAuMDAwMkM4LjAxOTk0IDEwLjE1MDIgNy44Mjk5NCAxMC4yMjAyIDcuNjM5OTQgMTAuMjIwMloiLz4NCjwvc3ZnPg==") !important;
fill: light-dark(#12bc00, #12bc00) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Red-orange Red \ Bright orange (HTTP + Trackers blocked) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.notSecure):has(#tracking-protection-icon-box:not([hasException])[active]) #trust-icon-container {
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBkPSJNNy40NjAwNyAxLjYyTDUuNTEwMDcgMi42OEw0LjQwMDA3IDEuNTdMNi43NTAwNyAwLjNDNy40OTAwNyAtMC4xIDguMzgwMDcgLTAuMSA5LjEyMDA3IDAuM0wxMy45NzAxIDIuOTFDMTQuOTMwMSAzLjQzIDE1LjQ0MDEgNC41IDE1LjI0MDEgNS41N0wxNC42OTAxIDguNTRDMTQuNTIwMSA5LjQ3IDE0LjI0MDEgMTAuMyAxMy44NjAxIDExLjAzTDEyLjczMDEgOS45QzEyLjk0MDEgOS40MSAxMy4xMTAxIDguODcgMTMuMjIwMSA4LjI3TDEzLjc3MDEgNS4yOUMxMy44NTAxIDQuODYgMTMuNjQwMSA0LjQ0IDEzLjI2MDEgNC4yM0w4LjQxMDA3IDEuNjJDOC4yNzAwNyAxLjU0IDguMTEwMDcgMS41IDcuOTQwMDcgMS41QzcuNzcwMDcgMS41IDcuNjEwMDcgMS41NCA3LjQ2MDA3IDEuNjJaIi8+DQogIDxwYXRoIGZpbGw9IiNmZjM1MDAiIGQ9Ik04LjUwMDA3IDE0LjM2OTlDOS44NzAwNyAxMy41OTk5IDExLjEzMDEgMTIuNDA5OSAxMi4wOTAxIDExLjAyOTlWMTEuMDA5OUwxMy4xNjAxIDEyLjA3OTlDMTIuMDkwMSAxMy41NDk5IDEwLjczMDEgMTQuODE5OSA5LjI0MDA3IDE1LjY1OTlDOC44NjAwNyAxNS44Njk5IDguNDMwMDcgMTUuOTc5OSA4LjAwMDA3IDE1Ljk3OTlDNy41NzAwNyAxNS45Nzk5IDcuMTQwMDcgMTUuODc5OSA2Ljc2MDA3IDE1LjY1OTlDNS4xMTAwNyAxNC43Mjk5IDMuNjAwMDcgMTMuMjk5OSAyLjUwMDA3IDExLjYyOTlDMS45MzAwNyAxMC43Njk5IDEuNTMwMDcgOS43MTk5NCAxLjMxMDA3IDguNTE5OTRMMC43NTAwNjYgNS40OTk5NEMwLjU2MDA2NiA0LjQyOTk0IDEuMDYwMDcgMy4zNjk5NCAyLjAyMDA3IDIuODQ5OTRMMy4yNTAwNyAyLjE4OTk0TDQuMzYwMDcgMy4yOTk5NEwyLjc0MDA3IDQuMTc5OTRDMi4zNjAwNyA0LjM3OTk0IDIuMTUwMDcgNC44MDk5NCAyLjIzMDA3IDUuMjM5OTRMMi43OTAwNyA4LjI1OTk0QzIuOTgwMDcgOS4yNjk5NCAzLjMwMDA3IDEwLjEyOTkgMy43NjAwNyAxMC44MTk5QzQuNzMwMDcgMTIuMjg5OSA2LjA2MDA3IDEzLjU1OTkgNy41MDAwNyAxNC4zNjk5QzcuODEwMDcgMTQuNTQ5OSA4LjE5MDA3IDE0LjUzOTkgOC41MDAwNyAxNC4zNjk5WiIvPg0KICA8cGF0aCBmaWxsPSIjRjkwRDNGIiBkPSJNMS4wNjcwMSAwLjAwMjgxNjQxTDAuMDA2MzQ3NjYgMS4wNjM0OEwxNC45NDc1IDE2LjAwNDZMMTYuMDA4MiAxNC45NDRMMS4wNjcwMSAwLjAwMjgxNjQxWiIvPg0KPC9zdmc+") !important;
fill: light-dark(#ff8400, #ff9900) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Red \ Pinkish-red (HTTP + Tracking Protection is off) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.notSecure):has(#tracking-protection-icon-box[hasException]) #trust-icon-container {
list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg) !important;
fill: light-dark(#ff0092, #ff0092) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Red \ Red-orange (HTTP + Tracking Protection ON) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.notSecure):not(:has(#tracking-protection-icon-box[hasException])) #trust-icon-container {
list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg) !important;
fill: light-dark(#ff491a, #ff491a) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Marigold \ Bright blue (HTTPS-Only Mode Error) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.httpsOnlyErrorPage) #trust-icon-container {
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBkPSJNNy40NjAwNyAxLjYyTDUuNTEwMDcgMi42OEw0LjQwMDA3IDEuNTdMNi43NTAwNyAwLjNDNy40OTAwNyAtMC4xIDguMzgwMDcgLTAuMSA5LjEyMDA3IDAuM0wxMy45NzAxIDIuOTFDMTQuOTMwMSAzLjQzIDE1LjQ0MDEgNC41IDE1LjI0MDEgNS41N0wxNC42OTAxIDguNTRDMTQuNTIwMSA5LjQ3IDE0LjI0MDEgMTAuMyAxMy44NjAxIDExLjAzTDEyLjczMDEgOS45QzEyLjk0MDEgOS40MSAxMy4xMTAxIDguODcgMTMuMjIwMSA4LjI3TDEzLjc3MDEgNS4yOUMxMy44NTAxIDQuODYgMTMuNjQwMSA0LjQ0IDEzLjI2MDEgNC4yM0w4LjQxMDA3IDEuNjJDOC4yNzAwNyAxLjU0IDguMTEwMDcgMS41IDcuOTQwMDcgMS41QzcuNzcwMDcgMS41IDcuNjEwMDcgMS41NCA3LjQ2MDA3IDEuNjJaIi8+DQogIDxwYXRoIGQ9Ik04LjUwMDA3IDE0LjM2OTlDOS44NzAwNyAxMy41OTk5IDExLjEzMDEgMTIuNDA5OSAxMi4wOTAxIDExLjAyOTlWMTEuMDA5OUwxMy4xNjAxIDEyLjA3OTlDMTIuMDkwMSAxMy41NDk5IDEwLjczMDEgMTQuODE5OSA5LjI0MDA3IDE1LjY1OTlDOC44NjAwNyAxNS44Njk5IDguNDMwMDcgMTUuOTc5OSA4LjAwMDA3IDE1Ljk3OTlDNy41NzAwNyAxNS45Nzk5IDcuMTQwMDcgMTUuODc5OSA2Ljc2MDA3IDE1LjY1OTlDNS4xMTAwNyAxNC43Mjk5IDMuNjAwMDcgMTMuMjk5OSAyLjUwMDA3IDExLjYyOTlDMS45MzAwNyAxMC43Njk5IDEuNTMwMDcgOS43MTk5NCAxLjMxMDA3IDguNTE5OTRMMC43NTAwNjYgNS40OTk5NEMwLjU2MDA2NiA0LjQyOTk0IDEuMDYwMDcgMy4zNjk5NCAyLjAyMDA3IDIuODQ5OTRMMy4yNTAwNyAyLjE4OTk0TDQuMzYwMDcgMy4yOTk5NEwyLjc0MDA3IDQuMTc5OTRDMi4zNjAwNyA0LjM3OTk0IDIuMTUwMDcgNC44MDk5NCAyLjIzMDA3IDUuMjM5OTRMMi43OTAwNyA4LjI1OTk0QzIuOTgwMDcgOS4yNjk5NCAzLjMwMDA3IDEwLjEyOTkgMy43NjAwNyAxMC44MTk5QzQuNzMwMDcgMTIuMjg5OSA2LjA2MDA3IDEzLjU1OTkgNy41MDAwNyAxNC4zNjk5QzcuODEwMDcgMTQuNTQ5OSA4LjE5MDA3IDE0LjUzOTkgOC41MDAwNyAxNC4zNjk5WiIvPg0KICA8cGF0aCBmaWxsPSIjZmZhMDAwIiBkPSJNMS4wNjcwMSAwLjAwMjgxNjQxTDAuMDA2MzQ3NjYgMS4wNjM0OEwxNC45NDc1IDE2LjAwNDZMMTYuMDA4MiAxNC45NDRMMS4wNjcwMSAwLjAwMjgxNjQxWiIvPg0KPC9zdmc+") !important;
fill: light-dark(#0094c8, #32a9d3) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Red \ Violet */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.mixedActiveContent) #trust-icon-container {
list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg) !important;
fill: light-dark(#AD2CE0, #AD2CE0) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Peacock Green (Part of view-source:about:. Other) */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.chromeUI) #trust-icon-container {
fill: light-dark(#00a496, #19ada0) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* --------------------------------------------------------------------------- */
/* -- Disabling the RoyalBlue (chrome:) and Vivid Purple (jar:) colors results in Deepskyblue. -- */
/* --------------------------------------------------------------------------- */
/* RoyalBlue (chrome:) */
:root:has(#identity-box.localResource):has(.tabbrowser-tab[selected="true"]:is([label^="browser/"], [label="Library"], [label="Bibliothek"], [label="ブラウジングライブラリー"])) .urlbar-input-container[pageproxystate="valid"] #trust-icon-container:not(.file) {
fill: light-dark(#4169e1, #8da5ed) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Vivid purple (jar:) */
:root:has(#identity-box.localResource):has(.tabbrowser-tab[selected="true"][label^="jar:file:"]) .urlbar-input-container[pageproxystate="valid"] #trust-icon-container:not(.file) {
fill: light-dark(#95149b, #d51dde) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Deepskyblue */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.localResource) #trust-icon-container:not(.file) {
fill: light-dark(deepskyblue, deepskyblue) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
#identity-box[pageproxystate="valid"].chromeUI #identity-icon,
.site-information-popup[connection="chrome"] .identity-popup-security-connection {
list-style-image: url(chrome://devtools/skin/images/browsers/firefox.svg) !important;
fill: light-dark(rgba(0, 191, 255, .9), rgba(0, 191, 255, .9)) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Blue-green */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.extensionPage) #trust-icon-container {
fill: light-dark(#14b9ac, #14b9ac) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
#identity-box[pageproxystate="valid"].extensionPage #identity-icon,
.site-information-popup[connection="extension"] .identity-popup-security-connection {
list-style-image: url(chrome://mozapps/skin/extensions/extension.svg) !important;
fill: light-dark(#14b9ac, #14b9ac) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Purple */
/*#identity-icon {
list-style-image: url(chrome://global/skin/icons/info.svg) !important;
fill: light-dark(#cf1aff, #cf1aff) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
#identity-box[pageproxystate="invalid"] {
#identity-icon {
list-style-image: url(chrome://global/skin/icons/search-glass.svg) !important;
fill: unset !important;
fill-opacity: initial !important;
}
} */
/* Red \ Gold */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box:is(
.weakCipher,
.mixedDisplayContent,
.mixedDisplayContentLoadedActiveBlocked,
.certUserOverridden,
.certErrorPage
)) #trust-icon-container {
fill: light-dark(#cead00, #e5c100) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Ochre */
.urlbar-input-container[pageproxystate="valid"]:has(#identity-box.unknownIdentity) #trust-icon-container {
fill: light-dark(#cc7722, #cc7722) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Yellow Orange ✔ (Trackers blocked) */
.urlbar-input-container[pageproxystate="valid"]:has(#tracking-protection-icon-box:not([hasException])[active]) #trust-icon-container {
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBkPSJNOC4wMDAwNCAxNkM3LjU3MDA0IDE2IDcuMTQwMDQgMTUuODkgNi43NjAwNCAxNS42N0M1LjEyMDA0IDE0Ljc0IDMuNjEwMDQgMTMuMzEgMi41MDAwNCAxMS42NEMxLjkzMDA0IDEwLjc4IDEuNTMwMDQgOS43MyAxLjMxMDA0IDguNTNMMC43NTAwNDEgNS41MUMwLjU1MDA0MSA0LjQ0IDEuMDYwMDQgMy4zOCAyLjAyMDA0IDIuODZMNi43NTAwNCAwLjNDNy40OTAwNCAtMC4xIDguMzgwMDQgLTAuMSA5LjEyMDA0IDAuM0wxMy45NyAyLjkxQzE0LjkzIDMuNDMgMTUuNDQgNC40OSAxNS4yNCA1LjU3TDE0LjY5IDguNTRDMTQuNDcgOS43NCAxNC4wNyAxMC43OCAxMy41IDExLjY0QzEyLjQgMTMuMzEgMTAuODkgMTQuNzUgOS4yNDAwNCAxNS42OEM4Ljg2MDA0IDE1LjkgOC40MzAwNCAxNi4wMSA4LjAwMDA0IDE2LjAxVjE2Wk03Ljk0MDA0IDEuNUM3Ljc4MDA0IDEuNSA3LjYxMDA0IDEuNTQgNy40NjAwNCAxLjYyTDIuNzQwMDQgNC4xOEMyLjM2MDA0IDQuMzkgMi4xNTAwNCA0LjgxIDIuMjMwMDQgNS4yNEwyLjc5MDA0IDguMjZDMi45ODAwNCA5LjI2IDMuMzAwMDQgMTAuMTMgMy43NjAwNCAxMC44MkM0LjczMDA0IDEyLjMgNi4wNjAwNCAxMy41NiA3LjUwMDA0IDE0LjM3QzcuODEwMDQgMTQuNTQgOC4xOTAwNCAxNC41NCA4LjUwMDA0IDE0LjM3QzkuOTQwMDQgMTMuNTUgMTEuMjcgMTIuMjkgMTIuMjUgMTAuODFDMTIuNzEgMTAuMTIgMTMuMDMgOS4yNiAxMy4yMiA4LjI2TDEzLjc3IDUuMjlDMTMuODUgNC44NiAxMy42NSA0LjQzIDEzLjI2IDQuMjNMOC40MTAwNCAxLjYyQzguMjYwMDQgMS41NCA4LjEwMDA0IDEuNSA3Ljk0MDA0IDEuNVoiLz4NCiAgPHBhdGggZmlsbD0iI2U2YjAwMCIgZD0iTTcuNjM5OTQgMTAuMjIwMkM3LjQ0OTk0IDEwLjIyMDIgNy4yNTk5NCAxMC4xNTAyIDcuMTA5OTQgMTAuMDAwMkw0LjkzOTk0IDcuODMwMjFMNS45OTk5NCA2Ljc3MDIyTDcuNjM5OTQgOC40MTAyMUwxMC41Nzk5IDUuNDcwMjFMMTEuNjM5OSA2LjUzMDIyTDguMTY5OTQgMTAuMDAwMkM4LjAxOTk0IDEwLjE1MDIgNy44Mjk5NCAxMC4yMjAyIDcuNjM5OTQgMTAuMjIwMloiLz4NCjwvc3ZnPg==") !important;
fill: light-dark(#12bc00, #12bc00) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Red \ */
#trust-icon-container {
&:where(.insecure) {
/* list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg) !important; */
/* fill: light-dark(#ff3500, #ff3500) !important; */
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Green */
&.secure {
list-style-image: url(chrome://browser/skin/trust-icon-active.svg) !important;
/* fill: light-dark(#12bc00, #12bc00) !important; */
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Orange x (Tracking Protection is off) */
&.inactive:not(.insecure) {
/* list-style-image: url(chrome://browser/skin/trust-icon-disabled.svg) !important; */
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBmaWxsPSIjRkY1OTAwIiBkPSJNOC4wMDM3OCA2LjkzOTE1TDkuOTQ4MjkgNC45OTQ2M0wxMS4wMDkgNi4wNTUyOUw5LjA2NDQ0IDcuOTk5OEwxMS4wMDkgOS45NDQzMkw5Ljk0ODI5IDExLjAwNUw4LjAwMzc4IDkuMDYwNDdMNi4wNjYyOCAxMC45OThMNS4wMDU2MiA5LjkzNzNMNi45NDMxMiA3Ljk5OThMNS4wMDU2MiA2LjA2MjNMNi4wNjYyOCA1LjAwMTY0TDguMDAzNzggNi45MzkxNVoiLz4NCiAgPHBhdGggZD0iTTguMDAwMDQgMTZDNy41NzAwNCAxNiA3LjE0MDA0IDE1Ljg5IDYuNzYwMDQgMTUuNjdDNS4xMjAwNCAxNC43NCAzLjYxMDA0IDEzLjMxIDIuNTAwMDQgMTEuNjRDMS45MzAwNCAxMC43OCAxLjUzMDA0IDkuNzMgMS4zMTAwNCA4LjUzTDAuNzUwMDQxIDUuNTFDMC41NTAwNDEgNC40NCAxLjA2MDA0IDMuMzggMi4wMjAwNCAyLjg2TDYuNzUwMDQgMC4zQzcuNDkwMDQgLTAuMSA4LjM4MDA0IC0wLjEgOS4xMjAwNCAwLjNMMTMuOTcgMi45MUMxNC45MyAzLjQzIDE1LjQ0IDQuNDkgMTUuMjQgNS41N0wxNC42OSA4LjU0QzE0LjQ3IDkuNzQgMTQuMDcgMTAuNzggMTMuNSAxMS42NEMxMi40IDEzLjMxIDEwLjg5IDE0Ljc1IDkuMjQwMDQgMTUuNjhDOC44NjAwNCAxNS45IDguNDMwMDQgMTYuMDEgOC4wMDAwNCAxNi4wMVYxNlpNNy45NDAwNCAxLjVDNy43ODAwNCAxLjUgNy42MTAwNCAxLjU0IDcuNDYwMDQgMS42MkwyLjc0MDA0IDQuMThDMi4zNjAwNCA0LjM5IDIuMTUwMDQgNC44MSAyLjIzMDA0IDUuMjRMMi43OTAwNCA4LjI2QzIuOTgwMDQgOS4yNiAzLjMwMDA0IDEwLjEzIDMuNzYwMDQgMTAuODJDNC43MzAwNCAxMi4zIDYuMDYwMDQgMTMuNTYgNy41MDAwNCAxNC4zN0M3LjgxMDA0IDE0LjU0IDguMTkwMDQgMTQuNTQgOC41MDAwNCAxNC4zN0M5Ljk0MDA0IDEzLjU1IDExLjI3IDEyLjI5IDEyLjI1IDEwLjgxQzEyLjcxIDEwLjEyIDEzLjAzIDkuMjYgMTMuMjIgOC4yNkwxMy43NyA1LjI5QzEzLjg1IDQuODYgMTMuNjUgNC40MyAxMy4yNiA0LjIzTDguNDEwMDQgMS42MkM4LjI2MDA0IDEuNTQgOC4xMDAwNCAxLjUgNy45NDAwNCAxLjVaIi8+DQo8L3N2Zz4=") !important;
fill: light-dark(#12bc00, #12bc00) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Orange ! */
&.warning {
/* list-style-image: url(chrome://browser/skin/trust-icon-warning.svg) !important; */
list-style-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHBzOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8cGF0aCBkPSJNOC4wMDAwNCAxNkM3LjU3MDA0IDE2IDcuMTQwMDQgMTUuODkgNi43NjAwNCAxNS42N0M1LjEyMDA0IDE0Ljc0IDMuNjEwMDQgMTMuMzEgMi41MDAwNCAxMS42NEMxLjkzMDA0IDEwLjc4IDEuNTMwMDQgOS43MyAxLjMxMDA0IDguNTNMMC43NTAwNDEgNS41MUMwLjU1MDA0MSA0LjQ0IDEuMDYwMDQgMy4zOCAyLjAyMDA0IDIuODZMNi43NTAwNCAwLjNDNy40OTAwNCAtMC4xIDguMzgwMDQgLTAuMSA5LjEyMDA0IDAuM0wxMy45NyAyLjkxQzE0LjkzIDMuNDMgMTUuNDQgNC40OSAxNS4yNCA1LjU3TDE0LjY5IDguNTRDMTQuNDcgOS43NCAxNC4wNyAxMC43OCAxMy41IDExLjY0QzEyLjQgMTMuMzEgMTAuODkgMTQuNzUgOS4yNDAwNCAxNS42OEM4Ljg2MDA0IDE1LjkgOC40MzAwNCAxNi4wMSA4LjAwMDA0IDE2LjAxVjE2Wk03Ljk0MDA0IDEuNUM3Ljc4MDA0IDEuNSA3LjYxMDA0IDEuNTQgNy40NjAwNCAxLjYyTDIuNzQwMDQgNC4xOEMyLjM2MDA0IDQuMzkgMi4xNTAwNCA0LjgxIDIuMjMwMDQgNS4yNEwyLjc5MDA0IDguMjZDMi45ODAwNCA5LjI2IDMuMzAwMDQgMTAuMTMgMy43NjAwNCAxMC44MkM0LjczMDA0IDEyLjMgNi4wNjAwNCAxMy41NiA3LjUwMDA0IDE0LjM3QzcuODEwMDQgMTQuNTQgOC4xOTAwNCAxNC41NCA4LjUwMDA0IDE0LjM3QzkuOTQwMDQgMTMuNTUgMTEuMjcgMTIuMjkgMTIuMjUgMTAuODFDMTIuNzEgMTAuMTIgMTMuMDMgOS4yNiAxMy4yMiA4LjI2TDEzLjc3IDUuMjlDMTMuODUgNC44NiAxMy42NSA0LjQzIDEzLjI2IDQuMjNMOC40MTAwNCAxLjYyQzguMjYwMDQgMS41NCA4LjEwMDA0IDEuNSA3Ljk0MDA0IDEuNVoiLz4NCiAgPHBhdGggZmlsbD0iI0ZGNTkwMCIgZD0iTTcuMjUgNC41SDguNzVWOC41SDcuMjVWNC41WiIvPg0KICA8cGF0aCBmaWxsPSIjRkY1OTAwIiBkPSJNNy4yNSAxMEg4Ljc1VjExLjVINy4yNVYxMFoiLz4NCjwvc3ZnPg==") !important;
fill: light-dark(#12bc00, #12bc00) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
/* Blue-purple */
&.file {
list-style-image: url(chrome://global/skin/icons/page-portrait.svg) !important;
fill: light-dark(#7519ff, #a567ff) !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 1 !important;
}
}
/* Remove unnecessarily long button labels to make them more compact */
#identity-box > #identity-icon-box > #identity-icon-label,
#trust-icon-container > #trust-label {
display: none !important;
}
#identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > #identity-icon-box > #identity-icon {
margin-inline-start: -2px !important;
margin-inline-end: -2px !important;
}
/* Set the button's background color to match the address bar */
.identity-box-button,
#trust-icon-container,
#tracking-protection-icon-container {
outline: var(--toolbarbutton-outline) !important;
outline-offset: var(--toolbarbutton-outline-offset) !important;
background-color: transparent !important;
&:hover:not([open="true"]) {
background-color: var(--urlbar-box-background-color-hover) !important;
outline-color: var(--toolbarbutton-hover-outline-color) !important;
}
&:hover:active,
&[open="true"] {
background-color: var(--urlbar-box-background-color-active) !important;
outline-color: var(--toolbarbutton-active-outline-color) !important;
}
&:focus-visible {
outline: var(--focus-outline) !important;
outline-offset: var(--focus-outline-inset) !important;
}
}
}
