audio.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. #yAudio{
  2. width:600px;
  3. margin:15% auto;
  4. }
  5. .yAudio {
  6. display: flex;
  7. width: 100%;
  8. color: #333;
  9. font-family: Arial, Helvetica, sans-serif;
  10. overflow: hidden;
  11. -webkit-user-select: none;
  12. -moz-user-select: none;
  13. -ms-user-select: none;
  14. user-select: none;
  15. line-height: normal;
  16. position: relative;
  17. --theme-color: #d72630;
  18. }
  19. .yAudio .yAudio-artword {
  20. width: 160px;
  21. height: 160px;
  22. margin-right: 15px;
  23. }
  24. .yAudio .yAudio-artword .yAudio-figure {
  25. display: block;
  26. width: 100%;
  27. height: 100%;
  28. margin: 0;
  29. padding: 0;
  30. }
  31. .yAudio .yAudio-artword .yAudio-pic {
  32. display: block;
  33. width: 100%;
  34. height: 100%;
  35. object-fit: cover;
  36. }
  37. .yAudio .yAudio-content {
  38. flex: 1;
  39. }
  40. .yAudio .yAudio-content .yAudio-header {
  41. display: flex;
  42. align-items: center;
  43. padding: 5px 0 7px;
  44. }
  45. .yAudio .yAudio-content .yAudio-play {
  46. width: 38px;
  47. height: 38px;
  48. border-radius: 50%;
  49. color: #fff;
  50. background-color: var(--theme-color);
  51. margin-right: 5px;
  52. cursor: not-allowed;
  53. position: relative;
  54. }
  55. .yAudio.load .yAudio-content .yAudio-play {
  56. cursor: pointer;
  57. }
  58. .yAudio .yAudio-content .yAudio-play svg {
  59. position: absolute;
  60. top: 8px;
  61. left: 10px;
  62. width: 22px;
  63. height: 22px;
  64. }
  65. .yAudio .yAudio-content .yAudio-play svg path {
  66. fill: #fff;
  67. }
  68. .yAudio .yAudio-content .yAudio-play__pause,
  69. .yAudio.play .yAudio-content .yAudio-play__playing {
  70. visibility: visible;
  71. }
  72. .yAudio .yAudio-content .yAudio-play__playing,
  73. .yAudio.play .yAudio-content .yAudio-play__pause {
  74. visibility: hidden;
  75. }
  76. .yAudio .yAudio-content .yAudio-play__playing {
  77. left: 8px;
  78. }
  79. .yAudio .yAudio-content .yAudio-container {
  80. flex: 1;
  81. }
  82. .yAudio .yAudio-content .yAudio-author {
  83. font-size: 12px;
  84. color: #999;
  85. font-weight: 300;
  86. margin: 0;
  87. }
  88. .yAudio .yAudio-content .yAudio-title {
  89. font-size: 15px;
  90. margin: 0;
  91. }
  92. .yAudio .yAudio-content .yAudio-time {
  93. color: #ccc;
  94. font-size: 12px;
  95. font-weight: 100;
  96. line-height: 1;
  97. }
  98. .yAudio .yAudio-content .yAudio-main {
  99. width: 100%;
  100. position: relative;
  101. }
  102. .yAudio .yAudio-content .yAudio-waveform {
  103. width: 100%;
  104. height: 60px;
  105. cursor: pointer;
  106. opacity: 0.8;
  107. transform: scaleY(0);
  108. transform-origin: left 75%;
  109. transition: all 0.3s ease-out;
  110. position: relative;
  111. }
  112. .yAudio .yAudio-content .yAudio-waveform::before {
  113. content: '';
  114. position: absolute;
  115. top: 0;
  116. left: var(--bar-left);
  117. width: 1px;
  118. height: 100%;
  119. opacity: 0;
  120. background-color: var(--theme-color);
  121. transition: opacity 0.3s ease-out;
  122. }
  123. .yAudio .yAudio-content .yAudio-waveform:hover,
  124. .yAudio.start .yAudio-content .yAudio-waveform,
  125. .yAudio .yAudio-content .yAudio-waveform:hover::before {
  126. opacity: 1;
  127. }
  128. .yAudio.load .yAudio-content .yAudio-waveform {
  129. transform: scaleY(1);
  130. }
  131. .yAudio .yAudio-content .yAudio-waveform .yAudio-pro {
  132. position: absolute;
  133. top: 0;
  134. left: 0;
  135. width: 0;
  136. height: 60px;
  137. overflow: hidden;
  138. background-color: transparent;
  139. }
  140. .yAudio .yAudio-content .yAudio-current,
  141. .yAudio .yAudio-content .yAudio-total {
  142. position: absolute;
  143. top: 28px;
  144. color: #fff;
  145. padding: 3px 2px;
  146. font-size: 12px;
  147. line-height: 1;
  148. transform: scale(0.9);
  149. opacity: 0;
  150. background-color: rgba(50, 50, 50, 0.91);
  151. }
  152. .yAudio .yAudio-content .yAudio-current {
  153. left: 0;
  154. z-index: 9;
  155. color: var(--theme-color);
  156. transition: opacity 0.3s linear;
  157. }
  158. .yAudio.start .yAudio-content .yAudio-current {
  159. opacity: 1;
  160. }
  161. .yAudio .yAudio-content .yAudio-total {
  162. color: #999;
  163. right: 0;
  164. }
  165. .yAudio.load .yAudio-content .yAudio-total {
  166. opacity: 1;
  167. animation: opacity 0.6s linear;
  168. }
  169. .yAudio .yAudio-content .yAudio-comments {
  170. width: 100%;
  171. position: relative;
  172. }
  173. .yAudio .yAudio-content .yAudio-wrapper {
  174. position: absolute;
  175. top: -15px;
  176. left: 0;
  177. width: 100%;
  178. height: 12px;
  179. cursor: pointer;
  180. }
  181. .yAudio .yAudio-content .yAudio-wrapper__item {
  182. position: absolute;
  183. top: 0;
  184. left: 10px;
  185. width: 12px;
  186. height: 12px;
  187. background-color: #222;
  188. background-repeat: no-repeat;
  189. background-size: cover;
  190. }
  191. .yAudio .yAudio-content .yAudio-wrapper__item.current {
  192. border-radius: 50%;
  193. box-shadow: 1px 2px 6px #6c6c6c;
  194. z-index: 9;
  195. }
  196. .yAudio .yAudio-content .yAudio-popover {
  197. display: flex;
  198. width: 100%;
  199. height: 30px;
  200. line-height: 30px;
  201. font-size: 12px;
  202. box-sizing: border-box;
  203. transition: all 0.3s ease-out;
  204. }
  205. .yAudio .yAudio-content .yAudio-popover-wrapper {
  206. position: absolute;
  207. top: 4px;
  208. left: 0;
  209. line-height: 1;
  210. opacity: 0;
  211. transition: top 0.25s, opacity 0.25s;
  212. }
  213. .yAudio
  214. .yAudio-content
  215. .yAudio-wrapper.active
  216. ~ .yAudio-popover
  217. .yAudio-popover-wrapper {
  218. top: 7px;
  219. opacity: 1;
  220. }
  221. .yAudio .yAudio-content .yAudio-popover-wrapper__user {
  222. display: block;
  223. float: left;
  224. color: var(--theme-color);
  225. padding: 0 8px;
  226. text-decoration: none;
  227. position: relative;
  228. }
  229. .yAudio .yAudio-content .yAudio-popover-wrapper__user::before {
  230. content: '';
  231. display: block;
  232. position: absolute;
  233. top: -12px;
  234. left: 0;
  235. width: 1px;
  236. height: 200%;
  237. background-image: linear-gradient(
  238. rgba(255, 85, 0, 0.95),
  239. rgba(255, 85, 0, 0.1)
  240. );
  241. }
  242. .yAudio
  243. .yAudio-content
  244. .yAudio-popover-wrapper.right
  245. .yAudio-popover-wrapper__user {
  246. float: right;
  247. }
  248. .yAudio .yAudio-content .yAudio-popover-wrapper.right,
  249. .yAudio
  250. .yAudio-content
  251. .yAudio-popover-wrapper.right
  252. .yAudio-popover-wrapper__user::before {
  253. right: 0;
  254. left: auto;
  255. }
  256. .yAudio .yAudio-content .yAudio-popover-wrapper__comment {
  257. color: #666;
  258. float: left;
  259. margin: 0;
  260. }
  261. .yAudio .yAudio-content .yAudio-comments-from {
  262. width: 100%;
  263. height: 0;
  264. opacity: 0;
  265. padding: 5px 5px 5px 25px;
  266. background-color: #f2f2f2;
  267. border: 1px solid #e5e5e5;
  268. box-sizing: border-box;
  269. overflow: hidden;
  270. position: relative;
  271. transition: all 0.3s ease-out;
  272. }
  273. .yAudio.start .yAudio-content .yAudio-comments-from,
  274. .yAudio.comment .yAudio-content .yAudio-comments-from {
  275. opacity: 1;
  276. height: 32px;
  277. }
  278. .yAudio .yAudio-content .yAudio-comments-from::before {
  279. content: '';
  280. position: absolute;
  281. top: 6px;
  282. left: 6px;
  283. width: 19px;
  284. height: 19px;
  285. background-image: linear-gradient(135deg, #846170, #70929c);
  286. }
  287. .yAudio .yAudio-content .yAudio-comments-from__input {
  288. width: 100%;
  289. height: 20px;
  290. border-radius: 0 4px 4px 0;
  291. padding: 0 9px;
  292. font-size: 12px;
  293. outline: none;
  294. cursor: pointer;
  295. border: 1px solid #e5e5e5;
  296. border-left: none;
  297. box-sizing: border-box;
  298. }
  299. .yAudio .yAudio-content .yAudio-footer {
  300. position: relative;
  301. box-sizing: border-box;
  302. margin-top: 10px;
  303. }
  304. .yAudio .yAudio-content .yAudio-list {
  305. border-radius: 0 0 4px 4px;
  306. border: 1px solid #f2f2f2;
  307. font-size: 12px;
  308. overflow: hidden;
  309. }
  310. .yAudio .yAudio-content .yAudio-list-container {
  311. max-height: 150px;
  312. overflow-y: hidden;
  313. transition: max-height 0.3s;
  314. }
  315. .yAudio .yAudio-content .yAudio-list-container.active {
  316. overflow-y: scroll;
  317. max-height: 300px;
  318. }
  319. .yAudio .yAudio-content .yAudio-list-wrapper {
  320. margin: 0;
  321. padding: 0;
  322. transition: all 0.6s;
  323. }
  324. .yAudio .yAudio-content .yAudio-list-wrapper__item {
  325. width: 100%;
  326. height: 30px;
  327. display: flex;
  328. align-items: center;
  329. padding: 0 5px;
  330. box-sizing: border-box;
  331. color: #ccc;
  332. cursor: not-allowed;
  333. border-bottom: 1px solid #f2f2f2;
  334. transition: all 0.3s;
  335. }
  336. .yAudio .yAudio-content .yAudio-list-wrapper__item:last-child {
  337. border-bottom: none;
  338. }
  339. .yAudio .yAudio-content .yAudio-list-wrapper__item.active,
  340. .yAudio .yAudio-content .yAudio-list-wrapper__item:hover,
  341. .yAudio .yAudio-content .yAudio-more:hover {
  342. background-color: #f2f2f2;
  343. }
  344. .yAudio .yAudio-content .yAudio-list-wrapper__item-img {
  345. display: block;
  346. width: 20px;
  347. height: 20px;
  348. margin-right: 5px;
  349. opacity: 0.5;
  350. transition: all 0.3s;
  351. }
  352. .yAudio .yAudio-content .yAudio-list-wrapper__item-number {
  353. margin-right: 5px;
  354. font-size: 12px;
  355. line-height: 1;
  356. color: #ccc;
  357. transition: all 0.3s;
  358. }
  359. .yAudio .yAudio-content .yAudio-list-wrapper__item-content {
  360. flex: 1;
  361. font-size: 0;
  362. }
  363. .yAudio .yAudio-content .yAudio-list-wrapper__item-user,
  364. .yAudio .yAudio-content .yAudio-list-wrapper__item-title {
  365. display: inline-block;
  366. font-size: 12px;
  367. line-height: 1;
  368. margin-right: 5px;
  369. }
  370. .yAudio .yAudio-content .yAudio-list-wrapper__item-title {
  371. color: #ccc;
  372. transition: all 0.3s;
  373. }
  374. .yAudio .yAudio-content .yAudio-list-bar {
  375. position: absolute;
  376. top: 4px;
  377. right: 4px;
  378. width: 6px;
  379. height: 30px;
  380. background-color: #ccc;
  381. border-radius: 6px;
  382. opacity: 0;
  383. transition: opacity 0.6s;
  384. }
  385. .yAudio .yAudio-content .yAudio-list-bar.active,
  386. .yAudio .yAudio-content .yAudio-list-container.active:hover .yAudio-list-bar {
  387. opacity: 1;
  388. }
  389. .yAudio .yAudio-content .yAudio-more {
  390. text-align: center;
  391. padding: 5px 10px;
  392. color: #999;
  393. border: none;
  394. font-size: 12px;
  395. cursor: pointer;
  396. }
  397. .yAudio.load .yAudio-content .yAudio-list-wrapper__item {
  398. color: #999;
  399. cursor: pointer;
  400. }
  401. .yAudio.load .yAudio-content .yAudio-list-wrapper__item-img {
  402. opacity: 1;
  403. }
  404. .yAudio.load .yAudio-content .yAudio-list-wrapper__item-number,
  405. .yAudio.load .yAudio-content .yAudio-list-wrapper__item-title {
  406. color: #333;
  407. }
  408. .yAudio
  409. .yAudio-content
  410. .yAudio-list-wrapper__item.isload
  411. .yAudio-list-wrapper__item-number,
  412. .yAudio
  413. .yAudio-content
  414. .yAudio-list-wrapper__item.isload
  415. .yAudio-list-wrapper__item-title,
  416. .yAudio
  417. .yAudio-content
  418. .yAudio-list-wrapper__item.isload
  419. .yAudio-list-wrapper__item-user {
  420. color: #b5b5b5;
  421. }
  422. .yAudio
  423. .yAudio-content
  424. .yAudio-list-wrapper__item.isload
  425. .yAudio-list-wrapper__item-img {
  426. opacity: 0.5;
  427. }
  428. .yAudio
  429. .yAudio-content
  430. .yAudio-list-wrapper__item.active
  431. .yAudio-list-wrapper__item-number
  432. .yAudio
  433. .yAudio-content
  434. .yAudio-list-wrapper__item.active
  435. .yAudio-list-wrapper__item-user,
  436. .yAudio
  437. .yAudio-content
  438. .yAudio-list-wrapper__item.active
  439. .yAudio-list-wrapper__item-title {
  440. color: var(--theme-color);
  441. }
  442. .yAudio
  443. .yAudio-content
  444. .yAudio-list-wrapper__item.active
  445. .yAudio-list-wrapper__item-img {
  446. opacity: 1;
  447. }
  448. .yAudio .yAudio-content .yAudio-list-container.active::-webkit-scrollbar {
  449. width: 0;
  450. height: 0;
  451. }
  452. @keyframes opacity {
  453. 0% {
  454. opacity: 0;
  455. }
  456. 100% {
  457. opacity: 1;
  458. }
  459. }