Firefox und userchrome.css

[habichtfreak]

Hallo,

nachdem ich eben ein Update des FF gemacht habe, erwartete mich natürlich ein optischer Leckerbissen wie ich ihn erwartet habe. Man tut ja wirklich alles um die sinkenden Nutzerzahlen noch weiter zu drücken. Aus Mangel an einem alternativen Browser, möchte ich diese optischen Verschlimmbesserungen gerne beheben. Genauer gesagt geht es um den Hovereffekt in der Menüzeile (hab ich behoben), die Schaltflächen neben der Menüleiste und der Downloadschaltfläche:

Bewegt man die Maus darüber, haben die Schaltflächen einen hellgrauen Hintergrund. Diesen hellgrauen Hintergrund möchte ich entfernen und ersetzen. Den Hovereffekt den ich gerne wieder hätte (so war es früher - so war es gut) bekomme ich auch hin:

menu#file-menu:hover,
menu#edit-menu:hover,
menu#view-menu:hover,
menu#history-menu:hover,
menu#bookmarksMenu:hover,
menu#tools-menu:hover,
menu#helpMenu:hover,
toolbar#toolbar-menubar.browser-toolbar.chromeclass-menubar.titlebar-color.customization-target > toolbarbutton:hover {
    background: linear-gradient(180deg, #808080, #000000) !important;
    border-color: #b9b9b9 !important;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
}

Das funktioniert soweit, allerdings passiert folgendes: der von mir definierte Farbverlauf für den Hintergrund mit hellgrauem Rahmen entsteht. Allerdings überlagert der original einfarbige hellgraue Hintergrund die Schaltfläche ebenfalls. Ergebnis sind zwei css Regeln die gleichzeitig angewendet werden. Der ursprüngliche Hovereffekt scheint also aus einem anderen Container zu kommen. Nur welcher ist das? Ich finde ihn über die Entwicklerwerkzeuge nicht. Probiert habe ich es mit:

toolbarbutton#downloads-button.toolbarbutton-1.chromeclass-toolbar-additional.badged-button:hover {
    background: #000000 !important;
}

leider ohne Erfolg. Jemand da, der mir sagen kann auf welchen Container ich diese Regel anwenden muss?

Gruß hb

 

[macko125]

Man tut ja wirklich alles um die sinkenden Nutzerzahlen noch weiter zu drücken. Aus Mangel an einem alternativen Browser, möchte ich diese optischen Verschlimmbesserungen gerne beheben.

Mit Veränderungen, sei es jetzt optischer oder funktioneller Natur, musst du bei jedem Browser mit klar kommen.
Man denke nur einmal an den Aufschrei vieler Leute bei der Umstellung auf das neue Material Design vom Chrome Browser.

Vor allem im Bereich der Optik kann man es bei Änderungen sowieso niemanden recht machen, da jeder einen eigenen Geschmack in dieser Hinsicht pflegt, weswegen ich persönlich die Kritik bezogen auf die Optik jetzt nicht nachvollziehen kann. Immerhin besteht, beim Firefox als so ziemlich einziger Browser, die Möglichkeit diesen mittels userChrome.css genau nach seinen Wünschen anzupassen. Aber auch dort musst du ständig mit Änderungen klar kommen, da hier und dort CSS-Selektoren angepasst oder entfernt werden, und man seine CSS-Regeln ständig anpassen muss.

Aber wie dem auch sei, ich habe dir hier deinen CSS-Code angepasst, welcher mit deinem gewünschten Hovereffekt auch auf den Toolbarschaltflächen funktionieren sollte.
Bitte deinen Code mit folgenden ersetzten:

/*Hovereffekt Menübar anpassen*/
#main-menubar > menu[_moz-menuactive="true"],
#main-menubar > menu[_moz-menuactive="true"]:-moz-lwtheme-darktext{
  background-color: none !important;
  background: linear-gradient(180deg, #808080, #000000) !important;
  border: 1px solid #b9b9b9 !important;
  border-radius: 3px;
}

/*Höhenverschiebung Menülleiste durch Hovereffekt verhindern*/
#main-menubar {
  height: 21px;
}

/*Hovereffekt Toolbarbuttons  */
toolbar .toolbarbutton-1:not([disabled="true"]):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled="true"]):hover > .toolbarbutton-badge-stack,
toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack{
  background: linear-gradient(180deg, #808080, #000000) !important;
  border: 1px solid #b9b9b9 !important;
  border-radius: 3px;
  padding: 5px;
}

 

[habichtfreak]

Hat zwar nicht ganz das Ergebnis gebraucht das ich wollte, aber hab mir das herausgepickt was ich brauchte. Dank dir