Web Component Virtual Keyboard

ui/keyboard/resources/webui/main.css

Index: ui/keyboard/resources/webui/main.css
diff --git a/ui/keyboard/resources/webui/main.css b/ui/keyboard/resources/webui/main.css
index 0a5e3b50ca0d8d13e3eabef2581267da98afd8cb..244332b3ec53ffb0979f9efd6821e68e10f27365 100644
--- a/ui/keyboard/resources/webui/main.css
+++ b/ui/keyboard/resources/webui/main.css
@@ -7,189 +7,100 @@
 body {
   -webkit-box-pack: center;
   -webkit-user-select: none;
-  color: white;
+  background-color: #0b0b0b;
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   padding: 0;
 }
 
-div.main {
+kb-keyboard {
   -webkit-box-orient: vertical;
-  background: -webkit-linear-gradient(#bababa, #868686) no-repeat;
   display: -webkit-box;
 }
 
-div.keyboard {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-  margin: 0 auto;
-  text-align: center;
-}
-
-div.rows {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  margin-bottom: 3px;
-  text-align: center;
-}
-
-div.row {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-  margin-right: 3px;
-  margin-top: 3px;
-}
-
-div.row > div {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-}
-
-.panel {
-  border: 0;
-  clear: both;
-  margin-left: 5px;
-  text-align: left;
-}
-
-.backspace > div {
-  background-image: url('images/del.svg');
-}
-
-.tab > div {
-  background-image: url('images/tab.svg');
-}
-
-.return > div {
-  background-image: url('images/ret.svg');
-}
-
-.mic > div {
-  background-image: url('images/mic.svg');
-}
-
-.mic.start > div {
-  background-image: url('images/mic-green.svg');
-}
-
-.button {
-  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
-}
-.button:active {
-  background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111));
-}
-
-.auxiliary:active {
-  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
-}
-
-.key {
-  -webkit-box-flex: 1;
-  background: -webkit-linear-gradient(#fff, #cacaca);
-  border: 1px solid transparent;
+kb-key {
+  background-color: #444444;
+  border-top: 1px solid #666666;
   border-radius: 3px;
-  /* Reserving equivalent space to .key:active so
-     keys don't shift when selected. */
-  /* Do not use box shadow until performance improves
-   * http://code.google.com/p/chromium/issues/detail?id=99045
-  box-shadow: 0px 1px 1px #000;
-  */
-  color: #535353;
-  display: -webkit-box;
+  color: #ffffff;
   font-family: sans-serif;
   font-weight: 100;
   margin-left: 3px;
-  position: relative;
 }
 
-.key > div {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
+kb-key.dark {
+  background-color: #333333;
 }
 
-.key:active {
-  background: -webkit-linear-gradient(#d6d6d6, #acacac);
-  border: 1px solid rgba(125,125,125,0.5);
+#upper .left-shift,
+#upper .right-shift,
+#symbol .symbol,
+#more .symbol,
+#more .left-more,
+#more .right-more,
+.active {
+  background-color: #acacac !important;
+  border-top: 1px solid rgba(125,125,125,0.5);
   /* Do not use box shadow until performance improves
    * http://code.google.com/p/chromium/issues/detail?id=99045
   box-shadow: 0px 0px 15px #fff;
   */
 }
 
-div.moddown {
-  background: -webkit-linear-gradient(#d6d6d6, #acacac);
-  border-color: rgb(48, 74, 155);
-}
-
-.image-key {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 100%;
-  width: 100%;
-}
-
-.text-key {
-  height: 1.2em;
-}
-
-
-.shift > div.image-key {
-  background-image: url('images/shift.svg');
-}
-
-.moddown.shift > div.image-key {
-  background-image: url('images/shift-down.svg');
-}
-
-.hide > div {
-  background-image: url('images/keyboard.svg');
-}
-
 .at,
 .com,
 .comma,
 .hide,
 .mic,
-.period {
-  -webkit-box-flex: 1.3;
+.period,
+.tab {
+  -webkit-box-flex: 1.3 !important;
 }
 
 .symbol,
-.shift {
-  -webkit-box-flex: 1.4;
-}
-
 .return {
-  -webkit-box-flex: 1.5;
+  -webkit-box-flex: 1.5 !important;
 }
 
 .backspace {
-  -webkit-box-flex: 1.6;
+  -webkit-box-flex: 1.7 !important;
 }
 
-.left-shift {
-  -webkit-box-flex: 1.8;
+.left-shift,
+.left-more {
+  -webkit-box-flex: 1.4 !important;
 }
 
-.right-shift {
-  -webkit-box-flex: 2.0;
+.right-shift,
+.right-more {
+  -webkit-box-flex: 1.6 !important;
 }
 
 .space {
-  -webkit-box-flex: 4.8;
+  -webkit-box-flex: 4.8 !important;
 }
 
 .bar {
-  -webkit-box-flex: 0.6;
+  -webkit-box-flex: 0.6 !important;
 }
 
-.nodisplay {
-  display: none;
+.backspace,
+.tab,
+.return,
+.left-shift,
+.right-shift,
+.left-more,
+.right-more,
+.symbol,
+.moddown.shift {
+  font-size: 80%;
+}
+
+.mic {

[bshe, 2013/05/24 14:43:50]

Looks like the mic key still exists in the mock. I will fix the svg issue in a
separate CL.

+  background-image: url('images/mic.svg');
+}
+
+.audio .mic {
+  background-image: url('images/mic-green.svg');
 }