CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, input, li {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html{font-size:62.5%;}
html,body {
height:100%;
}
body {
font: 1em/1.5 font-family: 'Share Tech Mono', monospace;
overflow-x: hidden;
color:#555;
background-image:url(../img/n.png);
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
input{font-family: 'Share Tech Mono', monospace;overflow:hidden;}
#main, #cal, li{position: relative;}
#btn{float: left;list-style: none;display: block; width: 80px;margin:0;padding:0;}
#btn1{float: left;width:26px;display: block;margin:0;padding:0;}
li{font-size:11px;font-family: Arial, sans-serif; text-shadow:0px 1px 1px #ffffff;font-weight:900; cursor:pointer;background: #eee;text-align:center;margin:1px;float: left;
-webkit-box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset;
-moz-box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset;
box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset;}
li:hover{background: #0f0;}
.h24 {height: 12px;line-height: 12px;}
.h48 {height: 26px;line-height: 26px;}
.w48 {width: 24px;}
.w96 {width: 50px;}
.fx:after{content:"";overflow:hidden;clear: both;margin:0;padding:0;}
#main{width: 110px; height: 98px; margin: 0 auto; background:#999;overflow: hidden;padding: 1px;}
#cal{width:106px;height:84px;display: block; background:#ccc;padding:2px;margin:0 auto;}
#cal input{cursor: pointer; text-align:right;width:104px;height: 12px;line-height: 12px;padding:0;margin:1px;border:0;}
.red {background-color: #f0f;}
li:hover{
transform:matrix(0.99,0.00,0.00,0.99,0,0);
-ms-transform:matrix(0.99,0.00,0.00,0.99,0,0);
-webkit-transform:matrix(0.99,0.00,0.00,0.99,0,0);
}
li:active{
transform:matrix(0.99,0.00,0.00,0.99,0,1);
-ms-transform:matrix(0.99,0.00,0.00,0.99,0,1);
-webkit-transform:matrix(0.99,0.00,0.00,0.99,0,1);
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#showkey {font-weight: 900; font-size: 9px; background: #333; color: #eee; border:0;line-height: 10px; margin: 0 auto; width: 112px; height: 10px; position: relative;display: block;padding: 0;}
.loader,.loader::before,
.loader::after {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loader {
width: 72px;
height: 72px;
margin: auto;
border: 1px solid #999;
border-radius: 3px;
overflow:hidden;
text-align: center;
-webkit-animation:spin .7s linear infinite;
-moz-animation:spin .7s linear infinite;
animation:spin .7s linear infinite;
-webkit-transform: perspective(100px ) rotateX(180deg);
transform: perspective(100px ) rotateX(180deg);
background: #FFF;
}
.loader::before,.loader::after {
content: 'Loading...';
z-index: -1;
}
@-moz-keyframes spin { 100% { -moz-transform: rotateX(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
