session-desktop/stylesheets/_recorder.scss
2019-03-12 17:44:14 -07:00

102 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 {
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;
}
}
}