Lautsprecher Symbol

    Firefox-Version
    136.0
    Betriebssystem
    Debian 11 XFCE

    Hallo,

    Ich hatte das Lautsprecher Symbol im Tab angepasst, weil es zu klein war:

    CSS
    /*** Tab Lautsprecher Symbol grösser ***/

.tab-icon-overlay {
   fill: blue !important;
   transform: scale(2.0, 2.0) !important;
   background-color: transparent !important;
   border: none !important;
}

    Leider hat Mozilla das mit der 136 geändert:

    Code
    .tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }
  }
}

    Wie könnte ich das hinbekommen,dass es wieder aussieht wie vorher?
    Ich habe schon versucht so was wie tab-audio-playing-medium.svg
    Aber das existiert so nicht.
    Wie kann ich herausbekommen, wie die anderen Größen bezeichnet sind?

    Gruß,
    Armin

    Zitat von alpha-nbg

    weil es zu klein war:

    Das geht so:

    CSS
    /*** Tab Lautsprecher Symbol grösser ***/

.tab-audio-button {
   fill: blue !important;
   transform: scale(2.0, 2.0) !important;
   background-color: transparent !important;
   border: none !important;
}

    Wobei damit die Farbe vom Icon nicht mehr verändert wird, sondern nur die Größe.

    Also fill: blue hat keine Funktion mehr.

    Um das Icon farblich zu ändern brauchst du eine userChromeShadow.css. Datei.

    Das wäre der Code dann dazu:

    Und wenn du noch keine Skripte nutzt, dann musst du auch noch dafür die Vorbereitungen treffen:

    Beitrag

    Funktionelle Änderungen am Firefox durch Skripte

    Als Ersatz für einige Erweiterungen bzw. Funktionen daraus kann man auch diverse Skripte benutzen.

    ( damit sind nicht optische Änderungen am Firefox gemeint)

    Diese werden mit einer userChrome.css Datei erstellt.

    Skripte werden als .uc.js Datei im Unterordner chrome gespeichert.

    Hinweis:

    Alle Skripte müssen in der Kodierung UTF-8 gespeichert werden.

    Bei Notepad++ sieht das dann so aus:



    Und so im Texteditor von Windows:





    Besonderer Dank geht dabei aber an den user aborix , der das alles überhaupt…
    2002Andreas
    15. November 2017 um 16:49

    Und die dann noch für die Nutzung der userChromeShadow.css:

    Beitrag

    ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

    Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und  2002Andreas , Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!



    Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

    Bei diesen Elementen handelt es…
    BrokenHeart
    18. Juni 2021 um 09:36

    Wenn es dir reicht, nur die Farbe vom Hintergrund des Icons zu ändern, dann:

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (6. März 2025 um 22:15) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

    Hallo Andreas,

    Danke schon mal, sieht wieder fast so aus wie vorher die Größe habe ich jetzt auf 1.5 gestellt. Mit der schwarzen Farbe kann ich leben.


    CSS
    .tab-audio-button {
   fill: blue !important;
   transform: scale(1.5, 1.5) !important;
   background-color: transparent !important;
   border: none !important;
}


    Was noch ein bisschen falsch aussieht, ist der hover Hintergrund



    Der ist größer als der Tab. Das liegt wahrscheinlich daran, dass das Lautsprecher Symbol so einen Kreis außen herum bekommen hat, welchen ich transparent geschaltet habe. Vielleicht lässt sich der hover Hintergrund auch komplett deaktivieren.
    Notfalls könnte ich auch damit leben wie es jetzt ist.

    Gruß,
    Armin

    Zitat von 2002Andreas

    Um das Icon farblich zu ändern brauchst du eine userChromeShadow.css

    Das stimmt nicht, wie der FuchsFan bereits gestern gezeigt hat, siehe Beitrag. Und ich habe eben eine Abwandlung davon gepostet: mein Beitrag. Nur, dass fill keine Wirkung mehr hat, ist richtig.

    Zitat von alpha-nbg

    Vielleicht lässt sich der hover Hintergrund auch komplett deaktivieren.

    Dank dem Hinweis von Speravir :thumbup:

    Teste bitte mal diesen Code:

    Zitat von 2002Andreas

    Teste bitte mal diesen Code:

    Der Code funktioniert nicht, dann wird gar kein Lautsprecher Symbol mehr angezeigt.
    Aber ich denke ich lass es so wie es jetzt ist, des Symbol hat wieder seine gewohnte Größe, das ist die Hauptsache :)

    Vielen Dank für die Hilfe.