Index: ui/keyboard/resources/main.css |
diff --git a/ui/keyboard/resources/main.css b/ui/keyboard/resources/main.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0664c1442c23dbc06782d8d5b23fcfe50f68a526 |
--- /dev/null |
+++ b/ui/keyboard/resources/main.css |
@@ -0,0 +1,193 @@ |
+/* |
+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-user-select: none; |
+ color: white; |
+ margin: 0; |
+ overflow: hidden; |
+ padding: 0; |
+} |
+ |
+div.main { |
+ -webkit-box-orient: vertical; |
+ background: -webkit-linear-gradient(#bababa, #868686) no-repeat; |
+ display: -webkit-box; |
+ left: 0; |
+ position: absolute; |
+ right: 0; |
+ top: -10px; |
+} |
+ |
+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: 5px; |
+ text-align: center; |
+} |
+ |
+div.row { |
+ -webkit-box-flex: 1; |
+ display: -webkit-box; |
+ margin-right: 5px; |
+ margin-top: 5px; |
+} |
+ |
+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'); |
+} |
+ |
+.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; |
+ border-radius: 6px; |
+ /* 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; |
+ font-family: sans-serif; |
+ font-weight: 100; |
+ margin-left: 5px; |
+ position: relative; |
+} |
+ |
+.key > div { |
+ bottom: 0; |
+ left: 0; |
+ margin: auto; |
+ position: absolute; |
+ right: 0; |
+ top: 0; |
+} |
+ |
+.key:active { |
+ background: -webkit-linear-gradient(#d6d6d6, #acacac); |
+ border: 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, |
+.tab, |
+.com, |
+.comma, |
+.hide, |
+.mic, |
+.period { |
+ -webkit-box-flex: 1.3; |
+} |
+ |
+.symbol { |
+ -webkit-box-flex: 1.4; |
+} |
+ |
+.return { |
+ -webkit-box-flex: 1.5; |
+} |
+ |
+.backspace { |
+ -webkit-box-flex: 1.6; |
+} |
+ |
+.left-shift { |
+ -webkit-box-flex: 1.8; |
+} |
+ |
+.right-shift { |
+ -webkit-box-flex: 2.0; |
+} |
+ |
+.space { |
+ -webkit-box-flex: 4.8; |
+} |
+ |
+.bar { |
+ -webkit-box-flex: 0.6; |
+} |
+ |
+.nodisplay { |
+ display: none; |
+} |