adaptive-speech-recognizer/demo/style.css

Adaptive dictation-mode speech recognizer ponyfill compatible with WebChat that gives the user time to think and stutter/stammer.

:root {
  --border-grey: #bbb;
  --pale-grey: #e6e6e6;
  --min-width: auto;
  --max-width: 34rem;
}

.app-page {
  --min-width: 28rem;
  --max-width: 60rem;
}

body {
  color: #333;
  font: medium/1.3 sans-serif;
  min-width: var(--min-width);
  max-width: var(--max-width, 34rem);
  margin: 1rem auto;
  padding: 0 .8rem;
}

[ type = submit ],
[ type = reset ] {
  cursor: pointer;
  font-size: large;
  padding: .6rem 2rem;
}

p label {
  display: block;
}

#actions,
input,
output,
textarea {
  background: var(--pale-grey);
  border: 1px solid var(--border-grey);
  border-radius: .25rem;
  display: inline-block;
  font-size: small;
  margin: .5rem 0 1.5rem;
  min-height: 1rem;
  padding: .5rem;
  width: 100%;
}

output {
  white-space: pre-wrap;
}

input {
  font-size: large;
}

.X_textarea {
  font: large/1.5 sans-serif;
  margin: 0;
  width: 98%;
}

#actions,
#log,
#result {
  font-size: medium;
}

#options,
#log {
  min-height: 14rem;
}

#result {
  background: #cfc;
}

#actions q {
  background: yellow;
  border-bottom: 3px dotted #555;
  display: inline-block;
  margin-left: .75rem;
  padding: .3rem;
}

.error #result,
.error #log,
.recognizer-error #result,
[ data-recognizer-state = error ] {
  background: #fcc;
}

#recognizer-status {
  background: red center/90% url(./microphone.svg) no-repeat;
  border: 1px solid var(--border-grey);
  border-radius: 50%;
  /* cursor: help; */
  display: inline-block;
  height: 2.7rem;
  width: 2.7rem;
  vertical-align: middle;
  margin-left: 1rem;
}

[ data-recognizer-state = started ] #recognizer-status,
.recognizer-started #recognizer-status {
  background-color: #5f5;
}

[ data-recognizer-state = started ] pre,
[ data-recognizer-state = started ] p,
.recognizer-started pre,
.recognizer-started p {
  cursor: wait;
}

/* footer a[ href *= github ], */
.github-fork-ribbon:before,
.github-fork-ribbon:after,
.hide {
  display: none;
}

.github-fork-ribbon:before {
  background-color: #060;
}

footer {
  background: var(--pale-grey);
  border-top: 1px solid var(--border-grey);
  color: #555;
  font-size: small;
  margin-top: 2rem;
  padding: .4rem .2rem;
}