89ac8fa37b
Update the halo's border-radius from a fixed 50% circle to the theme's default radius variable. This ensures the red pulse follows the button's rounded‑square outline instead of appearing circular.
25 lines
699 B
CSS
25 lines
699 B
CSS
.recordingWrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Translucent red halo that sits behind the stop button and scales with the
|
|
live microphone level (scale set inline from audioLevel). Radius follows the
|
|
ActionIcon's own radius so the halo matches the button's rounded-square
|
|
outline instead of being a circle. */
|
|
.pulse {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--mantine-radius-default);
|
|
background-color: var(--mantine-color-red-5);
|
|
opacity: 0.35;
|
|
transform-origin: center;
|
|
transform: scale(1);
|
|
transition: transform 90ms linear;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
z-index: 0;
|
|
}
|