Changes the keyboard background to a linear gradient.

BUG=332073

Review URL: https://codereview.chromium.org/148613007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@247732 0039d316-1c4b-4281-b951-d872f2087c98

ui/keyboard/resources/elements/kb-row.html

@@ -16,7 +16,7 @@
       margin-bottom: 0.25em;
     }
 
-    :host:nth-child(1)>:not(.dark) {
+    :host:nth-child(1)>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656;
       background-image: -webkit-linear-gradient(#636363, #5b5b5b);
       background-size: cover;
@@ -24,7 +24,7 @@
       border-top-color: #878787;
     }
 
-    :host:nth-child(2)>:not(.dark) {
+    :host:nth-child(2)>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c;
       background-image: -webkit-linear-gradient(#5a5a5a, #515151);
       background-size: cover;
@@ -32,7 +32,7 @@
       border-top-color: #7f7f7f;
     }
 
-    :host:nth-child(3)>:not(.dark) {
+    :host:nth-child(3)>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444;
       background-image: -webkit-linear-gradient(#505050, #494949);
       background-size: cover;
@@ -40,7 +40,7 @@
       border-top-color: #787878;
     }
 
-    :host:nth-child(4)>:not(.dark) {
+    :host:nth-child(4)>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
       background-image: -webkit-linear-gradient(#484848, #474747);
       background-size: cover;
@@ -48,7 +48,7 @@
       border-top-color: #717171;
     }
 
-    :host>:not(.dark) {
+    :host>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
       background-image: -webkit-linear-gradient(#484848, #474747);
       background-size: cover;

ui/keyboard/resources/main.css

@@ -6,7 +6,8 @@
 
 body {
   -webkit-user-select: none;
-  background-color: #151515;
+  background-image: -webkit-linear-gradient(#282828, #000000);
+  background-size: cover;
   margin: 0;
   overflow: hidden;
   padding: 0;
@@ -25,25 +26,33 @@ kb-keyboard:not(.caps-locked)[keyset=upper] kb-shift-key {
   color: #d5d5d5;
 }
 
-*.dark {
+.dark {
+  font-size: 70%;
+}
+
+.dark:not(.active) {
   -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020;
   background-color: #222222;
   border-bottom-color: #1c1c1c;
   border-top-color: #4f4f4f;
-  font-size: 70%;
 }
 
+.caps-locked kb-shift-key.dark,
+.active {
+  -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f;
+  border-bottom-color: #5b5b5b;
+  border-top-color: #a4a4a4;
+}
+
+.caps-locked kb-shift-key.dark,
+.active:not(.dark) {
+  background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
+  background-size: cover;
+}
 
 .caps-locked kb-shift-key,
-.active {
-  -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f !important;
-  /**
-   * TODO(rsadam): Make active keys have a linear gradient once we figure out
-   * how to handle keys that already have background images.
-   */
+.active.dark {
   background-color: #8b8b8b;
-  border-bottom-color: #5b5b5b !important;
-  border-top-color: #a4a4a4 !important;
 }
 
 /**