Firefox Nightly Zoom und Menübutton

Hallo

Ich nutze gerade die Firefox Nightly um ein paar Dinge aus css Dateien (FF88) anzupassen oder zu verändern.

Ich nutze als Hintergrundbild nicht direkt ein Themes sondern eigene Bilder per css.

Um dieses zu sehen, muss Ich unter Themes das „System-Theme“ auswählen. Bei diesem System-Theme werden die Button in der NAV Bar weiß dargestellt bei "Hover", in anderen Themes eher wie ein Glaseffekt.

Ich hätte gerne dieses weiß in einer anderen Farbe. Möchte auch nicht alle Button in der NAV Bar ansprechen weil sich hier auch meine Lesezeichenleiste befindet.

Habe diese Button versucht über Background-color zu verändern, bringt aber nichts, weil hier nur der Bereich hinter der weißen Grafik verändert wird.

Zusätzlich zu folgenden Button hätte Ich noch gerne den mittleren Berreich vom Zoombutton gewusst, und wie man die Farbe der Schrifft ändern kann.

#zoom-in-button,

#zoom-out-button,

#sidebar-button,

#nav-bar-overflow-button,

#PanelUI-menu-button

Hallo Andreas

Nein, so meinte Ich es nicht.

Ich hätte gerne den Hovereffekt geändert, hier sieht man neben dem von dir gezeigtem Symbol einen weißen Hintergrund, speziell bei diesem System Theme.

Über Background-color kann man diesen Hintergrund nicht ansprechen, weil sich hier nur die Farbe unter diesem weißen Symbolhintergrund ändert, oder ist das eine Grafik bei Hover in diesem Theme.

Bei verschiedenen Versuchen konnte man beim Sidebar und Menübutton hinter dieser weißen Grafik einen größeren Bereich sehen der dann durch Background-color angesprochen wurde.

Das sah dann wie auf deinen Bildern in diesem Thema aus, praktisch nur der weiße Menübutton über diesem roten Hintergrund

Beitrag

RE: Unmittigkeit von Buttongrafik, teils gewünscht, teils nicht.

[…]

Eigentlich ist das gar nicht überraschend, wenn du bedenkst, dass in CSS standardmäßig alles links ausgerichtet ist - außer es gibt eine Regel, um einen Inhalt zentriert oder rechts auszurichten, was in diesem Fall aber nicht zutreffend ist. Insofern hast du natürlich eine große Lücke rechts, wenn du nur die Breite vom Element vergrößerst.



Du kannst den Inhalt mit nur einer zusätzlichen Zeile horizontal zentrieren:



(Quelltext, 3 Zeilen)

Alternativ kannst du auch nur das Symbol mittig…

Sören Hentzschel

2. Dezember 2020 um 16:04

Bei anderen Themes gibt es dieses weiß bei mir nicht, sondern eher eine Durchsichtigkeit bei Hover.

Ich glaube es ist noch nicht ganz richtig.

Dir ist gelungen die weiße Grafik auszuschalten, jetzt sieht man aber praktisch die zweite
Hintergrundebene besonders beim Sidebar und Menübutton.

Diese Button sind jetzt wohl zu groß dargestellt. Mit einer maximalen Größenvorgabe und einem margin-top
Wert kann man es ein bischen hinbiegen, man müsste aber die Werte genau ermitteln, sonst springen andere Symbole in der NAV Bar.

Die Button haben jetzt wohl mit deinem Code die gleiche Größe wie der gelbe Bereich in meinem Bild.

Hier ein Bild mit weißer Grafig und gelben Background-color.

Vielen Dank Andreas, jetzt passt das mit der Größe.

Letzte Problem ist nun noch der #zoom-reset-button, hier sieht man noch die weiße Grafik vor dem Background-color.

Schön wäre es noch die Striche links und Rechts der Zahl bei dem Button zu entfernen.

#zoom-in-button,
#zoom-out-button,
#PanelUI-menu-button,
#sidebar-button
{
  fill: #ffffff!important;
}


#PanelUI-menu-button > stack {
  background: none !important;
}
#PanelUI-menu-button:hover > stack {
  background-color: red !important;
  fill: white!important;
}

#sidebar-button .toolbarbutton-icon {
  background: none !important;
}
#sidebar-button:hover .toolbarbutton-icon {
  background-color: red !important;
  fill: white !important;
}




#zoom-in-button .toolbarbutton-icon,
#zoom-out-button .toolbarbutton-icon {
  background: transparent !important;
}

#zoom-in-button:hover,
#zoom-out-button:hover {
 background-color:  red !important;
 border-radius: 5px !important;
}


#zoom-reset-button {
  color: cornflowerblue !important;
}

#zoom-reset-button:hover {
  color: #000000 !important;
  background-color: red !important;
}

Danke, funktioniert alles.