nutui-taro-upgrade/dist/packages/audio/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-theme-dark .nut-range-container{background:var(--nut-dark-background, #131313)}.nut-theme-dark .nut-range-container .nut-range-min,.nut-theme-dark .nut-range-container .nut-range-max{color:var(--nut-dark-color-gray, var(--nut-text-color, #808080))}.nut-theme-dark .nut-range-container .nut-range-mark-text{color:var(--nut-dark-color-gray, var(--nut-text-color, #808080))}.nut-theme-dark .nut-range-container .nut-range-button .number{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-range-container{display:flex;position:relative;width:100%;height:4px;align-items:center}.nut-range-container .nut-range-min,.nut-range-container .nut-range-max{font-size:var(--nut-font-size-1, 12px);color:var(--nut-range-tip-font-color, #333333);user-select:none}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0px 15px}.nut-range-container-vertical .nut-range{width:4px;height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0px;left:50%;right:initial;transform:translate3d(-50%, 50%, 0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0px;left:50%;right:initial;transform:translate3d(-50%, -50%, 0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%, 0, 0)}.nut-range-container-vertical .nut-range-vertical{margin:10px 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0px}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translateY(-50%)}.nut-range-container-vertical .nut-range-mark-text-active .nut-range-tick{background:var(--nut-range-bar-bg-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%))}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0px;left:30px;width:11px;height:11px;margin-left:0px;border-radius:50%;background-color:var(--nut-range-bg-color-tick, #fa958c)}.nut-range{display:block;position:relative;width:100%;height:4px;border-radius:2px;cursor:pointer}.nut-range::before{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--nut-range-bg-color, var(--nut-primary-color, #fa2c19));opacity:.5;content:""}.nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nut-range-bar-bg-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%));border-radius:inherit;transition:all .2s}.nut-range-button{display:block;width:var(--nut-range-bar-btn-width, 24px);height:var(--nut-range-bar-btn-height, 24px);background-color:var(--nut-range-bar-btn-bg-color, var(--nut-white, #fff));border-radius:50%;box-shadow:0px 1px 2px 0px rgba(0,0,0,.15);border:var(--nut-range-bar-btn-border, 1px solid var(--nut-primary-color, #fa2c19));outline:none}.nut-range-button-wrapper,.nut-range-button-wrapper-right{position:absolute;top:50%;right:0;transform:translate3d(50%, -50%, 0);cursor:grab;outline:none}.nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);cursor:grab;outline:none}.nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-size:var(--nut-font-size-1, 12px);color:var(--nut-range-tip-font-color, #333333);transform:translate3d(0, -100%, 0)}.nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-disabled .nut-range-button-wrapper,.nut-range-disabled .nut-range-button-wrapper-left,.nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-show-number{margin:0 15px}.nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translateX(-50%)}.nut-range-mark-text-active .nut-range-tick{background:var(--nut-range-bar-bg-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%))}.nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0px;border-radius:50%;background-color:var(--nut-range-bg-color-tick, #fa958c)}.nut-theme-dark .nut-audio__icon .nut-audio__icon--box{background:var(--nut-dark-color, var(--nut-white, #fff))}.nut-audio{padding:0}.nut-audio .nut-audio__progress{display:flex;align-items:center;width:100%;margin:0px auto;padding:10px 0}.nut-audio .nut-audio__progress .nut-audio__bar{flex:1;margin:0 10px}.nut-audio .nut-audio__progress .nut-audio__time{min-width:50px;font-size:12px;text-align:center}.nut-audio .nut-audio__icon{position:relative;display:inline-block}.nut-audio .nut-audio__icon .nut-audio__icon--box{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#fff;border-radius:50%;box-shadow:0 0 8px rgba(128,128,128,.5)}.nut-audio .nut-audio__icon .nut-audio__icon--box.nut-audio__icon--stop::after{position:absolute;left:50%;top:50%;transform:translateX(-15px);content:"";height:2px;width:30px;background:var(--nut-disable-color, #cccccc);transform:rotate(45deg);transform-origin:8px -18px}.nut-audio .audioMain{margin-top:30px}.nut-audio .nut-audio__button--custom{width:8px;height:8px;color:#fff;font-size:10px;line-height:18px;text-align:center;background-color:#ee0a24;border-radius:100px}