[ts][player] Style changes.

spine-ts/widget/css/spine-player.css

@@ -57,10 +57,18 @@
 .spine-player-slider:hover .spine-player-slider-value {
     height: 4px;
 	background: rgb(98, 176, 238, 1);
+	transition: height 0.5s;
+}
+
+.spine-player-slider-value.hovering {
+    height: 4px;
+	background: rgb(98, 176, 238, 1);
+	transition: height 0.5s;
 }
 
 .spine-player-slider.big {
 	height: 12px;
+	background: rgb(0, 0, 0);
 }
 
 .spine-player-slider.big .spine-player-slider-value {
@@ -81,7 +89,7 @@
 
 /** List **/
 .spine-player-list {
-	list-style: none;
+	list-style: none !important;
 	padding: 0 !important;
 	margin: 0 !important;
 }
@@ -188,7 +196,7 @@
     background: rgba(0, 0, 0, 0.75);
     z-index: 1;
 	right: 2px;
-    bottom: 47px;
+    bottom: 40px;
 	border-radius: 4px;
 	max-height: 400%;
 	overflow: auto;
@@ -196,8 +204,8 @@
 }
 
 .spine-player-popup-title {
-	margin: 8px 15px 7px 15px;
-	text-align: center;
+    margin: 4px 15px 2px 15px;
+    text-align: center;
 }
 
 .spine-player-popup hr {
@@ -222,19 +230,16 @@
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	opacity: 1;
+	transition: opacity 0.4s;
 }
 
-.spine-player-controls.hidden {
+.spine-player-controls-hidden {
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.4s;
 }
 
-.spine-player-controls.visible {
-	opacity: 1;
-	transition: opacity 0.4s;
-}
-
 /** Player buttons **/
 .spine-player-buttons {
 	display: flex;
@@ -257,6 +262,7 @@
     background-position: center;
 	cursor: pointer;
 	margin-right: 3px;
+	padding-bottom: 3px;
 	filter: drop-shadow(0 0 1px #333);
 }
 
@@ -324,6 +330,23 @@
 	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
 
+.spine-player-button-icon-spine-logo {
+	height: 20px;
+    position: relative;
+	top: 1px;
+    margin: 0 8px !important;
+    align-self: center;
+    border: none !important;
+	width: auto !important;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+
+.spine-player-button-icon-spine-logo:hover {
+	transform: scale(1.05);
+	transition: transform 0.2s;
+}
+
 /** Speed slider **/
 .spine-player-speed-slider {
 	width: 150px;