Firefox: farbige Adressleiste

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 zu “Firefox: farbige Adressleiste”

  1. Klaus Travolta 16. Juni 2018 bei 8:00

    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.

    Antworten

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