vehicle-keyboard-js
Version:
parking vehicle keyboard
1 lines • 4.06 kB
CSS
@charset "utf-8";html{font-size:62.5%}.keyboard{bottom:0;display:block;font-family:Arial,Microsoft YaHei,黑体,宋体,sans-serif;font-size:100%;left:50%;line-height:1;max-width:78.5rem;min-width:36rem;position:absolute;-webkit-transform:translate(-50%);transform:translate(-50%);width:100%;z-index:10}.keyboard__hide{display:none}.keyboard .keyboard__ch,.keyboard .keyboard__en{background-color:#ddd;border-radius:.3rem;-webkit-box-sizing:border-box;box-sizing:border-box;padding:.2rem .3rem}.keyboard .keyboard__ch .keyboard__line,.keyboard .keyboard__en .keyboard__line,.keyboardInp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-size:1.4rem;justify-content:center}.keyboard .keyboard__ch .keyboard__line>span,.keyboard .keyboard__en .keyboard__line>span{text-align:center;-webkit-box-flex:1;border:.1rem solid #ddd;-webkit-box-shadow:.08rem .1rem .2rem .02rem #999;box-shadow:.08rem .1rem .2rem .02rem #999;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:.4rem .3rem;overflow:hidden;padding:1rem .4rem;-webkit-transition:.3s;transition:.3s}.keyboard .keyboard__ch .keyboard__line>span,.keyboard .keyboard__en .keyboard__line>span,.keyboardInp span{background-color:#fff;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.keyboard .keyboard__ch .keyboard__line>span:active,.keyboard .keyboard__en .keyboard__line>span:active{background-color:#ddc;border-radius:.5rem;-webkit-box-shadow:0 0 0 0 #fff;box-shadow:0 0 0 0 #fff;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none}.keyboard .keyboard__del{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABZ0lEQVRYR+2W200DMRRETzqACoAKgAoIHdABoQKgA+ggVAAdQAfQAUkH0AF0gEbaKxnHr2tttD/rz6w1czx3vNkFE6/FxP7MAHMCrQksgVfgYKTS/gCXwKYFYAU8A1vgbSQAaX4AqxpAaK4URD7GkrnWsgSwL3MZVwH2aV4FaDU/Ay6Ap8RMVNZb4DEzr2wCrebStb0vwE1gJPN34AQ4zvQmCXA1XDW1vbVwMr8GDCI0l8amNQHFKepvh7lphxDS0clL5jsdUEyfwC8ggZ6rZhASPy+c3KD/jUCx6YfTYZYS8yyLXfBacSdSWjsd6IWIZ34XdSJ3kGQJQwi9p21TTiRXuLiYTQnYJoM4sj+Lwix02odM4Qzi0HMNeyAEnCtt6Vn1VexJwlPY5C0ozVikGsf90O4eM1cH4s29t6MGWh1BKCCI9XC9asKe50p1XfsgCQXV+rE+yb5spB4Az+ma984AcwKTJ/AHQABhIXkmPiIAAAAASUVORK5CYII=);background-position:50%;background-repeat:no-repeat;padding:1rem}.keyboard .keyboard__line>span.keyboard__enable--btn{background-color:#ddd;pointer-events:none}.keyboardInp>span{border:.2rem solid #cdc496;display:block;line-height:40px;margin:0 .2rem;text-align:center;width:5rem;-webkit-box-flex:inherit;-webkit-flex:inherit;-ms-flex:inherit;flex:inherit}.keyboardInp .keyboard__interval{border:none;-webkit-box-shadow:none;box-shadow:none;font-size:1.6rem;font-weight:800;width:.5rem}.keyboardInp>span.keyboard__especial>font{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAvCAMAAABXLiNqAAAAe1BMVEX////6+vr4+Pj8/PzNzc3KysrAwMD29vbr6+vm5ubS0tLY2Njx8fG8vLzv7+/U1NSlpaXf39+1tbXCwsKysrLa2tq5ubmurq6oqKjo6OjPz8/z8/OdnZ2QkJDh4eHHx8eqqqqhoaHc3NzExMSYmJiWlpbj4+OJiYmIiIg8n+V6AAABhklEQVQ4y+2Ux47dIBRA6b2Du/Nsv5b8/xfG2FlEWcx4k0WiORIS5QC69yLAF/8LnF/z+oAueeGi1/efe3CnDxOE+EMNh+/fDn504EP8Qsk8U7po8Clrfz2OK8zztURTCsEX/wD4t0eJYH2s5/Sf3qTgLsjF7/0kEdDvuhVTDzUhShFqquUYe7ElhpQFAGOSCYzxtu57hnl8smwLs6J6/GFlUSOpffn0/qVURyM+hgkJ9hAOVKBkouNeIcjxpKV8NyQCoOWggWjv2WuSDu/Wlbnv6DNsL41Ja1ukQmavQTyTsE2OkZTzPCfbwXjiWglNiLeg3UjIe1+I0t5Z09Du8MQjh0yJRtmAaaVki36A/l5XGjtkulB7pkk4KqGKiBlgEoS2UaWUGuJKHpir1qEze52gDaOuelPP8nwbW1E/LWXHQY9327TwCF4by3XiyDpgOo6KJhpDRtwmrShOtSjdzqoxBoXHv+4lq4tb6YIZ1KQQbzZVa3nAca3l0WAdAGQMBieIg7/CT+PrFzXpIJefAAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;display:block;height:100%;-webkit-transform:scale(.8);transform:scale(.8);width:100%}.keyboardInp .keyboard__active{border:.2rem solid #d1824d}.keyboard .keyboard__switch{font-size:14px}