@charset "utf-8"; *{ margin: 0; padding: 0; } body{ font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; } ul li{ list-style-type: none; } .audio-box{ position: fixed; width: 100%; min-width: 320px; height: auto; bottom: 0; left: 0; background-color: rgba(0,0,0,0.6); color: #fff; } .audio-container{ width: 100%; margin: auto; position:relative; } .audio-view{ padding-left:110px; height: 66px; } .audio-cover{ position:absolute; top:-40px; left:5px; width: 100px; height: 100px; background-size: auto 100%; background-repeat: no-repeat; background-position: center center; background-color: #000; border-radius: 50%; -webkit-animation: rotating 9s linear infinite; animation: rotating 9s linear infinite; } .audio-cover img{ display: block; height: 100%; margin: auto; } .audio-body{ height: 38px; margin-right:120px; } .audio-title{ width: 100%; height: 28px; padding-left: 10px; font-weight: 400; font-size: 15px; line-height: 38px; overflow: hidden; letter-spacing: 1.8px; } .audio-backs{ position: relative; padding-left: 43px; padding-right: 43px; margin-top: 10px; height: 20px; } .audio-this-time, .audio-count-time{ position: absolute; top: 0; width: 38px; font-size: 13px; height: 22px; line-height: 22px; letter-spacing: 0.5px; } .audio-this-time{ left: 0; } .audio-count-time{ right: 0; text-align: right; } .audio-setbacks{ height: 2px; border-radius: 3px; background-color: #333; } .audio-setbacks{ position: relative; top: 50%; } .audio-cache-setbacks, .audio-this-setbacks{ height: 100%; position: absolute; left: 0; top: 0; border-radius: 3px; } .audio-cache-setbacks{ background-color: #535353; z-index: 1; cursor: pointer; } .audio-this-setbacks{ background-color: rgba(71,163,218,.88); z-index: 2; } .audio-backs-btn{ position: absolute; width: 8px; height: 8px; margin-top: -4px; top: 50%; right: -4px; background-color: #fff; border-radius: 50%; cursor: pointer; } .audio-btn{ position:absolute; right:5px; top:30px; display:inline-block; width: 110px; height: 38px; } .audio-select{margin-top: 12px;} .audio-select > div{ margin-left: 14px; width: 16px; height: 16px; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; float: left; cursor: pointer; } .audio-prev{ background-image: url('/images/prev.png'); } .audio-prev a,.audio-next a{ display:block; width:100%; height:100%;} .audio-next{ background-image: url('/images/next.png'); } .audio-play{ background-image: url('/images/play.png'); } .audio-stop{ background-image: url('/images/pause.png'); } .audio-menu{ background-image: url('/images/menu.png'); } .audio-volume{ background-image: url('/images/volume.png'); } .audio-select > div + div{ margin-left: 10px; } .audio-list{ position: absolute; right: 0; color: #000; background-color: #fff; bottom: 66px; border: 1px solid #ccc; width: 188px; border-radius: 5px 5px 0 0; padding-top: 10px; letter-spacing: 0.5px; display: none; } .audio-list-head{ position: relative; padding-bottom: 10px; border-bottom: 1px solid #ccc; } .audio-list-head p{ padding-left: 8px; font-size: 16px; color: #47a3da; } .audio-list-head span{ position: absolute; right: 6px; top: 0; font-size: 12px; display: block; width: 35px; line-height: 20px; border: 1px solid #eee; border-radius: 3px; text-align: center; cursor: pointer; color: #f10b0b; } .audio-inline{ height: 152px; overflow-y: scroll; } /*audio-inline滚动条样式开始*/ .audio-inline::-webkit-scrollbar{width:3px;height:0px;border-radius:6px;} .audio-inline::-webkit-scrollbar-button{display:none;} .audio-inline::-webkit-scrollbar-track-piece{display:none;} .audio-inline::-webkit-scrollbar-thumb{background:#47a3da;border-radius:20px;} .audio-inline::-webkit-scrollbar-thumb:hover{background:#45B6F7;border-radius:6px;} /*audio-inline滚动条样式结束*/ .audio-inline li{ font-size: 12px; line-height: 2.6; padding-left: 8px; padding-right: 8px; border-top: 1px solid #ccc; } .audio-inline li:first-child{ border-top: 0px solid #ccc; } .audio-inline a{ font-size: inherit; color: inherit; text-decoration: none; height: 30px; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; color: #888; } .menu-show, .audio-show-volume{ display: block !important; } .audio-set-volume{ background-color: rgba(0,0,0,0.5); position: absolute; bottom: 66px; width: 26px; height: 118px; right: 90px; z-index: 999; display: none; } .volume-box{ width: 2px; margin: auto; display: block; position: relative; background-color: #333; border-radius: 2.5px; height: 100px; bottom: -10px; } .volume-box span{ display: block; width: 8px; height: 8px; position: absolute; background-color: #fff; border-radius: 50%; margin-left: -4px; margin-top: -4px; left: 50%; cursor: pointer; } .volume-box i{ position: absolute; width: 100%; border-radius: 2.5px; background-color: #47a3da; height: 0; display: block; bottom: 0; } @-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* FILE ARCHIVED ON 00:25:53 Jan 26, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 16:37:50 Aug 16, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.699 exclusion.robots: 0.035 exclusion.robots.policy: 0.021 esindex: 0.015 cdx.remote: 60.216 LoadShardBlock: 618.22 (3) PetaboxLoader3.datanode: 235.831 (5) PetaboxLoader3.resolve: 1273.569 (3) load_resource: 1040.927 (2) */