Hotword Audio Verification App: UI Polishes

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. */
 
 * {
   box-sizing: border-box;
   color: rgba(0, 0, 0, .87);
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   margin: 0;
@@ skipping 25 matching lines @@
 }
 
 div.container {
   background: #fff;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
   height: 600px;
   width: 800px;
 }
 
 div.header {
-  background: url(../images/header-optin-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/header-optin-1x.png) 1x,
+      url(../images/header-optin-2x.png) 2x)
+      no-repeat;
   height: 240px;
   vertical-align: bottom;
 }
 
 div.header-text {
   height: 240px;
   padding: 60px;
 }
 
 div.header-text h1 {
   color: #fff;
   margin-top: 44px;
 }
 
 div.header-text h2 {
   color: #fff;
   margin-top: 20px;
 }
 
 div.content {
   height: 240px;
   margin: 60px 60px auto 60px;
 }
 
 .close {
-  background: url(../images/bt-close-1x.png);
+  background: -webkit-image-set(
+      url(../images/bt-close-1x.png) 1x,
+      url(../images/bt-close-2x.png) 2x);
   float: right;
   height: 60px;
   width: 60px;
 }
 
 
 .buttonbar button.grayed-out {
   color: rgba(0, 0, 0, .28);
   text-transform: none;
 }
@@ skipping 98 matching lines @@
   color: rgb(213, 0, 0);
 }
 
 @-webkit-keyframes rotate {
   from { -webkit-transform: rotate(0); }
   to { -webkit-transform: rotate(359deg); }
 }
 
 .train.listening .icon {
   -webkit-animation: rotate 2s linear infinite;
-  background: url(../images/placeholder-loader-1x.png) no-repeat;
+  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: url(../images/ic-check-gray-1x.png) no-repeat;
+  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: url(../images/ic-check-blue-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-check-blue-1x.png) 1x,
+      url(../images/ic-check-blue-2x.png) 2x)
+      no-repeat;
 }
 
 .train.error .icon {
-  background: url(../images/placeholder-loader-error-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-error-1x.png) 1x,
+      url(../images/ic-error-2x.png) 2x)
+      no-repeat;
 }
 
 .mic {
-  background: url(../images/mic-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/mic-1x.png) 1x,
+      url(../images/mic-2x.png) 2x)
+      no-repeat;
   height: 80px;
   left: 666px;
   position: absolute;
   top: 200px;
   width: 80px;
 }
 
 .check {
   clear: both;
   height: 24px;
   margin-bottom: 24px;
 }
 
 .check .icon {
-  background: url(../images/ic-check-blue-1x.png) no-repeat;
+  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: 24px;
   margin-right: 16px;
   vertical-align: top;
   width: 24px;
 }
 
 .check .text {
   color: rgba(0, 0, 0, .54);
   display: inline-block;
   height: 24px;
   line-height: 24px;
   vertical-align: top;
 }