diff options
-rw-r--r-- | ui/keyboard/resources/elements/kb-key.html | 4 | ||||
-rw-r--r-- | ui/keyboard/resources/webui/constants.js | 2 | ||||
-rw-r--r-- | ui/keyboard/resources/webui/keysets.html | 69 | ||||
-rw-r--r-- | ui/keyboard/resources/webui/main.css | 36 |
4 files changed, 67 insertions, 44 deletions
diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html index 7226b69..8d24355 100644 --- a/ui/keyboard/resources/elements/kb-key.html +++ b/ui/keyboard/resources/elements/kb-key.html @@ -26,8 +26,8 @@ position: absolute; right: 0; top: 0; - padding-left: 14px; - padding-right: 14px; + padding-left: 10px; + padding-right: 10px; } </style> <div id="key" class="key"> diff --git a/ui/keyboard/resources/webui/constants.js b/ui/keyboard/resources/webui/constants.js index ea620c6..94ccfb2 100644 --- a/ui/keyboard/resources/webui/constants.js +++ b/ui/keyboard/resources/webui/constants.js @@ -13,7 +13,7 @@ var ASPECT_RATIO = 2.0; * Ratio of key height and font size. * @type {number} */ -var FONT_SIZE_RATIO = 3.5; +var FONT_SIZE_RATIO = 2; /** * The number of rows in each keyset. diff --git a/ui/keyboard/resources/webui/keysets.html b/ui/keyboard/resources/webui/keysets.html index 67a9eac..bc86231 100644 --- a/ui/keyboard/resources/webui/keysets.html +++ b/ui/keyboard/resources/webui/keysets.html @@ -6,113 +6,114 @@ <template> <kb-keyset id="upper" toKeyset="lower"> - <kb-row> + <kb-row class="top"> <kb-key>Q</kb-key><kb-key>W</kb-key><kb-key>E</kb-key><kb-key>R</kb-key> <kb-key>T</kb-key><kb-key>Y</kb-key><kb-key>U</kb-key><kb-key>I</kb-key> <kb-key>O</kb-key><kb-key>P</kb-key> </kb-row> <kb-row> - <kb-key class="tab dark" char="	">tab</kb-key> + <div class="half-key-spacer"></div> <kb-key>A</kb-key><kb-key>S</kb-key><kb-key>D</kb-key><kb-key>F</kb-key> <kb-key>G</kb-key><kb-key>H</kb-key><kb-key>J</kb-key><kb-key>K</kb-key> <kb-key>L</kb-key> + <div class="half-key-spacer"></div> </kb-row> <kb-row> - <kb-key class="left-shift dark" toKeyset="lower" char="Invalid">shift</kb-key> + <kb-key class="left-shift padded-left-special dark" toKeyset="lower" char="Invalid">shift</kb-key> <kb-key>Z</kb-key><kb-key>X</kb-key><kb-key>C</kb-key><kb-key>V</kb-key> <kb-key>B</kb-key><kb-key>N</kb-key><kb-key>M</kb-key> - <kb-key class="backspace dark" char="" repeat>backspace</kb-key> + <kb-key class="backspace padded-right-special dark" char="" repeat>delete</kb-key> </kb-row> <kb-row> + <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">?123</kb-key> <kb-key class="mic dark" char="Mic"></kb-key> - <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key> - <kb-key class="dark">.com</kb-key> + <kb-key class="dark">,</kb-key> <kb-key class="space dark" char=" "></kb-key> - <kb-key class="dark">@</kb-key> - <kb-key class='return dark' char="
">enter</kb-key> + <kb-key class="dark">.</kb-key> + <kb-key class="return dark" char="�A;">enter</kb-key> </kb-row> </kb-keyset> <kb-keyset id="lower"> - <kb-row> + <kb-row class="top"> <kb-key>q</kb-key><kb-key>w</kb-key><kb-key>e</kb-key><kb-key>r</kb-key> <kb-key>t</kb-key><kb-key>y</kb-key><kb-key>u</kb-key><kb-key>i</kb-key> <kb-key>o</kb-key><kb-key>p</kb-key> </kb-row> <kb-row> - <kb-key class="tab dark" char="	">tab</kb-key> + <div class="half-key-spacer"></div> <kb-key>a</kb-key><kb-key>s</kb-key><kb-key>d</kb-key><kb-key>f</kb-key> <kb-key>g</kb-key><kb-key>h</kb-key><kb-key>j</kb-key><kb-key>k</kb-key> <kb-key>l</kb-key> + <div class="half-key-spacer"></div> </kb-row> <kb-row> - <kb-key class="left-shift dark" toKeyset="upper" char="Invalid">shift</kb-key> + <kb-key class="left-shift padded-left-special dark" toKeyset="upper" char="Invalid">shift</kb-key> <kb-key>z</kb-key><kb-key>x</kb-key><kb-key>c</kb-key><kb-key>v</kb-key> <kb-key>b</kb-key><kb-key>n</kb-key><kb-key>m</kb-key> - <kb-key class="backspace dark" char="" repeat>backspace</kb-key> + <kb-key class="backspace padded-right-special dark" char="" repeat>delete</kb-key> </kb-row> <kb-row> + <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">?123</kb-key> <kb-key class="mic dark" char="Mic"></kb-key> - <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key> - <kb-key class="dark">.com</kb-key> + <kb-key class="dark">,</kb-key> <kb-key class="space dark" char=" "></kb-key> - <kb-key class="dark">@</kb-key> + <kb-key class="dark">.</kb-key> <kb-key class='return dark' char="
">enter</kb-key> </kb-row> </kb-keyset> <kb-keyset id="symbol"> - <kb-row> + <kb-row class="top"> <kb-key>1</kb-key><kb-key>2</kb-key><kb-key>3</kb-key><kb-key>4</kb-key> <kb-key>5</kb-key><kb-key>6</kb-key><kb-key>7</kb-key><kb-key>8</kb-key> <kb-key>9</kb-key><kb-key>0</kb-key> </kb-row> <kb-row> - <kb-key class="tab dark" char="	">tab</kb-key> <kb-key>!</kb-key><kb-key>@</kb-key><kb-key>#</kb-key><kb-key>$</kb-key> <kb-key>%</kb-key><kb-key>^</kb-key><kb-key>&</kb-key><kb-key>*</kb-key> - <kb-key>(</kb-key> + <kb-key>(</kb-key><kb-key>)</kb-key> </kb-row> <kb-row> - <kb-key class="left-more dark" toKeyset="more" char="Invalid">more</kb-key> - <kb-key>)</kb-key><kb-key>/</kb-key><kb-key>-</kb-key><kb-key>'</kb-key> - <kb-key>"</kb-key><kb-key>:</kb-key><kb-key>;</kb-key> - <kb-key class="backspace dark" char="" repeat>backspace</kb-key> + <kb-key class="left-more padded-left-special dark" toKeyset="more" char="Invalid">more</kb-key> + <kb-key>/</kb-key><kb-key>-</kb-key><kb-key>'</kb-key><kb-key>"</kb-key> + <kb-key>:</kb-key><kb-key>;</kb-key><kb-key>?</kb-key> + <kb-key class="backspace padded-right-special dark" char="" repeat>delete</kb-key> </kb-row> <kb-row> - <kb-key class="mic dark" char="Mic"></kb-key> <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</kb-key> - <kb-key class="dark">.com</kb-key> + <kb-key class="mic dark" char="Mic"></kb-key> + <kb-key class="dark">,</kb-key> <kb-key class="space dark" char=" "></kb-key> - <kb-key class="dark">@</kb-key> + <kb-key class="dark">.</kb-key> <kb-key class='return dark' char="
">enter</kb-key> </kb-row> </kb-keyset> <kb-keyset id="more"> - <kb-row> + <kb-row class="top"> <kb-key>_</kb-key><kb-key>`</kb-key><kb-key>~</kb-key> <kb-key><</kb-key><kb-key>></kb-key><kb-key>[</kb-key> <kb-key>]</kb-key><kb-key>{</kb-key><kb-key>}</kb-key><kb-key>\</kb-key> </kb-row> <kb-row> - <kb-key class="tab dark" char="	">tab</kb-key> - <kb-key>|</kb-key><kb-key>+</kb-key><kb-key>=</kb-key><kb-key>€</kb-key> + <kb-key class="tab padded-left-special dark" char="	">tab</kb-key> + <kb-key>|</kb-key><kb-key>+</kb-key><kb-key>=</kb-key><kb-key></kb-key> <kb-key></kb-key><kb-key></kb-key><kb-key></kb-key><kb-key></kb-key> <kb-key></kb-key> </kb-row> <kb-row> - <kb-key class="left-more dark" toKeyset="symbol" char="Invalid">#123</kb-key> + <kb-key class="left-more padded-left-special dark" toKeyset="symbol" char="Invalid">?123</kb-key><kb-key></kb-key> <kb-key></kb-key><kb-key></kb-key><kb-key></kb-key><kb-key></kb-key> - <kb-key></kb-key><kb-key></kb-key><kb-key></kb-key> - <kb-key class="backspace dark" char="" repeat>backspace</kb-key> + <kb-key></kb-key><kb-key></kb-key> + <kb-key class="backspace padded-right-special dark" char="" repeat>delete</kb-key> </kb-row> <kb-row> - <kb-key class="mic dark" char="Mic"></kb-key> <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</kb-key> - <kb-key class="dark">.com</kb-key> + <kb-key class="mic dark" char="Mic"></kb-key> + <kb-key class="dark">,</kb-key> <kb-key class="space dark" char=" "></kb-key> - <kb-key class="dark">@</kb-key> + <kb-key class="dark">.</kb-key> <kb-key class='return dark' char="
">enter</kb-key> </kb-row> </kb-keyset> diff --git a/ui/keyboard/resources/webui/main.css b/ui/keyboard/resources/webui/main.css index 66244b1..ea10c72 100644 --- a/ui/keyboard/resources/webui/main.css +++ b/ui/keyboard/resources/webui/main.css @@ -21,27 +21,43 @@ kb-keyboard { kb-key { background-color: #444444; - border-top: 1px solid #666666; - border-radius: 3px; + border-top: 2px solid #555555; + border-radius: 1px; color: #ffffff; font-family: sans-serif; - font-weight: 100; + font-weight: 600; margin-left: 3px; } kb-key.dark { background-color: #333333; + border-top: 2px solid #444444; +} + +/* Left and right-side special keys with a character letter next to them need + * additional padding. + * */ +kb-key.padded-left-special { + margin-right: 2px; +} + +kb-key.padded-right-special { + margin-left: 5px; +} + +kb-row.top { + margin-top: 5px !important; } #upper .left-shift, #upper .right-shift, .active { background-color: #acacac !important; - border-top: 1px solid rgba(125,125,125,0.5); + border-top: 2px solid rgba(125,125,125,0.5) !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; - */ + * box-shadow: 0px 0px 15px #fff; + * */ } .at, @@ -90,7 +106,8 @@ kb-key.dark { .right-more, .symbol, .moddown.shift { - font-size: 80%; + font-size: 55%; + font-weight: 200; } .mic { @@ -100,3 +117,8 @@ kb-key.dark { .audio .mic { background-image: url('images/mic-green.svg'); } + +.half-key-spacer { + -webkit-box-flex: 0.5; + margin-left: 4px; +} |