12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- .capture-audio {
- text-align: center;
- .microphone {
- height: 36px;
- width: 36px;
- text-align: center;
- opacity: 0.5;
- background: transparent;
- padding: 0;
- border: none;
- &:focus, &:hover {
- opacity: 1.0;
- }
- &:before {
- content: '';
- display: inline-block;
- height: 24px;
- width: 24px;
- @include color-svg('/images/microphone.svg', $grey);
- }
- }
- }
- .recorder {
- background: $grey_l;
- button {
- float: right;
- width: 36px;
- height: 36px;
- border-radius: 36px;
- margin-left: 5px;
- opacity: 0.5;
- text-align: center;
- padding: 0;
- &:focus, &:hover {
- opacity: 1.0;
- }
- .icon {
- display: inline-block;
- width: $button-height;
- height: $button-height;
- }
- }
- .finish {
- background: lighten($green, 20%);
- border: 1px solid $green;
- .icon { @include color-svg('/images/check.svg', $green); }
- }
- .close {
- background: lighten($red, 20%);
- border: 1px solid $red;
- .icon { @include color-svg('/images/x.svg', $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;
- }
- }
- }
|