121 lines
2.8 KiB
CSS
121 lines
2.8 KiB
CSS
html * {
|
|
font-family:helvetica, arial, sans-serif;
|
|
}
|
|
|
|
.key, .keync {
|
|
box-shadow:inset -3px -3px 2px 5px #ebebeb;
|
|
background-color:#ffffff;
|
|
border-radius:6px;
|
|
border:2px solid #dcdcdc;
|
|
display:inline-block;
|
|
float: left;
|
|
color:#777777;
|
|
font-family:helvetica, arial, sans-serif;
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
padding:4px 16px 16px 4px;
|
|
width: 25px;
|
|
height: 25px;
|
|
overflow: hidden;
|
|
margin: 0px 1px 1px 0px;
|
|
white-space: normal;
|
|
}
|
|
.key:hover {
|
|
box-shadow:inset -3px -3px 2px 5px #cfcfcf;
|
|
position:relative;
|
|
top:2px;
|
|
}
|
|
.key:active {
|
|
}
|
|
.key:focus {
|
|
}
|
|
.key-editing {
|
|
box-shadow:inset -3px -3px 2px 5px #cfcfcf;
|
|
position:relative;
|
|
top:2px;
|
|
background-color:#efefef;
|
|
border:2px solid #7f7f7f;
|
|
}
|
|
/* This imageless css button was generated by CSSButtonGenerator.com */
|
|
|
|
/* Key unit and pixel
|
|
*
|
|
* key unit: 1.00 1.25 1.50 1.75 2.00
|
|
* width: 25 37.5 50 62.5 75
|
|
* overall: 50 62.5 75 87.5 100
|
|
*
|
|
* Key CSS Metrics
|
|
* +---------------------------+
|
|
* | margin |
|
|
* | +-----------------------+ |
|
|
* | |border 2 | |
|
|
* | | +-------------------+ | |
|
|
* | | |padding 4 | | |
|
|
* | | | +--------------+ | | |
|
|
* |0|2|4|width x height|16|2|1|
|
|
* | | | +--------------+ | | |
|
|
* | | | 16 | | |
|
|
* | | +-------------------+ | |
|
|
* | | 2 | |
|
|
* | +-----------------------+ |
|
|
* | 1 |
|
|
* +---------------------------+
|
|
* margin:1 + border:4 + padding:20 = 25px
|
|
*/
|
|
.btn100 { width:25px; } /* 50 - 25 */
|
|
.btn125 { width:37.5px; } /* 62.5 - 25 */
|
|
.btn150 { width:50px; } /* 75 - 25 */
|
|
.btn175 { width:62.5px; } /* 87.5 - 25 */
|
|
.btn200 { width:75px; } /* 100 - 25 */
|
|
.btn225 { width:87.5px; } /* 112.5 - 25 */
|
|
.btn250 { width:100; } /* 125 - 25 */
|
|
.btn275 { width:112.5px; } /* 137.5 - 25 */
|
|
.btn600 { width:275px; } /* 300 - 25 */
|
|
.btn625 { width:287.5px; } /* 312.5 - 25 */
|
|
.btn700 { width:325px; } /* 350 - 25 */
|
|
.btn750 { width:350px; } /* 375 - 25 */
|
|
|
|
.spc100 { width:25px; visibility:hidden; }
|
|
.spc125 { width:37.5px; visibility:hidden; }
|
|
.spc150 { width:50px; visibility:hidden; }
|
|
.spc175 { width:62.5px; visibility:hidden; }
|
|
.spc200 { width 75px; visibility:hidden; }
|
|
|
|
.keyboard-row {
|
|
width: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.keyboard-outline {
|
|
}
|
|
|
|
.keyboard-pane {
|
|
width: 750px;
|
|
font-size: 14px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
|
|
|
|
.action {
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.keycode_tabs {
|
|
width: 750px;
|
|
overflow: auto;
|
|
font-size:14px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
|
|
|
|
/* http://www.w3schools.com/cssref/css3_pr_resize.asp */
|
|
.resizable {
|
|
resize: both;
|
|
overflow: auto;
|
|
}
|