Last active
December 29, 2025 14:51
-
-
Save emvaized/a379d61ed8970e5711ca7278a39c1895 to your computer and use it in GitHub Desktop.
Iconic Firefox — userChrome CSS snippet which adds back icons for most context and popup menu entries in Firefox. It uses mostly built-in icons.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Iconic Firefox (https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895/) */ | |
| /* Author (c) 2025 emvaized */ | |
| /* Based on https://gist.github.com/qaz69wsx/83a90423163b65a8344b2e60fc356a58 (no longer available) */ | |
| /* For better compatibility with dark mode, enable `svg.context-properties.content.enabled` in `about:config` */ | |
| :root{ | |
| --uc-popup-menu-icon-color: color-mix(in srgb, currentColor 75%, transparent); | |
| } | |
| .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.toolbarbutton-icon, | |
| .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.protections-popup-footer-icon{ | |
| width:16px; | |
| height:16px; | |
| margin-inline-end:8px !important; | |
| -moz-context-properties:fill, fill-opacity; | |
| fill:var(--uc-popup-menu-icon-color); | |
| } | |
| menupopup:not(.in-menulist)>menu:not(.menu-iconic), | |
| menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [checked="true"]), | |
| menuitem[type="checkbox"], | |
| menuitem[type="radio"], | |
| toolbarbutton[data-l10n-id*="-manage-"], | |
| menuitem[data-l10n-id*="-manage-"], | |
| #downloadsHistory, | |
| #appMenu-zoom-controls{ | |
| padding-inline-start:calc(1em + 24px) !important; | |
| background-position:left 1em center; | |
| background-repeat:no-repeat; | |
| background-size:16px; | |
| -moz-context-properties:fill, fill-opacity; | |
| fill:var(--uc-popup-menu-icon-color); | |
| } | |
| #fxa-manage-account-button>vbox>label{ | |
| margin-inline-start:24px !important; | |
| } | |
| .PanelUI-remotetabs-notabsforclient-label{ | |
| margin-inline-start:40px !important; | |
| } | |
| .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text, | |
| toolbarbutton[data-l10n-id*="-manage-"]{ | |
| padding-inline-start:8px !important; | |
| } | |
| #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-opacity; | |
| fill:var(--uc-popup-menu-icon-color); | |
| } | |
| #appMenu-fxa-label2::before{ | |
| width:16px; | |
| height:16px; | |
| margin-inline-end:8px; | |
| } | |
| #fxa-manage-account-button::after{ | |
| width:32px; | |
| height:32px; | |
| } | |
| .syncNowBtn{ | |
| visibility:visible !important; | |
| -moz-box-ordinal-group:0 !important; | |
| margin-inline-end:8px; | |
| order:0 !important; | |
| } | |
| menupopup[needsgutter] { | |
| @media (-moz-platform: linux) or (-moz-platform: windows) { | |
| > :is(menu, menuitem):not([image], [checked="true"]) > .menu-icon { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| #PanelUI-fxa-menu-setup-sync-button{ | |
| list-style-image:url("chrome://browser/skin/sync.svg"); | |
| } | |
| #PanelUI-fxa-menu-sendtab-button{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 0H4a2 2 0 00-2 2v2a1 1 0 001 1 1 1 0 001-1V2.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5V11a1 1 0 00-1-1 1 1 0 00-1 1v3a2 2 0 002 2h8a2 2 0 002-2V2a2 2 0 00-2-2zM9 15H7v-1h2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.146 10.146a.5.5 0 10.707.707l3-3a.5.5 0 000-.708l-3-3a.5.5 0 00-.707.707L7.293 7H.5a.5.5 0 000 1h6.793z"/></svg>'); | |
| } | |
| .subviewbutton[data-l10n-id$="-settings"]:not([data-l10n-id*="-manage-"]){ | |
| list-style-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="fxa-menu-connect-another-device"]{ | |
| list-style-image:url("chrome://global/skin/icons/plus.svg"); | |
| } | |
| #PanelUI-fxa-menu-account-signout-button{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 11.375a.875.875 0 110 1.75H3.375A2.625 2.625 0 01.75 10.5v-7A2.625 2.625 0 013.375.875H6a.875.875 0 110 1.75H3.375A.875.875 0 002.5 3.5v7c0 .483.392.875.875.875zm5.871-4.996a.875.875 0 010 1.242l-2.625 2.625a.875.875 0 01-1.242 0 .875.875 0 010-1.242L9.14 7.875H5.125a.875.875 0 110-1.75h4.016L8.004 4.996a.879.879 0 011.242-1.242z"/></svg>'); | |
| } | |
| #appMenu-new-tab-button2{ | |
| list-style-image:url("chrome://browser/skin/new-tab.svg"); | |
| } | |
| #appMenu-new-window-button2, | |
| #appMenuRecentlyClosedWindows{ | |
| list-style-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| #appMenu-new-private-window-button2{ | |
| list-style-image:url("chrome://browser/skin/privateBrowsing.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="library-bookmarks-menu"], | |
| #panelMenuBookmarkThisPage[starred], | |
| #sidebar-switcher-bookmarks{ | |
| list-style-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #panelMenuBookmarkThisPage{ | |
| list-style-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #panelMenu_searchBookmarks, | |
| #appMenu-find-button2, | |
| #appMenuSearchHistory, | |
| #allTabsMenu-searchTabs{ | |
| list-style-image:url("chrome://global/skin/icons/search-glass.svg"); | |
| } | |
| #panelMenu_viewBookmarksToolbar{ | |
| list-style-image:url("chrome://browser/skin/bookmark-star-on-tray.svg"); | |
| } | |
| .subviewbutton[id$="-history-button"], | |
| #sidebar-switcher-history{ | |
| list-style-image:url("chrome://browser/skin/history.svg"); | |
| } | |
| #appMenuRecentlyClosedTabs{ | |
| list-style-image:url("chrome://browser/skin/tabs.svg"); | |
| } | |
| #appMenuRestoreSession{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M13 0H3a3 3 0 00-3 3v8a3 3 0 003 3h4l-.3.4a1 1 0 101.6 1.2l1.5-2a1 1 0 000-1.2l-1.5-2a1 1 0 00-1.6 1.2l.3.4H3a1 1 0 01-1-1V5h12v6a1 1 0 01-1 1 1 1 0 000 2 3 3 0 003-3V3a3 3 0 00-3-3zM2 4V3a1 1 0 011-1h10a1 1 0 011 1v1z"/></svg>'); | |
| } | |
| #appMenuClearRecentHistory, | |
| toolbarbutton.restoreallitem{ | |
| list-style-image:url("chrome://browser/skin/forget.svg"); | |
| } | |
| .subviewbutton[id$="-downloads-button"]{ | |
| list-style-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| #appMenu-passwords-button{ | |
| list-style-image:url("chrome://browser/skin/login.svg"); | |
| } | |
| #appMenu-extensions-themes-button{ | |
| list-style-image:url("chrome://mozapps/skin/extensions/extension.svg"); | |
| } | |
| #appMenu-print-button2{ | |
| list-style-image:url("chrome://global/skin/icons/print.svg"); | |
| } | |
| #appMenu-save-file-button2{ | |
| list-style-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| .subviewbutton[command="cmd_CustomizeToolbars"]{ | |
| list-style-image:url("chrome://browser/skin/customize.svg"); | |
| } | |
| .subviewbutton[oncommand="switchToTabHavingURI('about:performance', true)"]{ | |
| list-style-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| .subviewbutton[key="key_browserToolbox"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-inspector.svg"); | |
| } | |
| .subviewbutton[key="key_aboutProcesses"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-profiler.svg"); | |
| } | |
| .subviewbutton[key="key_aboutProcesses"] + .subviewbutton{ | |
| list-style-image:url("chrome://global/skin/icons/developer.svg"); | |
| } | |
| .subviewbutton[key="key_browserConsole"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-webconsole.svg"); | |
| } | |
| .subviewbutton[key="key_toggleToolbox"]{ | |
| list-style-image:url("resource://devtools-shared-images/command-pick.svg"); | |
| } | |
| .subviewbutton[key="key_viewSource"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-styleeditor.svg"); | |
| } | |
| .subviewbutton[key="key_responsiveDesignMode"]:not([checked="true"]){ | |
| list-style-image:url("chrome://devtools/skin/images/command-responsivemode.svg"); | |
| fill-opacity:0; | |
| } | |
| .subviewbutton[key="key_responsiveDesignMode"]+.subviewbutton{ | |
| list-style-image:url("chrome://devtools/skin/images/command-eyedropper.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="appmenu-developer-tools-extensions"]{ | |
| list-style-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); | |
| } | |
| #appMenu-help-button2, | |
| #appMenu_menu_openHelp | |
| { | |
| list-style-image:url("chrome://global/skin/icons/help.svg"); | |
| } | |
| #appMenu_menu_HelpPopup_reportPhishingtoolmenu{ | |
| list-style-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| #appMenu_feedbackPage{ | |
| list-style-image:url("chrome://global/skin/icons/lightbulb.svg"); | |
| } | |
| #appMenu_troubleShooting{ | |
| list-style-image:url("chrome://devtools/skin/images/browsers/firefox.svg"); | |
| } | |
| #appMenu_helpSafeMode{ | |
| list-style-image:url("chrome://global/skin/icons/security.svg"); | |
| } | |
| #appMenu_helpSwitchDevice { | |
| list-style-image:url("chrome://browser/skin/import.svg"); | |
| } | |
| #appMenu_aboutName{ | |
| list-style-image:url("chrome://global/skin/icons/info.svg"); | |
| } | |
| #appMenu-quit-button2{ | |
| list-style-image:url('chrome://browser/skin/sync-off.svg'); | |
| } | |
| #allTabsMenu-containerTabsButton{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><path d="M14.75 3H13V1.25a.25.25 0 00-.25-.25h-1.5a.25.25 0 00-.25.25V3H9.25a.25.25 0 00-.25.25v1.5a.25.25 0 00.25.25H11v1.75a.25.25 0 00.25.25h1.5a.25.25 0 00.25-.25V5h1.75a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25z"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/></svg>'); | |
| } | |
| #sidebar-switcher-tabs{ | |
| list-style-image:url("chrome://browser/skin/tab.svg"); | |
| } | |
| #sidebar-reverse-position[label="Move Sidebar to Right"]{ | |
| list-style-image:url("chrome://browser/skin/sidebars-right.svg"); | |
| } | |
| #sidebar-reverse-position[label="Move Sidebar to Left"]{ | |
| list-style-image:url("chrome://browser/skin/sidebars.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="sidebar-menu-close"]{ | |
| list-style-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #BMB_bookmarksPopup menuitem:not(.menuitem-iconic), | |
| #PlacesToolbar .openintabs-menuitem{ | |
| padding-inline-start:32px !important; | |
| background-position-x:8px; | |
| } | |
| #menu_newNavigatorTab, | |
| menuitem[id$="openANewTab"]{ | |
| background-image:url("chrome://browser/skin/new-tab.svg"); | |
| } | |
| #menu_newUserContext{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><path d="M14.75 3H13V1.25a.25.25 0 00-.25-.25h-1.5a.25.25 0 00-.25.25V3H9.25a.25.25 0 00-.25.25v1.5a.25.25 0 00.25.25H11v1.75a.25.25 0 00.25.25h1.5a.25.25 0 00.25-.25V5h1.75a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25z"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/></svg>'); | |
| } | |
| #menu_newNavigator, | |
| #historyUndoWindowMenu, | |
| #context_openTabInWindow, | |
| menuitem[data-l10n-id*="-open-"][data-l10n-id$="-window"]{ | |
| background-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| menuitem[data-l10n-id$="-private-window"]{ | |
| background-image:url("chrome://browser/skin/privateBrowsing.svg") !important; | |
| } | |
| #menu_openFile{ | |
| background-image:url("chrome://browser/skin/open.svg"); | |
| } | |
| #menu_savePage, | |
| #context-saveimage, | |
| #context-savelink, | |
| #context-saveframe, | |
| #context-savevideo, | |
| #context-savepage{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| menuitem[data-l10n-id*="-email"]{ | |
| background-image:url("chrome://browser/skin/mail.svg"); | |
| } | |
| menuitem[data-l10n-id*="-print"]{ | |
| background-image:url("chrome://global/skin/icons/print.svg"); | |
| } | |
| #menu_importFromAnotherBrowser, | |
| #browserImport{ | |
| background-image:url("chrome://browser/skin/import.svg"); | |
| } | |
| #menu_FileQuitItem{ | |
| background-image:url('chrome://browser/skin/sync-off.svg'); | |
| } | |
| menuitem[data-l10n-id="text-action-undo"], | |
| menuitem[data-l10n-id$="-reopen-closed-tabs"]{ | |
| background-image:url("chrome://global/skin/icons/undo.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-redo"]{ | |
| background-image:url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m1 11c0 0.55228 0.44772 1 1 1s1-0.44772 1-1c0-2.7614 2.2386-5 5-5 2.0503 0 3.8124 1.2341 4.584 3h-2.5883c-0.55228 0-1 0.44772-1 1 0 0.55228 0.44772 1 1 1h5.0043c0.55228 0 1-0.44772 1-1v-5c0-0.55228-0.44772-1-1-1s-1 0.44772-1 1v2.3924c-1.2249-2.0328-3.4537-3.3924-6-3.3924-3.866 0-7 3.134-7 7z" fill="context-fill"/></svg>'); | |
| } | |
| menuitem[data-l10n-id="text-action-cut"]{ | |
| background-image:url("chrome://browser/skin/edit-cut.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-copy"], | |
| #context-copyimage-contents, | |
| #syncedTabsCopySelected{ | |
| background-image:url("chrome://global/skin/icons/edit-copy.svg"); | |
| } | |
| #context-stripOnShareLink, | |
| menuitem[data-l10n-id="text-action-strip-on-share"]{ | |
| background-image:url("chrome://browser/skin/fingerprint.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-paste"]{ | |
| /* background-image:url("chrome://browser/skin/edit-paste.svg"); */ | |
| background-image:url('data:image/svg+xml,<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m5.5583 7.0446h4.9833v1.3338h-4.9833zm0 3.0486h3.0437v1.3338h-3.0437z" fill="context-fill" fill-rule="evenodd" stroke-width=".76441"/><path d="m11.883 1.5189h-1.1807a3.0667 3.0486 0 0 0-5.3053 0h-1.1807a1.9167 1.9054 0 0 0-1.9167 1.9054v10.67a1.9167 1.9054 0 0 0 1.9167 1.9054h7.6667a1.9167 1.9054 0 0 0 1.9167-1.9054v-10.67a1.9167 1.9054 0 0 0-1.9167-1.9054zm-5.75 3.8108a1.15 1.1432 0 0 1-1.15-1.1432v-1.3338h-0.76667a0.575 0.57162 0 0 0-0.575 0.57162v10.67c0 0.31249 0.26067 0.57162 0.575 0.57162h7.6667c0.31433 0 0.575-0.25914 0.575-0.57162v-10.67a0.575 0.57162 0 0 0-0.575-0.57162h-0.76667v1.3338c0 0.63259-0.51367 1.1432-1.15 1.1432zm1.15-1.9054v-1.5243h1.5333v1.5243z" fill="context-fill" fill-rule="evenodd" stroke-width=".76441"/></svg>'); | |
| } | |
| menuitem[data-l10n-id="text-action-paste-no-formatting"]{ | |
| background-image:url("chrome://browser/skin/edit-paste.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-delete"], | |
| .customize-context-removeExtension, | |
| menuitem[data-l10n-id="toolbar-context-menu-remove-from-toolbar"], | |
| .downloadDeleteFileMenuItem, | |
| menuitem[id^="placesContext_delete"]{ | |
| background-image:url("chrome://global/skin/icons/delete.svg"); | |
| } | |
| #menu_find, | |
| #BMB_searchBookmarks, | |
| #context-searchselect-private, | |
| #context-searchselect, | |
| #context-keywordfield, | |
| #context-visual-search{ | |
| background-image:url("chrome://global/skin/icons/search-glass.svg"); | |
| } | |
| #toggle_PersonalToolbar, | |
| #BMB_viewBookmarksToolbar{ | |
| background-image:url("chrome://browser/skin/bookmarks-toolbar.svg"); | |
| } | |
| menuitem[data-l10n-id*="-customize-toolbar"]{ | |
| background-image:url("chrome://browser/skin/customize.svg"); | |
| } | |
| #viewSidebarMenuMenu, | |
| #BMB_viewBookmarksSidebar{ | |
| background-image:url("chrome://browser/skin/sidebars.svg"); | |
| } | |
| #menu_bookmarksSidebar:not([checked="true"]), | |
| menuitem[data-l10n-id="menu-bookmark-edit"]{ | |
| background-image:url("chrome://browser/skin/bookmark.svg") !important; | |
| } | |
| #menu_historySidebar:not([checked="true"]){ | |
| background-image:url("chrome://browser/skin/history.svg"); | |
| } | |
| #menu_tabsSidebar:not([checked="true"]), | |
| #sync-tabs-menuitem{ | |
| background-image:url("chrome://browser/skin/tab.svg"); | |
| } | |
| #menu_zoomEnlarge{ | |
| background-image:url("chrome://browser/skin/add-circle-fill.svg"); | |
| } | |
| #menu_zoomReduce{ | |
| background-image:url("chrome://browser/skin/subtract-circle-fill.svg"); | |
| } | |
| #repair-text-encoding{ | |
| background-image:url("chrome://browser/skin/characterEncoding.svg"); | |
| } | |
| #fullScreenItem:not([checked="true"]){ | |
| background-image:url("chrome://browser/skin/fullscreen.svg"); | |
| } | |
| #menu_readerModeItem{ | |
| background-image:url("chrome://browser/skin/reader-mode.svg"); | |
| } | |
| #sanitizeItem, | |
| #placesContext_deleteHost, | |
| menuitem[data-l10n-id="downloads-cmd-clear-list"]{ | |
| background-image:url("chrome://browser/skin/forget.svg"); | |
| } | |
| #historyRestoreLastSession{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M13 0H3a3 3 0 00-3 3v8a3 3 0 003 3h4l-.3.4a1 1 0 101.6 1.2l1.5-2a1 1 0 000-1.2l-1.5-2a1 1 0 00-1.6 1.2l.3.4H3a1 1 0 01-1-1V5h12v6a1 1 0 01-1 1 1 1 0 000 2 3 3 0 003-3V3a3 3 0 00-3-3zM2 4V3a1 1 0 011-1h10a1 1 0 011 1v1z"/></svg>'); | |
| } | |
| #historyUndoMenu{ | |
| background-image:url("chrome://devtools/skin/images/debugging-tabs.svg"); | |
| } | |
| menuitem[data-l10n-id*="bookmark-"]:not(.menuitem-iconic), | |
| #context-bookmarkframe, | |
| #placesContext_createBookmark{ | |
| background-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #menu_openDownloads{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| #menu_openAddons{ | |
| background-image:url("chrome://mozapps/skin/extensions/extension.svg"); | |
| } | |
| #sync-setup{ | |
| background-image:var(--avatar-image-url); | |
| } | |
| menuitem[data-l10n-id$="-sync-now"]{ | |
| background-image:url("chrome://browser/skin/sync.svg"); | |
| } | |
| #webDeveloperMenu{ | |
| background-image:url("chrome://browser/skin/developer.svg"); | |
| } | |
| #menu_taskManager{ | |
| background-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| #menu_browserToolbox{ | |
| background-image:url("chrome://devtools/skin/images/fox-smiling.svg"); | |
| } | |
| #menu_responsiveUI:not([checked="true"]){ | |
| background-image:url("chrome://devtools/skin/images/command-responsivemode.svg"); | |
| fill-opacity:0; | |
| } | |
| #menu_eyedropper{ | |
| background-image:url("chrome://devtools/skin/images/command-eyedropper.svg"); | |
| } | |
| #extensionsForDevelopers{ | |
| background-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); | |
| } | |
| #menu_pageInfo, | |
| menuitem[data-l10n-id*="about-"], | |
| #context-viewimageinfo, | |
| #context-viewframeinfo{ | |
| background-image:url("chrome://global/skin/icons/info.svg"); | |
| } | |
| #menu_preferences, | |
| #openSettingsMenuItem, | |
| #toolbar-context-customize-sidebar{ | |
| background-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #menu_HelpPopup_reportPhishingtoolmenu{ | |
| background-image:url("chrome://global/skin/icons/lightbulb.svg"); | |
| } | |
| #aboutName{ | |
| background-image:url("chrome://devtools/skin/images/browsers/firefox.svg"); | |
| } | |
| menuitem[data-l10n-id*="reload-"], | |
| #context-reloadframe{ | |
| background-image:url("chrome://global/skin/icons/reload.svg"); | |
| } | |
| menuitem[id^="context_toggleMute"]:not([soundplaying], [muted]), | |
| menuitem[id^="context_toggleMute"][soundplaying]:not([muted]), | |
| #context-media-mute{ | |
| background-image:url("chrome://global/skin/media/audio-muted.svg"); | |
| } | |
| menuitem[id^="context_toggleMute"][muted], | |
| #context-media-unmute{ | |
| background-image:url("chrome://global/skin/media/audio.svg"); | |
| } | |
| menuitem[data-l10n-id^="pin-"], | |
| .customize-context-moveToPanel{ | |
| background-image:url("chrome://browser/skin/pin-12.svg"); | |
| } | |
| menuitem[data-l10n-id^="unpin-"], | |
| .customize-context-moveToToolbar{ | |
| background-image:url("chrome://browser/skin/pin.svg"); | |
| } | |
| menuitem[id^="context_duplicateTab"]{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M15 13a1 1 0 000-2h-1V5a2 2 0 00-2-2H8.402a2 2 0 00-2 2v6h-1a1 1 0 000 2"/><path d="M5.281 10V5c0-.771.301-1.468.78-2H4a2 2 0 00-2 2v6H1a1 1 0 000 2h2.559a1.978 1.978 0 01-.278-1c0-1.103.897-2 2-2z"/></svg>'); | |
| } | |
| #context_moveTabOptions{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M15.854 12.14s-.001 0 0 0l-3.001-3.001a.496.496 0 00-.707.013.5.5 0 000 .695l2.147 2.148H7.5a.5.5 0 000 1h6.793l-2.147 2.146a.5.5 0 10.695.719l.012-.012 3-3a.5.5 0 00.001-.708z"/><path d="M7.5 10.994h4.38l-.453-.453a1.495 1.495 0 010-2.084 1.503 1.503 0 012.133-.025l.44.44V5a2 2 0 00-2-2H4a2 2 0 00-2 2v6H1a1 1 0 000 2h5.094A1.49 1.49 0 016 12.494c0-.827.673-1.5 1.5-1.5z"/></svg>'); | |
| } | |
| menu.sync-ui-item{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 0H4a2 2 0 00-2 2v2a1 1 0 001 1 1 1 0 001-1V2.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5V11a1 1 0 00-1-1 1 1 0 00-1 1v3a2 2 0 002 2h8a2 2 0 002-2V2a2 2 0 00-2-2zM9 15H7v-1h2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.146 10.146a.5.5 0 10.707.707l3-3a.5.5 0 000-.708l-3-3a.5.5 0 00-.707.707L7.293 7H.5a.5.5 0 000 1h6.793z"/></svg>'); | |
| } | |
| menuitem.sendtab-target[clientType="desktop"]{ | |
| background-image:url("chrome://browser/skin/device-desktop.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="phone"]{ | |
| background-image:url("chrome://browser/skin/device-phone.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="tablet"]{ | |
| background-image:url("chrome://browser/skin/device-tablet.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="tv"]{ | |
| background-image:url("chrome://browser/skin/device-tv.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="vr"]{ | |
| background-image:url("chrome://browser/skin/device-vr.svg"); | |
| } | |
| .share-tab-url-item{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" d="M12.707 4.294l-4-4A1 1 0 008.38.077a.984.984 0 00-.246-.05A.938.938 0 008 0a.938.938 0 00-.134.027.984.984 0 00-.246.05A1 1 0 007.291.3l-4 4a1 1 0 001.416 1.408L7 3.415V11a1 1 0 002 0V3.415l2.293 2.293a1 1 0 001.414-1.414z"/><path fill="context-fill" d="M14 9a1 1 0 00-1 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3a1 1 0 00-2 0v3a3 3 0 003 3h8a3 3 0 003-3v-3a1 1 0 00-1-1z"/></svg>'); | |
| } | |
| #context_reopenInContainer, | |
| #context-openlinkinusercontext-menu{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M14.92 1.62a1 1 0 00-.54-.54A1 1 0 0014 1h-4a1 1 0 000 2h1.59l-2.3 2.29a1 1 0 000 1.42 1 1 0 001.42 0L13 4.41V6a1 1 0 002 0V2a1 1 0 00-.08-.38z"/></svg>'); | |
| } | |
| #context_closeTab, | |
| #orgClose{ | |
| background-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #context_closeTabOptions{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.3 10l-1.8 1.8-1.8-1.8c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l1.8 1.8-1.8 1.8c-.2.2-.2.5 0 .7s.5.2.7 0l1.8-1.8 1.8 1.8c.2.2.5.2.7 0s.2-.5 0-.7l-1.8-1.8 1.8-1.8c.2-.2.2-.5 0-.7s-.5-.2-.7 0z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M16 12c0-.2-.1-.5-.2-.6l-1.1 1.1.5.5c.4-.1.8-.5.8-1zm-5.6.5L9 11.1c-.4-.4-.4-1 0-1.4l.7-.7c.4-.4 1-.4 1.4 0l1.4 1.4L13.9 9s.1 0 .1-.1V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v6H1c-.6 0-1 .4-1 1s.4 1 1 1h8.9l.5-.5z"/></svg>'); | |
| } | |
| menuitem[data-l10n-id="full-screen-exit"]{ | |
| background-image:url("chrome://browser/skin/fullscreen-exit.svg"); | |
| } | |
| #paste-and-go{ | |
| background-image:url("chrome://browser/skin/forward.svg"); | |
| } | |
| .customize-context-reportExtension{ | |
| background-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| .downloadShowMenuItem, | |
| #placesContext_showInFolder, | |
| [data-l10n-id="places-add-folder-contextmenu"]{ | |
| background-image:url("chrome://global/skin/icons/folder.svg"); | |
| } | |
| .openintabs-menuitem, | |
| menuitem[id^="context-open"]:is([id$="intab"], [id$="incontainertab"]), | |
| menuitem[data-l10n-id$="-view-new-tab"], | |
| menuitem[data-l10n-id*="-open-in-"][data-l10n-id$="-tab"]{ | |
| background-image:url("chrome://global/skin/icons/open-in-new.svg"); | |
| } | |
| #context-pocket, | |
| #context-savelinktopocket{ | |
| background-image:url("chrome://global/skin/icons/pocket-outline.svg"); | |
| } | |
| menuitem[data-l10n-id$="-screenshot"]{ | |
| background-image:url("chrome://browser/skin/screenshot.svg"); | |
| } | |
| menuitem[data-l10n-id*="-copy-"][data-l10n-id*="-link"]{ | |
| /* background-image:url("chrome://global/skin/icons/link.svg"); */ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><path d="m2.695 9.023c.384.384.88.576 1.384.576l.008.008c.496 0 1-.192 1.384-.576l.304-.304-.992-.992-.304.304c-.208.216-.576.216-.792 0l-2.113-2.112c-.232-.232-.232-.616 0-.848l3.505-3.504c.232-.232.616-.232.848 0l2.113 2.112c.112.104.168.24.168.392 0 .152-.064.296-.168.4l-.304.304.992.992.304-.304c.768-.768.768-2.008 0-2.776l-2.113-2.112c-.784-.776-2.048-.776-2.833 0l-3.505 3.496c-.776.784-.776 2.048 0 2.832zM5.652 4.656l-.99.99 5.686 5.686.99-.99zM10.497 16c-.512 0-1.024-.192-1.416-.584l-2.113-2.112c-.768-.768-.768-2.008 0-2.776l.304-.304.992.992-.304.304c-.104.104-.168.248-.168.4 0 .152.056.288.168.392l2.113 2.112c.232.232.616.232.848 0l3.505-3.504c.232-.232.232-.616 0-.848l-2.113-2.112c-.208-.216-.584-.208-.792 0l-.304.304-.992-.992.304-.304c.768-.768 2.009-.768 2.777 0l2.112 2.112c.776.784.776 2.048 0 2.832l-3.505 3.505c-.392.392-.904.584-1.416.584z"/></svg>'); | |
| } | |
| #context-searchselect[label*="Google"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/google-com.ico"); | |
| } | |
| #context-searchselect[label*="Bing"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/bing-com.ico"); | |
| } | |
| #context-searchselect[label*="DuckDuckGo"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/duckduckgo-com.ico"); | |
| } | |
| #context-inspect-a11y{ | |
| background-image:url("chrome://devtools/skin/images/tool-accessibility.svg"); | |
| } | |
| #context-inspect{ | |
| background-image:url("chrome://devtools/content/shared/images/command-pick.svg"); | |
| } | |
| #context-media-play{ | |
| background-image:url("chrome://global/skin/media/play-fill.svg"); | |
| } | |
| #context-media-pause, | |
| #doNotDisturbMenuItem{ | |
| background-image:url("chrome://global/skin/media/pause-fill.svg"); | |
| } | |
| #context-video-fullscreen{ | |
| background-image:url("chrome://browser/skin/fullscreen.svg"); | |
| } | |
| #context-leave-dom-fullscreen{ | |
| background-image:url("chrome://browser/skin/fullscreen-exit.svg"); | |
| } | |
| #context-video-saveimage{ | |
| background-image:url("chrome://browser/skin/screenshot.svg"); | |
| } | |
| #disableForOriginMenuItem{ | |
| background-image:url("chrome://browser/skin/notification-icons/desktop-notification-blocked.svg"); | |
| } | |
| menuitem[data-l10n-id^="places-edit-"]{ | |
| background-image:url("chrome://global/skin/icons/edit.svg"); | |
| } | |
| #context-translate-selection{ | |
| background-image:url("chrome://browser/skin/translations.svg"); | |
| } | |
| #appMenu-translate-button{ | |
| list-style-image:url("chrome://browser/skin/translations.svg"); | |
| } | |
| #appMenu-more-button2, | |
| #identity-popup-more-info{ | |
| list-style-image:url("chrome://global/skin/icons/more.svg"); | |
| } | |
| #context-viewsource, | |
| #context-viewframesource, | |
| #context-viewpartialsource-selection{ | |
| background-image:url("chrome://devtools/skin/images/tool-styleeditor.svg"); | |
| } | |
| #context-inspect{ | |
| background-image:url("resource://devtools-shared-images/command-pick.svg"); | |
| } | |
| #context-selectall, | |
| menuitem[data-l10n-id="text-action-select-all"]{ | |
| background-image:url('data:image/svg+xml,<svg fill="context-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.1667 0.5c-0.92046 0-1.6667 0.7462-1.6667 1.6667v1.6667h3.3334v-3.3334zm-1.6667 5.8333v3.3334h3.3334v-3.3334zm0 7.5v-1.6667h3.3334v3.3334h-1.6667c-0.92046 0-1.6667-0.74616-1.6667-1.6667zm9.1666 1.6667h-3.3334v-3.3334h3.3334zm2.5 0h1.6667c0.9205 0 1.6667-0.74616 1.6667-1.6667v-1.6667h-3.3334zm3.3334-9.1666v3.3334h-3.3334v-3.3334zm0-2.5v-1.6667c0-0.92046-0.74616-1.6667-1.6667-1.6667h-1.6667v3.3334zm-5.8333-3.3334h-3.3334v3.3334h3.3334z" stroke-width=".93749"/></svg>'); | |
| } | |
| #unified-extensions-context-menu-move-widget-up{ | |
| background-image:url("chrome://global/skin/icons/arrow-up.svg"); | |
| } | |
| #unified-extensions-context-menu-move-widget-down{ | |
| background-image:url("chrome://global/skin/icons/arrow-down.svg"); | |
| } | |
| .customize-context-manageExtension, | |
| #unified-extensions-context-menu-manage-extension{ | |
| background-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #unified-extensions-context-menu-remove-extension{ | |
| background-image:url("chrome://global/skin/icons/delete.svg"); | |
| } | |
| #unified-extensions-context-menu-report-extension{ | |
| background-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| #context-setDesktopBackground{ | |
| background-image:url("chrome://browser/skin/canvas.svg"); | |
| } | |
| #appMenu-zoom-controls{ | |
| background-image:url("chrome://global/skin/media/fullscreenEnterButton.svg"); | |
| margin-inline-start:0px !important; | |
| } | |
| menu#frame{ | |
| background-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| #context_moveToStart, | |
| #context_closeTabsToTheStart{ | |
| background-image:url("chrome://global/skin/icons/arrow-left.svg"); | |
| } | |
| #context_moveToEnd, | |
| #context_closeTabsToTheEnd{ | |
| background-image:url("chrome://global/skin/icons/arrow-right.svg"); | |
| } | |
| #context-media-playbackrate{ | |
| background-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| #identity-popup-clear-sitedata-button{ | |
| list-style-image:url("chrome://global/skin/icons/delete.svg"); | |
| } | |
| #toolbar-context-remove-from-toolbar{ | |
| background-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #context-showonlythisframe, | |
| #context-media-showcontrols, | |
| #context-previewlink{ | |
| background-image:url('chrome://global/skin/icons/eye.svg'); | |
| } | |
| #context-media-hidecontrols{ | |
| background-image:url('chrome://global/skin/icons/eye-slash.svg'); | |
| } | |
| menuitem[type="checkbox"], | |
| menuitem[type="radio"]{ | |
| /* background-image:url("chrome://devtools/skin/images/checkbox.svg"); */ | |
| background-image:url('data:image/svg+xml,<svg width="16" height="16" fill="context-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.6667 0h10.667a2.6667 2.6667 0 0 1 2.6667 2.6667v10.667a2.6667 2.6667 0 0 1-2.6667 2.6667h-10.667a2.6667 2.6667 0 0 1-2.6667-2.6667v-10.667c0-1.4667 1.2-2.6667 2.6667-2.6667zm0 1.3333a1.3333 1.3333 0 0 0-1.3333 1.3333v10.667c0 0.8 0.53333 1.3333 1.3333 1.3333h10.667c0.8 0 1.3333-0.53333 1.3333-1.3333v-10.667c0-0.8-0.53333-1.3333-1.3333-1.3333z"/></svg>'); | |
| fill: color-mix(in srgb, var(--uc-popup-menu-icon-color) 66%, transparent) !important; | |
| padding-inline-start:1em !important; | |
| } | |
| #context-video-pictureinpicture:not([checked="true"]){ | |
| background-image:url("chrome://global/skin/media/picture-in-picture-open.svg"); | |
| fill: var(--uc-popup-menu-icon-color) !important; | |
| } | |
| #spell-dictionaries{ | |
| background-image:url("chrome://devtools/skin/images/globe.svg"); | |
| } | |
| #spell-add-dictionaries, | |
| [data-l10n-id="places-add-bookmark"], | |
| #context_moveTabToGroupNewGroup{ | |
| background-image:url("chrome://global/skin/icons/plus.svg"); | |
| } | |
| toolbarbutton[data-l10n-id*="-manage-"], | |
| #manage-saved-logins{ | |
| background-image:url("chrome://browser/skin/menu.svg"); | |
| } | |
| #context-sendpagetodevice-popup menuseparator + menuitem{ | |
| background-image:url("chrome://global/skin/icons/chevron.svg"); | |
| } | |
| #downloadsHistory{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| .downloadRemoveFromHistoryMenuItem{ | |
| background-image:url("chrome://global/skin/icons/close.svg") | |
| } | |
| .downloadOpenReferrerMenuItem{ | |
| background-image:url("chrome://global/skin/icons/defaultFavicon.svg") | |
| } | |
| #protections-popup-settings-button{ | |
| list-style-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #protections-popup-show-report-button{ | |
| list-style-image:url("chrome://browser/skin/controlcenter/dashboard.svg"); | |
| } | |
| toolbarbutton.restoreallitem > .toolbarbutton-icon{ | |
| transform:scaleX(-1); | |
| } | |
| #appMenu-report-broken-site-button, | |
| #protections-popup-report-broken-site-button{ | |
| list-style-image:url("chrome://global/skin/icons/error.svg"); | |
| } | |
| #context-ask-chat, | |
| #context_askChat{ | |
| background-image:url("chrome://global/skin/icons/highlights.svg"); | |
| } | |
| #fill-login{ | |
| background-image:url("chrome://browser/skin/login.svg"); | |
| } | |
| menuitem[id="context-openlinkinsidebar"][label="Open Link in Second Sidebar"]{ | |
| background-image:url("chrome://userscripts/content/second_sidebar/icons/sidebar-right.svg"); | |
| } | |
| #allTabsMenu-closeDuplicateTabs{ | |
| list-style-image:url('chrome://browser/content/firefoxview/view-recentlyclosed.svg'); | |
| } | |
| [data-l10n-id="places-add-separator"] { | |
| background-image:url("chrome://global/skin/reader/content-width-20.svg"); | |
| } |
Author
Great feature.
... but the icons are black and I'm using dark theme on my Ubuntu. Any way I can fix that easily?
Author
... but the icons are black and I'm using dark theme on my Ubuntu. Any way I can fix that easily?
Sure! You can try enabling svg.context-properties.content.enabled on about:config page to make sure icons are colored automatically properly (browser restart is needed).
If it doesn't work, than you can manually reassign uc-popup-menu-icon-color variable on top of the file to any color of your choice.
Hey, @emvaized
Sorry for taking too long to thank you. Unfortunately, changing the vars and FF config (and anything else I've tried) didn't change the colours of the icons.
Not only that,but the icons seem to have an extra margin/padding around them.
It's actually a problem with FF-Dev itself. Some extensions that are native-ish like Sidebar and Snooze Tabs also have their icons black from the light theme.
The icons are always black not matter what you do.
Just a heads-up:
The following two resources will be removed starting from Firefox version 140:
resource://gre-resources/password.svgresource://gre-resources/password-hide.svg
I'm not sure if Firefox still includes these files elsewhere, but if not, it might be a good idea to extract and store the SVG content ahead of time for future use.
Author
@yuuqilin
Thanks for the heads-up! I updated these icons to use svg icons directly.
Looks like starting from Firefox 140, there's a change in how the menu gutter works:
https://bugzilla.mozilla.org/show_bug.cgi?id=1966100
Because of that, menupopup[needsgutter] ends up with extra space where the (empty) .menu-icon is shown, which wasn't an issue before. I ran into this too, and adding the following seems to fix it:
menupopup[needsgutter] {
@media (-moz-platform: linux) or (-moz-platform: windows) {
> :is(menu, menuitem):not([image]) > .menu-icon {
display: none !important;
}
}
}Might be worth including in the style. Hope this helps!
Author
@yuuqilin
Thanks for suggestion, I'll update the script!
It also seems to have changed how menuitem[type="checkbox"][checked="true] operates. I'm thinking now how to handle this problem as well.
With padding-inline-start:1em !important; rule commented out for menuitem[type="checkbox"] the padding is fixed, but the checkbox for the checked item doesn't appear:
You can try the following style to see if it fixes the issue:
menupopup[needsgutter] {
@media (-moz-platform: linux) or (-moz-platform: windows) {
> :is(menu, menuitem):not([image], [checked="true"]) > .menu-icon {
display: none !important;
}
}
}
menupopup:not(.in-menulist, [aria-label]) > menuitem[checked="true"] {
padding-inline-start: 1em !important;
background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="context-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.6667 0h10.667a2.6667 2.6667 0 0 1 2.6667 2.6667v10.667a2.6667 2.6667 0 0 1-2.6667 2.6667h-10.667a2.6667 2.6667 0 0 1-2.6667-2.6667v-10.667c0-1.4667 1.2-2.6667 2.6667-2.6667zm0 1.3333a1.3333 1.3333 0 0 0-1.3333 1.3333v10.667c0 0.8 0.53333 1.3333 1.3333 1.3333h10.667c0.8 0 1.3333-0.53333 1.3333-1.3333v-10.667c0-0.8-0.53333-1.3333-1.3333-1.3333z"/></svg>');
}Let me know if it works.
Author
Let me know if it works.
Unfortunately, it didn't work — still incorrect padding and no checkmark
That's odd — the style works on my end in both v140 and Nightly v142.
Is it possible that something else is interfering?
Maybe worth confirming if the selector inside menupopup[needsgutter] properly excludes [checked="true"] using :not([image], [checked="true"]), so the checkmark isn't unintentionally hidden.
Author
Maybe worth confirming if the selector inside
menupopup[needsgutter]properly excludes[checked="true"]using:not([image], [checked="true"]), so the checkmark isn't unintentionally hidden.
Yep, that was my problem! Now it works, I updated the gist with corrected version of the selector.
The #protections-popup-report-broken-site-button I have found that the full element is: #protections-popup-report-broken-site-button > .toolbarbutton-icon
Otherwise, there is no spacing between the icon and the label
I have emailed you via your gmail account with fuller explanation.
Good morning, sorry for my English but I use Google Translate. I copied and pasted the script into a file "iconic_firefox.css" and placed it inside the Chrome folder with my "userChrome.css". In my script I used this code to import it " @import url("./iconic_firefox.css"); ", so I think I did everything right, except that nothing happens, not even an error, nothing. I use Linux Mint Zara and Firefox 146.01. If anyone can help me I would be grateful. For now, Merry Christmas to everyone.
Hello, update, I pasted the code into my userChrome.css and this is the result. Can anyone help me?
As you can see, some icons are missing, others are too close to the text, but the worst thing is that the icons are black. I have the dark theme in Firefox 146.01.
Author
@Eta-Beta
You can try enabling svg.context-properties.content.enabled on about:config page to make sure icons are colored automatically properly (browser restart is needed). If it doesn't work, than you can manually reassign uc-popup-menu-icon-color variable on top of the file to use the white color.
However, the wrong padding probably comes from other Userchrome CSS modifications you have installed. There might be some conflicts with styles, which are set by rules on the top of this CSS snippet. Keep in mind that CSS works in such way, that the rules defined on bottom of your userChrome.css file usually overwrite those above them. You might want to add more !important wording to the end of each rule to enforce it.
Good morning and thanks for the reply. I enabled "svg.context-properties.content.enabled" as recommended, and as you can see from the image, at least this menu is aligned correctly. The icons are still black. I figured I need to set "white" in "uc-popup-menu-icon-color," but I'm not sure where. I apologize, but I'm not very experienced. I also noticed, as you can see in the first images I uploaded, that some menus have double space for the icon. I tried inserting the code for the solution indicated in this thread, but to no avail. Anyway, Happy Holidays!
Author
@Eta-Beta
You should check your userChrome.css file and remove any other modifications to the context menu to resolve any conflicts. Also note that this snippet is created for the regular Firefox version 146.0, so if you're running it on any other browser, which brings it's own modifications to the context menu, it might conflict with them resulting in double spaces or other artifacts.
I need to set "white" in "uc-popup-menu-icon-color," but I'm not sure where
It's the variable right on top of this snippet on line 7, under the :root selector
Hello, I copied/modified a script from another GitHub project to replace the bookmark and folder toolbar icons, nothing else. To test this out, I created a
usrChrome.css
file with just this script inside. I added
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
at the top. Otherwise, it didn't work, so I tried these variations to get the white icons:
:root{
--uc-popup-menu-icon-color: color-mix(in srgb, white 75%, transparent);
}
:root{
--uc-popup-menu-icon-color: white;
}
But the icons are still black. I also tried setting Firefox to a light theme, but that didn't help.
UPDATING
Problem solved, but I had to use AI, results:
A few icons are missing, but it's still a great job. The problem of double space for icons in some menus remains; if you know how to fix it, let me know. This is what I added:
:root{
--uc-popup-menu-icon-color: color-mix(in srgb, var(--panel-color, currentColor) 85%, transparent);
}
and at the end of the script I added:
@media (prefers-color-scheme: dark) {
menupopup,
panel,
.panel-subview-body {
--uc-popup-menu-icon-color: rgba(255,255,255,0.85);
}
}
Again, I'm no expert, and I only came up with this solution thanks to AI, which is useful but not immediate, so I had to try several times.
One question: if I wanted to change the icons with my own favorites, is it possible? Do I just replace the address where the script finds the icons? Or is it more complicated?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Iconic Firefox 🦊
This CSS snippet adds back icons for most context and popup menu entries in Firefox.
Features
--uc-popup-menu-icon-colorvariable