chrome/browser/resources/local_ntp/voice.css

/* Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* This template provides the styles used by the Speech feature. There is one UI
 * used for on the local NTP: the Full Page UI ("overlay") that takes over the
 * whole page.
 *
 * This mode also has a hidden and a visible state to allow for show and hide
 * animations. As such, there are 2 different UIs, specified by different
 * modifier classes (the class is applied to the Element with id=voice-overlay):
 *   - Hidden in the Full Page view (parent class: overlay-hidden).
 *   - Visible in the Full Page view (parent class: overlay).
 *
 * In addition, speech recognition can be in one of 5 different states that can
 * manifest in each of the UIs (the corresponding class names are applied to the
 * element with id=outer):
 *   - Listening for audio (parent class: voice-ml).
 *   - Receiving speech (parent class: voice-rs).
 *   - Error received (parent class: voice-er).
 *   - Inactive (no parent class).
 *
 * For details, see go/gws-speech-design and go/local-ntp-voice-search. */

/* Color constants. */
:root {
  --dark_red: rgb(205, 0, 0);
  --grey: #777;
  --light_grey: #eee;
  --light_red: rgb(255, 68, 68);

  --active_icon_color: white;
  --button_shadow: rgba(0, 0, 0, .1);
  --inactive_icon_color: #999;
  --level_animation_color: #dbdbdb;
  --listening_icon_color: var(--light_red);
  --text_link_color: rgb(17, 85, 204);
}

/* The dialog container for the background element. */
.overlay-dialog {
  background: transparent;
  border: none;
  height: 100%;
  left: 0;
  margin: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.overlay-dialog::backdrop {
  background-color: white;
}

html[darkmode=true] .overlay-dialog::backdrop {
  background-color: rgb(41, 42, 45);
}

/* The background element. */
.overlay,
.overlay-hidden {
  background: white;
  opacity: 0;
  text-align: start;
  transition: visibility 0s linear 218ms, background-color 218ms;
  visibility: hidden;
  z-index: 10000;
}

html[darkmode=true] .overlay,
html[darkmode=true] .overlay-hidden {
  background-color: rgb(41, 42, 45);
}

/* Full Page visible style for the background element. */
.overlay {
  opacity: 1;
  transition-delay: 0s;
  visibility: visible;
}

/* The close 'x' button. */
.close-button {
  color: black;
  cursor: pointer;
  font-size: 26px;
  height: 11px;
  line-height: 15px;
  margin: 15px;
  opacity: .54;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 15px;
  z-index: 1;
}

html[dir=rtl] .close-button {
  left: 0;
  right: auto;
}

html[darkmode=true] .close-button {
  color: rgb(var(--GG200-rgb));
}

.close-button:hover {
  opacity: .66;
}

.close-button:active {
  opacity: .78;
}

/* The vertical positioning container. */
.outer {
  display: block;
  height: 42px;
  pointer-events: none;
  position: absolute;
}

/* Full Page visible and hidden state of the positioning container. */
.overlay .outer,
.overlay-hidden .outer {
  margin: auto;
  margin-top: 312px;
  max-width: 572px;
  min-width: 534px;
  padding: 0 223px;
  position: relative;
  top: 0;
}

/* Style for the inner container used for horizontal positioning. */
.inner-container {
  height: 100%;
  opacity: .1;
  pointer-events: none;
  transition: opacity 318ms ease-in;
  width: 100%;
}

.voice-ml .inner-container,
.voice-rs .inner-container,
.voice-er .inner-container {
  opacity: 1;
  transition: opacity 0s;
}

/* MICROPHONE BUTTON */
/* Button with microphone icon in center from which pulses and vibrations
 * emanate. */
.button {
  background-color: white;
  border: 1px solid var(--light_grey);
  border-radius: 100%;
  bottom: 0;
  box-shadow: 0 2px 5px var(--button_shadow);
  cursor: pointer;
  display: inline-block;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color 218ms, border 218ms, box-shadow 218ms;
}

html[darkmode=true] .button {
  background-color: rgb(var(--GG900-rgb));
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

/* Button state when speech recognition is inactive. */
.overlay-hidden .button {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition-delay: 0s;
}

/* Button state when speech recognition is active. */
.overlay .button {
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  transition-delay: 0s;
}

/* Button state when speech input is being received by the microphone. */
.voice-rs .button {
  background-color: var(--light_red);
  border: 0;
  box-shadow: none;
}

html[darkmode=true] .voice-rs .button {
  background-color: rgb(var(--GR300-rgb));
}

/* Vibrating input volume level. */
.level {
  background-color: var(--level_animation_color);
  border-radius: 100%;
  display: inline-block;
  height: 301px;
  left: -69px;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: -69px;
  transform: scale(.01);
  transition: opacity 218ms;
  width: 301px;
}

html[darkmode=true] .level {
  background-color: rgb(var(--GG700-rgb));
}

/* Container for scaling and positioning of the button. */
.button-container {
  float: right;
  pointer-events: none;
  position: relative;
  transition: transform 218ms, opacity 218ms ease-in;
}

html[dir=rtl] .button-container {
  float: left;
}

/* Common styles applied to the button-container. */
.overlay .button-container,
.overlay-hidden .button-container {
  height: 165px;
  right: -70px;
  top: -70px;
  width: 165px;
}

html[dir=rtl] .overlay .button-container,
html[dir=rtl] .overlay-hidden .button-container {
  left: -70px;
  right: auto;
}

/* Container style when speech recognition is inactive. */
.overlay-hidden .button-container {
  transform: scale(.1);
}

/* Style applied to the button when clicked in the 'receiving audio' state. */
.voice-rs .button:active {
  background-color: var(--dark_red);
}

html[darkmode=true] .voice-rs .button:active {
  background-color: rgb(223, 128, 119);
}

/* Style applied to the button when clicked. */
.button:active {
  background-color: var(--light_grey);
}

html[darkmode=true] .button:active {
  background-color: rgb(53, 54, 57);
}

/* TEXT */
/* Classes:
 *   - voice-text - Text area style class
 *   - voice-text-2l - 2 line style class
 *   - voice-text-3l - 3 line style class
 *   - voice-text-4l - 4 line style class
 *   - voice-text-5l - 5 line style class */

/* Styles applied to the positioning text-container element. */
.text-container {
  pointer-events: none;
}

/* Full Page UI style for the text-container. */
.overlay .text-container,
.overlay-hidden .text-container {
  position: absolute;
}

/* This class is used to specify the speech recognition text formatting. */
.voice-text {
  font-weight: normal;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-align: start;
  transition: opacity 100ms ease-in, margin-inline-start 500ms ease-in,
              top 0s linear 218ms;
}

/* Recognition results text hidden in the Full Page UI. */
.overlay-hidden .voice-text {
  margin-inline-start: 44px;
}

html[dir=rtl] .overlay-hidden .voice-text {
  margin-inline-end: 44px;
  margin-inline-start: 0;
}

/* Styles applied to the text output elements. Common style for the text area
 * class for the full Page UI. To vertically center the text as longer queries
 * are wrapped, the 'top' position is specified in em here and below. */
.overlay .voice-text,
.overlay-hidden .voice-text {
  font-size: 32px;
  left: -44px;
  top: -.2em;
  width: 460px;
}

html[dir=rtl] .overlay .voice-text,
html[dir=rtl] .overlay-hidden .voice-text {
  left: auto;
  right: -44px;
}

/* Common style for when the text areas are made visible. */
.overlay .voice-text {
  margin-inline-start: 0;
  opacity: 1;
  transition: opacity 500ms ease-out, margin-inline-start 500ms ease-out;
}

html[dir=rtl] .overlay .voice-text {
  margin-inline-end: 0;
  margin-inline-start: auto;
}

/* Interim (low confidence) text. */
#voice-text-i {
  color: var(--grey);
}

html[darkmode=true] #voice-text-i {
  color: rgb(var(--GG500-rgb));
}

/* Final (high confidence) text. */
#voice-text-f {
  color: black;
}

html[darkmode=true] #voice-text-f {
  color: rgb(var(--GG200-rgb));
}

/* Text area links. */
.voice-text-link {
  color: var(--text_link_color);
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  pointer-events: auto;
  text-decoration: underline;
}

html[darkmode=true] .voice-text-link {
  color: rgb(var(--GB300-rgb));
}

/* Range of motion for the typing animation. */
@keyframes type {
    from {
      width: 0;
    }
    to {
      width: 460px;
    }
}

/* Style to simulate typing the "Listening..." text. */
.listening-animation {
  animation: type 900ms steps(30, end);
  overflow: hidden;
  white-space: nowrap;
}

/* Styles applied to simulate vertical scrolling. Common webkit transition
 * style for vertical text scrolling. */
.voice-text-2l.voice-text,
.voice-text-3l.voice-text,
.voice-text-4l.voice-text {
  transition: top 218ms ease-out;
}

/* When the text height is two lines. */
.voice-text-2l.voice-text {
  top: -.6em;
}

/* When the text height is three lines. */
.voice-text-3l.voice-text {
  top: -1.3em;
}

/* When the text height is four lines. */
.voice-text-4l.voice-text {
  top: -1.7em;
}

/* When the text height is more than five lines, shift the text up. */
.voice-text-5l.voice-text {
  top: -2.5em;
}

/* MICROPHONE ICON */
/* The microphone icon is made up of 4 parts:
 *   - the audio receiver,
 *   - the shell that surrounds the lower half of the audio receiver,
 *   - the stem that holds up the shell and the audio receiver,
 *   - and a wrapper that positions the shell and stem.
 *
 *     /===\
 *     |   |  <==== Audio receiver.
 *     |   |
 *  \  \===/  / <== Shell.
 *   \_______/
 *       |
 *       |  <====== Stem. */

/* Container element for microphone icon. */
.microphone {
  direction: ltr;
  height: 87px;
  left: 43px;
  pointer-events: none;
  position: absolute;
  top: 47px;
  width: 42px;
}

/* Part 1 of CSS-only microphone icon: the audio receiver.
 * Positioned in the center. */
.receiver {
  background-color: var(--inactive_icon_color);
  border-radius: 30px;
  height: 46px;
  left: 25px;
  pointer-events: none;
  position: absolute;
  width: 24px;
}

html[darkmode=true] .receiver {
  background-color: rgb(var(--GG500-rgb));
}

/* Part 2 of CSS-only microphone icon: the shell and stem wrapper element.
 * Positioned below the audio receiver element. */
.wrapper {
  bottom: 0;
  height: 53px;
  left: 11px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 52px;
}

/* Part 3 of CSS-only microphone icon: the stem that supports the shell.
 * Positioned below the audio receiver element and the shell element. */
.stem {
  background-color: var(--inactive_icon_color);
  bottom: 14px;
  height: 14px;
  left: 22px;
  pointer-events: none;
  position: absolute;
  width: 9px;
  z-index: 1; /* z-index is only used to specify position relative to stem. */
}

html[darkmode=true] .stem {
  background-color: rgb(var(--GG500-rgb));
}

/* Part 4 of CSS-only microphone icon: shell that holds the receiver.
 * Positioned below the audio receiver element and above the stem element. */
.shell {
  border: 7px solid var(--inactive_icon_color);
  border-radius: 28px;
  bottom: 27px;
  height: 57px;
  pointer-events: none;
  position: absolute;
  width: 38px;
  z-index: 0; /* z-index is only used to specify position relative to stem. */
}

html[darkmode=true] .shell {
  border-color: rgb(var(--GG500-rgb));
}

/* The .voice-ml style is applied when the UI is in
 * the 'listening for audio' state. */
.voice-ml .receiver,
.voice-ml .stem {
  background-color: var(--listening_icon_color);
}

html[darkmode=true] .voice-ml .receiver,
html[darkmode=true] .voice-ml .stem {
  background-color: rgb(var(--GR300-rgb));
}

.voice-ml .shell {
  border-color: var(--listening_icon_color);
}

html[darkmode=true] .voice-ml .shell {
  border-color: rgb(var(--GR300-rgb));
}

/* The .voice-rs style is applied when the UI is in
 * the 'receiving speech' state. */
.voice-rs .receiver,
.voice-rs .stem {
  background-color: var(--active_icon_color);
}

html[darkmode=true] .voice-rs .receiver,
html[darkmode=true] .voice-rs .stem {
  background-color: rgb(var(--GG200-rgb));
}

.voice-rs .shell {
  border-color: var(--active_icon_color);
}

html[darkmode=true] .voice-rs .shell {
  border-color: rgb(var(--GG200-rgb));
}