Homebutton and others manipulieren (Farbe, Größe etc.)

Mira_Belle

Mit diesem Schnipsel Code kann ich die Farbe der Buttons in der Adressleiste ändern.

CSS

#home-button,
#forward-button,
#back-button,
#reload-button
{
    fill: #ff9600;
}

Gibt es die Möglichkeit auch die angezeigte Größe, sowie die "Strichbreite" zu beeinflussen?

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

die angezeigte Größe

Wenn du statt list-style-image, wie die Grafiken standardmäßig eingebunden sind, diese als background-image einbindest, kannst du die Größe als background-size angeben:

CSS

#back-button {
  list-style-image: none;
  background-image: url('chrome://browser/skin/back.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
}

Zitat von Mira_Belle

Strichbreite

Nein, dafür musst du andere Grafiken verwenden.

Dharkness

Zitat von Mira_Belle

Gibt es die Möglichkeit auch die angezeigte Größe, sowie die "Strichbreite" zu beeinflussen?

Experimentiere mal damit ↓.

CSS

#home-button,
#forward-button,
#back-button,
#reload-button {
    transform: scale(1.2, 1.2) !important;
}

Sören Hentzschel

transform würde ich eher vermeiden. Erstens, weil es einfacher ist, eine explizite Größe anstelle einer Skalierung anzugeben, zweitens weil der Einsatz von transform zu solchen Überlappungen führen kann:

Daher besser den beschriebenen Weg über die background-Eigenschaften wählen.

Mira_Belle

Danke Sören.

Nun habe ich ganz viele Möglichkeiten, auf solche SVG-Grafiken Einfluss zu nehmen.

Echt klasse.

Ich habe da aber noch ein Problem mit dem Reload-Button!

Also, wenn eine Seite neu geladen wird, erscheint für einen kurzen Moment ein Stop-Button,

der kurz darauf wieder durch eine Animation ersetzt wird!

Stop-button => url('chrome://global/skin/icons/close.svg')

OK, kann ich ausblenden oder durch was anderes ersetzen, ganz wie ich mag.

Die Animation ↓ ,

CSS

#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-duration: calc(var(--anim-steps) * 0.001ms);
}

mit der komm ich nicht ganz klar!

Lässt die sich ganz ausblenden und durch eine andere "Grafik" ersetzen?

Sie erscheint ja auch etwas ""blass"" und nicht voll im Vordergrund!

Kann man da auch Einfluss darauf nehmen?

Überhaupt, welche Möglichkeiten gibt es denn generell?

Gruß

Mira

Sören Hentzschel

Es ist mit Sicherheit möglich, die Animation zu verändern, aber da hängt sehr viel mehr Code dran als nur diese eine Stelle. Für mich ist das zu viel Aufwand, eine Lösung zu finden. Bei dem Thema kann ich also nicht helfen.

Mira_Belle

Danke.

Dann ist es halt so, vielleicht habe ich ja Glück und jemand anderes hat damit schon ein Mal herumgespielt.

Experimente!

CSS

#home-button,
#forward-button,
#back-button,
#reload-button {
    transform: scale(0.9, 0.9) !important;
    background-color: #ff9600;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px !important;
}
#stop-button {
    transform: scale(0.9, 0.9) !important;
    background-color: lightpink;
  fill:red;
  border-color: red !important;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px !important;
  background-repeat: no-repeat;
}

Alles anzeigen

Also den Stop-Button könnte ich ja auch durch background-image: url('chrome://global/skin/icons/reload.svg');

ersetzen, dann wäre er ja quasi weg.

Nur dies Animation, .... grrr.

Gruß

Mira