pastebin

Paste Search Dynamic
Recent pastes
/voice.css
  1. /* Copyright 2017 The Chromium Authors. All rights reserved.
  2.  * Use of this source code is governed by a BSD-style license that can be
  3.  * found in the LICENSE file. */
  4.  
  5. /* This template provides the styles used by the Speech feature. There is one UI
  6.  * used for on the local NTP: the Full Page UI ("overlay") that takes over the
  7.  * whole page.
  8.  *
  9.  * This mode also has a hidden and a visible state to allow for show and hide
  10.  * animations. As such, there are 2 different UIs, specified by different
  11.  * modifier classes (the class is applied to the Element with id=voice-overlay):
  12.  *   - Hidden in the Full Page view (parent class: overlay-hidden).
  13.  *   - Visible in the Full Page view (parent class: overlay).
  14.  *
  15.  * In addition, speech recognition can be in one of 5 different states that can
  16.  * manifest in each of the UIs (the corresponding class names are applied to the
  17.  * element with id=outer):
  18.  *   - Listening for audio (parent class: voice-ml).
  19.  *   - Receiving speech (parent class: voice-rs).
  20.  *   - Error received (parent class: voice-er).
  21.  *   - Inactive (no parent class).
  22.  *
  23.  * For details, see go/gws-speech-design and go/local-ntp-voice-search. */
  24.  
  25. /* Color constants. */
  26. :root {
  27.   --dark_red: rgb(205, 0, 0);
  28.   --grey: #777;
  29.   --light_grey: #eee;
  30.   --light_red: rgb(255, 68, 68);
  31.  
  32.   --active_icon_color: white;
  33.   --button_shadow: rgba(0, 0, 0, .1);
  34.   --inactive_icon_color: #999;
  35.   --level_animation_color: #dbdbdb;
  36.   --listening_icon_color: var(--light_red);
  37.   --text_link_color: rgb(17, 85, 204);
  38. }
  39.  
  40. /* The dialog container for the background element. */
  41. .overlay-dialog {
  42.   background: transparent;
  43.   border: none;
  44.   height: 100%;
  45.   left: 0;
  46.   margin: auto;
  47.   padding: 0;
  48.   position: absolute;
  49.   right: 0;
  50.   top: 0;
  51.   width: 100%;
  52. }
  53.  
  54. .overlay-dialog::backdrop {
  55.   background-color: white;
  56. }
  57.  
  58. @media (prefers-color-scheme: dark) {
  59.   .overlay-dialog::backdrop {
  60.     /* Equivalent to --dark-mode-dialog-rgb. CSS variables cannot be used in
  61.      * pseudo elements. */
  62.     background-color: rgb(41, 42, 45);
  63.   }
  64. }
  65.  
  66. /* The background element. */
  67. .overlay,
  68. .overlay-hidden {
  69.   background: white;
  70.   opacity: 0;
  71.   text-align: start;
  72.   transition: visibility 0s linear 218ms, background-color 218ms;
  73.   visibility: hidden;
  74.   z-index: 10000;
  75. }
  76.  
  77. @media (prefers-color-scheme: dark) {
  78.   .overlay,
  79.   .overlay-hidden {
  80.     background-color: rgb(var(--dark-mode-dialog-rgb));
  81.   }
  82. }
  83.  
  84. /* Full Page visible style for the background element. */
  85. .overlay {
  86.   opacity: 1;
  87.   transition-delay: 0s;
  88.   visibility: visible;
  89. }
  90.  
  91. /* The close 'x' button. */
  92. .close-button {
  93.   color: black;
  94.   cursor: pointer;
  95.   font-size: 26px;
  96.   height: 11px;
  97.   line-height: 15px;
  98.   margin: 15px;
  99.   opacity: .54;
  100.   padding: 0;
  101.   position: fixed;
  102.   right: 0;
  103.   top: 0;
  104.   width: 15px;
  105.   z-index: 1;
  106. }
  107.  
  108. html[dir=rtl] .close-button {
  109.   left: 0;
  110.   right: auto;
  111. }
  112.  
  113. @media (prefers-color-scheme: dark) {
  114.   .close-button {
  115.     color: rgb(var(--GG200-rgb));
  116.   }
  117. }
  118.  
  119. .close-button:hover {
  120.   opacity: .66;
  121. }
  122.  
  123. .close-button:active {
  124.   opacity: .78;
  125. }
  126.  
  127. /* The vertical positioning container. */
  128. .outer {
  129.   display: block;
  130.   height: 42px;
  131.   pointer-events: none;
  132.   position: absolute;
  133. }
  134.  
  135. /* Full Page visible and hidden state of the positioning container. */
  136. .overlay .outer,
  137. .overlay-hidden .outer {
  138.   margin: auto;
  139.   margin-top: 312px;
  140.   max-width: 572px;
  141.   min-width: 534px;
  142.   padding: 0 223px;
  143.   position: relative;
  144.   top: 0;
  145. }
  146.  
  147. /* Style for the inner container used for horizontal positioning. */
  148. .inner-container {
  149.   height: 100%;
  150.   opacity: .1;
  151.   pointer-events: none;
  152.   transition: opacity 318ms ease-in;
  153.   width: 100%;
  154. }
  155.  
  156. .voice-ml .inner-container,
  157. .voice-rs .inner-container,
  158. .voice-er .inner-container {
  159.   opacity: 1;
  160.   transition: opacity 0s;
  161. }
  162.  
  163. /* MICROPHONE BUTTON */
  164. /* Button with microphone icon in center from which pulses and vibrations
  165.  * emanate. */
  166. .button {
  167.   background-color: white;
  168.   border: 1px solid var(--light_grey);
  169.   border-radius: 100%;
  170.   bottom: 0;
  171.   box-shadow: 0 2px 5px var(--button_shadow);
  172.   cursor: pointer;
  173.   display: inline-block;
  174.   left: 0;
  175.   opacity: 0;
  176.   pointer-events: none;
  177.   position: absolute;
  178.   right: 0;
  179.   top: 0;
  180.   transition: background-color 218ms, border 218ms, box-shadow 218ms;
  181. }
  182.  
  183. @media (prefers-color-scheme: dark) {
  184.   .button {
  185.     background-color: rgb(var(--GG900-rgb));
  186.     border-color: rgba(0, 0, 0, .1);
  187.     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3),
  188.                 0 4px 8px 3px rgba(0, 0, 0, .15);
  189.   }
  190. }
  191.  
  192. /* Button state when speech recognition is inactive. */
  193. .overlay-hidden .button {
  194.   opacity: 0;
  195.   pointer-events: none;
  196.   position: absolute;
  197.   transition-delay: 0s;
  198. }
  199.  
  200. /* Button state when speech recognition is active. */
  201. .overlay .button {
  202.   opacity: 1;
  203.   pointer-events: auto;
  204.   position: absolute;
  205.   transition-delay: 0s;
  206. }
  207.  
  208. /* Button state when speech input is being received by the microphone. */
  209. .voice-rs .button {
  210.   background-color: var(--light_red);
  211.   border: 0;
  212.   box-shadow: none;
  213. }
  214.  
  215. @media (prefers-color-scheme: dark) {
  216.   .voice-rs .button {
  217.     background-color: rgb(var(--GR300-rgb));
  218.   }
  219. }
  220.  
  221. /* Vibrating input volume level. */
  222. .level {
  223.   background-color: var(--level_animation_color);
  224.   border-radius: 100%;
  225.   display: inline-block;
  226.   height: 301px;
  227.   left: -69px;
  228.   opacity: 1;
  229.   pointer-events: none;
  230.   position: absolute;
  231.   top: -69px;
  232.   transform: scale(.01);
  233.   transition: opacity 218ms;
  234.   width: 301px;
  235. }
  236.  
  237. @media (prefers-color-scheme: dark) {
  238.   .level {
  239.     background-color: rgb(var(--GG700-rgb));
  240.   }
  241. }
  242.  
  243. /* Container for scaling and positioning of the button. */
  244. .button-container {
  245.   float: right;
  246.   pointer-events: none;
  247.   position: relative;
  248.   transition: transform 218ms, opacity 218ms ease-in;
  249. }
  250.  
  251. html[dir=rtl] .button-container {
  252.   float: left;
  253. }
  254.  
  255. /* Common styles applied to the button-container. */
  256. .overlay .button-container,
  257. .overlay-hidden .button-container {
  258.   height: 165px;
  259.   right: -70px;
  260.   top: -70px;
  261.   width: 165px;
  262. }
  263.  
  264. html[dir=rtl] .overlay .button-container,
  265. html[dir=rtl] .overlay-hidden .button-container {
  266.   left: -70px;
  267.   right: auto;
  268. }
  269.  
  270. /* Container style when speech recognition is inactive. */
  271. .overlay-hidden .button-container {
  272.   transform: scale(.1);
  273. }
  274.  
  275. /* Style applied to the button when clicked in the 'receiving audio' state. */
  276. .voice-rs .button:active {
  277.   background-color: var(--dark_red);
  278. }
  279.  
  280. @media (prefers-color-scheme: dark) {
  281.   .voice-rs .button:active {
  282.     background-color: rgb(223, 128, 119);
  283.   }
  284. }
  285.  
  286. /* Style applied to the button when clicked. */
  287. .button:active {
  288.   background-color: var(--light_grey);
  289. }
  290.  
  291. @media (prefers-color-scheme: dark) {
  292.   .button:active {
  293.     background-color: rgb(53, 54, 57);
  294.   }
  295. }
  296.  
  297. /* TEXT */
  298. /* Classes:
  299.  *   - voice-text - Text area style class
  300.  *   - voice-text-2l - 2 line style class
  301.  *   - voice-text-3l - 3 line style class
  302.  *   - voice-text-4l - 4 line style class
  303.  *   - voice-text-5l - 5 line style class */
  304.  
  305. /* Styles applied to the positioning text-container element. */
  306. #text-container {
  307.   pointer-events: none;
  308. }
  309.  
  310. /* Full Page UI style for the text-container. */
  311. .overlay #text-container,
  312. .overlay-hidden #text-container {
  313.   position: absolute;
  314. }
  315.  
  316. /* This class is used to specify the speech recognition text formatting. */
  317. .voice-text {
  318.   font-weight: normal;
  319.   line-height: 1.2;
  320.   opacity: 0;
  321.   pointer-events: none;
  322.   position: absolute;
  323.   text-align: start;
  324.   transition: opacity 100ms ease-in, margin-inline-start 500ms ease-in,
  325.               top 0s linear 218ms;
  326. }
  327.  
  328. /* Recognition results text hidden in the Full Page UI. */
  329. .overlay-hidden .voice-text {
  330.   margin-inline-start: 44px;
  331. }
  332.  
  333. html[dir=rtl] .overlay-hidden .voice-text {
  334.   margin-inline-end: 44px;
  335.   margin-inline-start: 0;
  336. }
  337.  
  338. /* Styles applied to the text output elements. Common style for the text area
  339.  * class for the full Page UI. To vertically center the text as longer queries
  340.  * are wrapped, the 'top' position is specified in em here and below. */
  341. .overlay .voice-text,
  342. .overlay-hidden .voice-text {
  343.   font-size: 32px;
  344.   left: -44px;
  345.   top: -.2em;
  346.   width: 460px;
  347. }
  348.  
  349. html[dir=rtl] .overlay .voice-text,
  350. html[dir=rtl] .overlay-hidden .voice-text {
  351.   left: auto;
  352.   right: -44px;
  353. }
  354.  
  355. /* Common style for when the text areas are made visible. */
  356. .overlay .voice-text {
  357.   margin-inline-start: 0;
  358.   opacity: 1;
  359.   transition: opacity 500ms ease-out, margin-inline-start 500ms ease-out;
  360. }
  361.  
  362. html[dir=rtl] .overlay .voice-text {
  363.   margin-inline-end: 0;
  364.   margin-inline-start: auto;
  365. }
  366.  
  367. /* Interim (low confidence) text. */
  368. #voice-text-i {
  369.   color: var(--grey);
  370. }
  371.  
  372. @media (prefers-color-scheme: dark) {
  373.   #voice-text-i {
  374.     color: rgb(var(--GG500-rgb));
  375.   }
  376. }
  377.  
  378. /* Final (high confidence) text. */
  379. #voice-text-f {
  380.   color: black;
  381. }
  382.  
  383. @media (prefers-color-scheme: dark) {
  384.   #voice-text-f {
  385.     color: rgb(var(--GG200-rgb));
  386.   }
  387. }
  388.  
  389. /* Text area links. */
  390. .voice-text-link {
  391.   color: var(--text_link_color);
  392.   cursor: pointer;
  393.   font-size: 18px;
  394.   font-weight: 500;
  395.   pointer-events: auto;
  396.   text-decoration: underline;
  397. }
  398.  
  399. @media (prefers-color-scheme: dark) {
  400.   .voice-text-link {
  401.     color: rgb(var(--GB300-rgb));
  402.   }
  403. }
  404.  
  405. /* Range of motion for the typing animation. */
  406. @keyframes type {
  407.     from {
  408.       width: 0;
  409.     }
  410.     to {
  411.       width: 460px;
  412.     }
  413. }
  414.  
  415. /* Style to simulate typing the "Listening..." text. */
  416. .listening-animation {
  417.   animation: type 900ms steps(30, end);
  418.   overflow: hidden;
  419.   white-space: nowrap;
  420. }
  421.  
  422. /* Styles applied to simulate vertical scrolling. Common webkit transition
  423.  * style for vertical text scrolling. */
  424. .voice-text-2l.voice-text,
  425. .voice-text-3l.voice-text,
  426. .voice-text-4l.voice-text {
  427.   transition: top 218ms ease-out;
  428. }
  429.  
  430. /* When the text height is two lines. */
  431. .voice-text-2l.voice-text {
  432.   top: -.6em;
  433. }
  434.  
  435. /* When the text height is three lines. */
  436. .voice-text-3l.voice-text {
  437.   top: -1.3em;
  438. }
  439.  
  440. /* When the text height is four lines. */
  441. .voice-text-4l.voice-text {
  442.   top: -1.7em;
  443. }
  444.  
  445. /* When the text height is more than five lines, shift the text up. */
  446. .voice-text-5l.voice-text {
  447.   top: -2.5em;
  448. }
  449.  
  450. /* MICROPHONE ICON */
  451. /* The microphone icon is made up of 4 parts:
  452.  *   - the audio receiver,
  453.  *   - the shell that surrounds the lower half of the audio receiver,
  454.  *   - the stem that holds up the shell and the audio receiver,
  455.  *   - and a wrapper that positions the shell and stem.
  456.  *
  457.  *     /===\
  458.  *     |   |  <==== Audio receiver.
  459.  *     |   |
  460.  *  \  \===/  / <== Shell.
  461.  *   \_______/
  462.  *       |
  463.  *       |  <====== Stem. */
  464.  
  465. /* Container element for microphone icon. */
  466. .microphone {
  467.   direction: ltr;
  468.   height: 87px;
  469.   left: 43px;
  470.   pointer-events: none;
  471.   position: absolute;
  472.   top: 47px;
  473.   width: 42px;
  474. }
  475.  
  476. /* Part 1 of CSS-only microphone icon: the audio receiver.
  477.  * Positioned in the center. */
  478. .receiver {
  479.   background-color: var(--inactive_icon_color);
  480.   border-radius: 30px;
  481.   height: 46px;
  482.   left: 25px;
  483.   pointer-events: none;
  484.   position: absolute;
  485.   width: 24px;
  486. }
  487.  
  488. @media (prefers-color-scheme: dark) {
  489.   .receiver {
  490.     background-color: rgb(var(--GG500-rgb));
  491.   }
  492. }
  493.  
  494. /* Part 2 of CSS-only microphone icon: the shell and stem wrapper element.
  495.  * Positioned below the audio receiver element. */
  496. .wrapper {
  497.   bottom: 0;
  498.   height: 53px;
  499.   left: 11px;
  500.   overflow: hidden;
  501.   pointer-events: none;
  502.   position: absolute;
  503.   width: 52px;
  504. }
  505.  
  506. /* Part 3 of CSS-only microphone icon: the stem that supports the shell.
  507.  * Positioned below the audio receiver element and the shell element. */
  508. .stem {
  509.   background-color: var(--inactive_icon_color);
  510.   bottom: 14px;
  511.   height: 14px;
  512.   left: 22px;
  513.   pointer-events: none;
  514.   position: absolute;
  515.   width: 9px;
  516.   z-index: 1; /* z-index is only used to specify position relative to stem. */
  517. }
  518.  
  519. @media (prefers-color-scheme: dark) {
  520.   .stem {
  521.     background-color: rgb(var(--GG500-rgb));
  522.   }
  523. }
  524.  
  525. /* Part 4 of CSS-only microphone icon: shell that holds the receiver.
  526.  * Positioned below the audio receiver element and above the stem element. */
  527. .shell {
  528.   border: 7px solid var(--inactive_icon_color);
  529.   border-radius: 28px;
  530.   bottom: 27px;
  531.   height: 57px;
  532.   pointer-events: none;
  533.   position: absolute;
  534.   width: 38px;
  535.   z-index: 0; /* z-index is only used to specify position relative to stem. */
  536. }
  537.  
  538. @media (prefers-color-scheme: dark) {
  539.   .shell {
  540.     border-color: rgb(var(--GG500-rgb));
  541.   }
  542. }
  543.  
  544. /* The .voice-ml style is applied when the UI is in
  545.  * the 'listening for audio' state. */
  546. .voice-ml .receiver,
  547. .voice-ml .stem {
  548.   background-color: var(--listening_icon_color);
  549. }
  550.  
  551. @media (prefers-color-scheme: dark) {
  552.   .voice-ml .receiver,
  553.   .voice-ml .stem {
  554.     background-color: rgb(var(--GR300-rgb));
  555.   }
  556. }
  557.  
  558. .voice-ml .shell {
  559.   border-color: var(--listening_icon_color);
  560. }
  561.  
  562. @media (prefers-color-scheme: dark) {
  563.   .voice-ml .shell {
  564.     border-color: rgb(var(--GR300-rgb));
  565.   }
  566. }
  567.  
  568. /* The .voice-rs style is applied when the UI is in
  569.  * the 'receiving speech' state. */
  570. .voice-rs .receiver,
  571. .voice-rs .stem {
  572.   background-color: var(--active_icon_color);
  573. }
  574.  
  575. @media (prefers-color-scheme: dark) {
  576.   .voice-rs .receiver,
  577.   .voice-rs .stem {
  578.     background-color: rgb(var(--GG200-rgb));
  579.   }
  580. }
  581.  
  582. .voice-rs .shell {
  583.   border-color: var(--active_icon_color);
  584. }
  585.  
  586. @media (prefers-color-scheme: dark) {
  587.   .voice-rs .shell {
  588.     border-color: rgb(var(--GG200-rgb));
  589.   }
  590. }
Parsed in 0.079 seconds