| OLD | NEW |
| 1 /* | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 Copyright (c) 2011 The Chromium Authors. All rights reserved. | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 Use of this source code is governed by a BSD-style license that can be | 3 * found in the LICENSE file. */ |
| 4 found in the LICENSE file. | |
| 5 */ | |
| 6 | 4 |
| 7 body { | 5 body { |
| 6 -webkit-user-select: none; |
| 8 background: -webkit-linear-gradient(#bababa, #868686) no-repeat; | 7 background: -webkit-linear-gradient(#bababa, #868686) no-repeat; |
| 9 color: white; | 8 color: white; |
| 10 margin: 0; | 9 margin: 0; |
| 11 overflow: hidden; | 10 overflow: hidden; |
| 12 padding: 0; | 11 padding: 0; |
| 13 -webkit-user-select: none; | |
| 14 } | 12 } |
| 15 | 13 |
| 16 div.main { | 14 div.main { |
| 15 -webkit-box-orient: vertical; |
| 16 display: -webkit-box; |
| 17 margin: 0 auto; | 17 margin: 0 auto; |
| 18 display: -webkit-box; | |
| 19 -webkit-box-orient: vertical; | |
| 20 } | 18 } |
| 21 | 19 |
| 22 div.keyboard { | 20 div.keyboard { |
| 21 -webkit-box-flex: 1; |
| 22 display: -webkit-box; |
| 23 margin: 0 auto; | 23 margin: 0 auto; |
| 24 display: -webkit-box; | |
| 25 text-align: center; | 24 text-align: center; |
| 26 -webkit-box-flex: 1; | |
| 27 } | 25 } |
| 28 | 26 |
| 29 div.rows { | 27 div.rows { |
| 28 -webkit-box-flex: 1; |
| 29 -webkit-box-orient: vertical; |
| 30 display: -webkit-box; | 30 display: -webkit-box; |
| 31 margin-bottom: 5px; | 31 margin-bottom: 5px; |
| 32 text-align: center; | 32 text-align: center; |
| 33 -webkit-box-orient: vertical; | |
| 34 -webkit-box-flex: 1; | |
| 35 } | 33 } |
| 36 | 34 |
| 37 div.row { | 35 div.row { |
| 36 -webkit-box-flex: 1; |
| 38 display: -webkit-box; | 37 display: -webkit-box; |
| 38 margin-right: 5px; |
| 39 margin-top: 5px; | 39 margin-top: 5px; |
| 40 margin-right: 5px; | |
| 41 -webkit-box-flex: 1; | |
| 42 } | 40 } |
| 43 | 41 |
| 44 div.row > div { | 42 div.row > div { |
| 43 -webkit-box-flex: 1; |
| 45 display: -webkit-box; | 44 display: -webkit-box; |
| 46 -webkit-box-flex: 1; | |
| 47 } | 45 } |
| 48 | 46 |
| 49 .handwritingcanvas { | 47 .handwritingcanvas { |
| 48 border: 1px solid gray; |
| 50 border-radius: 4px; | 49 border-radius: 4px; |
| 51 border: 1px solid gray; | |
| 52 color: #dbdbdb; | 50 color: #dbdbdb; |
| 53 font-family: sans-serif; | 51 font-family: sans-serif; |
| 54 margin: 5px 0 0 5px; | 52 margin: 5px 0 0 5px; |
| 55 text-align: center; | 53 text-align: center; |
| 56 } | 54 } |
| 57 | 55 |
| 58 .ime { | 56 .ime { |
| 59 border: 1px solid gray; | 57 border: 1px solid gray; |
| 60 color: #dbdbdb; | 58 color: #dbdbdb; |
| 61 display: inline-block; | 59 display: inline-block; |
| 62 font-family: sans-serif; | 60 font-family: sans-serif; |
| 63 margin: 0; | 61 margin: 0; |
| 64 text-align: center; | 62 text-align: center; |
| 65 white-space: nowrap; | 63 white-space: nowrap; |
| 66 } | 64 } |
| 67 | 65 |
| 68 .panel { | 66 .panel { |
| 69 border: 0; | 67 border: 0; |
| 70 clear: both; | 68 clear: both; |
| 71 margin-left: 5px; | 69 margin-left: 5px; |
| 72 text-align: left; | 70 text-align: left; |
| 73 } | 71 } |
| 74 | 72 |
| 75 .popup { | 73 .popup { |
| 76 background: rgba(50, 50, 50, 0.95); | 74 background: rgba(50, 50, 50, 0.95); |
| 77 border: 1px solid rgba(50, 50, 50, 0.8); | 75 border: 1px solid rgba(50, 50, 50, 0.8); |
| 76 border-radius: 4px; |
| 77 box-shadow: 5px 5px 3px rgba(50, 50, 50, 0.3); |
| 78 padding-right: 5px; | 78 padding-right: 5px; |
| 79 position: absolute; | 79 position: absolute; |
| 80 -webkit-border-radius: 4px; | |
| 81 -webkit-box-shadow: 5px 5px 3px rgba(50, 50, 50, 0.3); | |
| 82 } | 80 } |
| 83 | 81 |
| 84 .button { | 82 .button { |
| 85 background: -webkit-linear-gradient(#5a616f, #505662); | 83 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); |
| 86 } | 84 } |
| 87 .button:active { | 85 .button:active { |
| 88 background: -webkit-linear-gradient(#505662, #5a616f); | 86 background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111)); |
| 89 } | 87 } |
| 90 | 88 |
| 91 .auxiliary:active { | 89 .auxiliary:active { |
| 92 background: -webkit-linear-gradient(#5a616f, #505662); | 90 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); |
| 93 } | 91 } |
| 94 | 92 |
| 95 .key { | 93 .key { |
| 94 -webkit-box-flex: 1; |
| 96 background: -webkit-linear-gradient(#fff, #cacaca); | 95 background: -webkit-linear-gradient(#fff, #cacaca); |
| 97 border-radius: 6px; | |
| 98 /* Reserving equivalent space to .key:active so | 96 /* Reserving equivalent space to .key:active so |
| 99 keys don't shift when selected. */ | 97 keys don't shift when selected. */ |
| 100 border: 1px solid transparent; | 98 border: 1px solid transparent; |
| 99 border-radius: 6px; |
| 101 /* Do not use box shadow until performance improves | 100 /* Do not use box shadow until performance improves |
| 102 * http://code.google.com/p/chromium/issues/detail?id=99045 | 101 * http://code.google.com/p/chromium/issues/detail?id=99045 |
| 103 box-shadow: 0 1px 1px #000; | 102 box-shadow: 0 1px 1px #000; |
| 104 */ | 103 */ |
| 105 color: #535353; | 104 color: #535353; |
| 106 display: -webkit-box; | 105 display: -webkit-box; |
| 107 font-family: sans-serif; | 106 font-family: sans-serif; |
| 108 font-weight: 100; | 107 font-weight: 100; |
| 109 margin-left: 5px; | 108 margin-left: 5px; |
| 110 position: relative; | 109 position: relative; |
| 111 -webkit-box-flex: 1; | |
| 112 } | 110 } |
| 113 | 111 |
| 114 .key > div { | 112 .key > div { |
| 115 bottom: 0; | 113 bottom: 0; |
| 116 left: 0; | 114 left: 0; |
| 117 margin: auto; | 115 margin: auto; |
| 118 position: absolute; | 116 position: absolute; |
| 119 right: 0; | 117 right: 0; |
| 120 top: 0; | 118 top: 0; |
| 121 } | 119 } |
| (...skipping 14 matching lines...) Expand all Loading... |
| 136 background: -webkit-linear-gradient(#d6d6d6, #acacac); | 134 background: -webkit-linear-gradient(#d6d6d6, #acacac); |
| 137 border: 1px solid rgba(125,125,125,0.5); | 135 border: 1px solid rgba(125,125,125,0.5); |
| 138 /* Do not use box shadow until performance improves | 136 /* Do not use box shadow until performance improves |
| 139 * http://code.google.com/p/chromium/issues/detail?id=99045 | 137 * http://code.google.com/p/chromium/issues/detail?id=99045 |
| 140 box-shadow: 0 0 15px #fff; | 138 box-shadow: 0 0 15px #fff; |
| 141 */ | 139 */ |
| 142 } | 140 } |
| 143 | 141 |
| 144 div.moddown { | 142 div.moddown { |
| 145 background: -webkit-linear-gradient(#d6d6d6, #acacac); | 143 background: -webkit-linear-gradient(#d6d6d6, #acacac); |
| 146 border-color: #304a9b; | 144 border-color: rgb(48, 74, 155); |
| 147 } | 145 } |
| 148 | 146 |
| 149 .image-key { | 147 .image-key { |
| 148 background-position: center center; |
| 149 background-repeat: no-repeat; |
| 150 background-size: contain; | 150 background-size: contain; |
| 151 background-repeat: no-repeat; | |
| 152 background-position: center center; | |
| 153 height: 100%; | 151 height: 100%; |
| 154 width: 100%; | 152 width: 100%; |
| 155 } | 153 } |
| 156 | 154 |
| 157 .text-key { | 155 .text-key { |
| 158 height: 1.2em; | 156 height: 1.2em; |
| 159 } | 157 } |
| 160 | 158 |
| 161 .backspace > div, .handwriting-backspace > div { | 159 .backspace > div, |
| 162 background-image: url("del.svg"); | 160 .handwriting-backspace > div { |
| 161 background-image: url('del.svg'); |
| 163 } | 162 } |
| 164 | 163 |
| 165 .tab > div { | 164 .tab > div { |
| 166 background-image: url("tab.svg"); | 165 background-image: url('tab.svg'); |
| 167 } | 166 } |
| 168 | 167 |
| 169 .return > div, .handwriting-return > div { | 168 .return > div, |
| 170 background-image: url("ret.svg"); | 169 .handwriting-return > div { |
| 170 background-image: url('ret.svg'); |
| 171 } | 171 } |
| 172 | 172 |
| 173 .mic > div, .handwriting-mic > div { | 173 .mic > div, |
| 174 background-image: url("mic.svg"); | 174 .handwriting-mic > div { |
| 175 background-image: url('mic.svg'); |
| 175 } | 176 } |
| 176 | 177 |
| 177 .shift > div.image-key { | 178 .shift > div.image-key { |
| 178 background-image: url("shift.svg"); | 179 background-image: url('shift.svg'); |
| 179 } | 180 } |
| 180 | 181 |
| 181 .moddown.shift > div.image-key { | 182 .moddown.shift > div.image-key { |
| 182 background-image: url("shift-down.svg"); | 183 background-image: url('shift-down.svg'); |
| 183 } | 184 } |
| 184 | 185 |
| 185 .hide > div { | 186 .hide > div { |
| 186 background-image: url("keyboard.svg"); | 187 background-image: url('keyboard.svg'); |
| 187 } | 188 } |
| 188 | 189 |
| 189 .at, | 190 .at, |
| 190 .com, | 191 .com, |
| 191 .comma, | 192 .comma, |
| 192 .handwriting-backspace, | 193 .handwriting-backspace, |
| 193 .hide, | 194 .hide, |
| 194 .mic, | 195 .mic, |
| 195 .period, | 196 .period, |
| 196 .return, | 197 .return, |
| (...skipping 16 matching lines...) Expand all Loading... |
| 213 } | 214 } |
| 214 | 215 |
| 215 .handwriting-clear, | 216 .handwriting-clear, |
| 216 .handwriting-return { | 217 .handwriting-return { |
| 217 -webkit-box-flex: 5; | 218 -webkit-box-flex: 5; |
| 218 } | 219 } |
| 219 | 220 |
| 220 .nodisplay { | 221 .nodisplay { |
| 221 display: none; | 222 display: none; |
| 222 } | 223 } |
| OLD | NEW |