Greasego
diff --git a/‎APlayer.css‎
Lines changed: 66 additions & 26 deletions b/‎APlayer.css‎
Lines changed: 66 additions & 26 deletions
@@ -77,20 +77,24 @@
     user-select: none;
 }
 
-.aplayer-pic {
+.aplayer span {
+    cursor: default;
+}
+
+.aplayer .aplayer-pic {
     position: relative;
     float: left;
     height: 100%;
     width: 66px;
 }
 
-.aplayer-pic img {
+.aplayer .aplayer-pic img {
     height: 100%;
     width: 100%;
     border-radius: 2px 0 0 2px;
 }
 
-.aplayer-mask {
+.aplayer .aplayer-mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -99,7 +103,7 @@
     background: rgba(0, 0, 0, 0.2);
 }
 
-.aplayer-button {
+.aplayer .aplayer-button {
     position: absolute;
     color: #fff;
     border-radius: 50%;
@@ -110,15 +114,15 @@
     background: rgba(0, 0, 0, 0.2);
 }
 
-.aplayer-button:hover {
+.aplayer .aplayer-button:hover {
     opacity: 1;
 }
 
-.aplayer-hide {
+.aplayer .aplayer-hide {
     display: none;
 }
 
-.aplayer-play {
+.aplayer .aplayer-play {
     width: 26px;
     height: 26px;
     border: 2px solid #fff;
@@ -127,73 +131,73 @@
     margin: -15px 0 0 -15px;
 }
 
-.aplayer-play .icon-play {
+.aplayer .aplayer-play .icon-play {
     position: absolute;
     top: 2px;
     left: 4px;
     font-size: 20px;
 }
 
-.aplayer-pause {
+.aplayer .aplayer-pause {
     width: 16px;
     height: 16px;
     border: 2px solid #fff;
     bottom: 4px;
     right: 4px;
 }
 
-.aplayer-pause .icon-pause {
+.aplayer .aplayer-pause .icon-pause {
     position: absolute;
     top: 2px;
     left: 2px;
     font-size: 12px;
 }
 
-.aplayer-info {
+.aplayer .aplayer-info {
     margin-left: 66px;
     padding: 17px 7px 0 10px;
 }
 
-.aplayer-music {
+.aplayer .aplayer-music {
     margin-bottom: 17px;
 }
 
-.aplayer-title {
+.aplayer .aplayer-title {
     font-size: 14px;
 }
 
-.aplayer-author {
+.aplayer .aplayer-author {
     font-size: 12px;
     color: #666;
 }
 
-.aplayer-music a {
+.aplayer .aplayer-music a {
     margin-left: 20px;
     font-size: 14px;
     color: #000;
 }
 
-.aplayer-music a:hover {
+.aplayer .aplayer-music a:hover {
     color: #E90F24;
 }
 
-.aplayer-controller {
+.aplayer .aplayer-controller {
     position: relative;
 }
 
-.aplayer-bar-wrap {
-    margin-right: 110px;
+.aplayer .aplayer-bar-wrap {
+    margin-right: 120px;
 }
 
-.aplayer-bar {
+.aplayer .aplayer-bar {
     position: relative;
     height: 2px;
     width: 100%;
     background: #cdcdcd;
     cursor: pointer;
 }
 
-.aplayer-loaded {
+.aplayer .aplayer-loaded {
     position: absolute;
     left: 0;
     top: 0;
@@ -203,7 +207,7 @@
     transition: all 0.5s ease;
 }
 
-.aplayer-played {
+.aplayer .aplayer-played {
     position: absolute;
     left: 0;
     top: 0;
@@ -212,7 +216,7 @@
     height: 2px;
 }
 
-.aplayer-thumb {
+.aplayer .aplayer-thumb {
     position: absolute;
     top: 0;
     right: 0;
@@ -226,20 +230,56 @@
     cursor: pointer;
 }
 
-.aplayer-thumb:hover {
+.aplayer .aplayer-thumb:hover {
     background: #b7daff;
 }
 
-.aplayer-time {
+.aplayer .aplayer-time {
     position: absolute;
     right: 0;
     bottom: -5px;
+    height: 17px;
     color: #999;
     font-size: 11px;
 }
 
-.icon-volume-down {
+.aplayer .aplayer-time i {
     color: #666;
     font-size: 15px;
+}
+
+.aplayer .aplayer-volume-wrap {
+    display: inline-block;
     margin-left: 7px;
+    cursor: pointer;
+}
+
+.aplayer .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
+    display: block;
+}
+
+.aplayer .aplayer-volume-bar-wrap {
+    display: none;
+    position: absolute;
+    bottom: 17px;
+    right: -5px;
+    width: 25px;
+    height: 40px;
+}
+
+.aplayer .aplayer-volume-bar {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    width: 5px;
+    height: 35px;
+    background: #aaa;
+}
+
+.aplayer .aplayer-volume {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 5px;
+    background: #b7daff;
 }