1/* 2 Copyright (c) 2013 The Chromium Authors. All rights reserved. 3 Use of this source code is governed by a BSD-style license that can be 4 found in the LICENSE file. 5*/ 6 7body { 8 -webkit-box-pack: center; 9 -webkit-user-select: none; 10 background-color: #0b0b0b; 11 display: -webkit-box; 12 margin: 0; 13 overflow: hidden; 14 padding: 0; 15} 16 17kb-keyboard { 18 -webkit-box-orient: vertical; 19 display: -webkit-box; 20} 21 22kb-abc-key, 23kb-shift-key, 24kb-key { 25 background-color: #3b3b3e; 26 background-position: center center; 27 background-repeat: no-repeat; 28 background-size: contain; 29 border-top: 2px solid #4b4b4e; 30 border-radius: 1px; 31 color: #ffffff; 32 display: -webkit-box; 33 font-family: 'Open Sans', sans-serif; 34 font-weight: 600; 35 margin-left: 0.2em; 36 position: relative; 37} 38 39kb-abc-key::x-key, 40kb-shift-key::x-key, 41kb-key::x-key { 42 bottom: 0; 43 height: 1.2em; 44 left: 0; 45 margin: auto; 46 padding-left: 0.5em; 47 padding-right: 0.5em; 48 position: absolute; 49 right: 0; 50 top: 0; 51} 52 53kb-key::x-hinttext { 54 color: #7c7c7c; 55 font-size: 70%; 56 position: absolute; 57 right: 7%; 58 top: 5%; 59} 60 61kb-key::x-key[inverted] { 62 color: #7c7c7c; 63} 64 65kb-key::x-hinttext[inverted] { 66 color: #ffffff; 67} 68 69kb-abc-key.dark, 70kb-shift-key.dark, 71kb-key.dark { 72 background-color: #2a2a2c; 73 border-top: 2px solid #3a3a3c; 74} 75 76kb-altkey::x-key { 77 bottom: 0; 78 height: 1.2em; 79 left: 0; 80 margin: auto; 81 position: absolute; 82 right: 0; 83 top: 0; 84 text-align: center; 85} 86 87/* Left and right-side special keys with a character letter next to them need 88 * additional padding. 89 * */ 90kb-abc-key.padded-left-special, 91kb-shift-key.padded-left-special, 92kb-key.padded-left-special { 93 margin-right: 2px; 94} 95 96kb-abc-key.padded-right-special, 97kb-shift-key.padded-right-special, 98kb-key.padded-right-special { 99 margin-left: 5px; 100} 101 102kb-row.top { 103 margin-top: 5px !important; 104} 105 106.active { 107 background-color: #848490 !important; 108 border-top: 2px solid #A9A9AF !important; 109 /* Do not use box shadow until performance improves 110 * http://code.google.com/p/chromium/issues/detail?id=99045 111 * box-shadow: 0px 0px 15px #fff; 112 * */ 113} 114 115.at, 116.com, 117.comma, 118.hide, 119.microphone, 120.period, 121.tab { 122 -webkit-box-flex: 1.3 !important; 123} 124 125.symbol, 126.return { 127 -webkit-box-flex: 1.5 !important; 128} 129 130.backspace { 131 -webkit-box-flex: 1.7 !important; 132} 133 134.left-more { 135 -webkit-box-flex: 1.4 !important; 136} 137 138.right-more { 139 -webkit-box-flex: 1.6 !important; 140} 141 142.space { 143 -webkit-box-flex: 4.8 !important; 144} 145 146.bar { 147 -webkit-box-flex: 0.6 !important; 148} 149 150.backspace, 151.tab, 152.return, 153.shift, 154.left-more, 155.right-more, 156.symbol { 157 font-size: 55%; 158 font-weight: 200; 159} 160 161.microphone { 162 background-image: url('images/microphone.svg'); 163} 164 165.audio .microphone { 166 background-image: url('images/microphone-green.svg'); 167} 168 169.half-key-spacer { 170 -webkit-box-flex: 0.5; 171 margin-left: 4px; 172} 173