1 line
19 KiB
CSS
1 line
19 KiB
CSS
@-webkit-keyframes ai-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes ai-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes backgroundPosition{0%{background-position:-140px 0}to{background-position:140px 0}}@keyframes backgroundPosition{0%{background-position:-140px 0}to{background-position:140px 0}}.ai-wrap{padding:20px;background-color:#202020;color:#fff;max-width:100%;margin-bottom:20px}.ai-wrap,.ai-wrap *,.ai-wrap:after,.ai-wrap :after,.ai-wrap:before,.ai-wrap :before{box-sizing:border-box}.ai-wrap img{max-width:100%;height:auto;border:0;box-shadow:none;margin:0;padding:0}.ai-wrap p,.ai-wrap span{margin:0;padding:0;font-weight:400;line-height:normal}.ai-wrap a{font-weight:400;box-shadow:none;border:0;text-decoration:none;text-transform:none}.ai-wrap svg{display:inline-block}.ai-wrap .ai-audio-control,.ai-wrap .ai-btn{display:inline-block;font-weight:400;margin:0;padding:0;line-height:normal;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;box-shadow:none;vertical-align:middle;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0;min-width:0;max-width:100%;min-height:0;width:auto;height:auto;background-image:none;background-color:transparent}.ai-wrap .ai-audio-control:after,.ai-wrap .ai-audio-control:before,.ai-wrap .ai-btn:after,.ai-wrap .ai-btn:before{display:none}.ai-wrap .ai-control-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:130px}.ai-wrap .ai-control-wrap-thumb{width:130px;height:100%;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;overflow:hidden;margin-right:20px;position:relative;line-height:0}.ai-wrap .ai-control-wrap-thumb:after{bottom:0;right:0;-webkit-transition:opacity 1.5s ease;transition:opacity 1.5s ease;content:"";width:300%;height:100%;background:-webkit-linear-gradient(left,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background:linear-gradient(90deg,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background-size:500px;position:absolute;top:0;left:0;opacity:1;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:backgroundPosition;animation-name:backgroundPosition;-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}.ai-wrap .ai-control-wrap-thumb img{margin:0;border:0;box-shadow:none}.ai-wrap .ai-control-wrap-controls{position:relative;width:100%}.ai-wrap .ai-audio-controls-main{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;margin-bottom:16px}.ai-wrap .ai-audio-control{width:50px;height:50px;border-radius:50%;display:block;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;vertical-align:middle;color:#fff;background-color:#f70f5d;opacity:1;-webkit-transition:opacity 1.5s ease;transition:opacity 1.5s ease;padding:0;position:relative}.ai-wrap .ai-audio-control:focus,.ai-wrap .ai-audio-control:hover{border:0;background-color:#f70f5d}.ai-wrap .ai-audio-control:active,.ai-wrap .ai-audio-control:focus{outline:0}.ai-wrap .ai-audio-control.ai-audio-playing svg{left:0}.ai-wrap .ai-audio-control svg{fill:#fff;height:16px;position:relative;left:2px;top:1px}.ai-wrap .ai-track-info{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:20px;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;width:0}.ai-wrap .ai-track-title{margin:0 0 4px;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}.ai-wrap .ai-track-title span{opacity:1;-webkit-transition:opacity 1.5s ease;transition:opacity 1.5s ease}.ai-wrap .ai-track-subtitle{margin:0;line-height:normal;opacity:.7;font-size:.8125em}.ai-wrap .ai-track-subtitle span{opacity:1;-webkit-transition:opacity 1.5s ease;transition:opacity 1.5s ease}.ai-wrap .ai-audio-controls-progress{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:15px}.ai-wrap .ai-track-progress-bar{display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:5px;cursor:pointer;background-color:#3e3e3e}.ai-wrap .ai-track .ai-track-progress-bar{position:absolute;top:auto;bottom:0;left:0;width:100%;height:3px;background-color:transparent}.ai-wrap .ai-track .ai-track-progress-bar:hover{background-color:hsla(0,0%,100%,.3)}.ai-wrap .ai-track-progress{position:absolute;top:0;left:0;height:100%;pointer-events:none;background-color:#f70f5d;-webkit-transition:width .28s ease;transition:width .28s ease}.ai-wrap .ai-track .ai-track-progress{background-color:#fff;opacity:.5}.ai-wrap .ai-waveform-bar{display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:30px;cursor:pointer}.ai-wrap .ai-waveform{pointer-events:none}.ai-wrap .ai-track-time{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;font-size:13px;opacity:.7;width:65px;text-align:right;cursor:pointer}.ai-wrap .ai-audio-volume-control{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.ai-wrap .ai-audio-volume-bars{float:left;margin-right:3px;height:34px}.ai-wrap .ai-audio-volume-bars:after{content:"";display:table;clear:both}.ai-wrap .ai-volume-bar{float:left;position:relative;width:4px;height:100%;background-color:#3e3e3e;cursor:pointer;border-right:1px solid #202020}.ai-wrap .ai-volume-bar:before{content:"";position:absolute;bottom:0;left:0;right:0;-webkit-transition:background-color .18s ease;transition:background-color .18s ease}.ai-wrap .ai-volume-bar.ai-volume-bar-active:before{background-color:#f70f5d}.ai-wrap .ai-volume-bar:first-child::before{height:0%}.ai-wrap .ai-volume-bar:nth-child(2):before{height:10%}.ai-wrap .ai-volume-bar:nth-child(3):before{height:20%}.ai-wrap .ai-volume-bar:nth-child(4):before{height:30%}.ai-wrap .ai-volume-bar:nth-child(5):before{height:40%}.ai-wrap .ai-volume-bar:nth-child(6):before{height:50%}.ai-wrap .ai-volume-bar:nth-child(7):before{height:60%}.ai-wrap .ai-volume-bar:nth-child(8):before{height:70%}.ai-wrap .ai-volume-bar:nth-child(9):before{height:80%}.ai-wrap .ai-volume-bar:nth-child(10):before{height:90%}.ai-wrap .ai-volume-bar:nth-child(11):before{height:100%}.ai-wrap .ai-audio-volume-control-btns{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.ai-wrap .ai-audio-volume-control-btns .ai-btn{height:50%;font-size:10px}.ai-wrap .ai-audio-volume-control-btns .ai-btn:first-child{margin-bottom:1px}.ai-wrap .ai-audio-volume-control-btns .ai-btn:last-child{margin-top:1px}.ai-wrap .ai-audio-volume-control-btns .ai-btn svg{height:6px}.ai-wrap .ai-audio-controls-meta{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;opacity:1;-webkit-transition:opacity .36s ease;transition:opacity .36s ease}.ai-wrap .ai-audio-controls-meta:after{content:"";display:table;clear:both}.ai-wrap .ai-audio-controls-meta .ai-btn{margin-right:4px}.ai-wrap .ai-btn{width:32px;height:34px;font-size:14px;padding:0;background-image:none;background-color:#3e3e3e;color:#fff;-webkit-transition:color .18s ease;transition:color .18s ease;box-shadow:none;text-decoration:none;font-style:normal;text-transform:none}.ai-wrap .ai-btn svg{position:relative;fill:#fff;height:10px;-webkit-transition:fill .18s ease;transition:fill .18s ease}.ai-wrap .ai-btn:hover{background-color:#3e3e3e;border:0}.ai-wrap .ai-btn.ai-btn-active{color:#fff;background-color:#f70f5d}.ai-wrap .ai-btn.ai-btn-active svg{fill:#fff}.ai-wrap .ai-btn-repeat svg{height:17px;top:2px}.ai-wrap .ai-btn-shuffle svg{height:14px;top:2px;left:-1px}.ai-wrap .ai-tracklist-toggle{margin-left:auto;margin-right:0}.ai-wrap .ai-tracklist-toggle svg{height:16px;top:2px}.ai-wrap .ai-btn-playback-rate,.ai-wrap .ai-btn-skip-position{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:-.05em}.ai-wrap .ai-tracklist-wrap{opacity:1;-webkit-transition:opacity 1.5s ease;transition:opacity 1.5s ease}.ai-wrap .ai-tracklist-open{margin-top:20px}.ai-wrap .ai-tracklist-open+.ai-footer{margin-top:-1px;border-top:0}.ai-wrap .ai-tracklist{margin:0;padding:0;list-style:none}.ai-wrap .ai-track{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;margin:0 0 1px;padding:0;list-style:none;height:40px;cursor:pointer;background-color:#3e3e3e;-webkit-transition:background-color .18s ease;transition:background-color .18s ease}.ai-wrap .ai-track.ai-track-active,.ai-wrap .ai-track:hover{background-color:#f70f5d;color:#fff}.ai-wrap .ai-track.ai-track-active .ai-track-btn,.ai-wrap .ai-track:hover .ai-track-btn{color:#fff}.ai-wrap .ai-track.ai-track-active .ai-track-btn svg,.ai-wrap .ai-track:hover .ai-track-btn svg{fill:#fff}.ai-wrap .ai-track-control{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;overflow:hidden;border-left:1px solid #202020}.ai-wrap .ai-track-control:first-child{border-left:0}.ai-wrap .ai-track-thumb{display:inline-block;width:40px;max-height:100%;margin:0;overflow:hidden}.ai-wrap .ai-track-thumb img{width:40px;max-height:100%;box-shadow:none;border:0;margin:0}.ai-wrap .ai-track-no-thumb{display:block;width:130px;height:130px;line-height:150px;text-align:center;background-color:#3e3e3e}.ai-wrap .ai-track-no-thumb svg{fill:#fff;height:40px;opacity:.6}.ai-wrap .ai-track-no-thumb.ai-track-thumb{width:40px;height:40px;line-height:50px}.ai-wrap .ai-track-no-thumb.ai-track-thumb svg{height:16px}.ai-wrap .ai-track-name{display:inline-block;padding:0 10px;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:normal}.ai-wrap .ai-track-control-buttons{margin-left:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.ai-wrap .ai-track-btn{display:inline-block;width:40px;height:40px;text-align:center;font-size:13px;line-height:40px;box-shadow:none;border:0;border-left:1px solid #202020;color:#fff;background:none;cursor:pointer;margin:0;padding:0}.ai-wrap .ai-track-btn svg{position:relative;fill:#fff;height:15px;-webkit-transition:fill .18s ease;transition:fill .18s ease;top:3px}.ai-wrap .ai-track-btn-repeat:hover span{opacity:1!important}.ai-wrap .ai-track-inline-play-btn{position:relative}.ai-wrap .ai-track-inline-play-btn:first-child{border-left:0}.ai-wrap .ai-track-inline-play-btn.ai-is-loading svg{opacity:0}.ai-wrap .ai-footer{border-top:1px solid #3e3e3e;margin-top:20px;padding-top:20px;text-align:center;font-size:11px}.ai-wrap .ai-footer a{text-decoration:none;box-shadow:none}.ai-wrap .ai-footer a,.ai-wrap .ai-footer a:hover{color:#f70f5d;border:0;opacity:1}.ai-wrap .ai-footer p{opacity:.7;margin:0;font-size:12px}.ai-wrap.ai-is-loading .ai-track-title{position:relative}.ai-wrap.ai-is-loading .ai-track-title span{opacity:0}.ai-wrap.ai-is-loading .ai-track-title:after{content:"";width:140px;height:8px;background:-webkit-linear-gradient(left,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background:linear-gradient(90deg,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background-size:500px;position:absolute;top:-10px;left:0;opacity:1;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:backgroundPosition;animation-name:backgroundPosition;-webkit-animation-timing-function:linear;animation-timing-function:linear}.ai-wrap.ai-is-loading .ai-track-subtitle{position:relative}.ai-wrap.ai-is-loading .ai-track-subtitle span{opacity:0}.ai-wrap.ai-is-loading .ai-track-subtitle:after{content:"";width:100px;height:6px;background:-webkit-linear-gradient(left,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background:linear-gradient(90deg,#3e3e3e 8%,#4d4d4d 18%,#3e3e3e 33%);background-size:500px;position:absolute;top:2px;left:0;opacity:1;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:backgroundPosition;animation-name:backgroundPosition;-webkit-animation-timing-function:linear;animation-timing-function:linear}.ai-wrap.ai-is-loading .ai-audio-controls-meta{opacity:0}.ai-wrap.ai-is-loading .ai-audio-control{opacity:.5}.ai-wrap.ai-is-loading .ai-control-wrap-thumb:after,.ai-wrap.ai-is-loading .ai-tracklist-wrap{opacity:1}.ai-wrap .ai-tracklist-enter{opacity:0}.ai-wrap .ai-tracklist-enter.ai-tracklist-enter-active{opacity:1;-webkit-transition:opacity .5s ease-in;transition:opacity .5s ease-in}.ai-wrap .ai-scroll-wrap .ai-tracklist{margin-right:15px}.ai-wrap .ai-scroll-wrap>div:last-child{top:0!important;bottom:0!important;background-color:rgba(62,62,62,.5)}.ai-wrap .ai-scroll-wrap>div:last-child div{background-color:#f70f5d!important}.ai-wrap.ai-type-global-footer{width:100%;position:fixed;bottom:0;left:0;right:0;padding:0;margin:0;z-index:999}.ai-wrap.ai-type-global-footer .ai-control-wrap{min-height:70px}.ai-wrap.ai-type-global-footer .ai-control-wrap-thumb{width:80px;height:80px;margin:0;line-height:115px}.ai-wrap.ai-type-global-footer .ai-control-wrap-controls{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ai-wrap.ai-type-global-footer .ai-audio-controls-main{padding:0 25px;margin:0;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta{width:auto;margin-left:20px;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta-right{margin-left:auto}.ai-wrap.ai-type-global-footer .ai-track-progress-bar{-webkit-box-flex:initial;-webkit-flex:initial;-ms-flex:initial;flex:initial}.ai-wrap.ai-type-global-footer .ai-tracklist-toggle{margin-left:15px}.ai-wrap.ai-type-global-footer .ai-audio-controls-progress{margin-bottom:0}.ai-wrap.ai-type-global-footer .ai-tracklist-wrap{position:absolute;bottom:100%;width:100%;padding:20px;background-color:inherit;margin:0}.ai-control-spinner{border-radius:50%;position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);font-size:10px;text-indent:-9999em;border-top:5px solid hsla(0,0%,100%,.2);border-right:5px solid hsla(0,0%,100%,.2);border-bottom:5px solid hsla(0,0%,100%,.2);border-left:5px solid currentColor;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:ai-spin 1.1s infinite linear;animation:ai-spin 1.1s infinite linear;z-index:1;opacity:0;-webkit-transition:opacity .18s ease;transition:opacity .18s ease;-webkit-transition-delay:.2s;transition-delay:.2s}.ai-audio-loading .ai-control-spinner{opacity:.8}.ai-control-spinner:after{border-radius:50%;position:absolute;width:100%;height:100%}.ai-track-spinner{border-radius:50%;position:absolute;top:50%;left:50%;margin-left:-10px!important;margin-top:-10px!important;width:20px;height:20px;font-size:10px;text-indent:-9999em;border-top:3px solid hsla(0,0%,100%,.2);border-right:3px solid hsla(0,0%,100%,.2);border-bottom:3px solid hsla(0,0%,100%,.2);border-left:3px solid currentColor;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:ai-spin 1.1s infinite linear;animation:ai-spin 1.1s infinite linear;z-index:1;opacity:0}.ai-track-loading .ai-track-spinner{opacity:.8}.ai-track-spinner:after{border-radius:50%;position:absolute;width:100%;height:100%}.ReactModal__Body--open{overflow:hidden}.ai-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background-color:rgba(0,0,0,.3)}.ai-modal{position:absolute;top:40px;width:460px;max-width:calc(100% - 30px);left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;color:#000;border-radius:4px;border:1px solid rgba(62,62,62,.4);outline:0;max-height:calc(100vh - 50px);overflow-y:auto;box-sizing:border-box}.ai-modal-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:5px;margin-bottom:10px}.ai-modal-dismiss{display:inline-block;font-weight:400;margin:0;padding:0;line-height:normal;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;box-shadow:none;vertical-align:middle;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0;min-width:0;max-width:100%;min-height:0;width:auto;height:auto;background-image:none;background-color:transparent;font-size:30px;margin-left:auto;padding-left:5px;padding-right:5px;line-height:1;color:#000}.ai-modal-dismiss:after,.ai-modal-dismiss:before{display:none}.ai-modal-dismiss:active,.ai-modal-dismiss:focus,.ai-modal-dismiss:hover{background:none;box-shadow:none;border:0;color:#000}.ai-modal-content{padding:0 20px 20px;white-space:pre-wrap}.ai-with-typography{font-family:sans-serif;font-weight:400;line-height:normal;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ai-with-typography .ai-track-subtitle{font-size:13px}.ai-with-typography .ai-track-title{font-size:16px}.ai-modal-with-typography{font-family:sans-serif;font-weight:400;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45;letter-spacing:0}.ai-narrow .ai-control-wrap{height:auto;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.ai-narrow .ai-control-wrap-thumb{width:100%;margin:0 0 20px}.ai-narrow .ai-audio-controls-meta{position:relative}.ai-narrow .ai-track-thumb{display:none}@media (max-width:767px){.ai-wrap.ai-type-global-footer .ai-audio-volume-control,.ai-wrap.ai-type-global-footer .ai-btn-repeat,.ai-wrap.ai-type-global-footer .ai-btn-skip-position,.ai-wrap.ai-type-global-footer .ai-thumb,.ai-wrap.ai-type-global-footer .ai-track-time{display:none}.ai-wrap.ai-type-global-footer .ai-track-title{font-size:15px}.ai-wrap.ai-type-global-footer .ai-audio-controls-main{padding-left:10px;padding-right:10px}.ai-wrap.ai-type-global-footer .ai-track-info{padding-left:10px}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta{margin-left:10px}.ai-wrap .ai-audio-volume-control .ai-btn{display:none}}@media (max-width:480px){.ai-wrap .ai-control-wrap{height:auto;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.ai-wrap .ai-control-wrap-thumb{width:100%;margin:0 0 20px}.ai-wrap .ai-audio-controls-meta{position:relative}.ai-wrap .ai-audio-volume-control{display:none}.ai-wrap .ai-scroll-wrap .ai-tracklist{margin-right:0}}@media (max-width:320px){.ai-wrap .ai-track-thumb{display:none}} |