From 9b959eb7aba15891452ba417b3e78b40a83a4d84 Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Wed, 19 Jun 2024 00:52:55 +0400
Subject: [PATCH] Updated a play button.

---
 web/assets/css/main.css | 13 +++----------
 web/assets/img/play.svg |  2 +-
 web/assets/img/stop.svg |  2 +-
 web/assets/js/main.js   |  2 +-
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 8a5c041..6bae0d6 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -36,8 +36,7 @@ button {
 	color: var(--primary-color);
 	text-decoration: none; }
 
-a:hover,
-button:hover {
+a:hover {
 	color: var(--secondary-color);
 	cursor: pointer;
 	text-decoration: underline dotted;
@@ -45,9 +44,7 @@ button:hover {
 
 button {
 	background: none;
-	border: none;
-	font: inherit;
-	padding: 0; }
+	border: none; }
 
 p {
 	text-align: justify;
@@ -122,15 +119,11 @@ section { margin-top: 1rem; }
 	padding: 0 .7rem; }
 
 button#radio-play {
-	-webkit-mask-image: url(/assets/img/play.svg);
-	background-color: var(--primary-color);
+	background-image: url(/assets/img/play.svg);
 	height: 3rem;
-	mask-image: url(/assets/img/play.svg);
 	min-width: 3rem;
 	width: 3rem; }
 
-button#radio-play:hover { text-decoration: none; }
-
 input#radio-volume {
 	accent-color: var(--primary-color);
 	direction: rtl;
diff --git a/web/assets/img/play.svg b/web/assets/img/play.svg
index 887cfd9..237e100 100644
--- a/web/assets/img/play.svg
+++ b/web/assets/img/play.svg
@@ -1 +1 @@
-<svg version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path transform="matrix(.75195 -.012986 .014978 .65194 38.971 49.316)" d="m-25.978 46.549 1.6542-92 78.847 47.433-40.251 22.284z" stroke-width=".26458"/><circle cx="50" cy="50" r="47.585" fill="none" stroke="#000" stroke-width="4.8301"/></svg>
+<svg version="1.1" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path d="m1.1317 1.8418v6.6254l-.0005522 6.6248 6.6353-3.3119 6.6348-3.3113-6.6348-3.3135z" fill="#9f2b68" stroke="#000" stroke-width="2"/></svg>
diff --git a/web/assets/img/stop.svg b/web/assets/img/stop.svg
index 14e2211..5348a24 100644
--- a/web/assets/img/stop.svg
+++ b/web/assets/img/stop.svg
@@ -1 +1 @@
-<svg version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path transform="matrix(.75195 -.012986 .014978 .65194 38.971 49.316)" d="m-25.978 46.549 1.6542-92 78.847 47.433-40.251 22.284z" stroke-width=".26458"/><circle cx="50" cy="50" r="47.585" fill="none" stroke="#000" stroke-width="4.8301"/><rect x="20.886" y="20.886" width="58.228" height="58.228" rx="57.392" ry="0" stroke="#000" stroke-width="1.7724"/></svg>
+<svg version="1.1" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="14" height="14" fill="#9f2b68" stroke="#000" stroke-width="3"/></svg>
diff --git a/web/assets/js/main.js b/web/assets/js/main.js
index f342a98..1ed27eb 100644
--- a/web/assets/js/main.js
+++ b/web/assets/js/main.js
@@ -88,5 +88,5 @@ $("player").style.display = $("player").firstChild.style.display = "flex";
 
 $("radio-play").addEventListener("click", e => {
 	audio.paused ? (audio.src = audio_src) && audio.play() : audio.src = "";
-	e.target.style.maskImage = e.target.style.webkitMaskImage = audio.paused ?
+	e.target.style.backgroundImage = audio.paused ?
 		"url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; });