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.

2002Andreas

Zitat von Mira_Belle

Es will mir einfach nicht gelingen

Nur ein Versuch:

Kein Stil:

Standard-Stil:

CSS

#menu_pageStyleNoStyle:not([checked])::before,
#menu_pageStylePersistentOnly:not([checked])::before {
	content: url("chrome://global/skin/icons/settings.svg") !important;
    margin-right: -11px !important;
    margin-left: -3px !important;
    margin-top: 4px !important;   
    fill: red !important;
}

[data-l10n-id="menu-view-page-style-no-style"] .menu-icon,
[data-l10n-id="menu-view-page-basic-style"] .menu-icon {
    height: 0 !important;
}

#menu_pageStyleNoStyle::before,
#menu_pageStylePersistentOnly::before{
content: url("chrome://global/skin/icons/settings.svg") !important;
    margin-right: -11px !important;
    margin-left: -3px !important;
    margin-top: 4px !important;   
    fill: green !important;
}

Alles anzeigen

Mira_Belle

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

Horstmann

Um ganz ehrlich zu sein - das Thema ist jetzt schon in mindestens 2 Threads ad nauseam diskutiert worden.

Und du scheinst jedes mal zu den gleichen CSS Code Ansätzen zurückzugehen mit denen du angefangen hast, mit den gleichen Fragen zu den gleichen Problemen, ohne die vielen Vorschläge dazu konsequent oder überhaupt anzuwenden.

Mir fällt nichts Neues mehr dazu ein, und offengestanden kann ich mir keine Lösung vorstellen, die den obigen Code halbwegs sinnvoll macht.
Davon abgesehen ist der Thread Titel irreführend, wenn es sich nur um einen kleinen Schnipsel dreht, der vermutlich von einer Menge deines anderen CSS mit definiert wird.

Wie zuvor schon vorgeschlagen, an deiner Stelle würde ich den Icons Code komplett neu aufbauen, und ohne schon im Ansatz in's Detail zu gehen.

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

.DeJaVu

Basierend auf dem ersten CSS ist es sehr ratsam, CSS auch zu formatieren, nicht nur copy&paste reingekippt.

Unterschiedliche Einrückungen symbolisieren mir unterschiedliche Ebenen, für Kommentare ebenso. So, wie in deinem letzten Beispiel.

CSS nach ihren Bereichen zu strukturieren, ist mehr als eine Wochenendaufgabe. Und sowas braucht einen guten CSS-Editor, der nicht nur formatieren kann, sondern auch sortieren kann, damit gleiche (Anfangs-)Elemente auch untereinander stehen. Also Notepad++ scheidet da kategorisch aus.

Und dann kann man auch gut erkennen in den Browser-Werkzeugen, ob weiter unten im CSS, oder in einem andere CSS ein CSS steht, dass vorher schon mal definiert wurde.

Also Tabs, Farben, diverse Menü, etc ganz konkret aufdröselt - und das am besten in einem neuen Profil, kann auch 'ne Portable sein. Stück für Stück übertragen und schauen, was passiert.

Horstmann

Zitat von Mira_Belle
Aber so doof, wie Du mich hältst bin ich dann doch nicht!
CSS
	margin-left: -2px !important;
	margin-right: -18px !important;

Du bist überhaupt nicht doof, nur dein CSS ist ein Verbrechen.

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

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

Horstmann

Mitleser hat das schon schlau angegangen, ::before Element content kombiniert mit background-image, damit sollte man auf der sicheren Seite sein.

Aber dann besser nur Bilder in einem von beiden, erstmal nicht mischen, und das checked Attribut nur minimal einsetzen.

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

.DeJaVu

Kann es sein, dass dieses Thema irgendwie woanders abgetrennt wurde?

Es wäre aus meiner Sicht lesefreundlicher, wenn du nicht jeden deiner Gedanken direkt ins Forum kippen würdest, um es Minuten oder wenige Stunden später anders verlauten zu lassen. Wen interessiert, was so nicht funktioniert? Um dann in #3 zu verzweifeln (wayne?) und in #5 #8 #9 ganz anderes CSS zu schreiben?

Für wen wäre das denn nutzbar? Wie sieht das aus? -> Bild fehlt!

Vielleicht genial, aber denkbar schlechteste Verkäuferin ever. Mitleser wollen was Fertiges, keinen Entwicklungsstand. Solltest du Mitarbeit wünschen, dann solltest du das auch so hinschreiben.

Wie sieht eigentlich deine Übersicht aus? Ich hatte ja oben meine Gedanken geäußert, so ist auch mein CSS strukturiert. Was jeder für sich entscheiden muss. Nur wenn man dir am Nabel hängt, so denke ich, könnte es sein, dass plötzlich gar nichts mehr funktioniert, weil der Überblick über das Ganze fehlt, weil nicht vorhanden. Ach ja, so war es ja kürzlich erst, wo du zu einer Übernahme über ein ganz neues CSS angepriesen hattest, statt das bisherige aufzuarbeiten, was auch nicht erwünscht wurde.

Endor und andere habe dafür eine Bibliothek, strukturiert. Bei dir muss ich mich mühsam durch dieses Forum hangeln, um eigentlich nur festzustellen, dass du hier da und dort irgendein CSS verteilst, aber selbst keine Struktur ähnlich wie auf github verfügbar ist, wo ich mir das passende raussuchen und einfügen kann. Von hier mach ich das auf gut Glück - wobei "Glück" noch vorsichtig formuliert ist.

Du kannst nicht erwarten, dass alle Mitleser hier super CSS Kenntnisse haben. Die meisten haben gar keinen Plan und schreiben nur ab, klatschen es vermutlich in eine userChrome - und damit peng, Spaghetticode, der irgendwann um die Ohren fliegt.

Diese Verantwortung deinerseits darf man eigentlich inzwischen erwarten! Da kann man auch verstehen, wenn zB Brokenheart ihre Ergebnisse nicht mehr teilt, sie hat es verstanden.

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.

.DeJaVu

Mahlzeit, bzw guten Morgen

Was ich eigentlich sagen wollte: nimm dir mehr Zeit bei deinem CSS. Es zwingt dich hier niemand, irgendwas "abzuliefern". Wenn etwas nicht fertig ist, ist das auch nicht, niemand drängt dich, oder etwa doch?

Horstmann

Zitat von 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!

Funktioniert hier gar nicht, wobei ich nur den Leistencode testen kann.
Die ganze Anwendung von checked macht für mich auch keinen Sinn. Hast du das in Isolation getestet?

Im übrigen gebe ich .DeJaVu recht, hier beziehst du dich auch auf Symbole 01-08, ohne Link, benutzt im Code Icons die kein Mensch hat, und Fragmente die sich vermutlich auf anderen Code stützen.
Soll das überhaupt jemand testen, oder führst du hier Tagebuch?

Also, was hier klappt, mit Fx Icons zum Testen, outlines für die Übersicht beim Testen, und Screenshots mit Umfeld, damit man weiss wie das Design aussehen soll.

Das ist dein Code mit Änderungen (linksbündiger Code), und Auskommtieren von mE überflüssigem Code, nur der Leistenteil (Kontextmenü). Im Prinzip immer noch das gleiche wie schon 100x vorgeschlagen, nur schlechter.

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

menupopup > menuitem:is([type="checkbox"], [type="radio"]) > :is(img, image) {
    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 { */
menupopup > menuitem:is([type="checkbox"], [type="radio"])[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-image: url("chrome://global/skin/icons/check.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:is([type="checkbox"], [type="radio"])::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-image: url("chrome://global/skin/icons/close.svg") !important;
-moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;    
/* fill: red !important;*/
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
outline: 1px solid !important;
outline-offset: 0px !important;
outline-color: green !important;
    }


menupopup > menuitem[type="checkbox"]:not([checked="true"])::before {
fill: red !important;
outline-color: red !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;
            display: block !important;
            width: 16px !important;
            height: 16px !important;*/
            margin-left: -2px !important;
            margin-right: 10px !important;
outline-color: cyan !important;
        
        }

/*     #toggle_PersonalToolbar > menupopup > menuitem:not([checked])::before { */
#toggle_PersonalToolbar > menupopup > menuitem:not([checked="true"])::before {
            /* content: url("../icons//square_2.svg") !important; */
background-image: url("chrome://devtools/skin/images/checkbox.svg") !important;
/*             display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin-left: -2px !important;
            margin-right: -14px !important; */
outline-color: orange !important;        
        }

Alles anzeigen

.DeJaVu

Ein Beispiel, wie ich mein CSS sortiere

Code

userChrome.css
userContent.css
\about
 |- _about.css
 |- about_addons.css
 |- about_addons_buttons.css
 |- about_addons_endor.css
 |- about_addons_neu.css
 |- about_config.css
 |- about_prefs.css
 |- about_profiles.css
 |- about_reader.css
  - about_sync.css
\ctr
 |- _ctr_chrome.css
 |- _ctr_content.css
 |- ac_popup_megabar_title_and_url_50percent_width.css
 |- addonlists_show_addon_version_number.css
 |- addons_manager_alternative_appearance.css
 |- bookmark_icons_colorized.css
 |- findbar_on_top.css
  - tab_throbber_grey_classic.css
\eigene
 |- _eigene_chrome.css
 |- _eigene_content.css
 |- addressbar_buttons.css
 |- addressbar_fix.css
 |- bookmarkpanel.css
 |- clippings.css
 |- downloads.css
 |- ext_button.css
 |- findbar.css
 |- firefoxview.css
 |- login.css
 |- lz_menu_win10.css
 |- passwords.css
 |- places.css
 |- reader_button.css
 |- sanitize2.css
 |- sanitize_dialog_fix.css
 |- search_result.css
 |- sidebar.css
 |- tab-context.css
 |- tracking.css
  - translate.css
\image
 |- bookmarksMenu.png
 |- bookmarksToolbar.png
 |- calendar.png
 |- folder-item-red.png
 |- folder-item.png
 |- query.png
 |- tabthrobber_classic_loading.png
 |- tabthrobber_fx56_connecting.png
 |- tag.png
 |- unsortedBookmarks.png
 |- download-icons.svg
 |- extension3.svg
 |- notification-start-animation.svg
 |- tracking-protection-gray2.svg
 |- tracking-protection-green2.svg
  - tracking-protection-red2.svg
\proton
 |- _proton.css
 |- proton_bookmark_panel.css
 |- proton_border_popups.css
 |- proton_context_menu.css
 |- proton_downloadbox.css
 |- proton_hamburger_menu.css
 |- proton_menubar.css
 |- proton_overhang_menu.css
 |- proton_tab_bar.css
 |- proton_tab_colors.css
  - proton_tabs_pinned.css

Alles anzeigen

Nicht perfekt, und ganz sicher nicht fehlerfrei, wie ich eben sehen durfte. Und Proton wurde mit v89 eingeführt, etliches davon ist noch gültig, nach 60 Versionen. Aber auch die CTR-CSS sind geringfügig angepasst. Viele enthalten nur zwei Elemente, das längste hat 225 Zeilen und betrifft die Tableiste. Und auch da wird es bald eine Trennung zwischen horizontal und vertikal geben, sonst wird es unübersichtlich. Strikte Trennung zwischen Form und Farbe.

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.

.DeJaVu

Nichts anderes hier. Wobei jeder Unterordner (bis auf Bilder) sein eigenes _name.css mit @import für die CSS im selben Ordner hat. Damit reduzieren sich auch die @import in userChrome/userContent. Ich kann es damit blockweise abschalten, granular nach "unten". Bsp userChrome.css

Code

/*aris ctr*/
@import url(./ctr/_ctr_chrome.css);

/*proton fixes*/
@import url(./proton/_proton.css); /* <-- Beispiel */

/*eigene*/
@import url(./eigene/_eigene_chrome.css);

Bsp

Code

/*proton fixes*/
@import url(./proton_bookmark_panel.css);
@import url(./proton_border_popups.css);
@import url(./proton_context_menu.css);
@import url(./proton_downloadbox.css);
@import url(./proton_hamburger_menu.css);
@import url(./proton_menubar.css);
@import url(./proton_overhang_menu.css);
@import url(./proton_tab_bar.css);
@import url(./proton_tab_colors.css);
@import url(./proton_tabs_pinned.css);

Alles anzeigen

Während meiner Filme heute Mittag konnte ich ein wenig aufräumen.

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

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.

.DeJaVu

Angefangen hat das in einfacher Form schon mit Firefox 57, irgendwann ab Oktober/November 2017, in v58 ganz sicher - so meine Backups.

Ich mach das also schon ein wenig länger Ohne die Zeit ab v4 mit eigenem Theme.

Behandlung von Radio-Buttons & Checkboxen

Ähnliche Themen

Probleme bei Firefox 149