Hier noch der verwendete Code:
Sieht hier so damit aus:
Dann funkt dir noch ein anderer Code dazwischen.
Hier noch der verwendete Code:
Sieht hier so damit aus:
Dann funkt dir noch ein anderer Code dazwischen.
ZitatDass 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!
Hier noch der verwendete Code:
Sieht hier so damit aus:
Dann funkt dir noch ein anderer Code dazwischen.
Für den Hintergrund nutze ich
/*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.
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.
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:
/*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.
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 Alles anzeigen/*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 */ } }
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)
wirkt der Code nicht auf die obere Schaltflächenleiste im Kontextmenü
Davon war in diesem Thread bisher auch nicht die Rede.
Teste wieder:
/*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
wirkt der Code nicht auf die obere Schaltflächenleiste im Kontextmenü
Davon war in diesem Thread bisher auch nicht die Rede.
Teste wieder:
CSS Alles anzeigen/*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; } }
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.
Mit dem Code von
Dann musst du den nehmen, und dir die Farben anpassen:
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
menu:not(#ContentSelectDropdown > menupopup > menuitem),
menuitem:not(#ContentSelectDropdown > menupopup > menuitem) {
Das war es! Danke Dir 2002Andreas , da wäre ich nie draufgekommen.
Danke Dir
Alles ist gut, gern geschehen
Mit dem Code von
Dann musst du den nehmen, und dir die Farben anpassen:
CSS Alles anzeigenmenu: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) */ } }
Vielen Dank für deine Mühe. Jetzt passt endlich alles
Jetzt passt endlich alles
Vielen Dank für deine Mühe.
Gern geschehen, hat zwar eine Weile gedauert....
Ich nutze mittlerweile folgenden Code:
@-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?
Auch wenn ich dir gerade nicht ganz folgen kann: Das bedeutet wohl, dass ich das genannte Menü nicht extra ansprechen kann?
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.