updated player style with clearer played waveform coloring and blurgreen on the buttons

public_html/functions.js

@@ -22,7 +22,7 @@ players.forEach(player => {
 	const trackName = player.getAttribute('data-track');
 
 	const button = document.createElement('div');
-	button.className = 'play-button play'; // start as play
+	button.className = 'blurgreen play-button play'; // start as play
 	player.appendChild(button);
 
 	const wrapper = document.createElement('div');

public_html/img/track-pause.svg

@@ -8,12 +8,7 @@
                 <rect x="464.497" y="245.176" width="95.007" height="95.01"/>
             </clipPath>
             <g clip-path="url(#_clip1)">
-                <g transform="matrix(1,0,0,1,462.002,242.677)">
-                    <path d="M49.9,2.5C23.6,2.8 2.1,24.4 2.5,50.4C2.9,76.5 24.7,98 50.3,97.5C76.7,96.9 97.7,75.7 97.5,49.8C97.3,23.7 75.7,2.3 49.9,2.5" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(1,0,0,1,338.582,110.729)">
-                    <path d="M170.225,165.93C170.225,164.274 168.881,162.93 167.225,162.93L159.923,162.93C158.268,162.93 156.923,164.274 156.923,165.93L156.923,198.318C156.923,199.974 158.268,201.318 159.923,201.318L167.225,201.318C168.881,201.318 170.225,199.974 170.225,198.318L170.225,165.93ZM190.906,165.93C190.906,164.274 189.562,162.93 187.906,162.93L180.605,162.93C178.949,162.93 177.605,164.274 177.605,165.93L177.605,198.318C177.605,199.974 178.949,201.318 180.605,201.318L187.906,201.318C189.562,201.318 190.906,199.974 190.906,198.318L190.906,165.93Z" style="fill:rgb(99,168,184);"/>
-                </g>
+                <path d="M511.902,245.177C485.602,245.477 464.102,267.077 464.502,293.077C464.902,319.177 486.702,340.677 512.302,340.177C538.702,339.577 559.702,318.377 559.502,292.477C559.302,266.377 537.702,244.977 511.902,245.177ZM508.806,276.659C508.806,275.003 507.462,273.659 505.806,273.659L498.505,273.659C496.849,273.659 495.505,275.003 495.505,276.659L495.505,309.048C495.505,310.703 496.849,312.048 498.505,312.048L505.806,312.048C507.462,312.048 508.806,310.703 508.806,309.048L508.806,276.659ZM529.488,276.659C529.488,275.003 528.144,273.659 526.488,273.659L519.187,273.659C517.531,273.659 516.187,275.003 516.187,276.659L516.187,309.048C516.187,310.703 517.531,312.048 519.187,312.048L526.488,312.048C528.144,312.048 529.488,310.703 529.488,309.048L529.488,276.659Z" style="fill:white;"/>
             </g>
         </g>
     </g>

public_html/img/track-play.svg

@@ -8,12 +8,7 @@
                 <rect x="464.497" y="245.176" width="95.007" height="95.01"/>
             </clipPath>
             <g clip-path="url(#_clip1)">
-                <g transform="matrix(1,0,0,1,462.002,242.677)">
-                    <path d="M49.9,2.5C23.6,2.8 2.1,24.4 2.5,50.4C2.9,76.5 24.7,98 50.3,97.5C76.7,96.9 97.7,75.7 97.5,49.8C97.3,23.7 75.7,2.3 49.9,2.5" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(1,0,0,1,462.499,242.853)">
-                    <path d="M38,69C37,69.5 36.2,69 36.2,67.9L36.2,32.1C36.2,31 37,30.5 38,31L72,49C73,49.5 73,50.4 72,50.9L38,69Z" style="fill:rgb(99,168,184);fill-rule:nonzero;"/>
-                </g>
+                <path d="M511.902,245.177C485.602,245.477 464.102,267.077 464.502,293.077C464.902,319.177 486.702,340.677 512.302,340.177C538.702,339.577 559.702,318.377 559.502,292.477C559.302,266.377 537.702,244.977 511.902,245.177ZM500.499,311.853C499.499,312.353 498.699,311.853 498.699,310.753L498.699,274.953C498.699,273.853 499.499,273.353 500.499,273.853L534.499,291.853C535.499,292.353 535.499,293.253 534.499,293.753L500.499,311.853Z" style="fill:white;"/>
             </g>
         </g>
     </g>

public_html/style.css

@@ -889,17 +889,29 @@ article.album a:hover {
 	height: 80px;
 	width: 80px;
 	float: right;
+	position: relative; /* Needed for the ::before positioning */
+	cursor: pointer;
+	border-radius: 100%;
+}
+
+.track-player .play-button::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-size: contain;
-	cursor: pointer;
+	pointer-events: none; /* so it doesn’t block clicks */
 }
 
-.track-player .play-button.play {
+.track-player .play-button.play::before {
 	background-image: url('img/track-play.svg');
 }
 
-.track-player .play-button.pause {
+.track-player .play-button.pause::before {
 	background-image: url('img/track-pause.svg');
 }