UI update

vr180player/vr180-player.css

@@ -39,9 +39,10 @@
 	pointer-events: none;
 }
 
-.vrwp-play-button img {
+.vrwp-play-button .vrwp-icon {
 	width: 100%;
 	height: 100%;
+	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
 }
 
 @media (max-width: 600px) {
@@ -135,52 +136,39 @@
 	cursor: pointer;
 	border: none;
 	background-color: transparent;
+	color: #fff;
+	display: grid;
+	place-items: center;
+	padding: 0;
+	position: relative;
+	transition: color 0.15s ease-in-out;
+}
+
+.vrwp-panel button:hover {
+	color: #d8d8d8;
+}
+
+.vrwp-icon {
+	width: 28px;
+	height: 28px;
+	stroke: currentColor;
+}
+
+.vrwp-fullscreen,
+.vrwp-mute,
+.vrwp-back,
+.vrwp-play-toggle,
+.vrwp-forward {
+	width: 44px;
+	height: 44px;
 }
 
 .vrwp-fullscreen {
 	grid-area: full;
-	width: 44px;
-	height: 44px;
-	background-image: url(images/fullscreen.png);
-	background-size: 44px 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	transition: background-image 0.15s ease-in-out;
-}
-
-.vrwp-fullscreen:hover {
-	background-image: url(images/fullscreen-hover.png);
 }
 
 .vrwp-mute {
 	grid-area: mute;
-	width: 44px;
-	height: 44px;
-	background-image: url(images/mute.png);
-	background-size: 44px 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	transition: background-image 0.15s ease-in-out;
-}
-
-.vrwp-mute:hover {
-	background-image: url(images/mute-hover.png);
-}
-
-.vrwp-mute.muted {
-	background-image: url(images/mute.png);
-}
-
-.vrwp-mute.muted:hover {
-	background-image: url(images/mute-hover.png);
-}
-
-.vrwp-mute.unmuted {
-	background-image: url(images/unmute.png);
-}
-
-.vrwp-mute.unmuted:hover {
-	background-image: url(images/unmute-hover.png);
 }
 
 .vrwp-nav {
@@ -191,60 +179,13 @@
 	height: 44px;
 }
 
-.vrwp-back {
-	width: 44px;
-	height: 44px;
-	background-image: url(images/back.png);
-	background-size: 44px 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	transition: background-image 0.15s ease-in-out;
-}
-
-.vrwp-back:hover {
-	background-image: url(images/back-hover.png);
-}
-
-.vrwp-play-toggle {
-	width: 44px;
-	height: 44px;
-	background-image: url(images/play2.png);
-	background-size: 44px 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	transition: background-image 0.15s ease-in-out;
-}
-
-.vrwp-play-toggle:hover {
-	background-image: url(images/play2-hover.png);
-}
-
-.vrwp-play-toggle.paused {
-	background-image: url(images/play2.png);
-}
-
-.vrwp-play-toggle.paused:hover {
-	background-image: url(images/play2-hover.png);
-}
-
-.vrwp-play-toggle.playing {
-	background-image: url(images/pause.png);
-}
-
-.vrwp-play-toggle.playing:hover {
-	background-image: url(images/pause-hover.png);
-}
-
-.vrwp-forward {
-	width: 44px;
-	height: 44px;
-	background-image: url(images/forward.png);
-	background-size: 44px 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	transition: background-image 0.15s ease-in-out;
-}
-
-.vrwp-forward:hover {
-	background-image: url(images/forward-hover.png);
+.vrwp-skip-label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -48%);
+	font-size: 0.625rem;
+	font-weight: 700;
+	line-height: 1;
+	pointer-events: none;
 }