-
-
Save emvaized/a379d61ed8970e5711ca7278a39c1895 to your computer and use it in GitHub Desktop.
| /* 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, | |
| menuitem[data-l10n-id="text-action-redo"]:before{ | |
| 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, [type="radio"], [type="checkbox"]), | |
| 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) !important; | |
| } | |
| #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"], [type="checkbox"], [type="radio"]) > .menu-icon { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| #PanelUI-fxa-menu-setup-sync-button{ | |
| list-style-image:url("chrome://browser/skin/sync.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"); | |
| } | |
| #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"); | |
| } | |
| #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'); | |
| } | |
| #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_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"], | |
| menuitem[data-l10n-id$="-email-link"]{ | |
| 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"]:before{ | |
| background-image:url("chrome://global/skin/icons/undo.svg"); | |
| transform:scaleX(-1) !important; | |
| content: ""; | |
| position: absolute; | |
| left: 16px; | |
| } | |
| 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"); | |
| } | |
| 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"], | |
| #toolbar-context-remove-extension, | |
| .downloadDeleteFileMenuItem, | |
| menuitem[id^="placesContext_delete"], | |
| #unified-extensions-context-menu-remove-extension, | |
| #pageActionContextMenuRemoveExtension, | |
| #context_moveTabToSavedGroup{ | |
| 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"); | |
| } | |
| #menu_customizeToolbars, | |
| #toolbar-context-customize{ | |
| 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"); | |
| } | |
| #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, | |
| #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"); | |
| } | |
| #context_reloadTab, | |
| #context_reloadSelectedTabs, | |
| #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.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"); | |
| } | |
| 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-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"]:not(.menuitem-iconic){ | |
| background-image:url("chrome://global/skin/icons/link.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("resource://devtools-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, | |
| #appmenu-abouttranslations-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-selectall, | |
| menuitem[data-l10n-id="text-action-select-all"]{ | |
| /* background-image:url("resource:///chrome/devtools/skin/images/highlight-selector.svg"); */ | |
| background-image:url("chrome://global/skin/reader/align-left-20.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-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:4px !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, | |
| #customizationPanelItemContextMenuRemove, | |
| .downloadRemoveFromHistoryMenuItem, | |
| #context_closeTab, | |
| #orgClose{ | |
| 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'); | |
| } | |
| /* Needs a fix for checkbox items rendered incorrectly with styles applied | |
| #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-"], | |
| menuitem[data-l10n-id*="-manage-"], | |
| #manage-saved-logins{ | |
| background-image:url("chrome://browser/skin/menu.svg"); | |
| } | |
| #context-sendpagetodevice-popup menuseparator + menuitem, | |
| #context_sendTabToDevicePopupMenu menuseparator + menuitem, | |
| #context-sendlinktodevice-popup menuseparator + menuitem{ | |
| background-image:url("chrome://global/skin/icons/chevron.svg"); | |
| } | |
| #downloadsHistory{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.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/lightbulb.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"); | |
| } | |
| #context-sendpagetodevice, | |
| #context-sendlinktodevice, | |
| #context_sendTabToDevice{ | |
| background-image:url("chrome://browser/skin/synced-tabs.svg"); | |
| } | |
| #context_moveTabToSplitView, | |
| #context-openlinkinsplitview{ | |
| background-image:url("chrome://browser/skin/split-view-left-16.svg"); | |
| } | |
| menu.share-tab-url-item{ | |
| background-image:url("chrome://browser/skin/share.svg"); | |
| } | |
| #context_addNote, | |
| #context_editNote{ | |
| background-image:url("chrome://global/skin/icons/tab-notes.svg"); | |
| } | |
| #context_moveTabOptions{ | |
| background-image:url("chrome://browser/skin/taskbar-tabs-move-tab.svg"); | |
| } | |
| #context_moveTabToGroup, | |
| #context_moveTabToNewGroup{ | |
| background-image:url("chrome://browser/skin/tabbrowser/tab-groups.svg"); | |
| } | |
| #context_reopenInContainer, | |
| #context-openlinkinusercontext-menu, | |
| [data-l10n-id="places-open-in-container-tab"]{ | |
| background-image:url("chrome://browser/skin/topsites.svg"); | |
| } | |
| #context_duplicateTab, | |
| #context_duplicateTabs{ | |
| background-image:url("chrome://browser/skin/tabs.svg"); | |
| } | |
| #context_selectAllTabs{ | |
| background-image:url("chrome://global/skin/reader/align-right-20.svg"); | |
| } | |
| #context_closeTabOptions{ | |
| background-image:url("chrome://browser/content/firefoxview/view-recentlyclosed.svg"); | |
| } | |
| /* Checkboxes */ | |
| menupopup:not([needsgutter]) > menuitem[type="checkbox"]:not([checked]){ | |
| padding-inline-start:calc(1em + 24px) !important; | |
| } | |
| menuitem[type="radio"], | |
| menuitem[type="checkbox"] { | |
| position: relative; | |
| } | |
| menuitem[type="checkbox"]:before, | |
| menuitem[type="radio"]:before{ | |
| content: ""; position: absolute; | |
| width: 16px; height: 16px; | |
| border: 1px solid color-mix(in srgb, var(--uc-popup-menu-icon-color) 50%, transparent); | |
| left: 10px; top: 6px; | |
| border-radius: 3px; | |
| } |
It just has a class sync-menuitem, no ID, neither a i10n.
<menuitem xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" label="Connectez-vous pour envoyer des onglets" class="sync-menuitem">
<html:img xmlns:html="http://www.w3.org/1999/xhtml" loading="lazy" class="menu-icon" aria-hidden="true" />
<label class="menu-text" crop="end" aria-hidden="true" value="Connectez-vous pour envoyer des onglets"/>
<label class="menu-highlightable-text" crop="end" aria-hidden="true">Connectez-vous pour envoyer des onglets</label>
<label class="menu-accel" aria-hidden="true"/>
</menuitem>
Indeed I already added some changes to your gist so that it aligns even better with my needs (just focus on colors help me a lot). I find that SVGs are lightweight enough to be embedded directly into the CSS if necessary. I think it would even be possible to create a complete theme without reaching the 1 MB mark.
It just has a class
sync-menuitem, no ID, neither a i10n.
Hm, then unfortunately we couldn't style that item.
Screenshot
Looks good! But there's a point to keep in mind with custom inline icons, that each of them will require time for parsing by the browser on every browser startup. Although I'm not sure if this has any measurable effect on modern fast computers.
By the way, I ended up finding 2 somewhat fitting native icons for Duplicate Tab and Select All Tabs:
#context_duplicateTab,
#context_duplicateTabs{
background-image:url("chrome://browser/skin/tabs.svg");
}
#context_selectAllTabs{
background-image:url("chrome://global/skin/reader/align-right-20.svg");
}
Probably will add them to the snippet later. I think they convey these actions quite well, at least with vertical tabs enabled.
Note:
- images hidden under >Details
- All my styling has been removed in the images
I have managed to get it to partial work by commenting out lines 665 - 672
This affects:
menupopup#placesContext menuitem#placesContext
/* menuitem[type="checkbox"]:before,
menuitem[type="radio"]:before{
content: ""; position: absolute;
width: 16px; height: 16px;
border: 1px solid color-mix(in srgb, var(--uc-popup-menu-icon-color) 50%, transparent);
left: 10px; top: 6px;
border-radius: 3px;
}
*/
Using RED arrows and text in above image, you can see there is still a huge space to the left of the icons and between the icons and the labels, including within the sub-menus. With the tick box and 'Show Other Bookmarks' label there is no space. I have managed to move the '✔️Show Other Bookmarks' to the right by inserting at line 663:
left: 14px;
This also affects:
menuitem#toolbar-context-manage-extension.customize-context-manageExtension
Can I also point out that the following has changed in Firefox CSS:
padding-inline-end: = padding-right:
padding-inline-start: = padding-left:
margin-inline-end: = margin-right:
margin-inline-start: = margin-left:
list-style-image: = content:
I have slowly been going though my code to reflect these changes.
by commenting out lines 665 - 672
Perhaps I could just disable these lines on Mac OS using @media (-moz-platform: macos) before we come up with a better solution for checkboxes problem.
the following has changed in Firefox CSS
Could you please clarify, what do you mean that it was changed in Firefox CSS? These rules work fine for me in Firefox 152.0.3
You are correct. What I forgot was that ****-inline-end etc was designed for multiple languages especially those that read right to left, whilst just ****-end etc is mainly for English languages. My boo boo.
As for list-style-image: vs content: This content: targets the browser icon container which in your case relevant. I started a discussion here 1 year ago: https://www.reddit.com/r/FirefoxCSS/comments/1mfdq1y/firefox_css_property_liststyleimage_to_change_to/
cheers.
@ChasCB
I use list-style-image for popup menu items from the navbar (like .subviewbutton), and just assign images as background-image to regular context menu items. I experimented with content approach for context menus, but found that it has no advantages over the currently used approach.
Fair enough.
I spent the afternoon in the browser toolbox trying to solve the issue I raised 4 days ago. Using all sorts of esoteric code I found there and throwing in @media (-moz-platform: macos) etc still no go.
Mystery 🤔




@PhilJbt
This is how this menu looks for me with the most updated code from the post above:
What are attributes for "Add device" empty menu item? Does it have identifiable data-l10n-id, clientType, ID or classname?
As for the moon icon, I suggest you to use this one:
It uses the
moon-16.svgicon from the GitHub repo with official Firefox icons. I optimised it and adapted for inline import, and it will be automatically coloured by the browser. Maybe I'll add this later to the main snippet as well.