Passwort anzeigen im Kontextmenü Fx 112

2002Andreas

Mal wieder eine kleine Spielerei.

Mit der Fx Version 112 gibt es einen neuen Eintrag im Kontextmenü.

So sieht das Standard aus wenn das Passwort angezeigt werden soll:

Und so, wenn es wieder ausgeblendet werden soll:

Ich habe mal verschiedene Icons davor gesetzt, und auch den Text verändert.

So sieht es dann aus wenn das Passwort nicht angezeigt wird:

Und so, wenn es wieder ausgeblendet werden soll:

CSS

#context-reveal-password:not([checked="true"]) > label {
  margin-left: -22px !important;
  font-size: 0 !important;
}

#context-reveal-password:not([checked="true"]) > label::after {
  content: "Passwort anzeigen" !important;
  font-size: 14px !important;
}

#context-reveal-password > hbox > image:not([checked="true"]) {
  display: none !important;
}

#context-reveal-password:not([checked="true"])::before {
  margin-right: -3px !important; 
  margin-left: -22px !important;
  padding-left: 29px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/note_edit.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#context-reveal-password > label {
  margin-left: -18px !important;
  font-size: 0 !important;
}

#context-reveal-password[checked="true"] > label::after {
  content: "Passwort ausblenden" !important;
  font-size: 14px !important;
}

#context-reveal-password::before {
  margin-right: 0px !important; 
  margin-left: -2px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/note_delete.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

Die Werte müssen evtl. dann noch angepasst werden.

Hier die beiden genutzten Icons wer sie gebrauchen kann:

Wer keine Icons möchte, aber trotzdem den angepassten Text:

CSS

#context-reveal-password:not([checked="true"]) > label {
  font-size: 0 !important;
}

#context-reveal-password:not([checked="true"]) > label::after {
  content: "Passwort anzeigen" !important;
  font-size: 14px !important;
}

#context-reveal-password > label {
  font-size: 0 !important;
}

#context-reveal-password[checked="true"] > label::after {
  content: "Passwort ausblenden" !important;
  font-size: 14px !important;
}

Alles anzeigen

PS:

Das gezeigt Passwort in den Screenshots ist natürlich gefakt

Boersenfeger

Hm, habe den Code auf die hiesigen Bedürfnisse angepasst, die Icons eingepflegt, die Pfade angepasst aber so ganz gelungen ist es noch nicht...

Der Kontextmenüeintrag müsste jeweils noch eine Idee nach unten, ggf ein oder 2 px

Hier der derzeitige Code:

CSS

/* Passwort ein- und ausblenden im Kontextmenü */
/* Konzept von 2002Andreas */

#context-reveal-password:not([checked="true"]) > label {
  margin-left: -18px !important;
  font-size: 0 !important;
}

#context-reveal-password:not([checked="true"]) > label::after {
  content: "Passwort anzeigen" !important;
  font-size: 12px !important;
}

#context-reveal-password > hbox > image:not([checked="true"]) {
  display: none !important;
}

#context-reveal-password:not([checked="true"])::before {
  margin-right: -6px !important; 
  margin-left: 2px !important;
  padding-left: 29px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("../icons/note_edit.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#context-reveal-password > label {
  margin-left: -18px !important;
  font-size: 0 !important;
}

#context-reveal-password[checked="true"] > label::after {
  content: "Passwort ausblenden" !important;
  font-size: 12px !important;
}

#context-reveal-password::before {
  margin-right: 0px !important; 
  margin-left: 2px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("../icons/note_delete.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

Wo muss ich was einfügen?

Zitronella

vielleicht benötigt wer dieses Icon für "Passwort anzeigen"

der Base64 Code dazu:

Code

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAFiVAABYlQHZbTfTAAADG0lEQVQozwEQA+/8ASorLQkMDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPf08wRUW19jZWYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACdm5oCAgECAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECBAAAAAAAAP7+/rS5wwAAAExHPQAAALS5wwAAAExHPQAAALS5wwAAAExHPQICAgAAAAQAAAAAAADv8PPT19wAAAA7NzAAAADT19wAAAA7NzAAAADT19wAAAA7NzATEg8AAAAEAAAAAAAAExIPRUA4AAAAExIPAAAARUA4AAAAExIPAAAARUA4AAAAExIPAAAAAAAABAAAAAAAAAAAADYyKwAAAP368wD57DkpDgAAAPrz3wAHFDYyKwAAAAAAAAAAAAAAAATz9PTr7e8AAAACAP0TBvARDhTO7Brf7P0AAAAhFAMyDvfy8tzt+hD+AAMAAADz9PQBIiIiAAAAFhIJkY6FNDxOnr3n8PwLAAAAAAAAAAAAEAT1YkMZzMSyb3J76u73AAAAAgAAABkWDKWknjY9T87c8O/7Cvj18caukNjAoFEyC+/7Cs7c8DY9T6WknhkWDAAAAAMZFxOinpMnLD0AAADL3vXu9wPWxrDf0sHv6uMEChL/DB0FAvwoGwoRFBs3MyavsLUC+Pr+w8G9////AAAABwMAAAAADBEXAAAA+/v82uf3AAAABwMAAAAA////w8G9+Pr+AxEREcjM1gkB7DE1PgkGAtDh+BMaJBMaIx8rOh0pOPz7+kQsCw0IAZyVgIyUqf//AAMRERH//wDFyNPn4c9FQTwMCAfe6vkOFBwMERj8+vhBJwUdDfR/e22bobb//wAAAAABIiIiAAAAAAAAAAAAGRYLZWFaOkBI7v0ZAAAAEgPnxsC4m5+m5+r1AAAAAAAAAAAAASIiIgAAAAAAAAAAAAAAAAAAAAQDARURBQAAAOvv+/z9/wAAAAAAAAAAAAAAAAAAAD40zNeIhInJAAAAAElFTkSuQmCC

2002Andreas

Zitat von Boersenfeger

Wo muss ich was einfügen?

Teste bitte mal:

Entweder Zeile 7 und Zeile 35 noch das hinzufügen:

margin-bottom: -2px !important;

und den Wert für dich anpassen.

Oder einen neuen Eintrag nehmen:

CSS

#context-reveal-password:not([checked="true"]) > label,
#context-reveal-password[checked="true"] > label {
      margin-bottom: -2px !important;
}

Wahrscheinlich musst du dann die anderen Abstände auch noch etwas anpassen.

Besonders bei den Icons.

Boersenfeger

Vielen Dank; mit -4 px siehts dann ganz gut aus!

2002Andreas

Zitat von Boersenfeger

Vielen Dank

Freut mich wenn es funktioniert, war gern geschehen

Dharkness

Zitat von Boersenfeger

Hm, habe den Code auf die hiesigen Bedürfnisse angepasst

Die Version passt hier fasst auf Anhieb, ich musste nur margin-left für die Icons um 2px anpassen und perfekt ist es, Dankeschön das Du es geeilt hast.

Boersenfeger

Zitat von Dharkness

Die Version passt hier fasst auf Anhieb, ich musste nur margin-left für die Icons um 2px anpassen und perfekt ist es, Dankeschön das Du es geeilt hast.

// Noch Osterntrunken? Gefasst und geeiert, Mann Mann Mann....

Dharkness

Zitat von Boersenfeger

Noch Osterntrunken?

Nope.

Zitat von Boersenfeger

Gefasst und geeiert, Mann Mann Mann....

Ups, das sollte latürnich geteilt heißen.

Passwort anzeigen im Kontextmenü Fx 112

Ähnliche Themen

Anpassung der Suche