fixing css theme

groove/static/themes/blue_train/static/styles.css

@@ -122,14 +122,40 @@ a:active, a:hover {
   line-height: 5em;
 }
 #playBtn {
-  font-family: sans-serif;
+    color: #000;
     font-size: 5em;
-  padding-left: 0.1em;
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(var(--ggs,1));
+    width: 100%;
+    height: 100%;
 }
+#playBtn:before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0.20em;
+    left:0.35em;
+    border-top: 0.3em solid transparent;
+    border-bottom: 0.3em solid transparent;
+    border-left: 0.4em solid;
+}
+
 #pauseBtn {
-  font-family: sans-serif;
   display: none;
-  font-size: 4em;
+  position: absolute;
+  width: 50%;
+  height: 50%;
+  font-size: 5em;
+  margin: 0px auto;
+  left: 0.3em;
+  top: 0.25em;
+  border-color: #000;
+  border-style: double;
+  border-width: 0px 0px 0px 37px;
+
 }
 #prevBtn {
   color: #fff;

groove/static/themes/blue_train/templates/playlist.tpl

@@ -37,8 +37,8 @@
         <td id='controls'>
             <div id='big_button' class='btn'>
                 <div id="loading"></div>
-            <div id="playBtn">⏵</div>
-            <div id="pauseBtn">⏸</div>
+                <div id="playBtn"></div>
+                <div id="pauseBtn"></div>
             </div>
         </td>
         <td>