$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; line-height: initial; [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-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-loop:before { content: '\e803'; } .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'; } .aplayer-lrc-content { display: none; } .aplayer-pic { position: relative; float: left; height: $aplayer-height; width: $aplayer-height; background-image: url(./default.jpg); background-size: 100%; transition: all 0.3s ease; .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); transition: all 0.2s ease; &: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 140px 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; height: 2px; .aplayer-thumb { position: absolute; top: 0; right: 5px; margin-top: -4px; margin-right: -10px; height: 8px; width: 8px; border-radius: 50%; background: #fff; cursor: pointer !important; } } } } .aplayer-time { position: absolute; right: 0; bottom: -5px; height: 17px; color: #999; font-size: 11px; i { color: #666; font-size: 15px; cursor: pointer; transition: all 0.2s ease; &.aplayer-icon-loop { margin: 2px; } &.aplayer-noloop { color: #ddd; &:hover { color: #bbb; } } &:hover { color: #000; } } } .aplayer-volume-wrap { position: relative; 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; transition: all 0.1s ease; } } } } } } .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; } } .aplayer-list { max-height: 300px; overflow: auto; transition: all 0.5s ease; &.aplayer-list-hide { max-height: 0; } ol { list-style-type: none; margin: 0; padding: 0; li { position: relative; height: 32px; line-height: 32px; padding: 0 15px; font-size: 12px; border-top: 1px solid #e9e9e9; cursor: pointer; transition: all 0.2s ease; &:hover { background: #efefef; } &.aplayer-list-light { background: #e9e9e9; .aplayer-list-cur { display: inline-block; } } .aplayer-list-cur { display: none; width: 3px; height: 22px; position: absolute; left: 0; top: 5px; cursor: pointer; } .aplayer-list-index { color: #666; margin-right: 12px; cursor: pointer; } .aplayer-list-author { color: #666; float: right; cursor: pointer; } } } } }