keyboard.css

@font-face {
  font-family: 'Keyboard Symbols';
  font-weight: 600;
  /* Bug 992346 - Inline Keyboard-Symbols.woff */
  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff')
}

html {
  font-size: 10px;
  pointer-events: none;
}

body {
  margin: 0;
  overflow: hidden;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.cache {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  display: none;
}

/* Keyboard */
#keyboard {
  position: absolute;
  bottom: 0;
  z-index: 15;
  width: 100%;
  border-top: 0.1rem solid #a1a5a8;
  background-color: #606b6e;
  pointer-events: auto;
  visibility: visible;
}

/* Row styles */
.keyboard-row {
  text-align: center;
  font-size: 0;
}
.row1 {
  background-color: #5b6668;
}

.row2 {
  background-color: #566063;
}

.row3 {
  background-color: #525c5e;
}

.row0 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #525b5e;
}

.row1 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #4c5657;
}

.row2 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #475052;
}

.row3 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #434b4d;
}

#keyboard.full-candidate-panel button.keyboard-key {
  visibility: hidden;
}

/* Buttons: logic keys */
.keyboard-key {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0;
  font-size: 0;
  font-family: sans-serif;
  border: none;
  border-radius: 0;  /* To override the system-default border radius for button element  */
  background: none;

}

/* Visible keys */
.keyboard-key > .visual-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 4.3rem;
  margin: 0.4rem 0;
}

/* Standard key styles. */
.keyboard-key > .visual-wrapper > .key-element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 4.3rem;
  font-weight: normal;
  text-align: center;
  border-right: 0.1rem solid #525b5e;
  border-left: 0.1rem solid transparent;
}

.popup {
  position: absolute;
  top: -5.8rem;
  left: calc(50% - 2.8rem);
  width: 5.6rem;
  height: 5.6rem;
  color: #fff;
  font-size: 2.8rem;
  line-height: 5.6rem;
  border-radius: 50%;
  background-color: #00aacc;
  visibility: hidden;

  /* To override the text-align in .float-key-first and .float-key-last */
  text-align: center;
}


.keyboard-key.highlighted {
  background-color: #4a5255;
}

.keyboard-key:last-child > .visual-wrapper > .key-element {
  border-right: transparent;
}

.keyboard-key.highlighted > .visual-wrapper > .key-element {
  color: #00caf2;
}

/* Show the bubble text when the button is highlighted. */
.keyboard-key.highlighted > .visual-wrapper > .popup {
  z-index: 1;
  visibility: visible;
}


/* Special rules for lowercase and uppercase popups */

/* Default is uppercase, so hide the lowercase popup */
.keyboard-key.highlighted > .visual-wrapper > .popup.lowercase {
  visibility: hidden;
}

/* For lowercase, hide the uppercase popup and show the lowercase one */
.keyboard-key.highlighted.lowercase > .visual-wrapper > .popup.lowercase {
  visibility: visible;
}

.keyboard-key.highlighted.lowercase > .visual-wrapper > .popup.uppercase {
  visibility: hidden;
}

.keyboard-row button:last-child.highlighted > .visual-wrapper > .popup {
  left: -2.4rem;
}

.keyboard-row button:first-child.highlighted > .visual-wrapper > .popup {
  left: 0;
}


/* Special keys */
.keyboard-key.special-key > .visual-wrapper > .key-element {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #abb0b1;
  font: 500 1.5rem/4.3rem 'Keyboard Symbols', sans-serif;
}

/* Highlight for special keys */
.keyboard-key.special-key.highlighted > .visual-wrapper > .key-element {
  color: #00b8d6;
}

.keyboard-key.special-key.highlighted > .visual-wrapper:before,
.keyboard-key.special-key.highlighted > .visual-wrapper:after,
.keyboard-key.special-key.highlighted > .visual-wrapper > .popup,
.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper > .popup,
#keyboard-accent-char-menu .keyboard-key > .visual-wrapper:before {
  opacity: 0;
}


/* Switching keys */
.keyboard-key.special-key.switch-key > .visual-wrapper > .key-element {
  font-size: 1.8rem;
}

/* For disabled keys */
.keyboard-key.special-key[disabled="true"] {
  /* Without this rule, the focus would lose when the user clicks this key.
     This seems to be because a disabled key would not get touch/click event. */
  pointer-events: none;
}

.keyboard-key.special-key[disabled="true"] > .visual-wrapper > .key-element {
  color: #677172;
}

/* Special keys - text */
.keyboard-key.special-key.text > .visual-wrapper > .key-element {
  font-family: Sans-serif;
}

/* For keyboard layout menu*/
.keyboard-key.special-key.highlighted.kbr-menu-on > .visual-wrapper:before,
.keyboard-key.special-key.highlighted.kbr-menu-on > .visual-wrapper:after {
  display: inherit;
}

.keyboard-key.special-key.highlighted.kbr-menu-on .visual-wrapper > .key-element {
  font-size: 0;
}

/* Key states */

/* Active key, used for shift key - uppercase */
.keyboard-key.kbr-key-active {
  background-color: #00caf2;
}

.keyboard-key.kbr-key-active > .visual-wrapper > .key-element {
 color: #fff;
 border-right-color: transparent;
}

/* Caps lock case */
.keyboard-key.special-key.kbr-key-hold > .visual-wrapper > .key-element {
  color: #00caf2;
}

/* The underline for caps lock */
.keyboard-key.kbr-key-hold > .visual-wrapper {
  box-shadow: 0 0.4rem 0 #00caf2;
}

/* Alt menu enabled */
.keyboard-key.highlighted.kbr-menu-on > .visual-wrapper > .key-element {
  background: none;
}

.keyboard-key.highlighted.kbr-menu-on > .visual-wrapper > .popup {
  display: none;
}

.keyboard-key.pinyin-ch-ellipsis > .visual-wrapper > .key-element {
  font-size: 1.6rem;
}

span.pinyin-toggle-button-small {
  font-size: 70%;
}

/* Alternatives menu -- this menu appears when you tap and hold a key that has
alternative special (accented) characters. The menu "grows" out of the key
and displays the list of alternatives. */
#keyboard-accent-char-menu {
  display: none;
  position: absolute;
  top: -6rem;
  height: 6rem;
  font-size: 0;
  border-radius: 3rem;
  background-color: #00aacc;
  overflow: hidden;
  white-space: nowrap;
  left: -1.2rem; /* because the first child is 1.2rem wider than others */
}

#keyboard-accent-char-menu.show {
  display: block;
}

#keyboard-accent-char-menu.kbr-menu-left {
  left: auto;
  right: -1.2rem; /* because the last child is 1.2rem wider than others */
}

/* Non keyboard key styles in menu */
#keyboard-accent-char-menu .keyboard-key {
  min-width: 3rem;
}

/* if it is the first or last key in the accent menu make it wider */
#keyboard-accent-char-menu .keyboard-key:first-child,
#keyboard-accent-char-menu .keyboard-key:last-child {
  min-width: 4.2rem;
}

/*
 * If it is the first and the last key in the accent menu, it means that
 * there is only one and we need to make it wider still so we get a round
 * menu
 */
#keyboard-accent-char-menu .keyboard-key:first-child:last-child {
  min-width: 6rem;
}

#keyboard-accent-char-menu .keyboard-key > .visual-wrapper {
  height: 6rem;
  margin: 0;
  border-right: 1px solid #0099b8;
}

#keyboard-accent-char-menu .keyboard-key > .visual-wrapper .key-element {
  background: none;
  border-radius: 0;
}

#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper:after,
#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper > .popup {
  display: none;
}

/* Styles for keys in accent menu (not highlighted). */
#keyboard-accent-char-menu .keyboard-key > .visual-wrapper > .key-element {
  border: none;
  line-height: 6rem;
  font-weight: 500;
  color: #fff;
}

#keyboard-accent-char-menu .keyboard-key:first-child > .visual-wrapper > .key-element {
  padding-left: 0.5rem;
}

#keyboard-accent-char-menu .keyboard-key:last-child > .visual-wrapper > .key-element {
  padding-right: 0.5rem;
}

/* Highlighted special accent characters. These keys appear in the popover
bubble above the key when you tap and hold. */
#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper > .key-element {
  background-color: #0099b8;
}

#keyboard-accent-char-menu > .keyboard-key:last-child .visual-wrapper {
  border: none;
}

#keyboard.full-candidate-panel {
  padding-top: 3.4rem;
}

.keyboard-candidate-panel {
  display: block;
  background: #252220;
  padding: 0;
  margin: 0.2rem 0 0.2rem 0;
  border: none;
  border-top: 0.1rem solid #000000;
  border-bottom: 0.1rem solid #000000;
  height: 2.8rem;
  width: 100%;
  overflow: hidden;
  white-space: normal;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel {
  overflow-y: auto;

  position: absolute;
  top: 0.1rem;
  height: -moz-calc(100% - 0.4rem);
  z-index: 1;
  margin: 0.1rem 0 0.2rem 0;
}

.keyboard-candidate-panel-toggle-button {
  display: none;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0.25rem;
  font-size: 0;
  height: 2.8rem;
  background: #252220 url('images/icon_extend.png') center center no-repeat;
  background-size: 2.4rem;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel-toggle-button {
  background-image: url('images/icon_close.png');
}

.keyboard-candidate-panel .candidate-row {
  border-top: 0.1rem solid #000000;
}

.keyboard-candidate-panel .candidate-row-first {
  border-top: none;
}

#keyboard.candidate-panel .keyboard-candidate-panel .candidate-row {
  display: none;
}

#keyboard.candidate-panel .keyboard-candidate-panel .candidate-row-first {
  display: block;
}

.keyboard-candidate-panel-toggle-button.highlighted,
.keyboard-candidate-panel .candidate-row span.highlighted {
  background-color: #008eab;
  color: #333333;
}

.keyboard-candidate-panel .candidate-row span {
  display: inline-block;
  margin: 0;
  padding: 0 2px 0 0;
  min-width: -moz-calc(4rem - 2px);
  height: 2.8rem;
  font-size: 2rem;
  color: #a6a6a6;
  text-align: center;
  line-height: 2.8rem;
  background: transparent url('images/divider.png') right center no-repeat;
  background-size: auto 4rem;
  border: none;
}

.keyboard-candidate-panel.vietnamese .candidate-row span {
  font-size: 1.7rem;
}

/* for latin suggestions we don't need such a tall box */
/* and in latin we hide the toggle button, so we can be full-width */
.candidate-panel .keyboard-candidate-panel.latin {
  display: block;
  white-space: nowrap;
  height: 3rem;
  width: 100%;
  background: #333;
  margin: -0.6rem 0 0 0; /* I don't know why we need the top margin */
  border: none;
  border-bottom: 0.1rem solid #a0a6a8;
  overflow: hidden;
}

.full-candidate-panel .keyboard-candidate-panel[data-truncated]::after {
  content: '…';
  background: none ! important;
  border-color: transparent ! important;

  display: block;
  text-align: center;
  margin: 0;
  height: 2.8rem;
  font-size: 2rem;
  color: #a6a6a6;
  line-height: 2.8rem;
}

.keyboard-candidate-panel.latin span {
  display: inline-block;
  font-size: 2.0rem;
  font-weight: normal;
  line-height: 3rem;
  height: 3rem;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.keyboard-candidate-panel.latin span.autocorrect {
  color: #0ac;
}

/*
 * Don't display the toggle button for latin suggestions.
 * For now, at least, we only ever get 3 at a time
 */
#keyboard.candidate-panel .keyboard-candidate-panel-toggle-button.latin {
  display: none;
}

.keyboard-candidate-panel span[data-active],
.keyboard-candidate-panel-toggle-button[data-active] {
  background: -moz-linear-gradient(bottom, rgb(191,191,183) 10%, rgb(161,158,153) 90%);
}

/* A note to show on the key to indicate the alternative char */
.alt-note {
  position: absolute;
  top: 0.5rem;
  color: #a6a6a6;
  font: 1.6rem/1.6rem "Keyboard Symbols", sans-serif;
}

.keyboard-key.highlighted  .alt-note {
  visibility: hidden;
}

.keyboard-key.big-key > .visual-wrapper .key-element {
  font-size: 3.2rem;
  font-weight: normal;
  color: #fff;
}

.keyboard-key.big-key .visual-wrapper .alt-note {
    width: 100%;
    text-align: center;
    text-indent: 4rem;
    font-size: 1.6rem;
    top: 0.2rem;
    padding-left: 1rem;
    color: #a6a6a6;
}

.keyboard-key.big-key.highlighted .alt-note {
  visibility: visible;
}

/* Increase tap area for first / last keys in a row that
  doesn't fill full width */
.keyboard-key.float-key-first {
  text-align: right;
}
.keyboard-key.float-key-last {
  text-align: left;
}

#keyboard.landscape .keyboard-key > .visual-wrapper > .key-element {
  font-size: 2.8rem
}

#keyboard.landscape .keyboard-key.special-key > .visual-wrapper > .key-element {
  font: 500 2.1rem/4.3rem 'Keyboard Symbols', sans-serif;
}

#keyboard.landscape .keyboard-key.highlighted > .visual-wrapper > .popup {
    top: -7rem;
    left: calc(50% - 3.5rem);
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
    font-size: 3.5rem
}

.suggestions-container {
  display: none;
}
.dismiss-suggestions-button {
  visibility: hidden;
}

/*
 * Styles for the dismiss suggestions button in the candidate panel
 */
.keyboard-candidate-panel.latin > .dismiss-suggestions-button {
  display:inline-block;
  height: 100%;
  /*
   * the icon is 2.4rem wide but the visual space only takes up 1.4rem
   * we want 10 blank pixels to the left and 15 to the right. But the first
   * suggestion has a 0.3rem margin, so we only need to add 1.2rem to the
   * icon size.
   */
  width: 3.6rem;
  background: url('images/icon_dismiss.png') 0.5rem center /2.4rem no-repeat;
  margin: 0;
  padding: 0;
  float: left;
  visibility: visible;
}

.keyboard-candidate-panel.latin > .dismiss-suggestions-button.hide {
  visibility: hidden;
}

.keyboard-candidate-panel.latin > .suggestions-container {
  display: block;
  width: calc(100% - 3.6rem);
  float: left;
}
.keyboard-candidate-panel.latin > .suggestions-container > div {
  text-align: center;
  display: inline-block;
  height: 100%;
  margin: 0 0.3rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
}

.keyboard-candidate-panel.latin > .suggestions-container.has1 > div {
  width: calc(100% - 0.6rem);
}
.keyboard-candidate-panel.latin > .suggestions-container.has2 > div {
  width: calc(50% - 0.6rem);
}
.keyboard-candidate-panel.latin > .suggestions-container.has3 > div {
  width: calc(33% - 0.6rem);
}

/* Indicator for keyboard hiding action */
.keyboard-key[data-keycode="32"] {
  background: url('images/icon_hide_keyboard.png') right 0.4rem top 0.4rem / 1.6rem no-repeat;
}

.keyboard-key.highlighted[data-keycode="32"] {
  background-color: #4a5255;
}

/* Indicator for alternate indicator */
.alternate-indicator {
  background: url('images/icon_alternate_keyboard.png') left 50% bottom 0.4rem / 1.4rem no-repeat;
}

/*
 * Specific layout rules; When a layoutX.js has specificCssRule set to true
 * you can use layout name (Example: ar for Arabic) as a class name.
 * This is useful is cases where characters are outlining their containers.
 */

/* Arabic */
.ar .keyboard-key > .visual-wrapper > .key-element {
  font-size: 1.8rem;
}

.keyboard-key > .visual-wrapper > span[data-label="ض"],
.keyboard-key > .visual-wrapper > span[data-label="ش"]{
  margin-left:-.5rem;
}

.keyboard-key > .visual-wrapper > span[data-label="س"]{
  margin-left:-.2rem;
}

.keyboard-key > .visual-wrapper > span[data-label="ص"]{
  margin-left:-.1rem;
}

/* Bangla Probhat */
.keyboard-key > .visual-wrapper > span[data-label="ো"] {
  font-size: 1.6rem;
}

.keyboard-key > .visual-wrapper > span[data-label="া"] {
  font-size: 1.7rem;
}

/* Hindi */
.keyboard-key.hindi > .visual-wrapper > span[data-label="औ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="आ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="ओ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="ऑ"] {
  font-size: 2rem;
}

/* Tamil */
.keyboard-key.tamil > .visual-wrapper > .popup {
  width: auto;
  min-width: 4.4rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  border-radius: 2.8rem;
}

.keyboard-row button:last-child.tamil.highlighted >
  .visual-wrapper > .popup {
  left: auto;
  right: 0;
}

/* With symbols on the bottom */
.keyboard-key.bottom-symbol > .visual-wrapper:after {
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #a6a6a6;
  margin-bottom: -0.3rem;
}

.keyboard-key.bottom-symbol[data-keycode="50"] > .visual-wrapper:after {
  content: 'ABC';
}

.keyboard-key.bottom-symbol[data-keycode="51"] > .visual-wrapper:after {
  content: 'DEF';
}

.keyboard-key.bottom-symbol[data-keycode="52"] > .visual-wrapper:after {
  content: 'GHI';
}

.keyboard-key.bottom-symbol[data-keycode="53"] > .visual-wrapper:after {
  content: 'JKL';
}

.keyboard-key.bottom-symbol[data-keycode="54"] > .visual-wrapper:after {
  content: 'MNO';
}

.keyboard-key.bottom-symbol[data-keycode="55"] > .visual-wrapper:after {
  content: 'PQRS';
}

.keyboard-key.bottom-symbol[data-keycode="56"] > .visual-wrapper:after {
  content: 'TUV';
}

.keyboard-key.bottom-symbol[data-keycode="57"] > .visual-wrapper:after {
  content: 'WXYZ';
}

/* All keys except 0 should be move up to 2px. */
.keyboard-key.bottom-symbol:not([data-keycode="48"]) > .visual-wrapper > .key-element {
  top: -0.2rem;
}

/* We need to put '*' in the middle, so its top is set top 8px. */
.keyboard-key.bottom-symbol > .visual-wrapper > .key-element[data-label="*"] {
  top: 0.8rem;
}

/* Based on UI spec, [Backspace] is put in middle and 16px size. */
.keyboard-key.bottom-symbol[data-keycode="8"] > .visual-wrapper > .key-element {
  top: 0;
  font-size: 1.6rem;
}

/* Based on UI spec, alt-note '+' is set bigger. */
.keyboard-key.bottom-symbol[data-keycode="48"] > .visual-wrapper > .alt-note {
  font-size: 1.8rem;
}

@media (orientation:portrait) {
  .special-key > .visual-wrapper > .key-element[data-label="அஆஇ"] {
    font-size: 1.1rem;
  }

  .keyboard-key.tamil > .visual-wrapper > .key-element {
    font-size: 2rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஹ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஊ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ா"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ூ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ே"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ெ"] {
    font-size: 1.7rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ௗ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ை"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ண"] {
    font-size: 1.4rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஔ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ொ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ோ"] {
    font-size: 1.2rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ௌ"] {
    font-size: 1.1rem;
  }
}

@media (orientation:landscape) {
  #keyboard.landscape .special-key > .visual-wrapper >
    .key-element[data-label="அஆஇ"] {
    font-size: 1.7rem;
  }

  #keyboard.landscape .keyboard-key.tamil.highlighted >
    .visual-wrapper > .popup {
    top: -7rem;
    left: calc(50% - 3.5rem);
    width: auto;
    min-width: 5.6rem;
    height: 7rem;
    line-height: 7rem;
    font-size: 3.5rem;
    border-radius: 3.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  #keyboard.landscape .keyboard-row button:last-child.tamil.highlighted >
    .visual-wrapper > .popup {
    left: auto;
    right: 0;
  }

  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ஔ"],
  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ொ"] {
    font-size: 2.5rem;
  }

  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ௌ"] {
    font-size: 2rem;
  }
}