/*! * * simple-keyboard v3.0.0 * https://github.com/hodgef/simple-keyboard * * Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ .hg-theme-default { width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; overflow: hidden; touch-action: manipulation; font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; background-color: #ececec; padding: 5px; border-radius: 5px; } .hg-theme-default .hg-button span { pointer-events: none; } .hg-theme-default button.hg-button { border-width: 0; outline: 0; font-size: inherit; } .hg-theme-default .hg-button { display: inline-block; flex-grow: 1; } .hg-theme-default .hg-row { display: flex; } .hg-theme-default .hg-row:not(:last-child) { margin-bottom: 5px; } .hg-theme-default .hg-row .hg-button-container, .hg-theme-default .hg-row .hg-button:not(:last-child) { margin-right: 5px; } .hg-theme-default .hg-row > div:last-child { margin-right: 0; } .hg-theme-default .hg-row .hg-button-container { display: flex; } .hg-theme-default .hg-button { box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3); height: 40px; border-radius: 5px; box-sizing: border-box; padding: 5px; background: #fff; border-bottom: 1px solid #b5b5b5; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .hg-theme-default .hg-button.hg-standardBtn { width: 20px; } .hg-theme-default .hg-button.hg-activeButton { background: #efefef; } .hg-theme-default.hg-layout-numeric .hg-button { width: 33.3%; height: 60px; align-items: center; display: flex; justify-content: center; } .hg-theme-default .hg-button.hg-button-numpadadd, .hg-theme-default .hg-button.hg-button-numpadenter { height: 85px; } .hg-theme-default .hg-button.hg-button-numpad0 { width: 105px; } .hg-theme-default .hg-button.hg-button-com { max-width: 85px; } .hg-theme-default .hg-button.hg-standardBtn.hg-button-at { max-width: 45px; } .hg-theme-default .hg-button.hg-selectedButton { background: rgba(5, 25, 70, 0.53); color: #fff; } .hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] { max-width: 82px; } .hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] { max-width: 60px; } .hg-candidate-box { display: inline-flex; border-radius: 5px; position: absolute; background: #ececec; border-bottom: 2px solid #b5b5b5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; max-width: 272px; transform: translateY(-100%); margin-top: -10px; } ul.hg-candidate-box-list { display: flex; list-style: none; padding: 0; margin: 0; flex: 1; } li.hg-candidate-box-list-item { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; } li.hg-candidate-box-list-item:hover { background: rgba(0, 0, 0, 0.03); cursor: pointer; } li.hg-candidate-box-list-item:active { background: rgba(0, 0, 0, 0.1); } .hg-candidate-box-prev:before { content: "◄"; } .hg-candidate-box-next:before { content: "►"; } .hg-candidate-box-next, .hg-candidate-box-prev { display: flex; align-items: center; padding: 0 10px; background: #d0d0d0; color: #969696; cursor: pointer; } .hg-candidate-box-next { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .hg-candidate-box-prev { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .hg-candidate-box-btn-active { color: #444; }