Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

userChrome.css not working after updating to Firefox 117

  • 3 replies
  • 0 have this problem
  • 41 views
  • Last reply by cor-el

more options

I am using some custom SVG icons for my bookmark folders. I had my userChrome.css setup to set the icons based on the folder names, as well as color the icons with whatever the theme color was. This userChrome.css file worked fine in Firefox 116, but no longer works in 117. Now a couple of the icons are invisible, and the rest of them are black instead of the expected purple color from my theme. Can anyone help?

toolbarbutton.bookmark-item{

 -moz-context-properties: fill, fill-opacity, stroke !important;
 stroke: var(--toolbarbutton-icon-fill) !important;

}

.bookmark-item[container="true"] [label="Finance"] { list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13H44V37H4V13Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 21C8.41828 21 12 17.4183 12 13H4V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 29C8.41828 29 12 32.5817 12 37H4V29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 29V37H36C36 32.5817 39.5817 29 44 29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 21C39.5817 21 36 17.4183 36 13H44V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 31C26.7614 31 29 28.3137 29 25C29 21.6863 26.7614 19 24 19C21.2386 19 19 21.6863 19 25C19 28.3137 21.2386 31 24 31Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }

.bookmark-item[container="true"] [label="Health"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5 13.5l-.354.354a.5.5 0 00.708 0L7.5 13.5zM1.536 7.536l-.354.353.354-.353zm5-5l-.354.353.354-.353zM7.5 3.5l-.354.354a.5.5 0 00.708 0L7.5 3.5zm.964-.964l-.353-.354.353.354zm-.61 10.61L1.889 7.182l-.707.707 5.964 5.965.708-.708zm5.257-5.964l-5.965 5.964.708.708 5.964-5.965-.707-.707zM6.182 2.889l.964.965.708-.708-.965-.964-.707.707zm1.672.965l.964-.965-.707-.707-.965.964.708.708zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.037 3.037 0 0110.964 2V1zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.036 4.036 0 0015 5.036h-1zm1 0A4.036 4.036 0 0010.964 1v1A3.036 3.036 0 0114 5.036h1zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.036 4.036 0 004.036 1v1zM1 5.036A3.036 3.036 0 014.036 2V1A4.036 4.036 0 000 5.036h1zm.89 2.146A3.035 3.035 0 011 5.036H0c0 1.07.425 2.096 1.182 2.853l.707-.707z'%3E%3C/path%3E%3C/svg%3E") !important; }

.bookmark-item[container="true"] [label="Homelab"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z'%3E%3C/path%3E%3C/svg%3E") !important; }

.bookmark-item[container="true"] [label="Privacy"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.587 3.513a6.03 6.03 0 01.818 3.745v.75c0 .788.205 1.563.595 2.247M4.483 6.508c0-.795.313-1.557.871-2.119a2.963 2.963 0 012.103-.877c.789 0 1.545.315 2.103.877.558.562.871 1.324.871 2.12v.748c0 1.621.522 3.198 1.487 4.495m-4.46-5.244v1.498A10.542 10.542 0 009.315 14M4.483 9.505A13.559 13.559 0 005.821 14m-3.643-1.498a16.63 16.63 0 01-.669-5.244V6.51a6.028 6.028 0 01.79-3.002 5.97 5.97 0 012.177-2.2 5.914 5.914 0 015.955-.004' stroke='context-stroke' stroke-linecap='square' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important; }

.bookmark-item[container="true"] [label="Gaming"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9.817 11.133l-.447.224.447-.224zM9.5 10.5l.447-.224A.5.5 0 009.5 10v.5zm-4 0V10a.5.5 0 00-.447.276l.447.224zm8.5-5v4.528h1V5.5h-1zm-3.736 5.41l-.317-.634-.894.448.316.633.895-.447zM9.5 10h-4v1h4v-1zm-4.447.276l-.317.634.894.447.317-.633-.894-.448zM1 10.028V5.5H0v4.528h1zM3.5 3h8V2h-8v1zm-.528 9A1.972 1.972 0 011 10.028H0A2.972 2.972 0 002.972 13v-1zm9.056 0c-.747 0-1.43-.422-1.764-1.09l-.894.447A2.972 2.972 0 0012.027 13v-1zM14 10.028A1.972 1.972 0 0112.028 12v1A2.972 2.972 0 0015 10.028h-1zm-9.264.882A1.972 1.972 0 012.972 12v1a2.972 2.972 0 002.658-1.643l-.894-.447zM15 5.5A3.5 3.5 0 0011.5 2v1A2.5 2.5 0 0114 5.5h1zm-14 0A2.5 2.5 0 013.5 3V2A3.5 3.5 0 000 5.5h1zM3 7h3V6H3v1zm1-2v3h1V5H4zm7 1h1V5h-1v1zM9 8h1V7H9v1z' fill='context-fill'%3E%3C/path%3E%3C/svg%3E") !important; }

.bookmark-item[container="true"] [label="Firefox"] { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 1000 1000' xml:space='preserve' fill='context-fill' fill-opacity='context-fill-opacity' %3E%3Cpath d='M503.8,975c-103.2,0-195.2-27.4-275.9-82.3C147.1,837.8,87,765.2,47.6,674.7C26.5,627,14.3,572.1,11,510.1s1.5-122.6,14.2-181.8s33-116.1,60.7-170.6c27.7-54.5,60.3-98.7,97.9-132.6l-6,153.7c4-5.1,16.4-7.9,37.2-8.5c20.8-0.5,33.5,2.3,38.3,8.5c15.3-29.5,44.6-54.7,87.8-75.5c43.2-20.8,86-31.5,128.2-32.3c-19.7,16.4-41.5,43.5-65.4,81.2c-23.9,37.7-34.5,67.5-32,89.4c9.1,2.9,20.5,5.4,34.2,7.4c13.7,2,25.2,3.4,34.5,4.1c9.3,0.7,21.7,1.5,37.2,2.2c15.5,0.7,24.7,1.3,27.6,1.6c5.5,1.8,7.2,10.1,5.2,24.9c-2,14.8-7.6,28.5-16.7,41.3c-1.8,2.6-4.8,5.9-9,10.1c-4.2,4.2-14.5,10.7-30.9,19.4c-16.4,8.8-34.8,14.9-55.2,18.6l8.2,103.4l-76-36.6c-6.6,15.7-7.9,30.5-4.1,44.6c3.8,14,10.4,26.2,19.7,36.4c9.3,10.2,21.2,17.8,35.8,22.7s29.4,6.1,44.3,3.6c18.6-3.3,36.5-9.6,53.6-18.9c17.1-9.3,32.4-17.5,45.7-24.6c13.3-7.1,26.7-10.3,40.2-9.6c22.2,1.5,38.6,7.5,48.9,18c10.4,10.6,13.9,22.4,10.7,35.5c-0.4,0.7-0.8,1.7-1.4,3c-0.5,1.3-2.1,3.6-4.6,6.8c-2.6,3.3-5.8,6.1-9.8,8.5c-4,2.4-9.8,4.3-17.2,5.7c-7.5,1.5-16,1.6-25.4,0.5c-21.9,34.6-48.2,59.3-79,74.1c-30.8,14.8-69,20.1-114.6,16.1c27,22.2,56.6,37.3,88.9,45.1c32.3,7.8,63,8.9,92.2,3.3c29.2-5.7,57.3-15.1,84.5-28.4c27.2-13.3,50.5-29.3,70-47.9c19.5-18.6,34.2-37.6,44-56.9c15.7-33.2,22.8-68.3,21.3-105.3c-1.5-37-8.3-71.4-20.5-103.1c-12.2-31.7-26.5-54.5-42.9-68.4c31.7,13.9,56.7,28.3,74.9,43.5c18.2,15.1,32.3,35.6,42.1,61.5c5.5-62-5-124.5-31.4-187.6C770.2,153.4,732,101.6,682,61.1c96.6,28.1,171.7,79,225.3,152.9s81.1,168.2,82.6,283c0.7,46.3-6.7,92.8-22.1,139.5s-38,90.1-67.5,130.2c-29.5,40.1-64,75.8-103.4,107.2c-39.4,31.4-84.5,56.1-135.4,74.1C610.7,966,558.1,975,503.8,975L503.8,975z'/%3E%3C/svg%3E") !important; }

I am using some custom SVG icons for my bookmark folders. I had my userChrome.css setup to set the icons based on the folder names, as well as color the icons with whatever the theme color was. This userChrome.css file worked fine in Firefox 116, but no longer works in 117. Now a couple of the icons are invisible, and the rest of them are black instead of the expected purple color from my theme. Can anyone help? toolbarbutton.bookmark-item{ -moz-context-properties: fill, fill-opacity, stroke !important; stroke: var(--toolbarbutton-icon-fill) !important; } .bookmark-item[container="true"] [label="Finance"] { list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13H44V37H4V13Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 21C8.41828 21 12 17.4183 12 13H4V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 29C8.41828 29 12 32.5817 12 37H4V29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 29V37H36C36 32.5817 39.5817 29 44 29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 21C39.5817 21 36 17.4183 36 13H44V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 31C26.7614 31 29 28.3137 29 25C29 21.6863 26.7614 19 24 19C21.2386 19 19 21.6863 19 25C19 28.3137 21.2386 31 24 31Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .bookmark-item[container="true"] [label="Health"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5 13.5l-.354.354a.5.5 0 00.708 0L7.5 13.5zM1.536 7.536l-.354.353.354-.353zm5-5l-.354.353.354-.353zM7.5 3.5l-.354.354a.5.5 0 00.708 0L7.5 3.5zm.964-.964l-.353-.354.353.354zm-.61 10.61L1.889 7.182l-.707.707 5.964 5.965.708-.708zm5.257-5.964l-5.965 5.964.708.708 5.964-5.965-.707-.707zM6.182 2.889l.964.965.708-.708-.965-.964-.707.707zm1.672.965l.964-.965-.707-.707-.965.964.708.708zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.037 3.037 0 0110.964 2V1zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.036 4.036 0 0015 5.036h-1zm1 0A4.036 4.036 0 0010.964 1v1A3.036 3.036 0 0114 5.036h1zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.036 4.036 0 004.036 1v1zM1 5.036A3.036 3.036 0 014.036 2V1A4.036 4.036 0 000 5.036h1zm.89 2.146A3.035 3.035 0 011 5.036H0c0 1.07.425 2.096 1.182 2.853l.707-.707z'%3E%3C/path%3E%3C/svg%3E") !important; } .bookmark-item[container="true"] [label="Homelab"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z'%3E%3C/path%3E%3C/svg%3E") !important; } .bookmark-item[container="true"] [label="Privacy"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.587 3.513a6.03 6.03 0 01.818 3.745v.75c0 .788.205 1.563.595 2.247M4.483 6.508c0-.795.313-1.557.871-2.119a2.963 2.963 0 012.103-.877c.789 0 1.545.315 2.103.877.558.562.871 1.324.871 2.12v.748c0 1.621.522 3.198 1.487 4.495m-4.46-5.244v1.498A10.542 10.542 0 009.315 14M4.483 9.505A13.559 13.559 0 005.821 14m-3.643-1.498a16.63 16.63 0 01-.669-5.244V6.51a6.028 6.028 0 01.79-3.002 5.97 5.97 0 012.177-2.2 5.914 5.914 0 015.955-.004' stroke='context-stroke' stroke-linecap='square' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important; } .bookmark-item[container="true"] [label="Gaming"] { list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9.817 11.133l-.447.224.447-.224zM9.5 10.5l.447-.224A.5.5 0 009.5 10v.5zm-4 0V10a.5.5 0 00-.447.276l.447.224zm8.5-5v4.528h1V5.5h-1zm-3.736 5.41l-.317-.634-.894.448.316.633.895-.447zM9.5 10h-4v1h4v-1zm-4.447.276l-.317.634.894.447.317-.633-.894-.448zM1 10.028V5.5H0v4.528h1zM3.5 3h8V2h-8v1zm-.528 9A1.972 1.972 0 011 10.028H0A2.972 2.972 0 002.972 13v-1zm9.056 0c-.747 0-1.43-.422-1.764-1.09l-.894.447A2.972 2.972 0 0012.027 13v-1zM14 10.028A1.972 1.972 0 0112.028 12v1A2.972 2.972 0 0015 10.028h-1zm-9.264.882A1.972 1.972 0 012.972 12v1a2.972 2.972 0 002.658-1.643l-.894-.447zM15 5.5A3.5 3.5 0 0011.5 2v1A2.5 2.5 0 0114 5.5h1zm-14 0A2.5 2.5 0 013.5 3V2A3.5 3.5 0 000 5.5h1zM3 7h3V6H3v1zm1-2v3h1V5H4zm7 1h1V5h-1v1zM9 8h1V7H9v1z' fill='context-fill'%3E%3C/path%3E%3C/svg%3E") !important; } .bookmark-item[container="true"] [label="Firefox"] { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 1000 1000' xml:space='preserve' fill='context-fill' fill-opacity='context-fill-opacity' %3E%3Cpath d='M503.8,975c-103.2,0-195.2-27.4-275.9-82.3C147.1,837.8,87,765.2,47.6,674.7C26.5,627,14.3,572.1,11,510.1s1.5-122.6,14.2-181.8s33-116.1,60.7-170.6c27.7-54.5,60.3-98.7,97.9-132.6l-6,153.7c4-5.1,16.4-7.9,37.2-8.5c20.8-0.5,33.5,2.3,38.3,8.5c15.3-29.5,44.6-54.7,87.8-75.5c43.2-20.8,86-31.5,128.2-32.3c-19.7,16.4-41.5,43.5-65.4,81.2c-23.9,37.7-34.5,67.5-32,89.4c9.1,2.9,20.5,5.4,34.2,7.4c13.7,2,25.2,3.4,34.5,4.1c9.3,0.7,21.7,1.5,37.2,2.2c15.5,0.7,24.7,1.3,27.6,1.6c5.5,1.8,7.2,10.1,5.2,24.9c-2,14.8-7.6,28.5-16.7,41.3c-1.8,2.6-4.8,5.9-9,10.1c-4.2,4.2-14.5,10.7-30.9,19.4c-16.4,8.8-34.8,14.9-55.2,18.6l8.2,103.4l-76-36.6c-6.6,15.7-7.9,30.5-4.1,44.6c3.8,14,10.4,26.2,19.7,36.4c9.3,10.2,21.2,17.8,35.8,22.7s29.4,6.1,44.3,3.6c18.6-3.3,36.5-9.6,53.6-18.9c17.1-9.3,32.4-17.5,45.7-24.6c13.3-7.1,26.7-10.3,40.2-9.6c22.2,1.5,38.6,7.5,48.9,18c10.4,10.6,13.9,22.4,10.7,35.5c-0.4,0.7-0.8,1.7-1.4,3c-0.5,1.3-2.1,3.6-4.6,6.8c-2.6,3.3-5.8,6.1-9.8,8.5c-4,2.4-9.8,4.3-17.2,5.7c-7.5,1.5-16,1.6-25.4,0.5c-21.9,34.6-48.2,59.3-79,74.1c-30.8,14.8-69,20.1-114.6,16.1c27,22.2,56.6,37.3,88.9,45.1c32.3,7.8,63,8.9,92.2,3.3c29.2-5.7,57.3-15.1,84.5-28.4c27.2-13.3,50.5-29.3,70-47.9c19.5-18.6,34.2-37.6,44-56.9c15.7-33.2,22.8-68.3,21.3-105.3c-1.5-37-8.3-71.4-20.5-103.1c-12.2-31.7-26.5-54.5-42.9-68.4c31.7,13.9,56.7,28.3,74.9,43.5c18.2,15.1,32.3,35.6,42.1,61.5c5.5-62-5-124.5-31.4-187.6C770.2,153.4,732,101.6,682,61.1c96.6,28.1,171.7,79,225.3,152.9s81.1,168.2,82.6,283c0.7,46.3-6.7,92.8-22.1,139.5s-38,90.1-67.5,130.2c-29.5,40.1-64,75.8-103.4,107.2c-39.4,31.4-84.5,56.1-135.4,74.1C610.7,966,558.1,975,503.8,975L503.8,975z'/%3E%3C/svg%3E") !important; }

Chosen solution

You may have to set this pref to true.

  • about:config => svg.context-properties.content.enabled = true

Screenshot with Alpenglow enabled.


Note that you do not need to escape all "<" ">" and other in the CSS properties and best might be to use only [container] to be prepared when this becomes a standard Boolean and not a pseudo Boolean like will be done for the Tab bar in 119.

  • 1849904 - Convert a bunch of pseudo-boolean tab strip attributes to be standard boolean attributes

toolbarbutton.bookmark-item{
  -moz-context-properties: fill, fill-opacity, stroke !important;
  stroke: var(--toolbarbutton-icon-fill) !important;
}

.bookmark-item[container] [label="Finance"] {
  list-style-image: url("data:image/svg+xml,<svg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 13H44V37H4V13Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M4 21C8.41828 21 12 17.4183 12 13H4V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M4 29C8.41828 29 12 32.5817 12 37H4V29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M44 29V37H36C36 32.5817 39.5817 29 44 29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M44 21C39.5817 21 36 17.4183 36 13H44V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M24 31C26.7614 31 29 28.3137 29 25C29 21.6863 26.7614 19 24 19C21.2386 19 19 21.6863 19 25C19 28.3137 21.2386 31 24 31Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/></svg>") !important;
}

.bookmark-item[container] [label="Health"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M7.5 13.5l-.354.354a.5.5 0 00.708 0L7.5 13.5zM1.536 7.536l-.354.353.354-.353zm5-5l-.354.353.354-.353zM7.5 3.5l-.354.354a.5.5 0 00.708 0L7.5 3.5zm.964-.964l-.353-.354.353.354zm-.61 10.61L1.889 7.182l-.707.707 5.964 5.965.708-.708zm5.257-5.964l-5.965 5.964.708.708 5.964-5.965-.707-.707zM6.182 2.889l.964.965.708-.708-.965-.964-.707.707zm1.672.965l.964-.965-.707-.707-.965.964.708.708zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.037 3.037 0 0110.964 2V1zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.036 4.036 0 0015 5.036h-1zm1 0A4.036 4.036 0 0010.964 1v1A3.036 3.036 0 0114 5.036h1zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.036 4.036 0 004.036 1v1zM1 5.036A3.036 3.036 0 014.036 2V1A4.036 4.036 0 000 5.036h1zm.89 2.146A3.035 3.035 0 011 5.036H0c0 1.07.425 2.096 1.182 2.853l.707-.707z'></path></svg>") !important;
}

.bookmark-item[container] [label="Homelab"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z'></path></svg>") !important;
}

.bookmark-item[container] [label="Privacy"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M12.587 3.513a6.03 6.03 0 01.818 3.745v.75c0 .788.205 1.563.595 2.247M4.483 6.508c0-.795.313-1.557.871-2.119a2.963 2.963 0 012.103-.877c.789 0 1.545.315 2.103.877.558.562.871 1.324.871 2.12v.748c0 1.621.522 3.198 1.487 4.495m-4.46-5.244v1.498A10.542 10.542 0 009.315 14M4.483 9.505A13.559 13.559 0 005.821 14m-3.643-1.498a16.63 16.63 0 01-.669-5.244V6.51a6.028 6.028 0 01.79-3.002 5.97 5.97 0 012.177-2.2 5.914 5.914 0 015.955-.004' stroke='context-stroke' stroke-linecap='square' stroke-linejoin='round'></path></svg>") !important;
}

.bookmark-item[container] [label="Gaming"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path d='M9.817 11.133l-.447.224.447-.224zM9.5 10.5l.447-.224A.5.5 0 009.5 10v.5zm-4 0V10a.5.5 0 00-.447.276l.447.224zm8.5-5v4.528h1V5.5h-1zm-3.736 5.41l-.317-.634-.894.448.316.633.895-.447zM9.5 10h-4v1h4v-1zm-4.447.276l-.317.634.894.447.317-.633-.894-.448zM1 10.028V5.5H0v4.528h1zM3.5 3h8V2h-8v1zm-.528 9A1.972 1.972 0 011 10.028H0A2.972 2.972 0 002.972 13v-1zm9.056 0c-.747 0-1.43-.422-1.764-1.09l-.894.447A2.972 2.972 0 0012.027 13v-1zM14 10.028A1.972 1.972 0 0112.028 12v1A2.972 2.972 0 0015 10.028h-1zm-9.264.882A1.972 1.972 0 012.972 12v1a2.972 2.972 0 002.658-1.643l-.894-.447zM15 5.5A3.5 3.5 0 0011.5 2v1A2.5 2.5 0 0114 5.5h1zm-14 0A2.5 2.5 0 013.5 3V2A3.5 3.5 0 000 5.5h1zM3 7h3V6H3v1zm1-2v3h1V5H4zm7 1h1V5h-1v1zM9 8h1V7H9v1z' fill='context-fill'></path></svg>") !important;
}

.bookmark-item[container] [label="Firefox"] {
  list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 1000 1000' xml:space='preserve' fill='context-fill' fill-opacity='context-fill-opacity' ><path d='M503.8,975c-103.2,0-195.2-27.4-275.9-82.3C147.1,837.8,87,765.2,47.6,674.7C26.5,627,14.3,572.1,11,510.1s1.5-122.6,14.2-181.8s33-116.1,60.7-170.6c27.7-54.5,60.3-98.7,97.9-132.6l-6,153.7c4-5.1,16.4-7.9,37.2-8.5c20.8-0.5,33.5,2.3,38.3,8.5c15.3-29.5,44.6-54.7,87.8-75.5c43.2-20.8,86-31.5,128.2-32.3c-19.7,16.4-41.5,43.5-65.4,81.2c-23.9,37.7-34.5,67.5-32,89.4c9.1,2.9,20.5,5.4,34.2,7.4c13.7,2,25.2,3.4,34.5,4.1c9.3,0.7,21.7,1.5,37.2,2.2c15.5,0.7,24.7,1.3,27.6,1.6c5.5,1.8,7.2,10.1,5.2,24.9c-2,14.8-7.6,28.5-16.7,41.3c-1.8,2.6-4.8,5.9-9,10.1c-4.2,4.2-14.5,10.7-30.9,19.4c-16.4,8.8-34.8,14.9-55.2,18.6l8.2,103.4l-76-36.6c-6.6,15.7-7.9,30.5-4.1,44.6c3.8,14,10.4,26.2,19.7,36.4c9.3,10.2,21.2,17.8,35.8,22.7s29.4,6.1,44.3,3.6c18.6-3.3,36.5-9.6,53.6-18.9c17.1-9.3,32.4-17.5,45.7-24.6c13.3-7.1,26.7-10.3,40.2-9.6c22.2,1.5,38.6,7.5,48.9,18c10.4,10.6,13.9,22.4,10.7,35.5c-0.4,0.7-0.8,1.7-1.4,3c-0.5,1.3-2.1,3.6-4.6,6.8c-2.6,3.3-5.8,6.1-9.8,8.5c-4,2.4-9.8,4.3-17.2,5.7c-7.5,1.5-16,1.6-25.4,0.5c-21.9,34.6-48.2,59.3-79,74.1c-30.8,14.8-69,20.1-114.6,16.1c27,22.2,56.6,37.3,88.9,45.1c32.3,7.8,63,8.9,92.2,3.3c29.2-5.7,57.3-15.1,84.5-28.4c27.2-13.3,50.5-29.3,70-47.9c19.5-18.6,34.2-37.6,44-56.9c15.7-33.2,22.8-68.3,21.3-105.3c-1.5-37-8.3-71.4-20.5-103.1c-12.2-31.7-26.5-54.5-42.9-68.4c31.7,13.9,56.7,28.3,74.9,43.5c18.2,15.1,32.3,35.6,42.1,61.5c5.5-62-5-124.5-31.4-187.6C770.2,153.4,732,101.6,682,61.1c96.6,28.1,171.7,79,225.3,152.9s81.1,168.2,82.6,283c0.7,46.3-6.7,92.8-22.1,139.5s-38,90.1-67.5,130.2c-29.5,40.1-64,75.8-103.4,107.2c-39.4,31.4-84.5,56.1-135.4,74.1C610.7,966,558.1,975,503.8,975L503.8,975z'/></svg>") !important;
}

Read this answer in context 👍 2

All Replies (3)

more options

Chosen Solution

You may have to set this pref to true.

  • about:config => svg.context-properties.content.enabled = true

Screenshot with Alpenglow enabled.


Note that you do not need to escape all "<" ">" and other in the CSS properties and best might be to use only [container] to be prepared when this becomes a standard Boolean and not a pseudo Boolean like will be done for the Tab bar in 119.

  • 1849904 - Convert a bunch of pseudo-boolean tab strip attributes to be standard boolean attributes

toolbarbutton.bookmark-item{
  -moz-context-properties: fill, fill-opacity, stroke !important;
  stroke: var(--toolbarbutton-icon-fill) !important;
}

.bookmark-item[container] [label="Finance"] {
  list-style-image: url("data:image/svg+xml,<svg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 13H44V37H4V13Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M4 21C8.41828 21 12 17.4183 12 13H4V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M4 29C8.41828 29 12 32.5817 12 37H4V29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M44 29V37H36C36 32.5817 39.5817 29 44 29Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path fill-rule='evenodd' clip-rule='evenodd' d='M44 21C39.5817 21 36 17.4183 36 13H44V21Z' stroke='context-stroke' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M24 31C26.7614 31 29 28.3137 29 25C29 21.6863 26.7614 19 24 19C21.2386 19 19 21.6863 19 25C19 28.3137 21.2386 31 24 31Z' stroke='context-stroke' stroke-width='4' stroke-linejoin='round'/></svg>") !important;
}

.bookmark-item[container] [label="Health"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M7.5 13.5l-.354.354a.5.5 0 00.708 0L7.5 13.5zM1.536 7.536l-.354.353.354-.353zm5-5l-.354.353.354-.353zM7.5 3.5l-.354.354a.5.5 0 00.708 0L7.5 3.5zm.964-.964l-.353-.354.353.354zm-.61 10.61L1.889 7.182l-.707.707 5.964 5.965.708-.708zm5.257-5.964l-5.965 5.964.708.708 5.964-5.965-.707-.707zM6.182 2.889l.964.965.708-.708-.965-.964-.707.707zm1.672.965l.964-.965-.707-.707-.965.964.708.708zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.037 3.037 0 0110.964 2V1zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.036 4.036 0 0015 5.036h-1zm1 0A4.036 4.036 0 0010.964 1v1A3.036 3.036 0 0114 5.036h1zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.036 4.036 0 004.036 1v1zM1 5.036A3.036 3.036 0 014.036 2V1A4.036 4.036 0 000 5.036h1zm.89 2.146A3.035 3.035 0 011 5.036H0c0 1.07.425 2.096 1.182 2.853l.707-.707z'></path></svg>") !important;
}

.bookmark-item[container] [label="Homelab"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='context-fill' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z'></path></svg>") !important;
}

.bookmark-item[container] [label="Privacy"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M12.587 3.513a6.03 6.03 0 01.818 3.745v.75c0 .788.205 1.563.595 2.247M4.483 6.508c0-.795.313-1.557.871-2.119a2.963 2.963 0 012.103-.877c.789 0 1.545.315 2.103.877.558.562.871 1.324.871 2.12v.748c0 1.621.522 3.198 1.487 4.495m-4.46-5.244v1.498A10.542 10.542 0 009.315 14M4.483 9.505A13.559 13.559 0 005.821 14m-3.643-1.498a16.63 16.63 0 01-.669-5.244V6.51a6.028 6.028 0 01.79-3.002 5.97 5.97 0 012.177-2.2 5.914 5.914 0 015.955-.004' stroke='context-stroke' stroke-linecap='square' stroke-linejoin='round'></path></svg>") !important;
}

.bookmark-item[container] [label="Gaming"] {
  list-style-image: url("data:image/svg+xml,<svg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path d='M9.817 11.133l-.447.224.447-.224zM9.5 10.5l.447-.224A.5.5 0 009.5 10v.5zm-4 0V10a.5.5 0 00-.447.276l.447.224zm8.5-5v4.528h1V5.5h-1zm-3.736 5.41l-.317-.634-.894.448.316.633.895-.447zM9.5 10h-4v1h4v-1zm-4.447.276l-.317.634.894.447.317-.633-.894-.448zM1 10.028V5.5H0v4.528h1zM3.5 3h8V2h-8v1zm-.528 9A1.972 1.972 0 011 10.028H0A2.972 2.972 0 002.972 13v-1zm9.056 0c-.747 0-1.43-.422-1.764-1.09l-.894.447A2.972 2.972 0 0012.027 13v-1zM14 10.028A1.972 1.972 0 0112.028 12v1A2.972 2.972 0 0015 10.028h-1zm-9.264.882A1.972 1.972 0 012.972 12v1a2.972 2.972 0 002.658-1.643l-.894-.447zM15 5.5A3.5 3.5 0 0011.5 2v1A2.5 2.5 0 0114 5.5h1zm-14 0A2.5 2.5 0 013.5 3V2A3.5 3.5 0 000 5.5h1zM3 7h3V6H3v1zm1-2v3h1V5H4zm7 1h1V5h-1v1zM9 8h1V7H9v1z' fill='context-fill'></path></svg>") !important;
}

.bookmark-item[container] [label="Firefox"] {
  list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 1000 1000' xml:space='preserve' fill='context-fill' fill-opacity='context-fill-opacity' ><path d='M503.8,975c-103.2,0-195.2-27.4-275.9-82.3C147.1,837.8,87,765.2,47.6,674.7C26.5,627,14.3,572.1,11,510.1s1.5-122.6,14.2-181.8s33-116.1,60.7-170.6c27.7-54.5,60.3-98.7,97.9-132.6l-6,153.7c4-5.1,16.4-7.9,37.2-8.5c20.8-0.5,33.5,2.3,38.3,8.5c15.3-29.5,44.6-54.7,87.8-75.5c43.2-20.8,86-31.5,128.2-32.3c-19.7,16.4-41.5,43.5-65.4,81.2c-23.9,37.7-34.5,67.5-32,89.4c9.1,2.9,20.5,5.4,34.2,7.4c13.7,2,25.2,3.4,34.5,4.1c9.3,0.7,21.7,1.5,37.2,2.2c15.5,0.7,24.7,1.3,27.6,1.6c5.5,1.8,7.2,10.1,5.2,24.9c-2,14.8-7.6,28.5-16.7,41.3c-1.8,2.6-4.8,5.9-9,10.1c-4.2,4.2-14.5,10.7-30.9,19.4c-16.4,8.8-34.8,14.9-55.2,18.6l8.2,103.4l-76-36.6c-6.6,15.7-7.9,30.5-4.1,44.6c3.8,14,10.4,26.2,19.7,36.4c9.3,10.2,21.2,17.8,35.8,22.7s29.4,6.1,44.3,3.6c18.6-3.3,36.5-9.6,53.6-18.9c17.1-9.3,32.4-17.5,45.7-24.6c13.3-7.1,26.7-10.3,40.2-9.6c22.2,1.5,38.6,7.5,48.9,18c10.4,10.6,13.9,22.4,10.7,35.5c-0.4,0.7-0.8,1.7-1.4,3c-0.5,1.3-2.1,3.6-4.6,6.8c-2.6,3.3-5.8,6.1-9.8,8.5c-4,2.4-9.8,4.3-17.2,5.7c-7.5,1.5-16,1.6-25.4,0.5c-21.9,34.6-48.2,59.3-79,74.1c-30.8,14.8-69,20.1-114.6,16.1c27,22.2,56.6,37.3,88.9,45.1c32.3,7.8,63,8.9,92.2,3.3c29.2-5.7,57.3-15.1,84.5-28.4c27.2-13.3,50.5-29.3,70-47.9c19.5-18.6,34.2-37.6,44-56.9c15.7-33.2,22.8-68.3,21.3-105.3c-1.5-37-8.3-71.4-20.5-103.1c-12.2-31.7-26.5-54.5-42.9-68.4c31.7,13.9,56.7,28.3,74.9,43.5c18.2,15.1,32.3,35.6,42.1,61.5c5.5-62-5-124.5-31.4-187.6C770.2,153.4,732,101.6,682,61.1c96.6,28.1,171.7,79,225.3,152.9s81.1,168.2,82.6,283c0.7,46.3-6.7,92.8-22.1,139.5s-38,90.1-67.5,130.2c-29.5,40.1-64,75.8-103.4,107.2c-39.4,31.4-84.5,56.1-135.4,74.1C610.7,966,558.1,975,503.8,975L503.8,975z'/></svg>") !important;
}

Modified by cor-el

more options

cor-el, thank you so much! That did the trick!

more options

You're welcome