Austausch eines Symbols (Icons) in der Lesezeichen-Symbolleiste

Habe in der Lesezeichen-Symbolleiste einen Link für DeepL-Übersetzer ab- bzw. angelegt.

Das Symbol (Icon) ist dunkel (schwarz)

Jedoch bräuchte ich es in hell.

So habe ich es versucht, was jedoch nur eine Art Aura erzeugt.

toolbarbutton.bookmark-item:nth-child(19) > image:nth-child(1) {
      display: block !important;
      width: 16px !important;
      height: 16px !important;
      mask-image:  url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/DeepL.png") !important;
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: white !important;
}

Es gibt das Symbol (Icon) auch noch einmal in hell!

Also DeepL.png ist im original dunkel, DeepL_2.png ist hell

Aber auch mit DeepL_2.png ändert sich nichts!

Kann mir bitte jemand hier helfen?

Gruß

Mira

Zitat von Horstmann

Ist das Original auch als mask-image eingefügt, oder ist es ein 'normales' .png Icon mit transparentem Hintergrund ?

Zum Austausch vom dunklen mit dem hellen Icon würde dann sowas vielleicht funktionieren :

CSS

toolbarbutton.bookmark-item:nth-child(19) > image:nth-child(1) {
    list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/DeepL_2.png") !important;
}

Danke Horstmann,

das habe ich auch versucht, führte jedoch nicht zum Erfolg!

Zitat von 2002Andreas

Zitat von Mira_Belle

Jedoch bräuchte ich es in hell.

Meinst du das so?

Wenn ja, dann teste:

CSS

toolbarbutton.bookmark-item:nth-child(19) > image:nth-child(1) {  
  filter: invert(97%) sepia(50%) saturate(16%) hue-rotate(297deg) brightness(105%) contrast(100%) !important;
}

Spitze! Genau so

Nur verrate mir eins, wie in Gottes Namen kommt man auf so etwas?

Habe mit den Werten etwas herumgespielt und es kam das dabei raus.

toolbarbutton.bookmark-item:nth-child(19) > image:nth-child(1) {
      filter: invert(85%) sepia(0%) saturate(0%) brightness(95%) !important;
}

Genau wie ich es gerne wollte.

Danke und Gruß

Mira

Zitat von Gabbo

habe das Icon mal als .svg, white, 16/16 umgewandelt, geht das?

deepl_logo_white.svg.zip

Danke Gabbo

habe es mir mal gesichert.

Gruß

Mira

Zitat von Gabbo

Obwohl das Thema schon längst geschlossen ist:

Hier das Logo mit mozilla-fill-Eigenschaften (context-fill; context-fill-opacity):

Danke für die Mühe, die Du Dir gemacht hast.

Auch dieses Logo habe ich mir mal gesichert.

Gruß

Mira