fix the css conflict between mini mode and play list

DIYgod · DIYgod · commit 8aa8ba968dfc · 2018-03-12T15:12:56.000+08:00
diff --git a/src/css/index.scss b/src/css/index.scss
@@ -2,54 +2,6 @@ $aplayer-height: 66px;
 $lrc-height: 30px;
 $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
 
-.aplayer-narrow {
-    width: $aplayer-height;
-    .aplayer-info {
-        display: none;
-    }
-}
-
-.aplayer-withlrc {
-    &.aplayer-narrow {
-        width: $aplayer-height-lrc;
-    }
-    &.aplayer {
-        .aplayer-pic {
-            height: $aplayer-height-lrc;
-            width: $aplayer-height-lrc;
-        }
-
-        .aplayer-info {
-            margin-left: $aplayer-height-lrc;
-            height: $aplayer-height-lrc;
-        }
-
-        .aplayer-lrc {
-            display: block;
-        }
-
-        .aplayer-info {
-            padding: 10px 7px 0 7px;
-        }
-    }
-}
-
-.aplayer-withlist {
-    &.aplayer {
-        .aplayer-info {
-            border-bottom: 1px solid #e9e9e9;
-        }
-
-        .aplayer-list {
-            display: block;
-        }
-
-        .aplayer-icon-menu {
-            display: inline !important;
-        }
-    }
-}
-
 .aplayer {
     background: #fff;
     font-family: Arial, Helvetica, sans-serif;
@@ -74,6 +26,48 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
         }
     }
 
+    &.aplayer-withlist {
+        .aplayer-info {
+            border-bottom: 1px solid #e9e9e9;
+        }
+        .aplayer-list {
+            display: block;
+        }
+        .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
+            display: inline;
+        }
+    }
+
+    &.aplayer-withlrc {
+        .aplayer-pic {
+            height: $aplayer-height-lrc;
+            width: $aplayer-height-lrc;
+        }
+        .aplayer-info {
+            margin-left: $aplayer-height-lrc;
+            height: $aplayer-height-lrc;
+            padding: 10px 7px 0 7px;
+        }
+        .aplayer-lrc {
+            display: block;
+        }
+    }
+
+    &.aplayer-narrow {
+        width: $aplayer-height;
+        
+        .aplayer-info {
+            display: none;
+        }
+        .aplayer-list {
+            display: none;
+        }
+        .aplayer-pic {
+            height: $aplayer-height;
+            width: $aplayer-height;
+        }
+    }
+
     &.aplayer-mobile {
         .aplayer-icon-volume-down {
             display: none;
