chrome/browser/resources/hotword_audio_verification/style.css

/* Copyright 2014 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. */

/* TODO(xdai): Remove hard-coded font-family for 'Roboto'. */

* {
  box-sizing: border-box;
  color: rgba(0, 0, 0, .54);
  font-family: Roboto, 'Noto Sans', sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

#start-container * {
  color: #fff;
}

#start-container h2 {
  font-size: 15px;
  font-weight: normal;
  line-height: 24px;
  margin-top: 16px;
}

#start-container h3 {
  font-weight: normal;
  margin: 42px 16px 24px 16px;
}

#start-container div.container {
  background: rgb(66, 133, 244);
}

div.intro-image {
  background: -webkit-image-set(
      url(../images/intro-1x.png) 1x,
      url(../images/intro-2x.png) 2x)
      no-repeat;
  height: 152px;
  left: 24px;
  position: absolute;
  top: 122px;
  width: 304px;
}

div.intro-text {
  left: 328px;
  position: absolute;
  text-align: center;
  top: 116px;
  width: 432px;
}

#start-container div.buttonbar {
  background-color: rgb(51, 103, 214);
  height: 56px;
  padding: 0;
  text-align: center;
}

#start-container .buttonbar button {
  height: 100%;
  margin: 0;
  padding: 0 8px;
  width: 100%;
}

a {
  -webkit-app-region: no-drag;
  color: rgb(51, 103, 214);
  text-decoration: none;
}

button {
  -webkit-app-region: no-drag;
}

body {
  -webkit-app-region: drag;
  background: #ddd;
}

h1 {
  font-size: 20px;
  font-weight: normal;
  line-height: 32px;
}

h3 {
  font-size: 13px;
  line-height: 20px;
}

div.container {
  background: #fff;
  height: 448px;
  position: relative;
  width: 784px;
}

div.header {
  background: -webkit-image-set(
      url(../images/gradient-1x.png) 1x,
      url(../images/gradient-2x.png) 2x)
      no-repeat;
  height: 128px;
  padding: 70px 42px 0 42px;
}

div.header h1 {
  color: #fff;
}

div.content {
  height: 264px;
  line-height: 20px;
  padding: 32px 42px 0 42px;
}

div.content h3 {
  color: rgba(0, 0, 0, .87);
  margin-bottom: 16px;
}

div.col-2 {
  color: rgba(0, 0, 0, .54);
  float: left;
  width: 320px;
}

div.col-spacing {
  float: left;
  height: 216px;
  width: 60px;
}

div.v-spacing {
  height: 8px;
}

a[is='action-link'] {
  display: inline-block;
  font-size: 14px;
  margin-top: 22px;
  text-decoration: none;
  text-transform: uppercase;
}

.train {
  clear: both;
  line-height: 18px;
  margin-bottom: 24px;
}

.train .icon {
  display: inline-block;
  height: 18px;
  margin-right: 8px;
  vertical-align: top;
  width: 18px;
}

.train .text {
  color: rgba(0, 0, 0, .54);
  display: inline-block;
  line-height: 13px;
  padding-top: 3px;
  vertical-align: top;
}

.train.recorded .text {
  color: rgba(66, 133, 244, 1);
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0); }
  to { -webkit-transform: rotate(359deg); }
}

.train.listening .icon {
  -webkit-animation: rotate 2s linear infinite;
  background: -webkit-image-set(
      url(../images/placeholder-loader-1x.png) 1x,
      url(../images/placeholder-loader-2x.png) 2x)
      no-repeat;
}

.train.not-started .icon {
  background: -webkit-image-set(
      url(../images/ic-check-gray-1x.png) 1x,
      url(../images/ic-check-gray-2x.png) 2x)
      no-repeat;
}

.train.recorded .icon {
  background: -webkit-image-set(
      url(../images/ic-check-blue-1x.png) 1x,
      url(../images/ic-check-blue-2x.png) 2x)
      no-repeat;
}

.check {
  clear: both;
  height: 18px;
  margin-bottom: 24px;
}

.check .icon {
  background: -webkit-image-set(
      url(../images/ic-check-blue-1x.png) 1x,
      url(../images/ic-check-blue-2x.png) 2x)
      no-repeat;
  display: inline-block;
  height: 18px;
  margin-right: 8px;
  vertical-align: top;
  width: 18px;
}

.check .text {
  color: rgba(0, 0, 0, .54);
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding-top: 2px;
  vertical-align: top;
}

div.buttonbar {
  background-color: rgba(236,239, 241, 1);
  bottom: 0;
  height: 56px;
  padding: 12px;
  position: absolute;
  width: 100%;
}

.buttonbar button {
  background: none;
  border: none;
  display: inline-block;
  font-weight: 700;
  height: 32px;
  line-height: 32px;
  margin-left: 8px;
  min-width: 56px;
  padding: 1px 8px 0 8px;
  text-transform: uppercase;
}

.buttonbar button:disabled {
  opacity: .5;
}

.buttonbar button.grayed-out {
  color: rgba(0, 0, 0, .28);
  text-transform: none;
}

.buttonbar button.primary {
  color: rgb(51, 103, 214);
}

.buttonbar .left {
  float: left;
  text-align: left;
}

.buttonbar .left button:first-child {
  margin-left: 0;
}

.buttonbar .right {
  float: right;
  text-align: right;
}

.buttonbar .message {
  margin: 7px 0 0 2px;
}

.buttonbar .message .icon {
  display: inline-block;
  height: 18px;
  margin-right: 8px;
  vertical-align: top;
  width: 18px;
}

.buttonbar .message.wait .icon {
  -webkit-animation: rotate 2s linear infinite;
  background: -webkit-image-set(
      url(../images/placeholder-loader-1x.png) 1x,
      url(../images/placeholder-loader-2x.png) 2x)
      no-repeat;
}

.buttonbar .message.error .icon {
  background: -webkit-image-set(
      url(../images/ic-error-1x.png) 1x,
      url(../images/ic-error-2x.png) 2x)
      no-repeat;
}

.buttonbar .message .text {
  color: rgba(0, 0, 0, .54);
  display: inline-block;
  line-height: 18px;
  padding-top: 2px;
  vertical-align: top;
}

.buttonbar .message.error .text {
  color: rgb(213, 0, 0);
}

.close {
  -webkit-app-region: no-drag;
  background: -webkit-image-set(
      url(../images/ic-x-white-1x.png) 1x,
      url(../images/ic-x-white-2x.png) 2x)
      center center no-repeat;
  border: none;
  float: right;
  height: 42px;
  opacity: .54;
  width: 42px;
}

.close:hover {
  opacity: 1;
}

.toast {
  background-color: rgb(38, 50, 56);
  bottom: 0;
  height: 52px;
  padding: 10px 12px 0 42px;
  position: absolute;
  width: 100%;
}

.toast .message {
  color: #fff;
  float: left;
  padding: 9px 0 0 0;
}

.toast button {
  background: none;
  border: none;
  color: rgb(58, 218, 255);
  float: right;
  height: 32px;
  margin-left: 18px;
  min-width: 56px;
  padding: 0 8px 0 8px;
  text-transform: uppercase;
}