How to style voice search
Once voice search is implemented on a website, it is possible to use the following CSS selectors and cludoSettings to style how elements should appear on the website.
Disable voice search animation
disableVoiceSearchActiveAnimation: true
Voice icon button
.cludo-voice-icon {
/* Insert styling */
}
Voice icon
.cludo-voice-icon svg {
/* Insert styling */
}
Voice icon SVG path
.cludo-voice-icon path{
/* Insert styling */
}
Active voice search icon
.cludo-voice-active:after{
/* Insert styling */
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 15px;
box-shadow: 0 0 8px rgb(0 0 0 / 30%);
animation: pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;
}