@nutui/nutui-react-taro/dist/esm/Audio/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-button{position:relative;display:flex;display:inline-block;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;margin:0;padding:0;height:var(--nutui-button-default-height, 32px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--nutui-button-default-color, var(--nutui-gray-7, #1a1a1a));background:var(--nutui-button-default-background-color, transparent)}.nut-button-text{margin-left:var(--nutui-button-text-icon-margin, 4px)}.nut-button-text.right{margin-right:var(--nutui-button-text-icon-margin, 4px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button-wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button-wrap .nut-icon{font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px))}.nut-button-loading:before,.nut-button-disabled:before{display:none}.nut-button.nut-button-icononly{width:var(--nutui-button-default-height, 32px);padding:0}.nut-button-default{padding:var(--nutui-button-default-padding, 0px 16px);border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, var(--nutui-gray-6, #595959))}.nut-button-default.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:transparent}.nut-button-default.nut-button-none{background:transparent}.nut-button-default.nut-button-none.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c))}.nut-button-default.nut-button-outline,.nut-button-default.nut-button-dashed{background:transparent}.nut-button-default.nut-button-outline.nut-button-disabled,.nut-button-default.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-normal{padding:var(--nutui-button-normal-padding, 0px 16px)}.nut-button-xlarge{height:var(--nutui-button-xlarge-height, 48px);padding:var(--nutui-button-xlarge-padding, 0px 32px);font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-xlarge .nut-icon{font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));width:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));height:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px))}.nut-button-large{height:var(--nutui-button-large-height, 40px);padding:var(--nutui-button-large-padding, 0px 20px);font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-large .nut-icon{font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px))}.nut-button-small{height:var(--nutui-button-small-height, 28px);padding:var(--nutui-button-small-padding, 0px 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-small .nut-icon{font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini{height:var(--nutui-button-mini-height, 24px);padding:var(--nutui-button-mini-padding, 0px 8px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini .nut-icon{font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-primary{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-primary.nut-button-disabled{background:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-none{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-none.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-outline{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-outline.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-dashed{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) dashed var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success{color:var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-success-background-color, var(--nutui-color-success, #00bc14));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-success.nut-button-disabled{background:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));border-color:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae))}.nut-button-success.nut-button-outline,.nut-button-success.nut-button-dashed{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));border-color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));background:transparent}.nut-button-success.nut-button-outline.nut-button-disabled,.nut-button-success.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success.nut-button-none{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14))}.nut-button-info{color:var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-info-background-color, var(--nutui-color-info-background, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-info.nut-button-disabled{background:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));border-color:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8))}.nut-button-info.nut-button-outline,.nut-button-info.nut-button-dashed{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));border-color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));background:transparent}.nut-button-info.nut-button-outline.nut-button-disabled,.nut-button-info.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-info.nut-button-none{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa))}.nut-button-danger{color:var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-danger-background-color, var(--nutui-color-danger, #fa2c19));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-danger.nut-button-disabled{background:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-outline,.nut-button-danger.nut-button-dashed{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));border-color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));background:transparent}.nut-button-danger.nut-button-outline.nut-button-disabled,.nut-button-danger.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-none{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19))}.nut-button-warning{color:var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-warning-background-color, var(--nutui-color-warning, rgb(255, 158, 13)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-warning.nut-button-disabled{background:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-outline,.nut-button-warning.nut-button-dashed{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));border-color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));background:transparent}.nut-button-warning.nut-button-outline.nut-button-disabled,.nut-button-warning.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-none{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)))}.nut-button-block{display:block;width:100%}.nut-button-solid{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-solid.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button.nut-button-outline,.nut-button.nut-button-dashed{background:transparent}.nut-button.nut-button-none{border-color:transparent;background:transparent}.nut-button-disabled{cursor:not-allowed;color:#fff;background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-loading{cursor:default;opacity:.9}.nut-button-round{border-radius:var(--nutui-button-border-radius, 24px)}.nut-button-round.nut-button-xlarge,.nut-button-round.nut-button-large{border-radius:var(--nutui-button-large-border-radius, 24px)}.nut-button-round.nut-button-small{border-radius:var(--nutui-button-small-border-radius, 24px)}.nut-button-round.nut-button-mini{border-radius:var(--nutui-button-mini-border-radius, 24px)}.nut-button-square{border-radius:var(--nutui-button-square-border-radius, 0)}[dir=rtl] .nut-button-text,.nut-rtl .nut-button-text{margin-left:0;margin-right:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button-text.right,.nut-rtl .nut-button-text.right{margin-left:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button:before,.nut-rtl .nut-button:before{left:auto;right:50%;transform:translate(50%,-50%)}.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));-webkit-user-select:none;user-select:none}.nut-range-container .nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8));border-radius:2px;cursor:pointer}.nut-range-container .nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-container .nut-range-bar{display:block;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-container .nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #fa2c19));outline:none}.nut-range-container .nut-range-button-wrapper,.nut-range-container .nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-container .nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-container .nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-container .nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-container .nut-range-disabled .nut-range-button-wrapper,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-container .nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-container .nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translate(-10px)}.nut-range-container .nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 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:0;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0;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:var(--nutui-range-margin, 15px) 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:0}.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;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0;left:30px;width:11px;height:11px;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper,[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right{right:50%;left:initial;transform:translate3d(50%,50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left{right:50%;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range .number,.nut-rtl .nut-range-container-vertical .nut-range .number{transform:translate3d(-100%,0,0)}[dir=rtl] .nut-range-container-vertical .nut-range-mark,.nut-rtl .nut-range-container-vertical .nut-range-mark{right:auto;left:50%}[dir=rtl] .nut-range-container-vertical .nut-range-tick,.nut-rtl .nut-range-container-vertical .nut-range-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-container-vertical .nut-range-mark-text,.nut-rtl .nut-range-container-vertical .nut-range-mark-text{transform:translateY(-11px)}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.nut-rtl .nut-range-button-wrapper,.nut-rtl .nut-range-button-wrapper-right{left:0;right:initial;transform:translate3d(-50%,-50%,0)}[dir=rtl] .nut-range-button-wrapper-left,.nut-rtl .nut-range-button-wrapper-left{right:0;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-tick,.nut-rtl .nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.nut-rtl .nut-range-mark-text{transform:translate(10px)}.nut-audio-icon{position:relative;display:inline-block}.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 var(--nutui-color-text-disabled, #bfbfbf)}.nut-audio-icon .nut-audio-icon-stop{position:relative}.nut-audio-icon .nut-audio-icon-stop:after{position:absolute;left:50%;top:50%;transform:translate(-50%);content:"";height:2px;width:30px;background:var(--nutui-color-text-disabled, #bfbfbf);transform:rotate(45deg);transform-origin:8px -18px}.nut-audio-progress{display:flex;align-items:center;width:100%;margin:0 auto;padding:10px 0}.nut-audio-progress-bar-wrapper{flex:1;margin:0 10px}.nut-audio-progress .time{min-width:50px;font-size:12px;text-align:center}.nut-audio-progress .nut-range-button{width:8px;height:8px}.nut-audio .custom-button-group .nut-button-primary{margin:0 5px}.nut-audio .custom-button-group-disable .nut-button-primary{margin:0 5px;pointer-events:none}.nut-audio .disable{color:#00f}.nut-audio .nut-audio-none-container .nut-voice{border:1px solid var(--nutui-gray-7, #1a1a1a);align-items:center}[dir=rtl] .nut-audio-icon .nut-audio-icon-stop:after,.nut-rtl .nut-audio-icon .nut-audio-icon-stop:after{left:auto;right:50%;transform:rotate(-45deg);transform-origin:20px -18px}