amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_audio.scss
2023-10-07 19:42:30 +08:00

147 lines
3.0 KiB
SCSS

@mixin input-range {
-webkit-appearance: none;
outline: none;
border: none;
padding: 0;
background: none;
&::-webkit-slider-runnable-track {
background: var(--Audio-track-bg);
height: var(--Audio-track-height);
border-radius: var(--Audio-track-borderRadius);
border: var(--Audio-track-border);
}
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 100%;
cursor: pointer;
background: var(--Audio-thumb-bg);
width: var(--Audio-thumb-width);
height: var(--Audio-thumb-height);
margin-top: var(--Audio-thumb-marginTop);
}
}
@mixin svg {
width: var(--Audio-svg-width);
height: var(--Audio-svg-height);
position: relative;
top: var(--Audio-svg-top);
}
.#{$ns}Audio-original {
display: none;
}
.#{$ns}Audio--inline {
display: inline-block;
}
.#{$ns}Audio {
box-sizing: border-box;
height: var(--Audio-height);
line-height: var(--Audio-lineHeight);
border: var(--Audio-border);
padding-left: var(--Audio-item-margin);
overflow: hidden;
&-controls {
display: flex;
flex-direction: row;
align-items: center;
}
&-rates {
width: var(--Audio-rate-width);
height: var(--Audio-rate-height);
text-align: center;
background: var(--Audio-rate-bg);
cursor: pointer;
margin-right: var(--Audio-item-margin);
}
&-rateControl {
margin-right: var(--Audio-item-margin);
&::after {
clear: both;
content: '';
}
.#{$ns}Audio-rateControlItem {
width: var(--Audio-rate-width);
height: var(--Audio-rate-height);
background: var(--Audio-rate-bg);
cursor: pointer;
text-align: center;
float: left;
box-sizing: border-box;
border-right: var(--Audio-rateControlItem-borderRight);
}
}
&-play {
width: var(--Audio-play-width);
cursor: pointer;
margin-right: var(--Audio-item-margin);
svg {
@include svg();
}
}
&-times {
min-width: var(--Audio-times-width);
margin-right: var(--Audio-item-margin);
cursor: default;
flex-shrink: 0;
}
&-process {
flex: auto;
cursor: pointer;
min-width: var(--Audio-process-minWidth);
margin-right: var(--Audio-item-margin);
input[type='range'] {
@include input-range();
}
}
&-volume {
width: var(--Audio-volume-width);
height: var(--Audio-volume-height);
line-height: var(--Audio-volume-lineHeight);
cursor: pointer;
margin-right: var(--Audio-item-margin);
svg {
@include svg();
}
}
&-volumeControl {
display: flex;
flex-direction: row;
align-items: center;
width: var(--Audio-volumeControl-width);
height: var(--Audio-volume-height);
line-height: var(--Audio-volume-lineHeight);
margin-right: var(--Audio-item-margin);
input[type='range'] {
@include input-range();
}
.#{$ns}Audio-volumeControlIcon {
margin-right: var(--Audio-item-margin);
cursor: pointer;
}
svg {
@include svg();
}
}
}