feat: webui use monochrome icons for play/pause buttons (#5868)

web/assets/img/pause-circle-active.svg

@@ -1 +1,39 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#800" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="60"
+   height="60"
+   viewBox="0 0 60 60"
+   sodipodi:docname="pause.png"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <image
+       width="60"
+       height="60"
+       preserveAspectRatio="none"
+       style="image-rendering:optimizeQuality"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAACBjSFJN&#10;AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIA&#10;AwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAA8oAMABAAA&#10;AAEAAAA8AAAAAJkCx0IAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHht&#10;bG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6&#10;UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5z&#10;IyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5z&#10;OmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0&#10;aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WURpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WERpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9y&#10;U3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90&#10;aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8&#10;L3g6eG1wbWV0YT4KQTteaQAABE5JREFUaAXlW09IFFEcfquZlFkdtjrkQmm1omBsURRIUnYOCmoL&#10;OkRERAQSRJIRIkhECxUSRNChWiJq65aHDtUeCpNy0S7ZoXIjFqXCba02JbPvm3VkWWdy58/uzux8&#10;8Plm35/f+33z3rx585vRJXKLZTDvA2unuRxp5TT/IB2b5iek78BBMAImQdugEZ5eAgfAv+CURv5G&#10;/WfgWbAGtCTc8Ooc+B7UKnCu+s9h8xBYBhYcnKIB8Ac4l+NGy6Po4zg4H8w7StDjCTAOGhWitT2v&#10;82Ywb1iHnl6BWh01u/5t+MAFMKfYD+sJ0Gzn9drjyr4+V4rPW0ho+gn6Bb92mSm6FMZuWFSsLJz3&#10;9MNmiHbByC2Li5VFMzUs+qKNxFIwR1r39D5iM7HySPOabgA1gQ3YUDZit5Sr96JsFZejIm/udhOZ&#10;6e/NbAW3F4FYWfz2uUSvQQU+rcgN7J6+hZb/7r3vFJFYebCOQZMi1iKXy7pcsVjSj9A0T1Y8c4CM&#10;0yB3VbrhdrtFW1ub8Hq9orQ0ZSqZTIpwOCy6urrE1BTP4WxUVFSI1tZW4fP5RFlZ6rF3YmJC9Pb2&#10;ikAgIHhsAKvQ9gAYTLexED8YbjE0qsFgEJqU4ff7VW13dnYqN0JuS0uLajsN/oZRVwKfa4k9YNb3&#10;LamFwp/6+nqF3FSW3rK6ujpVmxoKtqHuataXBfs1NFat6nJx660MvWUlJbKLynazzKVj+1iX1ngd&#10;N/FHkaOZ+ih4M5jzyAE7KzAa0X85BW8psCP56n4BOmqgYAbJnYJaCvY6RS10SoI9DhJcxRF2woIl&#10;j+lipwmupGDSKZC2MdxDOwVjHF3HCR52yvBC5zBHmAE7p2DQaYLfUfBrhwwvw1f9FPwCHHeAaL7T&#10;llZpfjHT4wDBT6iRI0w8SCXW+4uwlllOPaQhWfBdHBsKDdLY0NAQE0XoLYtGo4r2NGa+Qf1+tpHD&#10;spzW/HTAUMSsr69PVFdXC8ah4vG4GB0dFbFYTIRCISncOjk5yT5nIRKJCI/HI4VoE4mE1G5kZER0&#10;d3eLjo4OMT5ueIm5gE5fZna8CRlmhEStZuMbdM1EZOUpTfFcxR7zoMhwBXr4HZkiOMqcd1YbJb3+&#10;cNu8RFFpWua1IhJ8ME2X6uFSlPDM6D2rVmn3VFWhQsFO5Nl5an+B/1UKumZuS5llH5DBW1ZTZoEN&#10;fnOG7QUjWn3lCh4CrTJFs/XjlFah6fXL8YN70Gw7K3S9QLrzeo8ZxrWD6MvwU/31pUb1/DDkPljo&#10;EVTr/4xGPVlV5zXdDlpp9f4Of7hA5RQ7YD0Gqp3tfOUzUlOTU6VpxrlduwoWYrT5gfpJUH7Sw2H+&#10;sAFdPQLzMap8RrwOrgQLDv4zFoMIfK42W/xX2OQKrLhzQn5BwX34UZCPmT9BveK5NbwH7gZ5hzAN&#10;pt23FDyio1vBjWDtNFcg5X2d5PXP1zy8Jj+DfCFA9oADIE+W6fgHx/XhAwJBPHEAAAAASUVORK5C&#10;YII=&#10;"
+       id="image1" />
+  </g>
+</svg>

web/assets/img/play-circle-active.svg

@@ -1 +1,39 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#080" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="60"
+   height="60"
+   viewBox="0 0 60 60"
+   sodipodi:docname="play.png"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <image
+       width="60"
+       height="60"
+       preserveAspectRatio="none"
+       style="image-rendering:optimizeQuality"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAACBjSFJN&#10;AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIA&#10;AwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAA8oAMABAAA&#10;AAEAAAA8AAAAAJkCx0IAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHht&#10;bG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6&#10;UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5z&#10;IyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5z&#10;OmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0&#10;aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WURpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WERpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9y&#10;U3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90&#10;aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8&#10;L3g6eG1wbWV0YT4KQTteaQAABRFJREFUaAXdWl9IJVUc/u21vBZuZag9uEKypeuDm1uGFYJYgiCi&#10;9FAm+BChEZVaEElK7JMhLhRIEGFCBRrqi2CgBZYPkQ/Gwiq4N8SiTFmwsFq1smz6vovnMl3v9c6f&#10;M/fO+IOPc2bmnO/8vjkzc37nnDkj3loB6C8BF45QiPTsEf5BevMIPyL9FogAV4E/gMBYDTx9G7gG&#10;/AsYNvEnyn8J9APnAV9aPrx6E1gH7ApMVf4rcD4L3Apk3PiIXgF2gVSOu73+A9p4EcgG0m4htPgy&#10;8CvgVojd+nzPnwDSZqVoaQmw66ju8h/DB34APbVnwP47oNt5p3z8sj/gleK3fCTUfIP24VezTtFZ&#10;IPvAp2KVcI7pz+kQfQYkH/lcrBLN1LXooQCJpWD2tOPHuyNgYlVP852+CNgyVmBFRRK0lF/vXKuK&#10;wyjIwT1oIuP9/dCq4MunQKwSX5dK9H0owNmKqhD09Dq0nBh7j50isaqzXoCmhHY/zvKzrgqelvR7&#10;aLpFKeasR9nryDCqcm01NTWyubkpu7u7Mjw8LHl5ea45XRDci7pt8fVvxwkut2jp1ampKcNs29vb&#10;RkdHhxEKhbTwO/BzAXX+Z+040ubMzMyMWW8sv7S0ZFRXV2trx4bPXGoqoWL1SLfywGurqqqSxcVF&#10;GR0dlcLCQq+bM/NzTvC0OsEXWuscN1kPx7oamZ2dHaO7u9vIyspKV49/rgQ/hozWRq0IVuKXl5eN&#10;2tpare0n0cNQOcxH+hEgY1ZRUSELCwsyPj4uRUVFXvpxG8gvUjAXyTNubW1tEolEpLe3V7KzTwyO&#10;3Ph6gYLL3DDorJubmyuDg4OysrIiDQ0NOqkVV1RwsTryS1paWipzc3MyPT0tJSXR0USXa+fYw54v&#10;dTr1tqWlRVZXV6Wvr88pRXy9O3wtmN7m5OTIwMCANDU1xTvv5PgsBRO+t/x8bl+5thDFMob2tc3P&#10;z8vk5KQOH2/6WvDW1pa0t7dLfX297O8zbnBtUcE3XNNoJjg4OJChoSEpKyuTsTGuSWizG4yjuWBX&#10;rY3SJdHs7Kz09PTI2tqaS6aE1SN8pCk447a+vi7Nzc3S2NjolVhq5PKt1ANag3c7k4e9vT2jv7/f&#10;CIfDWn1IoOlvnIvGHAyqta5UWhU8MTFhFBcXey1U8X8NndExmH/MLPIgXcZYua6uTlpbW2VjYyNd&#10;zc6bG3oJB+pOuE6T9TAn/V1dXemc9Ju1VJoF342Dv3SJRtCv5vfR9PDw0BgZGTEKCgrMDqQzz1+o&#10;jtkUzmhxorOzMyYYa1gG1rK08Lrw75VjanHiYReExwSVl5cblZWVx87rbMMi1y8ol3Qncc4iiR+E&#10;WPWBP8wlNfbyIWCVzO/lGDbfmVTt0YX3TpFgbjCktLtQgnfG772Xyr8vUio1FWC4GeRHexv+nzPp&#10;iWWT7RZ+hxK8VhsrGZwMe/4p4KpdlzmT0jY2gyvVI6jr+mt2hZrL8wcXxqC6nPGa54rZead5TqmC&#10;IPod+MldQi3GvQ+uonndQ07539CiMo6E7/RlwE9f79/gDz9QntrjYN8CnPaGrnrfwIfznio1kTNc&#10;exfIRG9z8/5VINmQikve2YOg/hTQ1Wsn8XC+/j7g6SYy+C3ZJZT6BOBy0UlOO7n2Mzj5BU4YOeF8&#10;Ro1x+PPAZ8Ae4EQg6zA0nACeBDhCaDNt41YCj+joo8BDAP8yIO4BOK4TfP+5r8V38ieA6+MEFxSv&#10;ARSu3f4DFAR8/czUm8MAAAAASUVORK5CYII=&#10;"
+       id="image1" />
+  </g>
+</svg>