js: Turn the resize handle into embedded SVG

This means that it can inherit the current colour from the HTML around
it, and hence adapt properly to changes of colour scheme.
This commit is contained in:
Ben Harris
2023-12-07 18:16:10 +00:00
parent 3243a1fd77
commit 4d45ea5bf2

View File

@ -363,9 +363,11 @@ ${unfinishedpara}
<div id="resizable"> <div id="resizable">
<canvas id="puzzlecanvas" tabindex="0"></canvas> <canvas id="puzzlecanvas" tabindex="0"></canvas>
<div id="statusbar"></div> <div id="statusbar"></div>
<img id="resizehandle" alt="resize" <svg id="resizehandle" aria-label="resize" width='10' height='10'>
title="Drag to resize the puzzle. Right-click to restore the default size." <title>Drag to resize the puzzle. Right-click to restore the default size.</title>
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpath%20d='M8.5,1.5l-7,7m7,-4l-4,4m4,-1l-1,1'%20stroke='black'%20stroke-linecap='round'/%3E%3C/svg%3E"> <path d='M8.5,1.5l-7,7m7,-4l-4,4m4,-1l-1,1'
stroke='currentColor' stroke-linecap='round'></path>
</svg>
</div> </div>
<p> <p>
Link to this puzzle: Link to this puzzle: