dictate-button
Version:
Customizable Web Component that adds speech-to-text dictation capabilities to text fields
2 lines (1 loc) • 1.58 kB
TypeScript
export declare const dictateButtonStyles = "\n:host([theme=\"dark\"]) {\n color-scheme: only dark;\n}\n:host([theme=\"light\"]) {\n color-scheme: only light;\n}\n\n:host .dictate-button__button {\n cursor: pointer;\n padding: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));\n background-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.85));\n border-radius: 50%;\n border: none;\n transition: box-shadow 0.05s linear, background-color 0.2s ease;\n box-sizing: border-box;\n}\n:host .dictate-button__button:hover {\n background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));\n}\n\n:host .dictate-button__button:focus {\n background-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.7));\n outline: none;\n}\n\n:host .dictate-button__button:focus-visible {\n outline: 2px solid light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));\n outline-offset: 2px;\n}\n\n:host .dictate-button__button .dictate-button__icon {\n width: 100%;\n height: 100%;\n}\n\n:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {\n animation: dictate-button-rotate 1s linear infinite;\n}\n\n@keyframes dictate-button-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@media (forced-colors: active) {\n :host .dictate-button__button {\n border: 1px solid currentColor;\n }\n :host .dictate-button__button:focus-visible {\n outline: 3px solid currentColor;\n }\n}\n";