ref: 4d45ea5bf2294d92612170c79ad75399cf7bf377
parent: 3243a1fd779fd4d1453b27bf938c513e471df08f
author: Ben Harris <bjh21@bjh21.me.uk>
date: Thu Dec 7 13:16:10 EST 2023
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.
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -363,9 +363,11 @@
<div id="resizable">
<canvas id="puzzlecanvas" tabindex="0"></canvas>
<div id="statusbar"></div>
- <img id="resizehandle" alt="resize"
- title="Drag to resize the puzzle. Right-click to restore the default size."
- 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">
+ <svg id="resizehandle" aria-label="resize" width='10' height='10'>
+ <title>Drag to resize the puzzle. Right-click to restore the default size.</title>
+ <path d='M8.5,1.5l-7,7m7,-4l-4,4m4,-1l-1,1'
+ stroke='currentColor' stroke-linecap='round'></path>
+ </svg>
</div>
<p>
Link to this puzzle: