Symbole in Menüs

Mira_Belle

So hier der Code

CSS

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

    .foo {    /* nur wegen der Klammern */
    }
    /*--------------------------------------------------------------------------*/    
    /*--------- Texte im Hamburgermenü und in den Submenüs eingerückt ----------*/
    /*-------------- und in dem Anmeldenbutton das Icon eingefügt --------------*/
    /*--------------------------------------------------------------------------*/

    .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI]) > .toolbarbutton-icon {
        width: 16px;
        height: 16px;
        margin-inline-end: 8px !important;
        -moz-context-properties: fill, fill-opacity;
        fill: currentColor;
    }

    #appMenu-fxa-label2::before,
    #fxa-manage-account-button::after {
        content: "";
        display: -moz-box;
        border-radius: 50%;
        background: var(--avatar-image-url) no-repeat center/contain;
        -moz-context-properties: fill;
        fill: currentColor;
    }

    #appMenu-fxa-label2::before {
        width: 16px;
        height: 16px;
        margin-inline-end: 8px;
    }

    /* Neuer Tab */

    #appMenu-new-tab-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg");
    }

  /* Neues Fenster */

    #appMenu-new-window-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg");
    }
  
  /* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/privateBrowsing.svg");
    }

  /* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark.svg");
    }

    /* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/privateBrowsing.svg");
    }

    /* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark.svg");
    }

    /* Chronik */

    #appMenu-history-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/history.svg");
    }

    /* Download */

    #appMenu-downloads-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/downloads.svg");
    }

    /* Passwörter */

    #appMenu-passwords-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/login.svg");
    }

  /* Add-ons und Themes */

    #appMenu-extensions-themes-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/extension.svg");
    }

    /* Drucken */

    #appMenu-print-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/print.svg");
    }

    /* Seite speichern unter */

    #appMenu-save-file-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/save.svg");
    }

    /* In Seite suchen */

    #appMenu-find-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/search-glass.svg");
    }

    /* Zoom */

    #appMenu-zoom-controls2::before {
        margin-top: 3px !important;
        margin-right: 10px !important; 
        margin-left: -1px !important;
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        mask-image:  url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/screenshot.svg") !important;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: #e1e1e1 !important;
    }

    /*Einstellungen */

    #appMenu-settings-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/settings.svg");
    }

    /*Weitere Werkzeuge */

    #appMenu-more-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/ion.svg");
    }

    /* Hilfe */

    #appMenu-help-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/help.svg");
    }

    /* Beenden */

    #appMenu-quit-button2 {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/quit.svg");
    }

    /*= Panel - Bookmark =========================================================*/
  
    /* Aktuellen Tab als Lesezeichen ... */
/*
    [data-l10n-id="bookmarks-bookmark-edit-panel"] {
        list-style-image: url("chrome://browser/skin/window.svg");
    }
*/
    /* Lesezeichen bearbeiten */
/*
    [data-l10n-id="bookmarks-current-tab"] {
        list-style-image: url("chrome://browser/skin/new-tab.svg");
    }
*/

    /* Lesezeichen bearbeiten */
    
    [data-l10n-id="bookmarks-bookmark-edit-panel"]::before {
        margin-top: 3px !important;    
        margin-right: -15px !important;
        margin-left: -1px !important;
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        mask-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg") !important;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: #e1e1e1 !important;
    }

    /* Aktuellen Tab als Lesezeichen ... */

    [data-l10n-id="bookmarks-current-tab"]::before {
        margin-top: 3px !important;    
        margin-right: -15px !important;
        margin-left: -1px !important;
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        mask-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg") !important;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: #e1e1e1 !important;
    }


    /* Lesezeichen durchsuchen */
  
    #panelMenu_searchBookmarks {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/search-glass.svg");
    }

    /* Lesezeichen-Symbolleiste ausblenden */
    #panelMenu_viewBookmarksToolbar {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmarks-toolbar.svg");
    }

    /* Lesezeichen verwalten */
    #panelMenu_showAllBookmarks {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark-star-on-tray.svg");
    } 

    /*= Panel - Chonik ===========================================================*/
    /*= Panel - History ==========================================================*/
  
    /* Kürzlich geschlossene Tabs */
    #appMenuRecentlyClosedTabs {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/tab.svg");
    }

    /* Kürzlich geschlossene Fenster */
    #appMenuRecentlyClosedWindows {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg");
    }

    /* Vorherige Sitzung wiederherstellen */
    #appMenu-restoreSession{
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/restore-session.svg");
    }

    /* Neueste Chronik löschen ... */
    #appMenuClearRecentHistory {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/forget.svg");
    }

    /* Chronik verwalten */
    #PanelUI-historyMore {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/history.svg");
    }

    /* Alle Tabs wieder öffnen */
    #appMenu-library-recentlyClosedTabs {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/movetowindow-16.svg");
    }

    /* Alle Fenster wieder öffnen */
    #appMenu-library-recentlyClosedWindows {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/restore-session.svg");
    }

    /*= Panel - More tools =======================================================*/
  
    /* Symbolleiste anpassen ... */
  
    #appmenu-moreTools-button {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/customize.svg");
    }

    /* Werkzeuge für Web-... */
    #appmenu-developer-tools-view .subviewbutton:nth-child(1) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/developer.svg");
    }

    /* Task Manager */
    #appmenu-developer-tools-view .subviewbutton:nth-child(2) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/performance.svg");
    }

    /* Externes Debugging - Edge bug.svg */
    #appmenu-developer-tools-view .subviewbutton:nth-child(3) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bug.svg");
    }

    /* Browser-Werkzeuge - Edge webdeveloper.svg */
    #appmenu-developer-tools-view .subviewbutton:nth-child(4) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window-dev-tools.svg");
    }

    /* Browser-Inhaltswerkzeuge */
    #appmenu-developer-tools-view .subviewbutton:nth-child(5) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-frames.svg");
    }

    /* Browser-Konsole */
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-console.svg");
    }

    /* Bildschirmgrößen testen */
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-responsivemode.svg");
    }

    /* Farbpipette */
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-eyedropper.svg");
    }

    /* Seitenquelltext anzeigen - Edge file-search.svg */
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/document-search.svg");
    }

    /* Erweiterungen für Entwickler */
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/debugging-addons.svg");
    }
  
    /*= Panel - Help =============================================================*/
  
    /* Hilfe erhalten */  
    #appMenu_menu_openHelp {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/help.svg");
    }

    /* Ideen und Feedback teilen ... */
    #appMenu_feedbackPage {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/send.svg");
    }

    /* Fehlerbehebungsmodus ... */
    #appMenu_helpSafeMode {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/debugging-workers.svg");
    }

    /* Weitere Informationen zur ... */
    #appMenu_troubleShooting {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/more.svg");
    }

    /* ?? Eine Glühbirne ?? */
    #appMenu_help_reportSiteIssue {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/lightbulb.svg");
    }

    /* Betrügerische Website melden ... */
    #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
    list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/warning.svg");
  }

    /* Über Firefox */
    #appMenu_aboutName {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/info.svg");
    }
}

Alles anzeigen

Icons kommen noch!

Nachtrag!

Wie versprochen hier die Icons. => icons.zip

Und wer sich nicht an dem "leicht" anderen Design stört,

kann ja jetzt das Projekt nachbauen.

Wer ganz andere Icons einsetzen möchte, kann das natürlich auch tun.

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

Du bist böse.
Mir falle da nur drei Symbole auf.
1. Drucken...
2. Seite speichern unter ...
und
3. Weitere Werkzeuge

Alles anzeigen

Das sollte nicht böse gemeint sein. Ich habe täglich mit Design zu tun, mir sticht das daher sofort ins Auge und dementsprechend stört mich das. Neben den drei von dir genannten Icon kannst du noch mindestens Beenden dazu nehmen. Und wenn du Drucken nennst, weil das ein gefülltes Icon ist, dann auch noch Neuer Tab, Neues privates Fenster und Lesezeichen. Die passen vom Stil oder der Strichstärke alle nicht zum Rest.

Zitat von Mira_Belle

Bedauerlicherweise habe ich keine Alternativen gefunden.

Eine Quelle für Icons wäre beispielsweise https://www.iconfinder.com/. Sehr populär ist auch https://fontawesome.com/. Ich habe jetzt aber auch nicht geschaut, was es da an Alternativen für diese Icons gibt.

Zitat von Mira_Belle

Und die Icons sind so in Firefox!

Zitat von BrokenHeart

Dann muss man sich aber bei Mozilla beschweren. So wie ich das sehe, sind das doch fast alles Icons aus dem aktuellen Firefox-Fundus, die auch genau in dieser Zusammenstellung so für die Symbolleisten verwendet werden.

Ja und Nein. Die Icons sind alle aus Firefox, werden so aber nicht gemeinsam verwendet. Im Menü verwendet Firefox überhaupt keine Icons. Daher ist es, was Mozillas Arbeit betrifft, egal, ob diese Komposition von Icons zusammenpasst oder nicht, denn die Icons sind für die gemeinsame Verwendung im Menü ja überhaupt nicht vorgesehen. Würde Firefox dort noch Icons anzeigen, hätte Mozilla definitiv alle in einem einheitlichen Stil zeichnen lassen, weil das die primäre Oberfläche betrifft. Leider hat es Mozilla nicht geschafft, rechtzeitig zum Launch von Firefox 89 alle Icons zu ersetzen, und nach der Auslieferung von Firefox 89 nicht in die restlichen Icons investiert, welche nicht die primäre Oberfläche betreffen. Das finde ich auch schade.

BrokenHeart

Zitat von Sören Hentzschel

denn die Icons sind für die gemeinsame Verwendung im Menü ja überhaupt nicht vorgesehen.

Obwohl mir ein schlichtes Design eigentlich ganz gut gefällt, mag ich die FF-SVG-Icons nicht besonders, auch weil ich sie zu inkonsistent finde, irgendwie nicht wie aus einem Guss. Aber sie erfüllen ihren Zweck, deshalb habe ich sie auch nicht ersetzt bzw. für die Menüs verwendet. Was ich aber mag, sind sinnlose Hintergründe für das Anwendungsmenü:

Gabbo

👍️🦄🤡️🦄

Mira_Belle

So, dieser Teil ist von meiner Warte abgeschlossen!

Ganz lich möchte ich mich bei allen Beteiligten für Ihre Hilfen, Ihre Ideen, Anregungen und Unterstützungen bedanken.

Jetzt geht es an die anderen Pop-ups.

Sechs Stück an der Zahl habe ich gezählt.

Dafür werde ich dann aber einen neuen Thread aufmachen.

Symbole in den Pop-ups

Gruß

Mira

Symbole in Menüs

Ähnliche Themen

Meine .css und .js für Fx 10x.0bxbeta

Firefox Startseite

Separator zwischen Tableiste und Url-Leiste entfernen

Ähnliche Themen

Meine *.css und *.js für Fx 10x.0bxbeta

Firefox Startseite

Separator zwischen Tableiste und Url-Leiste entfernen

Meine .css und .js für Fx 10x.0bxbeta