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 /* TODO(xdai): Remove hard-coded font-family for 'Roboto'. */
   6
   7 * {
   8   box-sizing: border-box;
   9   color: rgba(0, 0, 0, .54);
  10   font-family: Roboto, 'Noto Sans', sans-serif;
  11   font-size: 13px;
  12   margin: 0;
  13   padding: 0;
  14 }
  15
  16 #start-container * {
  17   color: #fff;
  18 }
  19
  20 #start-container h2 {
  21   font-size: 15px;
  22   font-weight: normal;
  23   line-height: 24px;
  24   margin-top: 16px;
  25 }
  26
  27 #start-container h3 {
  28   font-weight: normal;
  29   margin: 42px 16px 24px 16px;
  30 }
  31
  32 #start-container div.container {
  33   background: rgb(66, 133, 244);
  34 }
  35
  36 div.intro-image {
  37   background: -webkit-image-set(
  38       url(../images/intro-1x.png) 1x,
  39       url(../images/intro-2x.png) 2x)
  40       no-repeat;
  41   height: 152px;
  42   left: 24px;
  43   position: absolute;
  44   top: 122px;
  45   width: 304px;
  46 }
  47
  48 div.intro-text {
  49   left: 328px;
  50   position: absolute;
  51   text-align: center;
  52   top: 116px;
  53   width: 432px;
  54 }
  55
  56 #start-container div.buttonbar {
  57   background-color: rgb(51, 103, 214);
  58   height: 56px;
  59   padding: 0;
  60   text-align: center;
  61 }
  62
  63 #start-container .buttonbar button {
  64   height: 100%;
  65   margin: 0;
  66   padding: 0 8px;
  67   width: 100%;
  68 }
  69
  70 a {
  71   -webkit-app-region: no-drag;
  72   color: rgb(51, 103, 214);
  73   text-decoration: none;
  74 }
  75
  76 button {
  77   -webkit-app-region: no-drag;
  78 }
  79
  80 body {
  81   -webkit-app-region: drag;
  82   background: #ddd;
  83 }
  84
  85 h1 {
  86   font-size: 20px;
  87   font-weight: normal;
  88   line-height: 32px;
  89 }
  90
  91 h3 {
  92   font-size: 13px;
  93   line-height: 20px;
  94 }
  95
  96 div.container {
  97   background: #fff;
  98   height: 448px;
  99   position: relative;
 100   width: 784px;
 101 }
 102
 103 div.header {
 104   background: -webkit-image-set(
 105       url(../images/gradient-1x.png) 1x,
 106       url(../images/gradient-2x.png) 2x)
 107       no-repeat;
 108   height: 128px;
 109   padding: 70px 42px 0 42px;
 110 }
 111
 112 div.header h1 {
 113   color: #fff;
 114 }
 115
 116 div.content {
 117   height: 264px;
 118   line-height: 20px;
 119   padding: 32px 42px 0 42px;
 120 }
 121
 122 div.content h3 {
 123   color: rgba(0, 0, 0, .87);
 124   margin-bottom: 16px;
 125 }
 126
 127 div.col-2 {
 128   color: rgba(0, 0, 0, .54);
 129   float: left;
 130   width: 320px;
 131 }
 132
 133 div.col-spacing {
 134   float: left;
 135   height: 216px;
 136   width: 60px;
 137 }
 138
 139 div.v-spacing {
 140   height: 8px;
 141 }
 142
 143 a[is='action-link'] {
 144   display: inline-block;
 145   font-size: 14px;
 146   margin-top: 22px;
 147   text-decoration: none;
 148   text-transform: uppercase;
 149 }
 150
 151 .train {
 152   clear: both;
 153   line-height: 18px;
 154   margin-bottom: 24px;
 155 }
 156
 157 .train .icon {
 158   display: inline-block;
 159   height: 18px;
 160   margin-right: 8px;
 161   vertical-align: top;
 162   width: 18px;
 163 }
 164
 165 .train .text {
 166   color: rgba(0, 0, 0, .54);
 167   display: inline-block;
 168   line-height: 13px;
 169   padding-top: 3px;
 170   vertical-align: top;
 171 }
 172
 173 .train.recorded .text {
 174   color: rgba(66, 133, 244, 1);
 175 }
 176
 177 @-webkit-keyframes rotate {
 178   from { -webkit-transform: rotate(0); }
 179   to { -webkit-transform: rotate(359deg); }
 180 }
 181
 182 .train.listening .icon {
 183   -webkit-animation: rotate 2s linear infinite;
 184   background: -webkit-image-set(
 185       url(../images/placeholder-loader-1x.png) 1x,
 186       url(../images/placeholder-loader-2x.png) 2x)
 187       no-repeat;
 188 }
 189
 190 .train.not-started .icon {
 191   background: -webkit-image-set(
 192       url(../images/ic-check-gray-1x.png) 1x,
 193       url(../images/ic-check-gray-2x.png) 2x)
 194       no-repeat;
 195 }
 196
 197 .train.recorded .icon {
 198   background: -webkit-image-set(
 199       url(../images/ic-check-blue-1x.png) 1x,
 200       url(../images/ic-check-blue-2x.png) 2x)
 201       no-repeat;
 202 }
 203
 204 .check {
 205   clear: both;
 206   height: 18px;
 207   margin-bottom: 24px;
 208 }
 209
 210 .check .icon {
 211   background: -webkit-image-set(
 212       url(../images/ic-check-blue-1x.png) 1x,
 213       url(../images/ic-check-blue-2x.png) 2x)
 214       no-repeat;
 215   display: inline-block;
 216   height: 18px;
 217   margin-right: 8px;
 218   vertical-align: top;
 219   width: 18px;
 220 }
 221
 222 .check .text {
 223   color: rgba(0, 0, 0, .54);
 224   display: inline-block;
 225   height: 18px;
 226   line-height: 18px;
 227   padding-top: 2px;
 228   vertical-align: top;
 229 }
 230
 231 div.buttonbar {
 232   background-color: rgba(236,239, 241, 1);
 233   bottom: 0;
 234   height: 56px;
 235   padding: 12px;
 236   position: absolute;
 237   width: 100%;
 238 }
 239
 240 .buttonbar button {
 241   background: none;
 242   border: none;
 243   display: inline-block;
 244   font-weight: 700;
 245   height: 32px;
 246   line-height: 32px;
 247   margin-left: 8px;
 248   min-width: 56px;
 249   padding: 1px 8px 0 8px;
 250   text-transform: uppercase;
 251 }
 252
 253 .buttonbar button:disabled {
 254   opacity: .5;
 255 }
 256
 257 .buttonbar button.grayed-out {
 258   color: rgba(0, 0, 0, .28);
 259   text-transform: none;
 260 }
 261
 262 .buttonbar button.primary {
 263   color: rgb(51, 103, 214);
 264 }
 265
 266 .buttonbar .left {
 267   float: left;
 268   text-align: left;
 269 }
 270
 271 .buttonbar .left button:first-child {
 272   margin-left: 0;
 273 }
 274
 275 .buttonbar .right {
 276   float: right;
 277   text-align: right;
 278 }
 279
 280 .buttonbar .message {
 281   margin: 7px 0 0 2px;
 282 }
 283
 284 .buttonbar .message .icon {
 285   display: inline-block;
 286   height: 18px;
 287   margin-right: 8px;
 288   vertical-align: top;
 289   width: 18px;
 290 }
 291
 292 .buttonbar .message.wait .icon {
 293   -webkit-animation: rotate 2s linear infinite;
 294   background: -webkit-image-set(
 295       url(../images/placeholder-loader-1x.png) 1x,
 296       url(../images/placeholder-loader-2x.png) 2x)
 297       no-repeat;
 298 }
 299
 300 .buttonbar .message.error .icon {
 301   background: -webkit-image-set(
 302       url(../images/ic-error-1x.png) 1x,
 303       url(../images/ic-error-2x.png) 2x)
 304       no-repeat;
 305 }
 306
 307 .buttonbar .message .text {
 308   color: rgba(0, 0, 0, .54);
 309   display: inline-block;
 310   line-height: 18px;
 311   padding-top: 2px;
 312   vertical-align: top;
 313 }
 314
 315 .buttonbar .message.error .text {
 316   color: rgb(213, 0, 0);
 317 }
 318
 319 .close {
 320   -webkit-app-region: no-drag;
 321   background: -webkit-image-set(
 322       url(../images/ic-x-white-1x.png) 1x,
 323       url(../images/ic-x-white-2x.png) 2x)
 324       center center no-repeat;
 325   border: none;
 326   float: right;
 327   height: 42px;
 328   opacity: .54;
 329   width: 42px;
 330 }
 331
 332 .close:hover {
 333   opacity: 1;
 334 }
 335
 336 .toast {
 337   background-color: rgb(38, 50, 56);
 338   bottom: 0;
 339   height: 52px;
 340   padding: 10px 12px 0 42px;
 341   position: absolute;
 342   width: 100%;
 343 }
 344
 345 .toast .message {
 346   color: #fff;
 347   float: left;
 348   padding: 9px 0 0 0;
 349 }
 350
 351 .toast button {
 352   background: none;
 353   border: none;
 354   color: rgb(58, 218, 255);
 355   float: right;
 356   height: 32px;
 357   margin-left: 18px;
 358   min-width: 56px;
 359   padding: 0 8px 0 8px;
 360   text-transform: uppercase;
 361 }