Code gesucht - Lautsprechersymbol

    Hallo,

    ich habe 2 Codes (natürlich nur jeweils einzeln verwendet), aber beide funktionieren nicht mehr.
    Das Symbol ist nicht mehr grün (Ton aktiviert) und rot (Ton deaktiviert), es bleibt schwarz.

    Code 1

    CSS
    @-moz-document url-prefix("chrome://browser/content/browser.xul") {
       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"]{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABXUlEQVR42mJgwAE8Z9mxALEFAwEAEEBMODSDxBcC8X4shrIgiwEEEBMOg7uBOAqI2dDEm4H4OtAQK5gAQAAxYbE9D0gV4ZBvBeJdQLwbqM4BJAAQQDAncUAV+ABxPxZDuYDUZCBu3552KBvI/wZkrwTS6gABBNL8EIilCITVHyAWAeKDQE3GQLoSiP2AOAMggEBOFCAU0kBbfwGpYCB+BMT1QP4faCAHAgQQE56ARDcEpGk2ELtAhS4AsQZAABHS/I+QwQABxESMIlgaAFKpQLwPKmQAxDcAAggk+AmIuQhoBqWHlUCsAAoLqGHxoHAACCCQC+SBmB+Ko3G4CBTNX4DYFhgWz6AJChT40wACiBGLbQVIaeEfUAMzkhwPKC0AcQoQewPl9gEEEBOW0J4ApCbgCMRqIPYCYmeQZpAAQADhioViIF4FxD/QxGuBWB2o+RhMACCAGCjNzgABBgD3dlhi0sJzQQAAAABJRU5ErkJggg==") !important;}

       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"][muted="true"]{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAB60lEQVR42mL88OEDAzbA/+SJDsONG5cZgoMZGfAAgABiwiVxu6urcVltLQMhABBADCAXIOP/jx7K/k9JXfaPgeE/CAMBAwwf7e//f11f7///eXPh4gABhGHA+96eqn3SMmDNf9EMAOOc7P/H5GT/3zh2DCwHEEAM/8+fNf5/4pjN/6NH7P53dNf9Z2L6D7Md2QU/4+P//9+yBcw/NGvW//WmJv//79r7HyCAGDfp6fz//v07A8efvwyCP/4w2Dx/guJFxv//wYH4OTLy/5UrVxgsN25kYFBSYjzk4f7fTl2bASCAGJBtA9vIiKD/grTDnP769f+NsbH/T1VW/P9///7//62t/18bG/8HCCCMWAB5C0YzMiDFIBMTg5ubG8OFCxcgfCUlhmfPnjEABBCKAYyMjAxEg58/Gd6xsTEABBDYgP9Qzf9h1mMD//4x7Nq1i8HAwADCv3ePQUZGhgEggEgKxMuXLzNYbdoEDsQrdvb/dSwtGQACiMV34UJThl+/2Bn+/mNiOHTMhaGqvO4/0DZ0F7GwsDBYdXaCNR+ePfs/w/v3DAw+PgwAAYQtIdXAEtI/PAnpzqGDYDmAAMKelNMzlhKblAECiBFXbnyVl7fuzJkzgZFXr+KNGoAAYsSTnXWB2fkSoewMEGAA5Qp5ilbrqOYAAAAASUVORK5CYII=") !important;}
       }

    Code 2

    CSS
    @-moz-document url-prefix("chrome://browser/content/browser.xul") {
       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"]{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVQ4jY2Tv0sCYRjHv/1CSCE0Ca6hDK+h+bYagya3htrNZ7IayqG8KAjkcCgwRF+IFIsKT2gIdYkooSXfKcea7994WvL8cSfXF77Ly/v9vD+e5wH6xDnVhxEKX7aUWaOu+4+rKQBjo/bZEoLZbd2v17KTu6WUZ1jTyAYs3raTSv59BQACh5W5qb3yHRKFmCPIOdUnBDORZAA2YKksN5R86yKYaawBwETyZgtUfHQ9mUiylDwAAADl6nUzZDRLOLgPAwCo+IJ4cR1CWEwkbUvJzNwDLJtfJ/MVuQAAIaN+Pa1X4wCAHXEKKpyhG+qamQduoJqdTKTyeQQAQaO57dfNBwBAohBDovgMor8U98JCWDYganZWI5X2BwDMnDeigXTtBwAQz6tIiG8QSRbCctgd8BQNpKtOgJv//QQhLNY0sj0M8PzEfhFJG+JexrqzjMPqQpyN9ObdSP2QAYCjlUvurewCcciv17Lj+x7D5KZR4/wLuJ4hbG0bKogAAAAASUVORK5CYII=") !important;}

       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"][muted="true"]{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABbElEQVR42mJgQAL/J6mwo/D//yeIAQKIAReYOfP/f2IMAAggnJqNjdOwGvDXldUJmQ8QQAzoXgBpTks78x/iAwzNHkD8HFkMIICYkA2YxX77x9mzZxnS0owxXPXPjc0DSM0BYh9kcYAAYpw589n/s2efwQVAmo2B+hkZGUE2MEI1+4F8BtLMtOvXWWQDAAKIBaQZ2UaQ5rNnUWwGaZ4GxJ5AzRfQXQYQQCwwTTAA0nz27HOY5hAgNQGq+TK2AAcIILABs2Y9x5AIFgcHD0izG1DzNVzRDRBALBBbn6EImn7ZxdCvDjYAr2YQAAggFmNjKaALGuACWeqyDH7vZzLYnP3LcOPLP7yaQQAggFDQ/KjG/0+dBf5XJ27Amg6wYYAAYoFpBiaQNIbXLY9q5dfK7by4hWhLAQIIrhmIHwKxIiQtnCHaBQABBNKcA8T3gFgO2VCQIcQYABBAIC+oA7EtMLSf/kd1GCMxrgcIMAAT/DMv9naNgAAAAABJRU5ErkJggg==") !important;}
       }

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Das funktioniert gut, vielen Dank, aber eine Frage:
    Wieso braucht man jetzt kein list-style-image: url("data:image/png;base64... mehr im Code? :-??

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Hallo zusammen.
    Meiner funktioniert hier auch nicht mehr:

    CSS
    @-moz-document url-prefix("chrome://browser/content/browser.xul") {
#tabbrowser-tabs .tab-icon-sound[soundplaying="true"]{
	list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVQ4jY2Tv0sCYRjHv/1CSCE0Ca6hDK+h+bYagya3htrNZ7IayqG8KAjkcCgwRF+IFIsKT2gIdYkooSXfKcea7994WvL8cSfXF77Ly/v9vD+e5wH6xDnVhxEKX7aUWaOu+4+rKQBjo/bZEoLZbd2v17KTu6WUZ1jTyAYs3raTSv59BQACh5W5qb3yHRKFmCPIOdUnBDORZAA2YKksN5R86yKYaawBwETyZgtUfHQ9mUiylDwAAADl6nUzZDRLOLgPAwCo+IJ4cR1CWEwkbUvJzNwDLJtfJ/MVuQAAIaN+Pa1X4wCAHXEKKpyhG+qamQduoJqdTKTyeQQAQaO57dfNBwBAohBDovgMor8U98JCWDYganZWI5X2BwDMnDeigXTtBwAQz6tIiG8QSRbCctgd8BQNpKtOgJv//QQhLNY0sj0M8PzEfhFJG+JexrqzjMPqQpyN9ObdSP2QAYCjlUvurewCcciv17Lj+x7D5KZR4/wLuJ4hbG0bKogAAAAASUVORK5CYII=") !important;}

	#tabbrowser-tabs .tab-icon-sound[soundplaying="true"][muted="true"]{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABbElEQVR42mJgQAL/J6mwo/D//yeIAQKIAReYOfP/f2IMAAggnJqNjdOwGvDXldUJmQ8QQAzoXgBpTks78x/iAwzNHkD8HFkMIICYkA2YxX77x9mzZxnS0owxXPXPjc0DSM0BYh9kcYAAYpw589n/s2efwQVAmo2B+hkZGUE2MEI1+4F8BtLMtOvXWWQDAAKIBaQZ2UaQ5rNnUWwGaZ4GxJ5AzRfQXQYQQCwwTTAA0nz27HOY5hAgNQGq+TK2AAcIILABs2Y9x5AIFgcHD0izG1DzNVzRDRBALBBbn6EImn7ZxdCvDjYAr2YQAAggFmNjKaALGuACWeqyDH7vZzLYnP3LcOPLP7yaQQAggFDQ/KjG/0+dBf5XJ27Amg6wYYAAYoFpBiaQNIbXLY9q5dfK7by4hWhLAQIIrhmIHwKxIiQtnCHaBQABBNKcA8T3gFgO2VCQIcQYABBAIC+oA7EtMLSf/kd1GCMxrgcIMAAT/DMv9naNgAAAAABJRU5ErkJggg==") !important;} 
       }

    Der von Andreas hingegen funktioniert hier auch bestens.
    Der Code behandelt das Symbol wie Text, daher funktioniert es so.
    Habe hier mal statt green blue genommen. Geht auch. Logisch.

    Vielen Dank nochmals an Andreas.
    :klasse:
    Mfg.
    Endor

    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
    OS: Windows 10 pro 64 bit und Windows 10 Home 64 bit
    Meine Scripte Sammlung: https://github.com/Endor8/userChrome.js
    Kein Support per PN. Fragen bitte im Forum stellen!

    Zitat von Endor

    Der Code behandelt das Symbol wie Text, daher funktioniert es so.

    Wieso hat man dann nicht schon früher auf list-style-image: url("data:image/png;base64... verzichtet?
    Das wäre doch einfacher gewesen...

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Zitat von camel-joe


    nicht schon früher auf list-style-image: url("data:image/png;base64... verzichtet?


    Ich hatte es ja schon geschrieben, normalerweise wurden Icons einfach ausgetauscht, und data:image... ist ein Icon.
    In Zukunft soll einiges einfacher und anderes gar nicht mehr änderbar sein, so wie ich Sören mal verstanden hatte.

    PS:
    Ich habe ihm mal eine PN geschickt, evtl. kann er uns ja genaueres dazu sagen.

    Zitat von 2002Andreas

    Ich hatte es ja schon geschrieben, normalerweise wurden Icons einfach ausgetauscht, und data:image... ist ein Icon.


    Ich weiß, ich hatte nur gemeint, dass man sich ja auch früher mit dieser base64-Umwandlung erst hätte gar nicht "abmühen" müssen, wenn man doch die Farbe(n) vom Symbol viel einfacher und schneller durch 1 Wort ändern kann.

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Zitat von 2002Andreas

    Das ist das erste Icon wo es so funktioniert hat bei mir.


    Es ist erfreulich, dass man es einfach ändern kann, allerdings muss man wieder die base64-Umwandlung verwenden, wenn man mehr als nur die Farbe ändern möchte. :mrgreen:

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Zitat von 2002Andreas

    Ich habe eben mal einen Test gemacht, auch diese Icons kann man so einfach ändern (Farbe).

    Man kann die Farbe aller Grafiken auf diese Weise ändern, bei denen es sich um SVG-Grafiken handelt. SVG-Grafiken sind schwieriger zu erstellen, haben aber diverse Vorteile wie die beliebige und dabei verlustfreie Skalisierung oder die Anwendbarkeit von CSS-Regeln.

    Zitat von 2002Andreas


    Das kann ich dir leider auch nicht erklären.
    Normalerweise haben wir die Icons ja einfach immer ausgetauscht, aber in diesem Fall ging das nicht :-??

    Das funktioniert immer noch. Die Farbe wirkt sich nur nicht aufgrund des CSS-Filters aus:

    filter: url(chrome://global/skin/filters.svg#fill);

    Der Filter muss deaktiviert werden:

    filter: none !important;

    Zitat von 2002Andreas

    ... ganz herzlichen Dank für die Auf/Erklärung, damit funktioniert es wieder einwandfrei...

    Dann könnte ich also doch beide Codes aus #1 verwenden? Das wäre nicht schlecht, aber wo muss man den Filter deaktivieren?

    8) Gruß camel-joe

    Festes Profil: nicht vorhanden
    Portable: ESR

    Innerhalb von #tabbrowser-tabs .tab-icon-sound[soundplaying="true"] {}, vor oder nach der anderen Regel, die sich bereits dort befindet. Die Variante würde ich aber nur wählen, wenn die Grafik wirklich anders aussehen soll als die originale Grafik. Wenn es ausschließlich um die Farbe geht, würde ich die neu vorgeschlagene Variante verwenden. Nicht nur, weil der Code aus Beitrag #1 bei einem HiDPI-Bildschirm zu einem furchtbaren Ergebnis führt. :)

    Zitat von camel-joe


    wo muss man den Filter deaktivieren?

    CSS
    @-moz-document url-prefix("chrome://browser/content/browser.xul") {
       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"]{
       filter: none !important;
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABXUlEQVR42mJgwAE8Z9mxALEFAwEAEEBMODSDxBcC8X4shrIgiwEEEBMOg7uBOAqI2dDEm4H4OtAQK5gAQAAxYbE9D0gV4ZBvBeJdQLwbqM4BJAAQQDAncUAV+ABxPxZDuYDUZCBu3552KBvI/wZkrwTS6gABBNL8EIilCITVHyAWAeKDQE3GQLoSiP2AOAMggEBOFCAU0kBbfwGpYCB+BMT1QP4faCAHAgQQE56ARDcEpGk2ELtAhS4AsQZAABHS/I+QwQABxESMIlgaAFKpQLwPKmQAxDcAAggk+AmIuQhoBqWHlUCsAAoLqGHxoHAACCCQC+SBmB+Ko3G4CBTNX4DYFhgWz6AJChT40wACiBGLbQVIaeEfUAMzkhwPKC0AcQoQewPl9gEEEBOW0J4ApCbgCMRqIPYCYmeQZpAAQADhioViIF4FxD/QxGuBWB2o+RhMACCAGCjNzgABBgD3dlhi0sJzQQAAAABJRU5ErkJggg==") !important;}

       #tabbrowser-tabs .tab-icon-sound[soundplaying="true"][muted="true"]{
       list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAB60lEQVR42mL88OEDAzbA/+SJDsONG5cZgoMZGfAAgABiwiVxu6urcVltLQMhABBADCAXIOP/jx7K/k9JXfaPgeE/CAMBAwwf7e//f11f7///eXPh4gABhGHA+96eqn3SMmDNf9EMAOOc7P/H5GT/3zh2DCwHEEAM/8+fNf5/4pjN/6NH7P53dNf9Z2L6D7Md2QU/4+P//9+yBcw/NGvW//WmJv//79r7HyCAGDfp6fz//v07A8efvwyCP/4w2Dx/guJFxv//wYH4OTLy/5UrVxgsN25kYFBSYjzk4f7fTl2bASCAGJBtA9vIiKD/grTDnP769f+NsbH/T1VW/P9///7//62t/18bG/8HCCCMWAB5C0YzMiDFIBMTg5ubG8OFCxcgfCUlhmfPnjEABBCKAYyMjAxEg58/Gd6xsTEABBDYgP9Qzf9h1mMD//4x7Nq1i8HAwADCv3ePQUZGhgEggEgKxMuXLzNYbdoEDsQrdvb/dSwtGQACiMV34UJThl+/2Bn+/mNiOHTMhaGqvO4/0DZ0F7GwsDBYdXaCNR+ePfs/w/v3DAw+PgwAAYQtIdXAEtI/PAnpzqGDYDmAAMKelNMzlhKblAECiBFXbnyVl7fuzJkzgZFXr+KNGoAAYsSTnXWB2fkSoewMEGAA5Qp5ilbrqOYAAAAASUVORK5CYII=") !important;}
       }

    Edit:
    Den 2ten Code geändert.

    Ich denke, dass du das beim zweiten Teil weglassen kannst, da der erste Selektor den zweiten ja schon einschließt und der zweite Selektor nur spezieller ist und den ersten direkt wieder überschreibt (für den speziellen Fall). Das heißt, die Filter-Regel aus dem ersten Block gilt, wenn sie im zweiten Block nicht überschrieben wird, eh automatisch auch dort. ;)