Beiträge von Mira_Belle

Mira_Belle

Zitat von .DeJaVu

Evtl. sind spezielle Menüs auch speziell einzustellen, nur so ein Gedanke.

Ich denke, ich habe es entsprechend eingeengt.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {

	/* ----------------------------------------------- */
	/* ------------- Checkboxen allgemein ------------ */
	/* ----------------------------------------------- */
    
    /* Symbol ausblenden, wenn Option deaktiviert */
    menupopup > menuitem[type="checkbox"] > img.menu-icon,
    menupopup > menuitem[type="checkbox"]:not([checked]) > img,
    menupopup > menuitem[type="checkbox"][checked] > img {
        display: none !important;
    }

    /* Eigenes Symbol einfügen, wenn Option aktiviert */

    menupopup > menuitem[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Eigenes Symbol einfügen, wenn Option deaktiviert */

    menupopup > menuitem[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    menupopup > menuitem#goOfflineMenuitem[type="checkbox"]::before,
    menupopup > menuitem#fullScreenItem[type="checkbox"]::before {
        visibility: collapse !important;
    }


    /* --- Symbolleisten --- */

    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"][checked] > .menu-icon {
            display: none !important;
        }
  
    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"][checked]::before {
        content: url("../icons/menu-check_lime.svg") !important;
        /*content: url("chrome://global/skin/icons/settings.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: 10px !important;
    }

    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"]:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        /*content: url("chrome://global/skin/icons/close.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -14px !important;
    }


    /* ------ Sidebar ------ */

	/* Eigenes Symbol einfügen, wenn Option aktiviert */
	menupopup > menuitem#menu_historySidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_tabsSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_bookmarksSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_genaiChatSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_megalistSidebar[type="checkbox"][checked]::before {
        background-image: url("../icons/menu-check_lime.svg") !important;
	}

	/* Eigene Symbole für inaktiven Einträge */

    /* Chronik */
	menuitem[id="menu_historySidebar"][type="checkbox"]::before {
		background-image: url("../icons/history.svg") !important;
	}
    /* Synchronisierte Tabs */
	menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
		background-image: url("../icons/Dock Side Left.svg") !important;
	}
    /* Lesezeichen */
	menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
		background-image: url("../icons/bookmark.svg") !important;
	}
    /* KI-Chatbot */
	menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
		background-image: url("../icons/robot-icon.svg") !important;
	}
    /* Passwörter */
	menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
		background-image: url("../icons//passwords.svg") !important;
	}


    /* -------- Zoom -------- */

    /* Nur Text zoomen, aktiviert */
    menupopup > #toggle_zoom[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Nur Text zoomen, deaktiviert */
    menupopup > #toggle_zoom[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }


    /* --- Webseiten-Stil --- */

    /* Symbol ausblenden, wenn Option aktiviert */
    #menu_pageStyleNoStyle[type="radio"] > .menu-icon,
    #menu_pageStylePersistentOnly[type="radio"] > .menu-icon {
        visibility: hidden !important;
    }

    /* Symbol einfügen, wenn Option inaktiv */
    #menu_pageStyleNoStyle[type="radio"]:not([checked])::before,
    #menu_pageStylePersistentOnly[type="radio"]:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        /*content: url("chrome://global/skin/icons/warning.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

    /* Symbol einfügen,  wenn Option aktiviert */
    #menu_pageStyleNoStyle[type="radio"]::before,
    #menu_pageStylePersistentOnly[type="radio"]::before {
        content: url("../icons/menu-check_lime.svg") !important;
        /*content: url("chrome://global/skin/icons/delete.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }
}

Alles anzeigen

Ich finde, das sieht gar nicht schlecht aus,
und Fehlverhalten habe ich jetzt auch nicht mehr feststellen können.
Wirkt wohl nur noch da, wo es auch wirken soll.

Mira_Belle

Grundsätzlich funktioniert das,
aber es wirkt aber unter Windows dann auch im Ansichtenmenü!
Und da funktioniert es dann eben auch nicht richtig.

Ist auch im Testprofil so! Also jenes ohne irgendwelche Anpassungen.

Mira_Belle

Zitat von Sören Hentzschel

Und damit seid ihr beide nicht auf dem aktuellen Stand.

Oh, danke nochmals für diesen Hinweis!
Ich hatte nur an einer Stelle im CSS noch [checked="true"] stehen und habe es korrigiert.
Mh, und an einer Stelle noch [checked="false"], auch korrigiert.

Mira_Belle

Oh, dann ist das alles noch etwas feiner gegliedert! Verstehe.

Zitat von .DeJaVu

Es kann nur genau ein CSS zutreffen für Form, und eines für Farbe - falls vorhanden.

Oh, dass wird schwierig!
Z.Z. ist es so, dass nur nach den Bereichen, wo das CSS wirken soll getrennt wird!
Also eine Datei für die Menüleiste, eine Datei für diverse Kontextmenüs,
nur beim "Hamburgermenü", da habe ich für diverse Sachen zwei Dateien,
Da ist es im groben schon so, Design (Symbole, Abstände usw. in einer Datei,
Einstellungen (Abstände und weiteres ) in einer anderen Datei.

Mira_Belle

Zitat von Horstmann

Funktioniert hier gar nicht, wobei ich nur den Leistencode testen kann.

Ob es Unterschiede zwischen den Betriebssystemen gibt?
Dein Code funktioniert hier auf meinem Windowsrechner nicht!
Getestet in einem Profil ohne irgendwelche anderen Anpassungen!

Zitat von Horstmann

Die ganze Anwendung von checked macht für mich auch keinen Sinn.

Mag Dir nicht einleuchtend sein, aber die Selektoren habe das Attribut [checked = "true"] oder [checked = " "]
oder eben [checked = "false"].
Das mache ich mir zunutze.

Zitat von Horstmann

Hast du das in Isolation getestet?

Die Frage habe ich schon beantwortet.

Zitat von Horstmann

... beziehst du dich auch auf Symbole 01-08, ohne Link ...

Bitte schön => RE: Symbole in den Kontextmenüs [ Update ]

Hilft halt nur nicht wirklich was, weil sich dieses CSS von hier, mit eben jenen noch behagt!
Ich schieb ja, dass ich das noch am Anpassen bin!

Zitat von Horstmann

Icons die kein Mensch hat

Weshalb ich auch in den CSS von hier "interne Symbole belassen habe".
Aber wer die von mir verwendeten Symbole unbedingt braucht => sind auch oben im Beitrag
und eines hier => #296

Zitat von Horstmann

Soll das überhaupt jemand testen, oder führst du hier Tagebuch?

Kannst Du Dir aussuchen.

.DeJaVu Ich sehe, aber ich verstehe nicht ganz.
Mein Konzept ist, @import in der userChorme.css.
Und für jedes gibt es eine eigene Datei.
Ja, ich habe schon versucht "Settings" und andere Dinge etwas voneinander zu trennen.
Die einzelnen CSS-Dateien sollen ja auch unabhängig voneinander funktionierten,
was mir leider nicht so 100%tig gelingen will.
Dann wird es an betreffenden Stellen Kommentare im Code geben.
Anders weiß ich mir nicht zu helfen.

Mira_Belle

Du hast recht.
Ich werde zu gegebener Zeit alles aufklären.
Jeder CSS und dann auch mit Bild.
Versprochen.

Aber wie ich direkt einen Beitrag zuvor schon schrieb, müssen die Dateien noch bereinigt werden.
Da sind noch eine Menge Codefragmente und Kommentare, welch nur für mich waren, drinnen.

Mira_Belle

Jetzt aber.
Und meine CSS-Dateien für die Symbole 01-08 auch gleich grob bereinigt!
Werde dann die Tage noch aufräumen und putzen.

Hier das eingehegte CSS für die Auswahlfelder,
ich hoffe inständig, dass ich nicht doch noch irgendetwas übersehen habe!

Ich bedanke mich ganz lichst bei Mitleser für seine Vorlage
und auch bei 2002Andreas für den Denkanstoß, ohne den ich gar nicht weitergekommen wäre.

CSS

/* Checkboxen allgemein */

    /* Symbol ausblenden, wenn Option deaktiviert */
    menupopup > menuitem[type="checkbox"] > img.menu-icon,
    menupopup > menuitem[type="checkbox"][checked="false"] > img,
    menupopup > menuitem[type="checkbox"][checked="true"] > img {
        display: none !important;
    }

    /* Eigenes Symbol einfügen, wenn Option aktiviert */

    /*menupopup > #toggle_zoom[type="checkbox"][checked]::before,
    menupopup > #toggle_zoom[type="checkbox"][checked="true"]::before   */

    menupopup > menuitem[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }


    /* Eigenes Symbol einfügen, wenn Option deaktiviert */

    /*menupopup > #toggle_zoom[type="checkbox"]::before,
    menupopup > #toggle_zoom[type="checkbox"][checked="false"]::before  */

    menupopup > menuitem[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }


/* Symbolleisten */

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

    #toggle_PersonalToolbar > menupopup > menuitem[checked]::before {
            content: url("../icons/menu-check_lime.svg") !important;
            /*content: url("chrome://global/skin/icons/settings.svg") !important; */
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin-left: -2px !important;
            margin-right: 10px !important;
        }

    #toggle_PersonalToolbar > menupopup > menuitem:not([checked])::before {
            content: url("../icons//square_2.svg") !important;
            /*content: url("chrome://global/skin/icons/close.svg") !important; */
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin-left: -2px !important;
            margin-right: -14px !important;
        }


/* Sidebar */

	/* Eigenes Symbol einfügen, wenn Option aktiviert */
	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 {
        background-image: url("../icons/menu-check_lime.svg") !important;
	}

	/* Eigene Symbole für inaktiven Einträge */

    /* Chronik */
	menuitem[id="menu_historySidebar"][type="checkbox"]::before {
		background-image: url("../icons/history.svg") !important;
	}
    /* Synchronisierte Tabs */
	menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
		background-image: url("../icons/Dock Side Left.svg") !important;
	}
    /* Lesezeichen */
	menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
		background-image: url("../icons/bookmark.svg") !important;
	}
    /* KI-Chatbot */
	menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
		background-image: url("../icons/robot-icon.svg") !important;
	}
    /* Passwörter */
	menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
		background-image: url("../icons//passwords.svg") !important;
	}


/* Zoom */

    /* Wird z.Z. mit "Checkboxen allgemein" abgedeckt */
    /* Nur Text zoomen, aktiviert */
    menupopup > #toggle_zoom[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Nur Text zoomen, deaktiviert */
    menupopup > #toggle_zoom[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

/* Webseiten-Stil */

    /* Symbol ausblenden, wenn Option aktiviert */
    #menu_pageStyleNoStyle > .menu-icon,
    #menu_pageStylePersistentOnly > .menu-icon {
        visibility: hidden !important;
    }

    /* Symbol einfügen, wenn Option inaktiv */
    #menu_pageStyleNoStyle:not([checked])::before,
    #menu_pageStylePersistentOnly:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        /*content: url("chrome://global/skin/icons/warning.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

    /* Symbol einfügen,  wenn Option aktiviert */
    #menu_pageStyleNoStyle::before,
    #menu_pageStylePersistentOnly::before {
        content: url("../icons/menu-check_lime.svg") !important;
        /*content: url("chrome://global/skin/icons/delete.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

Alles anzeigen

Mira_Belle

Zu früh gefreut. Ich muss die Bereiche, wo gewisse Dinge wirken, noch mehr eingrenzen.

Mira_Belle

So, habe es, so hoffe ich geschafft, den Krempel mit den Checkboxen, irgendwie hin zu bekommen.
Wenn jemand mein Verbrechen unter die Lupe nehmen könnte
und diese elenden margin-left: & margin-right: ausrichtungen irgendwie wegbekommen könnte,
wäre das echt dufte.

Ich weiß es halt nicht besser, aber ohne ist das Erscheinungsbild dann doch sehr besch....eiden.

Hier mein Werk, bzw. DAS Verbrechen.

CSS

/* Checkboxen allgemein */

    /* Symbol ausblenden, wenn Option deaktiviert */
    menupopup > menuitem[type="checkbox"] > img.menu-icon,
    menupopup > menuitem[type="checkbox"][checked="false"] > img,
    menupopup > menuitem[type="checkbox"][checked="true"] > img {
        display: none !important;
    }

    /* Eigenes Symbol einfügen, wenn Option aktiviert */
    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: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Eigenes Symbol einfügen, wenn Option deaktiviert */
    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: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }


/* Symbolleisten */

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

    menuitem[checked]::before {
            content: url("../icons/menu-check_lime.svg") !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin-left: -2px !important;
            margin-right: 10px !important;
        }

    menuitem:not([checked])::before {
            content: url("../icons//square_2.svg") !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin-left: -2px !important;
            margin-right: -14px !important;
        }


/* Sidebar */

	/* Eigenes Symbol einfügen, wenn Option aktiviert */
	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 {
        background-image: url("../icons/menu-check_lime.svg") !important;
	}

	/* Eigene Symbole für inaktiven Einträge */

    /* Chronik */
	menuitem[id="menu_historySidebar"][type="checkbox"]::before {
		background-image: url("../icons/history.svg") !important;
	}
    /* Synchronisierte Tabs */
	menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
		background-image: url("../icons/Dock Side Left.svg") !important;
	}
    /* Lesezeichen */
	menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
		background-image: url("../icons/bookmark.svg") !important;
	}
    /* KI-Chatbot */
	menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
		background-image: url("../icons/robot-icon.svg") !important;
	}
    /* Passwörter */
	menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
		background-image: url("../icons//passwords.svg") !important;
	}


/* Zoom */

    /* Wird z.Z. mit "Checkboxen allgemein" abgedeckt */


/* Webseiten-Stil */

    /* Symbol ausblenden, wenn Option aktiviert */
    #menu_pageStyleNoStyle > .menu-icon,
    #menu_pageStylePersistentOnly > .menu-icon {
        visibility: hidden !important;
    }

    /* Symbol einfügen, wenn Option inaktiv */
    #menu_pageStyleNoStyle:not([checked])::before,
    #menu_pageStylePersistentOnly:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

    /* Symbol einfügen,  wenn Option aktiviert */
    #menu_pageStyleNoStyle::before,
    #menu_pageStylePersistentOnly::before {
        content: url("../icons/menu-check_lime.svg") !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

Alles anzeigen

Anmerkung.
Das ist nur eine CSS für all die Auswahlfelder!
Ob und wie das dann mit anderen Anpassungen funktioniert steh noch gar nicht fest.
Das teste ich jetzt in dem Testprofil aus.

Mira_Belle

Dass ich manchmal blöde bin weiß ich!
Aber so doof, wie Du mich hältst bin ich dann doch nicht!
Im Übrigen habe _{^{ich für mich}} eine Lösung.

So klappt es, wie ich es will!

CSS

/* Symbol ausblenden, wenn Option aktiviert */
#menu_pageStyleNoStyle > .menu-icon,
#menu_pageStylePersistentOnly > .menu-icon {
    visibility: hidden !important;
}

/* Symbol einfügen, wenn Option inaktiv */
#menu_pageStyleNoStyle:not([checked])::before,
#menu_pageStylePersistentOnly:not([checked])::before {
    content: url("../icons//square_2.svg") !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: -2px !important;
	margin-right: -18px !important;
}
/* Symbol einfügen,  wenn Option aktiviert */
#menu_pageStyleNoStyle::before,
#menu_pageStylePersistentOnly::before {
    content: url("../icons/menu-check_lime.svg") !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin-left: -2px !important;
	margin-right: -18px !important;
}

Alles anzeigen

Mira_Belle

Danke Andreas,
warum habe ich mich da nur so verrannt? War schon am Verzweifeln.

Mira_Belle

Wie dieser Thread ja schon ziemlich geschreddert ist, würde ich vorschlagen ich mache einen Neuen auf!
Denn ich hätte da noch ein paar Fragen.

Behandlung von Radio-Buttons & Checkboxen

Mira_Belle

Es geht, wie die Überschrift ja schon andeutet um Radio-Button & Checkboxen!

Ich beabsichtige "meine" CSS-Dateien zu überarbeiten und die Behandlung der "Radio-Buttons & Checkboxen" in eine eigene Datei auszulagern.

Ich bin Dank Mitleser und auch anderen etwas weiter gekommen, aber dieses Mal hänge ich an dem Untermenü "Ansicht/Webseiten-Stil" fest.
Es will mir einfach nicht gelingen
1. das Häkchen durch ein eigenes Symbol zu ersetzen, ohne dass die Texte verschieben.
2. vor die deaktivierten Texte, "Kein Stil" und/oder "Standard-Stil" ein Symbol zu bekommen, ohne dass die Texte verschieben.

Entweder passt das eine, oder eben das andere!

So weit bin ich bisher gekommen, wo bei der Code für "Webseiten-Stil" gesammelte Werke sind und so nicht funktioniert.

CSS

      /* <<< Submenu "Webseiten-Stil" >>> */

#menu_pageStylePersistentOnly[checked] > .menu-icon,
#menu_pageStyleNoStyle[checked] > .menu-icon {
	display: none !important;
}


		/* Symbol einfügen, wenn Option inaktiv */
		#menu_pageStyleNoStyle:not([checked="true"])::before,
		#menu_pageStylePersistentOnly:not([checked="true"])::before {
      content: url("chrome://global/skin/icons/close.svg") !important; 
	 height: 16px !important;


		}



    #menu_pageStyleNoStyle:not([checked="true"]) > label[value="Kein Stil"] {
      margin-left: -20px !important;
    }
    
    

		/* Symbol ausblenden, wenn Option aktiviert */
		#menu_pageStyleNoStyle[checked=""]::before,
		#menu_pageStylePersistentOnly[checked=""]::before {
      visibility: hidden !important;
		}


#menu_pageStylePersistentOnly:not([checked="true"]) > label[value="Standard-Stil"] {
  margin-left: -20px !important;
}



		/* Symbol einfügen, wenn Option aktiv */
    #menu_pageStyleNoStyle[checked=""] {
    /*  background-image:  url("chrome://global/skin/icons/settings.svg") !important; */
      background-image: url("chrome://global/skin/icons/delete.svg") !important;
      background-repeat: no-repeat;
      background-position: left 1em center !important;
		}

#menu_pageStyleNoStyle > label[value="Kein Stil"] {
  padding-left: 25px;
}

Alles anzeigen

Damit man das in den Browserwerkzeugen eben schnell mal testen kann, habe ich "interne" Symbole verwendet.

Mira_Belle

Zitat von bananovic

Mira_Belle es ist der CSS aus #37. Ich habe lediglich den Wert für margin-right in Zeile 28 auf -19px und in Zeile 44 auf 5px geändert. Auch habe ich die Werte von width und heigth auf 16px geändert. Ferner habe ich nach Zeile 47 padding-left: 8px eingefügt. Das ist alles.

Du musst dann halt ausprobieren und testen.
Eventuell haut bei Dir ja auch noch anderer Code dazwischen.

Mira_Belle

Hat mir Grok vor die Füße gerotzt.
Ich kann mit der Antwort nichts anfangen.

Mira_Belle

Poste mal "Dein" CSS., oder ist es der aus #37 ?

Dann spiele mal mit den Werten

CSS

		/* Symbole für alle inaktiven Einträge */
		#viewSidebarMenu >  menuitem[type="checkbox"]::before {		

			width: 22px !important;
			height: 22px !important;
			margin-left: -6px !important;
			margin-right: -11px !important;


			background-position:  3px 3px !important;
		}

Alles anzeigen

Am besten Du deaktivierst den Betreffenden Tein direkt in Deiner CSS
und kopiert ihn ich die Browser-Werkzeuge,
da kannst Du ja direkt sehen was passiert.

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 =>

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

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.

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

Beiträge von Mira_Belle

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Behandlung von Radio-Buttons & Checkboxen

Probleme bei Firefox 149

Behandlung von Radio-Buttons & Checkboxen

Probleme bei Firefox 149

Probleme bei Firefox 149

Probleme bei Firefox 149

Probleme bei Firefox 149

Probleme bei Firefox 149

Probleme bei Firefox 149

Probleme bei Firefox 149