$aplayer-height: 66px; $lrc-height: 40px; $aplayer-height-lrc: $aplayer-height + $lrc-height; @font-face { font-family: 'aplayer-fontello'; src: url('font/aplayer-fontello.eot?72550380'); src: url('font/aplayer-fontello.eot?72550380#iefix') format('embedded-opentype'), url('font/aplayer-fontello.woff?72550380') format('woff'), url('font/aplayer-fontello.ttf?72550380') format('truetype'), url('font/aplayer-fontello.svg?72550380#fontello') format('svg'); font-weight: normal; font-style: normal; } .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 .aplayer-info { margin-left: $aplayer-height-lrc; height: $aplayer-height-lrc; } &.aplayer .aplayer-lrc { display: block; } } .aplayer { font-family: Arial, Helvetica, sans-serif; margin: 5px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); border-radius: 2px; overflow: hidden; user-select: none; [class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before { font-family: "aplayer-fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; } .aplayer-icon-weibo:before { content: '\e805'; } .aplayer-icon-play:before { content: '\e806'; } .aplayer-icon-pause:before { content: '\e807'; } .aplayer-icon-to-start:before { content: '\e808'; } .aplayer-icon-to-end:before { content: '\e809'; } .aplayer-icon-list:before { content: '\e80a'; } .aplayer-icon-menu:before { content: '\e80b'; } .aplayer-icon-volume-off:before { content: '\e800'; } .aplayer-icon-volume-down:before { content: '\e801'; } .aplayer-icon-volume-up:before { content: '\e802'; } span { cursor: default !important; } .aplayer-lrc-content { display: none; } .aplayer-pic { position: relative; float: left; height: $aplayer-height; width: $aplayer-height; background-image: url(./default.png); background-size: 100%; .aplayer-button { position: absolute; color: #fff; border-radius: 50%; opacity: 0.8; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); &:hover { opacity: 1; } } .aplayer-hide { display: none; } .aplayer-play { width: 26px; height: 26px; border: 2px solid #fff; top: 50%; left: 50%; margin: -15px 0 0 -15px; .aplayer-icon-play { position: absolute; top: 2px; left: 4px; font-size: 20px; line-height: 23px; } } .aplayer-pause { width: 16px; height: 16px; border: 2px solid #fff; bottom: 4px; right: 4px; .aplayer-icon-pause { position: absolute; top: 1px; left: 2px; font-size: 12px; line-height: 14px; } } } .aplayer-info { margin-left: $aplayer-height; padding: 14px 7px 0 10px; height: $aplayer-height; box-sizing: border-box; .aplayer-music { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 17px; .aplayer-title { font-size: 14px; } .aplayer-author { font-size: 12px; color: #666; } } .aplayer-controller { position: relative; .aplayer-bar-wrap { margin: 0 120px 0 5px; .aplayer-bar { position: relative; height: 2px; width: 100%; background: #cdcdcd; cursor: pointer !important; .aplayer-loaded { position: absolute; left: 0; top: 0; bottom: 0; background: #aaa; height: 2px; transition: all 0.5s ease; } .aplayer-played { position: absolute; left: 0; top: 0; bottom: 0; background: #b7daff; height: 2px; .aplayer-thumb { position: absolute; top: 0; right: 5px; margin-top: -4px; margin-right: -10px; height: 8px; width: 8px; border: 1px solid #b7daff; border-radius: 50%; background: #fff; cursor: pointer !important; &:hover { background: #b7daff; } } } } } .aplayer-time { position: absolute; right: 0; bottom: -5px; height: 17px; color: #999; font-size: 11px; i { color: #666; font-size: 15px; } } .aplayer-volume-wrap { display: inline-block; margin-left: 7px; cursor: pointer !important; &:hover .aplayer-volume-bar-wrap { display: block; } .aplayer-volume-bar-wrap { display: none; position: absolute; bottom: 17px; right: -5px; width: 25px; height: 40px; z-index: 99; .aplayer-volume-bar { position: absolute; bottom: 0; right: 10px; width: 5px; height: 35px; background: #aaa; .aplayer-volume { position: absolute; bottom: 0; right: 0; width: 5px; background: #b7daff; } } } } } } .aplayer-lrc { display: none; position: relative; height: $lrc-height; background: #fff; text-align: center; overflow: hidden; margin: -10px 0 10px; &:before { position: absolute; top: 0; z-index: 1; display: block; overflow: hidden; width: 100%; height: 10%; content: ' '; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); } &:after { position: absolute; bottom: 0; z-index: 1; display: block; overflow: hidden; width: 100%; height: 33%; content: ' '; background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } p { font-size: 12px; color: #666; line-height: 20px !important; height: 20px !important; padding: 0 !important; margin: 0 !important; transition: all 0.5s ease-out; opacity: 0.4; overflow: hidden; &.aplayer-lrc-current { opacity: 1; } } .aplayer-lrc-contents { width: 100%; transition: all 0.5s ease-out; } } }