Firefox: farbige Adressleiste

farbige Adressleiste Firefox
farbige Adressleiste für Firefox

Ab und an stößt man ungewollt auf wirklich gute Codeschnipsel. So in diesem Fall. Nachfolgende Zeilen für die userChrome.css erzeugen eine farbige Adressleiste in Firefox. HTTP-Seiten werden zum Beispiel damit in Rot und HTTPS-Seiten in Grün dargestellt. Auf diese Art und Weise sieht man sofort ob die Übertragung verschlüsselt ist oder nicht.

/* 
 * Färbt die Adressleiste auf Basis der Sicherheitsstufe ein
 * https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=125132&p=1084549
 * https://www.reddit.com/r/FirefoxCSS/comments/7dkhuh/color_your_url_bar_based_on_website_security/
 */
 
#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: var(--toolbar-bgcolor); /* geändert; ursprünglich: white */
  opacity: 0.2;
  transition: background 250ms linear; /* ergänzt, Zeitspanne vergrößert */
}

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

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

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

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

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

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

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

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

#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden::after {
  background: #ffe900; /* Firefox Yellow 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.weakCipher::after {
  background: #a47f00; /* Firefox Yellow 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent::after {
  background: #d70022;  /* Firefox Red 60 */
}

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

#urlbar[pageproxystate='valid'][focused="true"] #identity-box::after {
  background: var(--toolbar-bgcolor);
}

Übrigens: Diese Codezeilen gehören in die userChrome von Firefox. Mehr dazu hier.

Eine Antwort auf „Firefox: farbige Adressleiste“

  1. Doch eigentlich ne hübsche Sache, da werde ich mal ein wenig mit rumspielen. Bedeutet bei mir, da ich zum Glück html & css zumindest etwas ‚lesen‘ kann, ich werde mal mit den Farben etwas experimentieren.

Schreibe einen Kommentar

Diese Kommentarfunktion sammelt die Daten die im Kommentar-Formular angezeigt werden. Außerdem werden Datum und Uhrzeit des Kommentars gespeichert.

Ich bin mit der Speicherung und Verarbeitung meiner Daten durch diese Seite einverstanden *