Stop/Reloadbutton eigene Icons

2002Andreas

Hallo @ all.

Ich weiß jetzt nicht, ob es am Fx liegt, meinem neuen Win11, oder ob es mir nur vorher nicht aufgefallen ist

Ich habe mir für den Button 2 eigene Icons erstellt:

CSS

#reload-button {
   list-style-image: url("..//Icons/reload.svg") !important;
}

#stop-button {
   list-style-image: url("..//Icons/16x16_cancel.png") !important;
}

So sieht das damit dann aus:

Während dem Reload ist das Icon grau.

Fehlt mir da noch ein Icon bzw. eine Farbe?

Für jeglichen Hinweis wie immer herzlichen Dank vorweg.

.DeJaVu

Fehlen nur noch deine Symbole dafür, ohne gehts leider nicht.

PS es sieht so aus, als dass Firefox noch das eigene Symbol drüberlegt, das sieht so aus.

Dharkness

Zitat von 2002Andreas

Fehlt mir da noch ein Icon bzw. eine Farbe?

Dir fehlt wohl noch ein Icon für den Status :not([disabled=true"]).

2002Andreas

Zitat von .DeJaVu

Fehlen nur noch deine Symbole dafür

Sorry:

Hier bitte aus .png = .svg machen

reload.png

Zitat von .DeJaVu

noch das eigene Symbol drüberlegt

Das könnte sein

Zitat von Dharkness

für den Status

.DeJaVu

Du solltest diese Dateien genauer anschauen:
\browser\omni.ja -> \chrome\browser\skin\classic\browser\toolbarbutton-icons.css
\browser\omni.ja -> \chrome\browser\content\browser\browser.css

Zu #reload-button und #stop-button stehe etliche Daten und Berechnungen, die wohl gar nicht zu deinen Grafiken passen. Dort wird auch nur SVG genutzt, und zwei, die stop-to-reload und reload-to-stop heissen.

Dharkness

2002Andreas,

da wo das Icon Grau ist, hat der STOP-Button nicht den Status [disabled="true"], sondern eben :not([disabled="true"]), dafür musst Du noch ein Icon einbauen.

2002Andreas

Zitat von Dharkness

da wo das Icon Grau ist

Zitat von .DeJaVu

die stop-to-reload und reload-to-stop heissen.

Ich habe mich jetzt dafür entschieden:

CSS

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   display:none !important;
}

#reload-button {
   opacity: 1 !important;
   list-style-image: url("..//Icons/reload.svg") !important;
}

#stop-button {
   list-style-image: url("..//Icons/16x16_cancel.png") !important;
}

Alles anzeigen

Danke für eure Hilfe