commit 6233060b2fa39b6576dc65cdf8387a320a689e72
parent 38ee08f6bbf574aa45792bc8c70e90c9dc479ea7
Author: Hunter
Date: Thu, 2 Apr 2026 21:28:31 -0400
replace control icon pngs with svgs
Diffstat:
11 files changed, 177 insertions(+), 23 deletions(-)
diff --git a/generate_manifests.py b/generate_manifests.py
@@ -168,10 +168,10 @@ def generate_pwa_manifests(app_name=None, base_path=None):
"resources/script.js",
"mix/tracks.json",
"resources/icon.png",
- "resources/play.png",
- "resources/pause.png",
- "resources/prev.png",
- "resources/next.png",
+ "resources/play.svg",
+ "resources/pause.svg",
+ "resources/prev.svg",
+ "resources/next.svg",
"resources/repeat.svg",
]
diff --git a/resources/next.png b/resources/next.png
Binary files differ.
diff --git a/resources/next.svg b/resources/next.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ version="1.1"
+ id="svg642"
+ width="1280"
+ height="1707"
+ viewBox="0 0 1280 1707"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs646" />
+ <g
+ id="g648">
+ <g
+ id="g1591"
+ style="fill:#000000;fill-opacity:1">
+ <path
+ 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"
+ d="M 0,428.03168 V 1279.72 L 640,853.87584 Z"
+ id="path940"
+ transform="translate(0,-0.37583966)" />
+ <path
+ 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"
+ d="M 0,428.03168 V 1279.72 L 640,853.87584 Z"
+ id="path940-5"
+ transform="translate(640,-0.37583966)" />
+ </g>
+ </g>
+</svg>
diff --git a/resources/pause.png b/resources/pause.png
Binary files differ.
diff --git a/resources/pause.svg b/resources/pause.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ version="1.1"
+ id="svg515"
+ width="1024"
+ height="2048"
+ viewBox="0 0 1024 2048"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs519" />
+ <g
+ id="g521">
+ <g
+ id="g3173"
+ style="opacity:1;fill:#000000;fill-opacity:1">
+ <g
+ id="g3235"
+ style="fill:#000000;fill-opacity:1">
+ <rect
+ 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"
+ id="rect2472"
+ width="482.09561"
+ height="618.00555"
+ x="-741.09381"
+ y="502.61032"
+ transform="matrix(0.79787234,0,0,2.0773716,591.29825,-662.022)" />
+ <rect
+ 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"
+ id="rect2472-1"
+ width="482.09561"
+ height="618.00555"
+ x="-741.09381"
+ y="502.61032"
+ transform="matrix(0.79787234,0,0,2.0773716,1230.6475,-662.022)" />
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/resources/play.png b/resources/play.png
Binary files differ.
diff --git a/resources/play.svg b/resources/play.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ version="1.1"
+ id="svg388"
+ width="600"
+ height="1200"
+ viewBox="0 0 600 1200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs392" />
+ <g
+ id="g394">
+ <path
+ 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"
+ d="M 0,224.74499 V 975.94743 L 599.5886,600.34621 Z"
+ id="path2330"
+ transform="translate(0.2057,-0.34621)" />
+ </g>
+</svg>
diff --git a/resources/prev.png b/resources/prev.png
Binary files differ.
diff --git a/resources/prev.svg b/resources/prev.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ version="1.1"
+ id="svg642"
+ width="1280"
+ height="1707"
+ viewBox="0 0 1280 1707"
+ sodipodi:docname="next.png"
+ inkscape:export-filename="../../prev.svg"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs646" />
+ <sodipodi:namedview
+ id="namedview644"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showgrid="false" />
+ <g
+ inkscape:groupmode="layer"
+ inkscape:label="Image"
+ id="g648">
+ <g
+ id="g1591"
+ style="fill:#000000;fill-opacity:1"
+ transform="matrix(-1,0,0,1,1280,-3.3999993e-7)">
+ <path
+ 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"
+ d="M 0,428.03168 V 1279.72 L 640,853.87584 Z"
+ id="path940"
+ transform="translate(0,-0.37583966)"
+ sodipodi:nodetypes="cccc" />
+ <path
+ 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"
+ d="M 0,428.03168 V 1279.72 L 640,853.87584 Z"
+ id="path940-5"
+ transform="translate(640,-0.37583966)"
+ sodipodi:nodetypes="cccc" />
+ </g>
+ </g>
+</svg>
diff --git a/resources/script.js b/resources/script.js
@@ -802,10 +802,10 @@ function preloadResources() {
console.log('Preloading UI resources...');
const resources = [
- 'resources/play.png',
- 'resources/pause.png',
- 'resources/prev.png',
- 'resources/next.png',
+ 'resources/play.svg',
+ 'resources/pause.svg',
+ 'resources/prev.svg',
+ 'resources/next.svg',
'mix/album_art.jpg'
];
diff --git a/resources/styles.css b/resources/styles.css
@@ -74,14 +74,12 @@ body {
.control-button {
width: clamp(60px, calc((100vw - 58px) / 3), 120px);
aspect-ratio: 8 / 3;
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
border: none;
cursor: pointer;
margin: 0;
border-radius: 50%;
background-color: var(--text);
+ position: relative;
box-shadow:
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
inset 2px 2px 4px rgba(255, 255, 255, 0.4),
@@ -94,6 +92,16 @@ body {
pointer-events: auto;
}
+.control-button::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-color: var(--background);
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+}
+
.controls-inner {
display: flex;
justify-content: space-between;
@@ -317,22 +325,22 @@ body {
display: none;
}
-#playPause {
- background-image: url('play.png');
- background-position: 52.5% center;
+#playPause::before {
+ mask-image: url('play.svg');
+ mask-position: 53.5% center;
}
-#playPause.pause {
- background-image: url('pause.png');
- background-position: center;
+#playPause.pause::before {
+ mask-image: url('pause.svg');
+ mask-position: center;
}
-#prev {
- background-image: url('prev.png');
- background-position: 45% center;
+#prev::before {
+ mask-image: url('prev.svg');
+ mask-position: 45% center;
}
-#next {
- background-image: url('next.png');
- background-position: 55% center;
+#next::before {
+ mask-image: url('next.svg');
+ mask-position: 55% center;
}
