104 lines
1.7 KiB
SCSS
104 lines
1.7 KiB
SCSS
.capture-audio {
|
|
text-align: center;
|
|
|
|
.microphone {
|
|
height: 36px;
|
|
width: 36px;
|
|
text-align: center;
|
|
opacity: 0.5;
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
margin-top: 2px;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:before {
|
|
margin-top: 4px;
|
|
content: '';
|
|
display: inline-block;
|
|
height: 24px;
|
|
width: 24px;
|
|
@include color-svg('../images/microphone.svg', $grey);
|
|
}
|
|
}
|
|
}
|
|
.recorder {
|
|
background: $color-white;
|
|
|
|
button {
|
|
float: right;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 36px;
|
|
margin-left: 5px;
|
|
opacity: 0.5;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin-top: 5px;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
width: $button-height;
|
|
height: $button-height;
|
|
}
|
|
}
|
|
|
|
.finish {
|
|
background: lighten($color-core-green, 20%);
|
|
border: 1px solid $color-core-green;
|
|
|
|
.icon {
|
|
@include color-svg('../images/check.svg', $color-core-green);
|
|
}
|
|
}
|
|
|
|
.close {
|
|
background: lighten($color-core-red, 20%);
|
|
border: 1px solid $color-core-red;
|
|
|
|
.icon {
|
|
@include color-svg('../images/x.svg', $color-core-red);
|
|
}
|
|
}
|
|
|
|
.time {
|
|
color: $grey;
|
|
float: right;
|
|
line-height: 36px;
|
|
padding: 0 10px;
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #f00;
|
|
margin-right: 10px;
|
|
opacity: 0;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
}
|
|
}
|