replace control icon pngs with svgs Hunter Thursday, April 2nd, 2026 at 9:28 PM
168 "resources/script.js", 169 "mix/tracks.json", 170 "resources/icon.png", - "resources/play.png", - "resources/pause.png", - "resources/prev.png", - "resources/next.png", 171 + "resources/play.svg", 172 + "resources/pause.svg", 173 + "resources/prev.svg", 174 + "resources/next.svg", 175 "resources/repeat.svg", 176 ] 177
Binary files differ.
1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 +<!-- Created with Inkscape (http://www.inkscape.org/) --> 3 + 4 +<svg 5 + version="1.1" 6 + id="svg642" 7 + width="1280" 8 + height="1707" 9 + viewBox="0 0 1280 1707" 10 + xmlns="http://www.w3.org/2000/svg" 11 + xmlns:svg="http://www.w3.org/2000/svg"> 12 + <defs 13 + id="defs646" /> 14 + <g 15 + id="g648"> 16 + <g 17 + id="g1591" 18 + style="fill:#000000;fill-opacity:1"> 19 + <path 20 + style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.55906;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 21 + d="M 0,428.03168 V 1279.72 L 640,853.87584 Z" 22 + id="path940" 23 + transform="translate(0,-0.37583966)" /> 24 + <path 25 + style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.55906;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 26 + d="M 0,428.03168 V 1279.72 L 640,853.87584 Z" 27 + id="path940-5" 28 + transform="translate(640,-0.37583966)" /> 29 + </g> 30 + </g> 31 +</svg>
Binary files differ.
1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 +<!-- Created with Inkscape (http://www.inkscape.org/) --> 3 + 4 +<svg 5 + version="1.1" 6 + id="svg515" 7 + width="1024" 8 + height="2048" 9 + viewBox="0 0 1024 2048" 10 + xmlns="http://www.w3.org/2000/svg" 11 + xmlns:svg="http://www.w3.org/2000/svg"> 12 + <defs 13 + id="defs519" /> 14 + <g 15 + id="g521"> 16 + <g 17 + id="g3173" 18 + style="opacity:1;fill:#000000;fill-opacity:1"> 19 + <g 20 + id="g3235" 21 + style="fill:#000000;fill-opacity:1"> 22 + <rect 23 + style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5.87143;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 24 + id="rect2472" 25 + width="482.09561" 26 + height="618.00555" 27 + x="-741.09381" 28 + y="502.61032" 29 + transform="matrix(0.79787234,0,0,2.0773716,591.29825,-662.022)" /> 30 + <rect 31 + style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5.87143;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 32 + id="rect2472-1" 33 + width="482.09561" 34 + height="618.00555" 35 + x="-741.09381" 36 + y="502.61032" 37 + transform="matrix(0.79787234,0,0,2.0773716,1230.6475,-662.022)" /> 38 + </g> 39 + </g> 40 + </g> 41 +</svg>
Binary files differ.
1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 +<!-- Created with Inkscape (http://www.inkscape.org/) --> 3 + 4 +<svg 5 + version="1.1" 6 + id="svg388" 7 + width="600" 8 + height="1200" 9 + viewBox="0 0 600 1200" 10 + xmlns="http://www.w3.org/2000/svg" 11 + xmlns:svg="http://www.w3.org/2000/svg"> 12 + <defs 13 + id="defs392" /> 14 + <g 15 + id="g394"> 16 + <path 17 + style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.55906;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1;stop-color:#000000" 18 + d="M 0,224.74499 V 975.94743 L 599.5886,600.34621 Z" 19 + id="path2330" 20 + transform="translate(0.2057,-0.34621)" /> 21 + </g> 22 +</svg>
Binary files differ.
1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 +<!-- Created with Inkscape (http://www.inkscape.org/) --> 3 + 4 +<svg 5 + version="1.1" 6 + id="svg642" 7 + width="1280" 8 + height="1707" 9 + viewBox="0 0 1280 1707" 10 + sodipodi:docname="next.png" 11 + inkscape:export-filename="../../prev.svg" 12 + inkscape:export-xdpi="96" 13 + inkscape:export-ydpi="96" 14 + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 15 + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 16 + xmlns="http://www.w3.org/2000/svg" 17 + xmlns:svg="http://www.w3.org/2000/svg"> 18 + <defs 19 + id="defs646" /> 20 + <sodipodi:namedview 21 + id="namedview644" 22 + pagecolor="#ffffff" 23 + bordercolor="#000000" 24 + borderopacity="0.25" 25 + inkscape:showpageshadow="2" 26 + inkscape:pageopacity="0.0" 27 + inkscape:pagecheckerboard="0" 28 + inkscape:deskcolor="#d1d1d1" 29 + showgrid="false" /> 30 + <g 31 + inkscape:groupmode="layer" 32 + inkscape:label="Image" 33 + id="g648"> 34 + <g 35 + id="g1591" 36 + style="fill:#000000;fill-opacity:1" 37 + transform="matrix(-1,0,0,1,1280,-3.3999993e-7)"> 38 + <path 39 + style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.55906;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 40 + d="M 0,428.03168 V 1279.72 L 640,853.87584 Z" 41 + id="path940" 42 + transform="translate(0,-0.37583966)" 43 + sodipodi:nodetypes="cccc" /> 44 + <path 45 + style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.55906;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:0.297753;stop-color:#000000" 46 + d="M 0,428.03168 V 1279.72 L 640,853.87584 Z" 47 + id="path940-5" 48 + transform="translate(640,-0.37583966)" 49 + sodipodi:nodetypes="cccc" /> 50 + </g> 51 + </g> 52 +</svg>
802 console.log('Preloading UI resources...'); 803 804 const resources = [ - 'resources/play.png', - 'resources/pause.png', - 'resources/prev.png', - 'resources/next.png', 805 + 'resources/play.svg', 806 + 'resources/pause.svg', 807 + 'resources/prev.svg', 808 + 'resources/next.svg', 809 'mix/album_art.jpg' 810 ]; 811
74 .control-button { 75 width: clamp(60px, calc((100vw - 58px) / 3), 120px); 76 aspect-ratio: 8 / 3; - background-size: contain; - background-repeat: no-repeat; - background-position: center; 77 border: none; 78 cursor: pointer; 79 margin: 0; 80 border-radius: 50%; 81 background-color: var(--text); 82 + position: relative; 83 box-shadow: 84 inset -2px -2px 4px rgba(0, 0, 0, 0.3), 85 inset 2px 2px 4px rgba(255, 255, 255, 0.4), 92 pointer-events: auto; 93 } 94 95 +.control-button::before { 96 + content: ''; 97 + position: absolute; 98 + inset: 0; 99 + background-color: var(--background); 100 + mask-repeat: no-repeat; 101 + mask-size: contain; 102 + mask-position: center; 103 +} 104 + 105 .controls-inner { 106 display: flex; 107 justify-content: space-between; 325 display: none; 326 } 327 -#playPause { - background-image: url('play.png'); - background-position: 52.5% center; 328 +#playPause::before { 329 + mask-image: url('play.svg'); 330 + mask-position: 53.5% center; 331 } 332 -#playPause.pause { - background-image: url('pause.png'); - background-position: center; 333 +#playPause.pause::before { 334 + mask-image: url('pause.svg'); 335 + mask-position: center; 336 } 337 -#prev { - background-image: url('prev.png'); - background-position: 45% center; 338 +#prev::before { 339 + mask-image: url('prev.svg'); 340 + mask-position: 45% center; 341 } 342 -#next { - background-image: url('next.png'); - background-position: 55% center; 343 +#next::before { 344 + mask-image: url('next.svg'); 345 + mask-position: 55% center; 346 }