Ehemalige Nutzer von Charamel bzw. Silvermel oder auch davor Colorize Secure URL werden es kennen und vielleicht vermissen: Man kann die gesamte Adressleiste je nach Sicherheitsstatus der besuchten Seite mit purem CSS einfärben lassen. Standardmäßig wird nur das Feld davor eingefärbt und ein passendes Schloss-Symbol gezeigt, das wird mit folgendem Code auch nicht verändert. Die CSS-Regeln funktionieren übrigens auch zusammen mit dem UserChromeJs-Skript Loading Bar.
Ich fand nach einem Hinweis bei Aris den Stil Color your URL bar based on website security bei Reddit (der wiederum eine stark erweiterte Version eines bei MozillaZine geposteten Stils ist). Ich habe einige Änderungen durchgeführt eingefügt. Eine Seite, mit der man seine lokale Sicherheitskonfiguration und nebenbei das Aussehen gut testen kann, ist badssl.com; Unterseiten dazu sind auch meist als Beispiel aufgeführt.
Zum Teil können die Farben etwas in die Irre führen, Man sollte das Schloss-Symbol deshalb nie aus den Augen verlieren!
/* Speravir in https://www.camp-firefox.de/forum/thema/123678/ */
/***************************************************************/
/* Übernahme samt diverser Änderungen von "Color your URL bar based on website
security : FirefoxCSS" - https://www.reddit.com/r/FirefoxCSS/comments/7dkhuh/
bzw. Update "Color your URL bar based on website security (FF 70)" in
https://www.reddit.com/r/FirefoxCSS/comments/dnggfj/
******************************************************************************
Vergleiche https://badssl.com/ für Beispieldomains und
für Farben chrome://global/skin/in-content/common.css bzw.
https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
*****************************************************************************/
/*
* Originally from:
* http://forums.mozillazine.org/viewtopic.php?p=14404121#p14404121
*/
#urlbar {
position: relative;
z-index: 4;/* 1 */
}
#identity-box::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 3;/* -1 */
background-color: var(--toolbar-bgcolor); /* white */
opacity: 0.2;
transition: background 500ms linear; /* Fade in/out effekt */
}
/* There is also grantedPermissions, but irrelevant. */
/* Speravir: no known example */
#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity::after {
background-color: #ff0039; /* Firefox Red 50 */
}
/* about:config */
#urlbar[pageproxystate='valid'] #identity-box.chromeUI::after {
background-color: #0a84ff; /* Firefox Blue 50 */
}
/* addon pages like uBlock Origin Dashboard */
#urlbar[pageproxystate='valid'] #identity-box.extensionPage::after {
background-color: #45a1ff; /* Firefox Blue 40 */
}
/* https://www.github.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity::after{
background-color: #058b00; /* Firefox Green 70 */
}
/* https://www.google.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain::after{
background-color: #12bc00; /* Firefox Green 60 */
}
/* https://mixed-script.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked::after {
background-color: #d7b600; /* Firefox Yellow 60 */
}
/* https://mixed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent::after {
background-color: #d7b600; /* Firefox Yellow 60 */
}
/* https://very.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked::after {
background-color: #d7b600; /* Firefox Yellow 60 */
}
/* https://self-signed.badssl.com/ but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden::after {
background-color: #ffe900; /* Firefox Yellow 50 */
}
/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher::after {
background-color: #a47f00; /* Firefox Yellow 70 */
}
/* https://mixed-script.badssl.com/ but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent::after {
background-color: #d70022; /* Firefox Red 60 */
}
/* http://http-login.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms::after {
background-color: #a4000f; /* Firefox Red 70 */
}
/* http://http.badssl.com/ */
/* http://www.httpvshttps.com/ */
#urlbar[pageproxystate='valid'] #identity-box.notSecure::after {
/* background-color: #a4000f; /* Firefox Red 70 */
background-color: #ff9400; /* Firefox Orange 50 */
}
/*******************
* ergänzte Regeln *
*******************/
/* in Fx72 eingeführt, vgl. https://github.com/Aris-t2/CustomCSSforFx/issues/244 */
#urlbar[pageproxystate='valid'] #identity-box.certErrorPage::after {
background-color: #d70022; /* Firefox Red 60 */
}
/* in Fx87 eingeführt, für file- und chrome-Links und
viele about-Seiten (wie about:about selbst) */
#urlbar[pageproxystate='valid'] #identity-box.localResource::after {
background-color: rgba(69,161,255,0.75); /* Firefox Blue 40, 75% Opazität */
}
#urlbar[pageproxystate='valid'][focused="true"] #identity-box::after {
background-color: var(--toolbar-bgcolor);
}Ich musste wegen weiterer Änderungen den Z-Index ändern. Die Vorgabe im Stil der Vorlage bei Reddit habe ich aber in Klammern gesetzt; man kann so mit den Vorgaben testen, falls es bei jemandem mit meinen Werten Probleme gibt.
Änderung 10.05.2018: Update für HTTP-Adressen (eingestuft als notSecure)
Änderung 09.04.2020: Aktualisierung für Firefox 75 (mit seit V.72 gültiger Ergänzung)
Änderung 07.04.2021: Aktualisierung für Firefox 87 – file://- und chrome://-Adressen werden als lokale Ressource erkannt, ebenso viele about:-Seiten, die zuvor als unbekannte Identität eingestuft worden waren.
