:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

Firefox_94.0.1

Für die oben genannten Menüs habe ich folgenden Code für die :hover Farbe in Verwendung:

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/ --> /*mal anschauen*/
menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
    border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
}

Die Einstellungen wirken sich jedoch auch auf andere Menüs aus, nicht nur - wie gewollt - auf die im Titel genannten. Ein Beispiel zu nennen ist aber schwierig, da die Seite, auf welcher ich es bemerkt habe, nur als angemeldeter Benutzer mit entsprechenden Rechten benutzbar ist. Daher: gibt es Codes, welche sich nur auf die 3 genannten Elemente auswirken?

2002Andreas

Zitat von Firefox_94.0.1

nur als angemeldeter Benutzer

Du meinst auf einer Webseite?

Wo hast du den Code denn genau eingetragen?

Ansonsten, teste bitte mal.

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/ /*--> mal anschauen*/

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
    border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
  }
}

Alles anzeigen

Zeile 1 habe ich nur angepasst, da stimmten die /*...*/ nicht.

Zeile 3 + 12 sind neu.

Edit:

Klammer in Zeile 12 hinzugefügt.

Horstmann

Kannst auch mal hier etwas runterscrollen und lesen, falls der Beitrag noch relevant ist:

Zitat

Why did I add :not(.in-menulist) to the rule on Sept. 3, 2021? Users mentioned that the original rule had the side effect of increasing the spacing between items in <select> control drop-downs on websites. Using menupopup:not(.in-menulist) excludes those drop-downs from the rule.

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

nur als angemeldeter Benutzer

Du meinst auf einer Webseite?
Wo hast du den Code denn genau eingetragen?
Ansonsten, teste bitte mal.
CSS
/*4. hover Farbe in allen pop-up menüs ändern*/ /*--> mal anschauen*/

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
    border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
}
Alles anzeigen
Zeile 1 habe ich nur angepasst, da stimmten die /*...*/ nicht.
Zeile 3 + 12 sind neu.
Alles anzeigen

Genau. Der Code hat auswirkungen auf eine Webseite. Den Code habe ich ganz normal in der userChrome.css eingetragen. Mit deinem Code habe ich aber leider das gleiche Problem.

milupo

2002Andreas So wie ich das sehe, hast du die abschließende Klammer der @-moz-document-Regel am Ende vergessen, eben jene Zeile 12.

2002Andreas

Zitat von milupo

eben jene Zeile 12.

Sorry, wie peinlich.

Ich habe sie noch eingefügt.

Zitat von Firefox_94.0.1

leider das gleiche Problem.

Und damit?

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

toolbarbutton.bookmark-item:not(.subviewbutton):hover,
:is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von milupo

eben jene Zeile 12.

Sorry, wie peinlich.

Ich habe sie noch eingefügt.

Zitat von Firefox_94.0.1

leider das gleiche Problem.

Und damit?

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

toolbarbutton.bookmark-item:not(.subviewbutton):hover,
:is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Der Code wirkt sich nicht mehr auf Webseiten aus, jedoch wirkt sich dafür die "border-radius" Einstellung auch auf die Lesezeichen (davor nur das Order-drop down) sowie die Buttons in der Menüleiste (zuvor auch hier nur auf das drop down) aus. Kann man das noch trennen?

2002Andreas

Zitat von Firefox_94.0.1

Kann man das noch trennen?

Neuer Versuch

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup > menu:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menuitem:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Alles anzeigen

Evtl. auch diese Kurzform

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Kann man das noch trennen?

Neuer Versuch

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup > menu:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menuitem:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Alles anzeigen

Evtl. auch diese Kurzform

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Die Langform funktioniert nicht (hat Auswirkungen auf die Webseite), bei der Kurzform ist noch folgendes Problem: Wenn ein Punkt im drop-down "ausgegraut" ist, ist die :hover-Farbe nicht die #8888b3 sondern #f0f0f3. So kann man dort die weiße Schrift nicht lesen.

Und eine Frage, damit ich es dokumentieren kann: Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

2002Andreas

Zitat von Firefox_94.0.1

Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

Laut dem Code beträgt der 10px.

Zitat von Firefox_94.0.1

Wenn ein Punkt im drop-down "ausgegraut" ist

Das hatte ich im Code ausgeschlossen.

Wenn du das auch für die Einträge möchtest, dann teste bitte wieder:

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

In Zeile 4 habe ich das dann entfernt:

:not([disabled="true"]):

Horstmann

Zitat von Firefox_94.0.1

Die Langform funktioniert nicht (hat Auswirkungen auf die Webseite), bei der Kurzform ist noch folgendes Problem: Wenn ein Punkt im drop-down "ausgegraut" ist, ist die :hover-Farbe nicht die #8888b3 sondern #f0f0f3. So kann man dort die weiße Schrift nicht lesen.
Und eine Frage, damit ich es dokumentieren kann: Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

Zwei Vorschläge: Bilder sagen mehr als 1000 Worte, Screenshots würden also helfen, v.a. wenn die Beschreibung nicht die genaue Terminologie benutzt.

Zum 2ten: kompletten CSS Code posten. Wenn du über plötzlich grössere Radien redest, dann sollte - mindestens - der relevante Code gezeigt werden.

Mira_Belle

Bitte ausprobieren.

CSS

	menuitem {
		&:where([disabled="true"]) {
      		border-radius: 10px !important;
			/* color:color: #ffff !important; */
		  	text-shadow: none;
		}
		&:where([_moz-menuactive]:not([disabled="true"])) {
      border-radius: 10px !important;
			color: #ffff !important;
			background-color: #8888b3 !important;
		}
		&:where([_moz-menuactive="true"][disabled="true"]) {
      border-radius: 10px !important;
      color: #ffff !important;
		  	background-color: #8888b3!important;
		}
	}

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

Bitte ausprobieren.

Das betrifft nur menuitem, aber kein menu.

Mira_Belle

OH, verstehe was Du meinst!

Es funktioniert in allen Popups, auch in den Menüs der Menüleiste,

aber nicht im "Hamburgermenü" und auch nicht in der Lesezeichensymbolleiste.

Da muss noch etwas gebastelt werden.

2002Andreas

Zitat von Mira_Belle

auch in den Menüs der Menüleiste

Aber nicht bei Ordnern.

Ob sich dein Code auch auf Webseiten bemerkbar macht, kann ich nicht beurteilen.

Zitat von Mira_Belle

Da muss noch etwas gebastelt werden.

Wozu?

Der Code z.B. aus Beitrag Nr. 10 funktioniert doch.

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Da muss noch etwas gebastelt werden.

Wozu?
Der Code z.B. aus Beitrag Nr. 10 funktioniert doch.

Dann will ich nichts gesagt, bzw. geschrieben haben und alles ist gut.

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

Laut dem Code beträgt der 10px.

Zitat von Firefox_94.0.1

Wenn ein Punkt im drop-down "ausgegraut" ist

Das hatte ich im Code ausgeschlossen.
Wenn du das auch für die Einträge möchtest, dann teste bitte wieder:
CSS
/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}
In Zeile 4 habe ich das dann entfernt:
:not([disabled="true"]):
Alles anzeigen

Vielen Dank für den Code, dieser funktioniert wunderbar. Jedoch möchte ich die ausgegrauten Elemente doch separat steuern.

Ich habe es mit

CSS

menupopup[disabled="true"]:hover {
  color: #5656ab !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; old: #87CEFF
  }
}

probiert, aber das funktioniert leider nicht.

grisu2099

Zitat von Firefox_94.0.1

probiert, aber das funktioniert leider nicht.

Wenn du in einer Zeile Kommentare einfügst, mußt du die auch entsprechend kennzeichnen.

Ändere Zeile 4 wie folgt und teste:

CSS

background-color: #2b2c86 !important; /* old: #87CEFF */

2002Andreas

Zitat von Firefox_94.0.1

aber das funktioniert leider nicht.

Teste bitte:

CSS

menupopup :is(menu,menuitem)[disabled="true"]:hover {
  color: #5656ab !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; /* old: #87CEFF */
  }

grisu2099

Trotzdem muß der Kommentar auskommentiert werden...

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Themes verändern auch Text in der Tableiste

Nackter Firefox 125.0.3 - CSS Codes funktionieren nicht (mehr)

Im ExtraConfigMenu.uc.js werden die Scripte nicht mehr angezeigt.