File size: 1,582 Bytes
697b7ab |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.panel{
width: 100%;
pointer-events: none;
color: #ffffff;
text-align: center;
position: relative;
@apply pb-8;
}
.panel::after{
content: "";
position: absolute;
inset: 0px;
z-index: 10;
opacity: 0;
transition: all 0.3s ease;
@apply bg-gradient-to-t from-gray-950 to-transparent;
}
.active::after{ opacity: 1;}
.micIcon{
position: relative;
width: 120px;
height: 120px;
border-radius: 120px;
border: 6px solid;
outline: 6px solid;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
z-index: 20;
transition: all 0.5s ease;
@apply bg-gray-700/60 border-gray-600 outline-gray-900/20;
}
.micIcon svg{
position: relative;
z-index: 20;
opacity: 0.25;
transition: opacity 0.5s ease;
}
@keyframes pulse {
0% {
outline-width: 6px;
@apply outline-teal-500/10;
}
50% {
outline-width: 24px;
@apply outline-teal-500/50;
}
100% {
outline-width: 6px;
@apply outline-teal-500/10;
}
}
.micIconActive{
@apply bg-teal-950 border-teal-500 outline-teal-500/20;
animation: pulse 2s infinite ease-in-out;
}
.micIconActive svg{
opacity: 1;
}
.transcript{
flex: 0;
align-self: center;
opacity: 0.25;
transition: opacity 1s ease;
transition-delay: 2.5s;
@apply bg-gray-900/90 font-medium py-1 px-2 rounded-sm mt-4;
}
.active .transcript{
opacity: 1;
} |