src/chrome/browser/resources/hotword_audio_verification/style.css

   1 /* Copyright 2014 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 * {
   6   box-sizing: border-box;
   7   color: rgba(0, 0, 0, .87);
   8   font-family: Helvetica, sans-serif;
   9   font-size: 14px;
  10   margin: 0;
  11   padding: 0;
  12 }
  13
  14 a {
  15   color: rgb(67, 133, 244);
  16   text-decoration: none;
  17 }
  18
  19 body {
  20   background: #ddd;
  21 }
  22
  23 h1 {
  24   font-size: 34px;
  25   font-weight: normal;
  26   line-height: 40px;
  27 }
  28
  29 h2 {
  30   font-size: 16px;
  31   font-weight: normal;
  32 }
  33
  34 h4 {
  35   font-size: 14px;
  36 }
  37
  38 div.container {
  39   background: #fff;
  40   box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  41   height: 600px;
  42   width: 800px;
  43 }
  44
  45 div.header {
  46   background: -webkit-image-set(
  47       url(../images/header-optin-1x.png) 1x,
  48       url(../images/header-optin-2x.png) 2x)
  49       no-repeat;
  50   height: 240px;
  51   vertical-align: bottom;
  52 }
  53
  54 div.header-text {
  55   height: 240px;
  56   padding: 60px;
  57 }
  58
  59 div.header-text h1 {
  60   color: #fff;
  61   margin-top: 44px;
  62 }
  63
  64 div.header-text h2 {
  65   color: #fff;
  66   margin-top: 20px;
  67 }
  68
  69 div.content {
  70   height: 240px;
  71   margin: 60px 60px auto 60px;
  72 }
  73
  74 .close {
  75   background: -webkit-image-set(
  76       url(../images/bt-close-1x.png) 1x,
  77       url(../images/bt-close-2x.png) 2x);
  78   float: right;
  79   height: 60px;
  80   width: 60px;
  81 }
  82
  83
  84 .buttonbar button.grayed-out {
  85   color: rgba(0, 0, 0, .28);
  86   text-transform: none;
  87 }
  88
  89 .col-3 {
  90   color: rgba(0, 0, 0, .54);
  91   line-height: 24px;
  92   width: 504px;
  93 }
  94
  95 .col-3 h4 {
  96   line-height: 100%;
  97   margin-bottom: 27px;
  98 }
  99
 100 .col-2 {
 101   color: rgba(0, 0, 0, .54);
 102   float: left;
 103   line-height: 24px;
 104   width: 332px;
 105 }
 106
 107 .col-2 h4 {
 108   line-height: 100%;
 109   margin-top: 27px;
 110 }
 111
 112 .col-spacing {
 113   float: left;
 114   height: 160px;
 115   width: 16px;
 116 }
 117
 118 a[is='action-link'] {
 119   display: inline-block;
 120   font-size: 14px;
 121   margin-top: 22px;
 122   text-decoration: none;
 123   text-transform: uppercase;
 124 }
 125
 126 div.buttonbar {
 127   background: rgba(0, 0, 0, .06);
 128   height: 60px;
 129   padding: 12px 60px;
 130 }
 131
 132 .buttonbar button {
 133   background: none;
 134   border: none;
 135   border-radius: 2px;
 136   float: right;
 137   height: 36px;
 138   margin-left: 8px;
 139   min-width: 88px;
 140   padding: 8px;
 141   text-transform: uppercase;
 142 }
 143
 144 button.primary {
 145   color: rgb(67, 133, 244);
 146 }
 147
 148 .v-spacing-for-no-subheading {
 149   height: 43px;
 150 }
 151
 152 .train {
 153   clear: both;
 154   margin-bottom: 24px;
 155   white-space: nowrap;
 156 }
 157
 158 .train .icon {
 159   display: inline-block;
 160   height: 24px;
 161   margin-right: 16px;
 162   vertical-align: top;
 163   width: 24px;
 164 }
 165
 166 .train .text {
 167   display: inline-block;
 168   line-height: 24px;
 169   vertical-align: top;
 170   width: 292px;
 171 }
 172
 173 .train.listening .text {
 174   color: rgba(0, 0, 0, .87);
 175 }
 176
 177 .train.not-started .text {
 178   color: rgba(0, 0, 0, .54);
 179 }
 180
 181 .train.recorded .text {
 182   color: rgba(66, 133, 244, 1);
 183 }
 184
 185 .train.error .text {
 186   color: rgb(213, 0, 0);
 187 }
 188
 189 @-webkit-keyframes rotate {
 190   from { -webkit-transform: rotate(0); }
 191   to { -webkit-transform: rotate(359deg); }
 192 }
 193
 194 .train.listening .icon {
 195   -webkit-animation: rotate 2s linear infinite;
 196   background: -webkit-image-set(
 197       url(../images/placeholder-loader-1x.png) 1x,
 198       url(../images/placeholder-loader-2x.png) 2x)
 199       no-repeat;
 200 }
 201
 202 .train.not-started .icon {
 203   background: -webkit-image-set(
 204       url(../images/ic-check-gray-1x.png) 1x,
 205       url(../images/ic-check-gray-2x.png) 2x)
 206       no-repeat;
 207 }
 208
 209 .train.recorded .icon {
 210   background: -webkit-image-set(
 211       url(../images/ic-check-blue-1x.png) 1x,
 212       url(../images/ic-check-blue-2x.png) 2x)
 213       no-repeat;
 214 }
 215
 216 .train.error .icon {
 217   background: -webkit-image-set(
 218       url(../images/ic-error-1x.png) 1x,
 219       url(../images/ic-error-2x.png) 2x)
 220       no-repeat;
 221 }
 222
 223 .mic {
 224   background: -webkit-image-set(
 225       url(../images/mic-1x.png) 1x,
 226       url(../images/mic-2x.png) 2x)
 227       no-repeat;
 228   height: 80px;
 229   left: 666px;
 230   position: absolute;
 231   top: 200px;
 232   width: 80px;
 233 }
 234
 235 .check {
 236   clear: both;
 237   height: 24px;
 238   margin-bottom: 24px;
 239 }
 240
 241 .check .icon {
 242   background: -webkit-image-set(
 243       url(../images/ic-check-blue-1x.png) 1x,
 244       url(../images/ic-check-blue-2x.png) 2x)
 245       no-repeat;
 246   display: inline-block;
 247   height: 24px;
 248   margin-right: 16px;
 249   vertical-align: top;
 250   width: 24px;
 251 }
 252
 253 .check .text {
 254   color: rgba(0, 0, 0, .54);
 255   display: inline-block;
 256   height: 24px;
 257   line-height: 24px;
 258   vertical-align: top;
 259 }