Style the extensions virtual keyboard

ui/keyboard/resources/main.css

 /*
  Copyright (c) 2013 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.
 */
 
 body {
   -webkit-box-pack: center;
   -webkit-user-select: none;
   background-color: #0b0b0b;
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   padding: 0;
 }
 
 kb-keyboard {
   -webkit-box-orient: vertical;
   display: -webkit-box;
   max-width: 1280px;
   width: 1280px;
 }
 
 kb-key {
-  background-color: #444444;
-  border-top: 1px solid #666666;
-  border-radius: 3px;
+  background-color: #3b3b3e;
+  border-top: 2px solid #4b4b4e;
+  border-radius: 2px;
   color: #ffffff;
-  font-family: sans-serif;
-  font-weight: 100;
-  margin-left: 5px;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  margin-left: 7px;
 }
 
 kb-key.dark {
-  background-color: #333333;
+  background-color: #2a2a2c;
+  border-top: 2px solid #3a3a3c;
 }
 
 #upper .left-shift,
 #upper .right-shift,
 .active {
-  background-color: #acacac !important;
-  border-top: 1px solid rgba(125,125,125,0.5);
+  background-color: #848490 !important;
+  border-top: 2px solid #A9A9AF !important;
   /* Do not use box shadow until performance improves
    * http://code.google.com/p/chromium/issues/detail?id=99045
   box-shadow: 0px 0px 15px #fff;
   */
 }
 
 .at,
 .com,
 .comma,
 .hide,
 .mic,
 .period,
 .tab {
   -webkit-box-flex: 1.3 !important;

[bshe, 2013/06/20 19:41:51]

value of .tab and .backspace may also need to change. It seems you increased the
total flex value of second and third row by 0.6 if I understand correctly?

[SteveT, 2013/06/20 20:58:33]

Nope, this is intentional. We actually want to keep the tab and backspace keys
slightly smaller than the new elongated shift and return keys. This is for
aesthetics, mostly, but we might change this in the future if it doesn't
function well.

Thanks for catching that, though.

 }
 
-.symbol,
 .return {
+  -webkit-box-flex: 2.1 !important;
+}
+
+.symbol {
   -webkit-box-flex: 1.5 !important;
 }
 
 .backspace {
   -webkit-box-flex: 1.7 !important;
 }
 
 .left-shift,
 .left-more {
-  -webkit-box-flex: 1.4 !important;
+  -webkit-box-flex: 1.8 !important;
 }
 
 .right-shift,
 .right-more {
-  -webkit-box-flex: 1.6 !important;
+  -webkit-box-flex: 1.8 !important;
 }
 
 .space {
   -webkit-box-flex: 4.8 !important;
 }
 
 .bar {
   -webkit-box-flex: 0.6 !important;
 }
 
 .backspace,
-.tab,
+.dotcom,
+.left-more,
+.left-shift,
+.moddown.shift,
 .return,
-.left-shift,
+.right-more,
 .right-shift,
-.left-more,
-.right-more,
 .symbol,
-.moddown.shift {
-  font-size: 80%;
+.tab {
+  font-size: 70%;
 }
 
 .mic {
   background-image: url('images/mic.svg');
 }
 
 .audio .mic {
   background-image: url('images/mic-green.svg');
 }
 
 .hide {
   background-image: url('images/keyboard.svg');
 }