Moin, wie hier schön zu sehen, schwächeln die neuen Symbole doch erheblich.
Gerne hätte ich diese, die ersten 5 Symbole von links, deutlicher sichtbar gemacht, ist aber wohl nicht mehr vorgesehen.
Gibt es trotzdem eine Möglichkeit, dieses augenfreundlicher zu gestalten?
Hallo,
"schwächeln" oder auch "augenfreundlicher" sind Begriffe, die ein ziemlich subjektives Empfinden beschreiben. Ich kann die Symbole beispielsweise sehr gut erkennen. Ich würde höchstens die Farbe noch etwas anpassen, damit der Kontrast zum Hintergrund größer wird. Aber da die Farben bei dir ja bereits angepasst sind, weißt du bereits, wie man die Farben anpasst. Vielleicht könntest du daher beschreiben, was genau du angepasst haben möchtest.
Bis auf die Farbe sind Vor/Zurück genau so, wie sonst auch, blasser wenn nicht nutzbar.
Mach was draus:
:root:not([customizing]) .toolbarbutton-1[disabled="true"]
{
opacity: 0.4;
}Der Pfeil ist ein SVG, da geht nix mit bold.
SVG ist nicht grundsätzlich ein Ausschlusskriterium. Wenn eine SVG-Grafik entsprechend implementiert ist, lässt sich die Dicke via CSS anpassen (stroke-width). Einzig: Das ist hier nicht der Fall.
So wird kein Weg daran vorbei führen, die Grafiken gegen andere Grafiken auszutauschen, wenn einem die grundsätzliche Form nicht gefällt.
Vielleicht hat ja jemand Pfeile im Köcher
Ich versuchs mal:
#stop-button {
list-style-image: url("file:///F:/FIREFOX-ICONS/System/stop.svg") !important;
background-size: 16px 16px !important;
}
#back-button {
list-style-image: url("file:///F:/FIREFOX-ICONS/System/zurück.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
}
#forward-button {
list-style-image: url("file:///F:/FIREFOX-ICONS/System/vorwärts.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
}
#home-button {
list-style-image: url("file:///F:/FIREFOX-ICONS/System/home.svg") !important;
background-size: 16px 16px !important;
}
#reload-button {
list-style-image: url("file:///F:/FIREFOX-ICONS/System/reload.svg") !important;
background-size: 16px 16px !important;
}Den Pfad mußt du dir entsprechend anpassen... 
Als Icon habe ich hier die "alten" System-Icons (aus Firefox 88) in Verwendung.
Täusche ich mich oder sind die genauso groß wie das Original, nur andersfarbig?
jede Menge Pfeile
https://www.google.com/search?q=arrow…e=lnms&tbm=isch
zum Bleifisch
https://www.iconfinder.com/icons/211686/back_arrow_icon
https://www.flaticon.com/free-icons/arrow (SVG nur gegen Cash, aber PNG (mit Transparenz) bis 512px erhältlich)
Täusche ich mich oder sind die genauso groß wie das Original,
Schrieb ich doch...
Als Icon habe ich hier die "alten" System-Icons (aus Firefox 88) in Verwendung.
Hallo grisu2099
Hänge mich mal hier rein,
habe versucht mit den alten Symbolen aus Firefox 88
das Schlosssymbol und das Schildsymbol in der Adressleiste
zu ersetzen. Geht auch. Soweit so gut.
#tracking-protection-icon {
list-style-image: url("..//icons/System/tracking-protection.svg") !important;
background-size: 16px 16px !important;
fill: purple !important;
}
#identity-icon {
list-style-image: url("..//icons/System/security-state-secure.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
fill: orange !important;
}Nur dann mit fill: die Farbe zu ändern geht nicht.
Hast Du eine Idee?
Mfg.
Endor
Versuch mal folgenden Code (ungetestet, da ich die Icons nicht habe...):
#tracking-protection-icon {
list-style-image: url("..//icons/System/tracking-protection.svg") !important;
background-size: 16px 16px !important;
filter: invert(9%) sepia(100%) saturate(6444%) hue-rotate(271deg) brightness(107%) contrast(123%) !important;
}
#identity-icon {
list-style-image: url("..//icons/System/security-state-secure.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
filter: invert(63%) sepia(40%) saturate(5887%) hue-rotate(359deg) brightness(101%) contrast(106%) !important;
}Freut mich wenn es läuft... 
Hier noch mal der Link, wenn du noch andere Farben brauchst:
Hast Du eine Idee?
Ich habe mir die svg-Icons vorher auf dieser Webseite passend eingefärbt.
Also wenn das monochrom ist, könnte man das auch mit Notepad++ erledigen:
style="fill:#00C800;" (am Ende der Zeile)
Ein SVG ist lediglich eine Sammlung von Anweisungen.
Vielen Dank Euch beiden.
Habe mir mal beide Links abgespeichert.
:klasse:
Mfg.
Endor
Danke.
Das funktioniert auch prima.
Wusste gar nicht dass das so geht.
Wieder etwas dazu gelernt.
Mfg.
Endor
Hast du es mal mit einem absoluten Pfad versucht (so wie in meinem Beispiel)?
und so:
#back-button {
list-style-image: url("..//ICONS/zurück.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
}
#forward-button {
list-style-image: url("..//ICONS/vorwärts.svg") !important;
background-size: 16px 16px !important;
opacity: unset !important;
}
#home-button {
list-style-image: url("..//ICONS/home.svg") !important;
background-size: 16px 16px !important;
}
#reload-button {
list-style-image: url("..//ICONS/reload.svg") !important;
background-size: 16px 16px !important;
}Mfg.
Endor