diff --git a/src/css/index.scss b/src/css/index.scss index 09e2a1d..1ee004a 100644 --- 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;