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

2002Andreas

Zitat von Firefox_94.0.1

Hier noch der verwendete Code:

Sieht hier so damit aus:

Zitat von 2002Andreas

Dann funkt dir noch ein anderer Code dazwischen.

.DeJaVu

Zitat

Dass der Code auch auf Websites wirkt, hat mit dem Selektor "menuitem" zu tun.

Das hatte BrokenHeart einst herausgefunden, dass Firefox die Auswahlmenüs bei amazon für sich so umsetzt. Sowas muss bekannt sein für diesen Selektor!

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Hier noch der verwendete Code:

Sieht hier so damit aus:

Zitat von 2002Andreas

Dann funkt dir noch ein anderer Code dazwischen.

Für den Hintergrund nutze ich

CSS

/*5. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
arrowscrollbox.menupopup-arrowscrollbox {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

Diesen habe ich gerade testweise auskommentiert. Da die Originalfarbe weiß mit schwarzer Schrift ist, fällt mein obiges Verhalten (s. .gif) auch nur auf, wenn man den Hintergrund farbig hat. Außerdem: Teste das mal bei einem Menüpunkt mit dem Rechtspfeil (wie Tableiste > "Lesezeichen-Symbolleiste") und fahre wie ich im .gif aus dem Menü. Dann siehst du, was ich die ganze Zeit meine.

Sören Hentzschel

Zitat von .DeJaVu

dass Firefox die Auswahlmenüs bei amazon für sich so umsetzt.

Nicht nur bei Amazon ist das so. Das betrifft generell das <select>-Element, wie es bei einem ganz großen Teil aller Websites zum Einsatz kommt.

2002Andreas

Zitat von Firefox_94.0.1

Dann siehst du, was ich die ganze Zeit meine.

Ok, jetzt kann ich das nachvollziehen

Das liegt am fehlenden focus über dem Menü.

Teste bitte wieder:

CSS

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

menupopup > menu[open]:not(focus){
 background: #8888b3 !important;
 color: white !important;
 border-radius: 9px !important;
}

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

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 */
}
}

Alles anzeigen

Zeile 4 - 8 sind neu.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Dann siehst du, was ich die ganze Zeit meine.

Ok, jetzt kann ich das nachvollziehen

Das liegt am fehlenden focus über dem Menü.

Teste bitte wieder:

CSS

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

menupopup > menu[open]:not(focus){
 background: #8888b3 !important;
 color: white !important;
 border-radius: 9px !important;
}

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

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 */
}
}

Alles anzeigen

Zeile 4 - 8 sind neu.

Besser, aber noch nicht 100 % perfekt:

- wenn man mit der Maus etwas schneller über die Menüpunkte (ohne Pfeil) fährt, scheint die falsche Farbe weiterhin durch, nur bei dem "aus dem Menü fahren" ist das jetzt weg.

- Bei [disabled="true"] wirkt der Code nicht auf die obere Schaltflächenleiste im Kontextmenü (Pfeil vor, Pfeil zurück, Seite neu laden-Pfeil, Lesezeichen-Stern)

2002Andreas

Zitat von Firefox_94.0.1

wirkt der Code nicht auf die obere Schaltflächenleiste im Kontextmenü

Davon war in diesem Thread bisher auch nicht die Rede.

Teste wieder:

CSS

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

menupopup > menu[open]:not(focus) {
  background: #8888b3 !important;
  color: white !important;
  border-radius: 9px !important;
}

menupopup > :is(menu,menuitem)[disabled="true"]:not(#ContentSelectDropdown > menupopup > menuitem):hover {
  color: white !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; 
}

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

#context-navigation > :is(menu,menuitem)[disabled="true"]:not(#ContentSelectDropdown > menupopup > menuitem):hover {
  color: white !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; 
}

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

#context-navigation > .menuitem-iconic:not([disabled="true"]):hover {
  background-color: #8888b3 !important;
  color: white !important;
}

#context-navigation > .menuitem-iconic[disabled="true"]:hover {
  background-color: #2b2c86 !important;
  color: #fff !important;
 }
}

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

wirkt der Code nicht auf die obere Schaltflächenleiste im Kontextmenü

Davon war in diesem Thread bisher auch nicht die Rede.

Teste wieder:

CSS

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

menupopup > menu[open]:not(focus) {
  background: #8888b3 !important;
  color: white !important;
  border-radius: 9px !important;
}

menupopup > :is(menu,menuitem)[disabled="true"]:not(#ContentSelectDropdown > menupopup > menuitem):hover {
  color: white !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; 
}

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

#context-navigation > :is(menu,menuitem)[disabled="true"]:not(#ContentSelectDropdown > menupopup > menuitem):hover {
  color: white !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; 
}

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

#context-navigation > .menuitem-iconic:not([disabled="true"]):hover {
  background-color: #8888b3 !important;
  color: white !important;
}

#context-navigation > .menuitem-iconic[disabled="true"]:hover {
  background-color: #2b2c86 !important;
  color: #fff !important;
 }
}

Alles anzeigen

Danke, aber

- wenn man mit der Maus etwas schneller über die Menüpunkte (ohne Pfeil) fährt, scheint die falsche Farbe weiterhin durch, nur bei dem "aus dem Menü fahren" ist das jetzt weg.

Existiert immer noch. Das ganze merkt man an diesen "ruckeln" beim drüberfahren. Mit dem Code von Mira_Belle läuft das ganze flüssiger. Da hat man diesen Effekt nicht.

2002Andreas

Zitat von Firefox_94.0.1

Mit dem Code von

Dann musst du den nehmen, und dir die Farben anpassen:

CSS

menu:not(#ContentSelectDropdown > menupopup > menuitem),	
menuitem:not(#ContentSelectDropdown > menupopup > 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: lime !important;  /* Schriftfarbe aktiv (hover) */
			    background-color: red !important; /* Feld aktiv (hover) */
		}
		&:where([_moz-menuactive="true"][disabled="true"]) {
      		border-radius: 10px !important;
      		color: yellow !important;    /* Schriftfarbe inaktiv (hover) */
		  	  background-color: green !important; /* Feld inaktiv (hover) */
		}
	}

Alles anzeigen

Mira_Belle

CSS

menu:not(#ContentSelectDropdown > menupopup > menuitem),    
menuitem:not(#ContentSelectDropdown > menupopup > menuitem) {

Das war es! Danke Dir 2002Andreas , da wäre ich nie draufgekommen.

2002Andreas

Zitat von Mira_Belle

Danke Dir

Alles ist gut, gern geschehen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Mit dem Code von

Dann musst du den nehmen, und dir die Farben anpassen:

CSS

menu:not(#ContentSelectDropdown > menupopup > menuitem),	
menuitem:not(#ContentSelectDropdown > menupopup > 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: lime !important;  /* Schriftfarbe aktiv (hover) */
			    background-color: red !important; /* Feld aktiv (hover) */
		}
		&:where([_moz-menuactive="true"][disabled="true"]) {
      		border-radius: 10px !important;
      		color: yellow !important;    /* Schriftfarbe inaktiv (hover) */
		  	  background-color: green !important; /* Feld inaktiv (hover) */
		}
	}

Alles anzeigen

Vielen Dank für deine Mühe. Jetzt passt endlich alles

2002Andreas

Zitat von Firefox_94.0.1

Jetzt passt endlich alles

Zitat von Firefox_94.0.1

Vielen Dank für deine Mühe.

Gern geschehen, hat zwar eine Weile gedauert....

Sören Hentzschel

Wenn eh schon Verschachtelung genutzt wird, wieso dann nicht konsequent, um sich die Duplizieung zu sparen?

CSS

menu, menuitem {
  &:not(#ContentSelectDropdown > menupopup > menuitem) {
    &:where([disabled="true"]) {
    
    }
  }
}

usw.

Mira_Belle

Sören Hentzschel Danke

Firefox_94.0.1

2002Andreas

Ich nutze mittlerweile folgenden Code:

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
    menu:not(#ContentSelectDropdown > menupopup > menuitem),    
menuitem:not(#ContentSelectDropdown > menupopup > menuitem) {
        &:where([disabled="true"]) {
             border-radius: 10px !important;
            /* color:color: #ffff !important; */
              text-shadow: none;
        }
        &:where([_moz-menuactive]:not([disabled="true"])) {
             border-radius: 9px !important;
            color: #fff !important;  /* Schriftfarbe aktiv (hover) */
            background-color: #2b2c86 !important; /* Feld aktiv (hover) */
        }
        &:where([_moz-menuactive="true"][disabled="true"]) {
             border-radius: 9px !important;
             color: #5656ab !important;    /* Schriftfarbe inaktiv (hover) */
              background-color: #2b2c86 !important; /* Feld inaktiv (hover) */
        }
    }

Alles anzeigen

Nun scheint sich dieser auch auf das Suchen nach Drop-Down unter about:logins (arrowscrollbox.menupopup-arrowscrollbox) auszuwirken. Kann man das separieren?

Sören Hentzschel

CSS

menu:not(#ContentSelectDropdown > menupopup > menuitem)

Ein menu-Element ist immer etwas anderes als ein menuitem-Element. Demnach ist der :not()-Teil immer zutreffend und du sprichst damit ausnahmslos jedes menu-Element an.

Firefox_94.0.1

Zitat von Sören Hentzschel
CSS
menu:not(#ContentSelectDropdown > menupopup > menuitem)
Ein menu-Element ist immer etwas anderes als ein menuitem-Element. Demnach ist der :not()-Teil immer zutreffend und du sprichst damit ausnahmslos jedes menu-Element an.

Auch wenn ich dir gerade nicht ganz folgen kann: Das bedeutet wohl, dass ich das genannte Menü nicht extra ansprechen kann?

Sören Hentzschel

Zitat von Firefox_94.0.1

Auch wenn ich dir gerade nicht ganz folgen kann

Ich habe damit erklärt, wieso die genannte Zeile im Code keinen Sinn ergibt und identisch dazu ist, einfach nur menu ohne den kompletten :not()-Part zu schreiben - mit der Folge, dass das CSS für ausnahmslos alle menu-Einträge in Firefox gilt.

Allgemeiner formuliert: foo:not(bar) kann nie etwas Sinnvolles aussagen, weil foo ein anderes Element als bar ist, das also unter gar keinen Umständen übereinstimmen kann, womit foo:not(bar) identisch zu einfach nur foo ist.

Einfacher Test über die Browserkonsole:

document.querySelectorAll('menu:not(#ContentSelectDropdown > menupopup > menuitem)').length wird dir exakt die gleiche Anzahl zurückgeben wie einfach nur document.querySelectorAll('menu').length, weil es genau das Gleiche aussagt.

Daraus folgt, dass es vollkommen logisch ist, dass das CSS auch an anderen Stellen wirkt, wo es vielleicht nicht gewünscht ist.

Und ja, das war bereits in früherem Code in diesem Thema so zu lesen. Mir war es damals aber nicht aufgefallen.

Da ich macOS nutze und auf macOS die nativen Kontextmenüs des Betriebssystems genutzt werden, die nicht via CSS angepasst werden können, kann ich in diesem Fall keine Hilfe geben, das gezielter anzusprechen.

2002Andreas

Zitat von Firefox_94.0.1

auch auf das Suchen nach Drop-Down unter about:logins

Meinst du hier

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

Firefox_94.0.1 19. Juli 2024 um 12:43

Ä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.