Probleme bei Firefox 149

2002Andreas

//

Bezüglich einer Klammer könnte man jeden Code auch einfach mal bei z.B. Stylus einfügen.

Dann wird das angezeigt:

.DeJaVu

Die Zeile könnte man auch weglassen, wenn man aussschliesslich Windows nutzt

Wo ich mir nicht sicher bin, ob display: -moz-box; oder -moz-context-properties: fill; noch gültig sind, weder Stylus noch RapidCSS kennen das, aber -moz kennen die beiden schon.

Doppeltes Element

CSS

/* Chronik verwalten */
/* #PanelUI-historyMore { list-style-image: url("../icons/history_2.svg"); }*/
#PanelUI-historyMore
{
    padding-left: 50px !important;
}
#PanelUI-historyMore
{
    margin-left: -40px !important;
}

CSS

/* Chronik verwalten */
/* #PanelUI-historyMore { list-style-image: url("../icons/history_2.svg"); }*/
#PanelUI-historyMore
{
    padding-left: 50px !important;
    margin-left: -40px !important;
}

fehlerhaft, da fehlt px

CSS

    #toggle_zoom:not([checked=""]) > .menu-iconic-text
   {
       margin-left: -15 !important;
   }

Ohne weiteren Test -> ZIP

Mira_Belle

Und schon wieder einige Stunden verplempert!

Ich bekomme es einfach nicht hin!

Letzter Ansatz war dies:

CSS

#menu_megalistSidebar.sync-ui-item img.menu-icon
{
  display: none !important;
}

/* Eigenes Symbol für aktivierte Einträge */
#menu_historySidebar[checked="true"] > .menu-text::before,
#menu_tabsSidebar[checked="true"] > .menu-text::before,
#menu_bookmarksSidebar[checked="true"] > .menu-text::before,
#menu_genaiChatSidebar[checked="true"] > .menu-text::before,
#menu_megalistSidebar[checked="true"] > .menu-text::before {
  padding-inline-start: calc(1em + 12px) !important;
    background-image: url(chrome://global/skin/icons/info.svg) !important;
    background-repeat: no-repeat !important;
}

Alles anzeigen

Ist aber wohl auch eine Sackgasse.
Ich rufe mal 2002Andreas zu Hilfe.
Eventuell weißt Du ja, wie man das in den Griff bekommt.

.DeJaVu

Sicher, dass du das richtige Thema erwischt hast?

Es gibt in Firefox kein #menu_megalistSidebar oder #menu_historySidebar

Sören Hentzschel

Zitat von .DeJaVu

Es gibt in Firefox kein #menu_megalistSidebar oder #menu_historySidebar

Gibt es beides in Firefox:

Search - mozsearch

.DeJaVu

Danke, ich hatte mit # gesucht.

Mira_Belle

Ich gebe zu, bisweilen unterlaufen mir dämliche Fehler, aber diesmal war ich vorsichtig.
Habe alles zweimal kontrolliert.

Und an diesen Checkboxen scheitere ich!
Ist einfach zu hoch

2002Andreas

Zitat von Mira_Belle

Ich rufe mal

Meinst du das so?

Wenn ja, evtl. hilft dir das dann weiter:

CSS

  menuitem[checked] > .menu-icon {
  display: none !important;
}

/* Eigenes Symbol für aktivierte Einträge */
#menu_historySidebar[checked="true"] > .menu-text::before,
#menu_tabsSidebar[checked="true"] > .menu-text::before,
#menu_bookmarksSidebar[checked="true"] > .menu-text::before,
#menu_genaiChatSidebar[checked="true"] > .menu-text::before,
#menu_megalistSidebar[checked="true"] > .menu-text::before {
    padding-inline-start: calc(1em + 12px) !important;
    background-image: url("chrome://global/skin/icons/info.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0px 3px !important;
}

Alles anzeigen

Zitat von Mira_Belle

(chrome://global/skin/icons/info.svg)

Hier fehlen bei dir auf jeden Fall vorn und hinten die "" im Code vom Icon.

So sollte das aussehen:

("chrome://global/skin/icons/info.svg")

Horstmann

Wieso plötzlich .menu-text::before, statt das pseudo oder bg-image direkt an das menuitem zu packen, wie in deinen anderen CSS?

Ich sehe hier auch kein direkt zugängliches Label mit dem Textinhalt in einem ::before pseudo, in das man ein bg-image direkt einsetzen könnte, kann mich aber täuschen.

Mira_Belle

2002Andreas Ja, schon.
Und wie bewerkstellige ich es jetzt, den inaktiven Einträgen (Selektoren) ein anderes Symbol zu verpassen?
Das ist meine Falle! Das bekomme ich ums "piep" nicht hin.

Sören Hentzschel

Zitat von 2002Andreas

Hier fehlen bei dir auf jeden Fall vorn und hinten die "" im Code vom Icon.
So sollte das aussehen:
("chrome://global/skin/icons/info.svg")

Notwendig sind Anführungszeichen nur bei Leerzeichen im Pfad. Es schadet natürlich nie, trotzdem welche zu setzen, und ich würde sie darum auch einfach immer setzen.

Mitleser

Bei mir sieht das so aus; ich denke ich habe (fast) alle checkboxen abgedeckt:

CSS

menupopup > menuitem[type="checkbox"] > img.menu-icon,
menupopup > menuitem[type="checkbox"][checked="false"] > img,
menupopup > menuitem[type="checkbox"][checked="true"] > img {
	display: none !important;
}
menupopup > menuitem[type="checkbox"][checked]::before,
menupopup > menuitem[type="checkbox"][checked="true"]::before {
	content: '' !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: 0px !important;
	margin-right: 4px !important;
	background-image: url("../icons/16_checkmark-checked_neongreen.svg") !important;
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
	background-position: center !important;
}
menupopup > menuitem[type="checkbox"][checked]:hover::before,
menupopup > menuitem[type="checkbox"][checked="true"]:hover::before{
	background-image: url("../icons/16_checkmark-unchecked_white.svg") !important;
}
menupopup > menuitem[type="checkbox"]::before,
menupopup > menuitem[type="checkbox"][checked="false"]::before {
	content: '' !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: 0px !important;
	margin-right: 4px !important;
	background-image: url("../icons/16_checkmark-unchecked_redorange.svg") !important;
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
	background-position: center !important;
}
menupopup > menuitem[type="checkbox"]:hover::before,
menupopup > menuitem[type="checkbox"][checked="false"]:hover::before {
	background-image: url("../icons/16_checkmark-checked_white.svg") !important;
}

Alles anzeigen

Mira_Belle

Jetzt jaEine Insel.

Mir qualmt der Kopf, die Finger sind Wund vom Tippen.
Es ist aber geschafft.

Das Resultat aller Bemühungen.

CSS

    /* Sidebar */
    #viewSidebarMenuMenu { background-image: url("../icons/Dock Side Left.svg") !important; }

        /* <<< Submenu "Sidebar" >>> */

		/* Häkchen für die genannten Menüeinträge ausblenden */
		#menu_historySidebar[type="checkbox"] > img.menu-icon,
		#menu_tabsSidebar[type="checkbox"] > img.menu-icon,
		#menu_bookmarksSidebar[type="checkbox"] > img.menu-icon,
		#menu_genaiChatSidebar[type="checkbox"] > img.menu-icon,
		#menu_megalistSidebar[type="checkbox"] > img.menu-icon
		{
			display: none !important;
		}

		/* Individuelles Symbol für aktivierten Eintrag */
		menupopup > menuitem#menu_historySidebar[type="checkbox"][checked="true"]::before,
		menupopup > menuitem#menu_tabsSidebar[type="checkbox"][checked="true"]::before,
		menupopup > menuitem#menu_bookmarksSidebar[type="checkbox"][checked="true"]::before,
		menupopup > menuitem#menu_genaiChatSidebar[type="checkbox"][checked="true"]::before,
		menupopup > menuitem#menu_megalistSidebar[type="checkbox"][checked="true"]::before {
			content: '' !important;
			display: block !important;
			width: 16px !important;
			height: 16px !important;
			margin-left: -24px !important;
			margin-right: 8px !important;
			background-image: url("../icons/menu-check_lime.svg") !important;
			background-repeat: no-repeat !important;
			background-size: 16px 16px !important;
			background-position: center !important;
		}

		/* Symbole für alle inaktiven Einträge */
		menupopup > menuitem#menu_historySidebar[type="checkbox"]::before,
		menupopup > menuitem#menu_tabsSidebar[type="checkbox"]::before,
		menupopup > menuitem#menu_bookmarksSidebar[type="checkbox"]::before,
		menupopup > menuitem#menu_genaiChatSidebar[type="checkbox"]::before,
		menupopup > menuitem#menu_megalistSidebar[type="checkbox"]::before { 
			content: '' !important;
			display: block !important;
			width: 16px !important;
			height: 16px !important;
			margin-left: -24px !important;
			margin-right: 8px !important;
		/*	background-image: url("chrome://global/skin/icons/plus.svg") !important; */
			background-repeat: no-repeat !important;
			background-size: 16px 16px !important;
			background-position: center !important;
		}

		menuitem[id="menu_historySidebar"][type="checkbox"]::before {
			background-image: url("../icons/history.svg") !important;
		}  
		menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
			background-image: url("../icons/Dock Side Left.svg") !important;
		}
		menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
			background-image: url("../icons/bookmark.svg") !important;
		}
		menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
			background-image: url("../icons/robot-icon.svg") !important;
		}
		menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
			background-image: url("../icons//passwords.svg") !important;
		}

Alles anzeigen

Ich möchte mich bei allen Beteiligten ganz, ganz lich bedanken.
Danke

2002Andreas

Zitat von Mira_Belle

Es ist aber geschafft.

Hallo Mira.

Kleines Problem gibt es aber noch.

Hier sieht dein Code so aus:

Zitat von Sören Hentzschel

Notwendig sind Anführungszeichen...

Danke für den Hinweis

Horstmann

Zitat von Mitleser

Bei mir sieht das so aus; ich denke ich habe (fast) alle checkboxen abgedeckt:

Bei mir zumindest gibt es auch noch type radio, s. Bild von einem Leisten Kontextmenü.

Dein Code mit ein paar Anpassungen, mit Fx Icons zum Testen:

CSS

/* nur Mac ?*/
menupopup > :is(menu, menuitem) {
    appearance: none !important; 
}
*/

/* 
menupopup > menuitem[type="checkbox"] > img,
menupopup > menuitem[type="checkbox"][checked="false"] > img,
menupopup > menuitem[type="checkbox"][checked="true"] > img {
	display: none !important;  
} 
*/

menupopup > menuitem:is([type="checkbox"], [type="radio"]) > :is(img, image) {
    display: none !important;
}

/* menupopup > menuitem:is([checked="true"])::before, */
/* menupopup > menuitem[type="checkbox"][checked]::before, */
menupopup > menuitem[type="radio"][checked="true"]::before,
menupopup > menuitem[type="checkbox"][checked="true"]::before {
	content: '' !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: 0px !important;
	margin-right: 4px !important;
	background-image: url("chrome://global/skin/icons/check.svg") !important;
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
	background-position: center !important;
    -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
}

/* menupopup > menuitem:is([checked="true"]):hover::before, */
/* menupopup > menuitem[type="checkbox"][checked]:hover::before, */
menupopup > menuitem[type="radio"][checked="true"]:hover::before,
menupopup > menuitem[type="checkbox"][checked="true"]:hover::before{
/* 	background-image: url("chrome://devtools/skin/images/checkbox.svg") !important; */
    fill: red !important;
}
/* menupopup > menuitem:is([checked="false"])::before, */
/* menupopup > menuitem[type="checkbox"]::before, */
menupopup > menuitem[type="radio"][checked="false"]::before,
menupopup > menuitem[type="checkbox"][checked="false"]::before {
	content: '' !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: 0px !important;
	margin-right: 4px !important;
	background-image: url("chrome://devtools/skin/images/checkbox.svg") !important;
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
	background-position: center !important;
    -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;    
}

/* menupopup > menuitem:is([checked="false"]):hover::before, */
/* menupopup > menuitem[type="checkbox"]:hover::before, */
menupopup > menuitem[type="radio"][checked="false"]:hover::before,
menupopup > menuitem[type="checkbox"][checked="false"]:hover::before {
/* 	background-image: url("chrome://devtools/skin/images/checkbox.svg") !important; */
    fill: red !important;    
}

Alles anzeigen

Kurzversion:

CSS

/* nur Mac ?*/
menupopup > :is(menu, menuitem) {
    appearance: none !important; 
}
*/

menupopup > menuitem:is([type="checkbox"], [type="radio"]) > :is(img, image) {
    display: none !important;
}

menupopup > menuitem[type="radio"]::before,
menupopup > menuitem[type="checkbox"]::before {
	content: '';
    height: 16px;
	width: 16px;
    -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;    
	margin-right: 4px;
	background-image: url("chrome://devtools/skin/images/checkbox.svg");
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
	background-position: center !important;
}

menupopup > menuitem[type="radio"][checked="true"]::before,
menupopup > menuitem[type="checkbox"][checked="true"]::before {
	background-image: url("chrome://global/skin/icons/check.svg");
}

menupopup > menuitem[type="radio"][checked="true"]:hover::before,
menupopup > menuitem[type="checkbox"][checked="true"]:hover::before{
/*     background-image: url("chrome://global/skin/icons/check.svg") !important; */
    fill: green !important;
}

menupopup > menuitem[type="radio"][checked="false"]:hover::before,
menupopup > menuitem[type="checkbox"][checked="false"]:hover::before {
/* 	background-image: url("chrome://devtools/skin/images/checkbox.svg") !important; */
    fill: red !important;    
}

Alles anzeigen

Mitleser

Zitat von Horstmann

gibt es auch noch type radio, s. Bild von einem Leisten Kontextmenü.
Dein Code mit ein paar Anpassungen, mit Fx Icons zum Testen

Checkboxen und Radiobuttons würde ich nicht gleichsetzen wollen, denn sie haben ja jeweils eine spezielle Funktion:
Ups, ein Link mit http:// (ob das wohl gutgeht...)
Aber selbstverständlich ist der Quellcode verbesserungswürdig. Habe ich einfach stumpf rauskopiert, muss aus einer Zeit stammen als ich fill noch nicht auf dem Zettel hatte, is gab es bestimmt noch garnicht. Abgesehen davon würde ich Icons immer lokal speichern. Aber das ist ein anderes Thema...

2002Andreas

Zitat von Mira_Belle

Es ist aber geschafft.

Ich habe den Code mal für mich angepasst, und teilweise etwas verkürzt.

Sieht hier so aus:

2 Icons von dir habe ich nicht, darum 2 eigene eingefügt.

Wenn du magst, dann teste bitte:

CSS

  /* Sidebar */
        #viewSidebarMenuMenu::before { 
            background-image: url("chrome://browser/skin/sidebars.svg") !important;
            content: '' !important;
			width: 16px !important;
			height: 16px !important;
			margin-left: -4px !important;
			margin-right: 8px !important;
			background-repeat: no-repeat !important;
			background-size: 16px 16px !important;
			background-position: center !important;
        }

        /* <<< Submenu "Sidebar" >>> */

		/* Häkchen für die genannten Menüeinträge ausblenden */
        #viewSidebarMenu >  menuitem[checked] > .menu-icon {
			visibility: hidden !important;
        }

		/* Individuelles Symbol für aktivierten Eintrag */
        #viewSidebarMenu >  menuitem[type="checkbox"][checked="true"]::before {
			content: '' !important;
			display: block !important;
			width: 22px !important;
			height: 22px !important;
			margin-left: -6px !important;
			margin-right: -11px !important;
			background-image: url("../icons/square-check.svg") !important;
			background-repeat: no-repeat !important;
			background-size: 16px 16px !important;
			background-position: 3px 3px !important;
			-moz-context-properties: fill !important;
            fill: green !important;
		}

		/* Symbole für alle inaktiven Einträge */
		#viewSidebarMenu >  menuitem[type="checkbox"]::before {		
			content: '' !important;
			display: block !important;
			width: 22px !important;
			height: 22px !important;
			margin-left: -6px !important;
			margin-right: -11px !important;
			background-repeat: no-repeat !important;
			background-size: 16px 16px !important;
			background-position:  3px 3px !important;
		}

		menuitem[id="menu_historySidebar"][type="checkbox"]::before {
			background-image: url("../Icons/history.svg") !important;
		}  
		menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
			background-image: url("../icons/Dock Side Left.svg") !important;
		}
		menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
			background-image: url("../icons/bookmark.svg") !important;
		}
		menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
			background-image: url("../icons/robot-icon.svg") !important;
		}
		menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
			background-image: url("../icons//passwords.svg") !important;
		}

Alles anzeigen

Horstmann

Zitat von Mitleser

Zitat von Horstmann

gibt es auch noch type radio, s. Bild von einem Leisten Kontextmenü.
Dein Code mit ein paar Anpassungen, mit Fx Icons zum Testen

Checkboxen und Radiobuttons würde ich nicht gleichsetzen wollen, denn sie haben ja jeweils eine spezielle Funktion:
......
Abgesehen davon würde ich Icons immer lokal speichern. Aber das ist ein anderes Thema...

Die Icons waren nur zum schnellen Test gedacht.

Was Checkboxen und Radiobuttons angeht, gibt es einen Grund sie generell separat zu behandeln, was das Design angeht?
Das ist wie immer vom Mac aus gefragt, wo die Dinger etwas anders gehandhabt werden.

Mitleser

Zitat von Horstmann

Was Checkboxen und Radiobuttons angeht, gibt es einen Grund sie generell separat zu behandeln, was das Design angeht?

Designregel Nr. 1: Form follows function...

Mira_Belle

2002Andreas Danke.

Habe den Code vom ersten Selektor übernommen und etwas, was die Ausrichtung angeht, angepasst!
In "meinem" CSS funkt auch irgendwie eine andere CSS mit rein,
deshalb klappt das auch mit dem Einzeiler.
Aber so ist es auch für andere leichter, "Ihren" Menüpunkt auszurichten.

Sieht dann so aus =>

und wenn was aktiviert ist, so =>

Probleme bei Firefox 149

Ähnliche Themen

Kann mich seit der Version 149.0 bei PayPal nicht einloggen

Firefox 149 startet nicht mit Startseite

Firefox 149.0beta9 Schriftfarbe der Tab im Split-View-Modus ändern

Linux Mint, 2 Websites machen Probleme

Firefox Lesezeichen Probleme

Firefox und Firefox Nightly (beide Android) verschiedenes Cursor-Verhalten