Handl Keyboard Shortcuts

Handl Login Window

by kizer

HTML

<div id="login">
    <header>
    <a href="#" class="key c50"><b>A</b><span>archive</span></a>
    </header>
    <header>
    <a href="#" class="key c50"><b>D</b><span>delete</span></a>
    </header>
</div>

CSS

/* REALLY QUICK AND DIRTY CSS - NEEDS CLEANUP FOR PRODUCTION */
/* BEFORE USING - Return Icon, should not be layered over input
                  rather use mock input area to insert icon  */

html {
    height: 100%;
    /* this is needed to stretch the gradient */
    background: #c6c9cc;
    background: #c6c9cc -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#e2e2e2), to(#c6c9cc)) no-repeat;
    background-image: -moz-radial-gradient(100% 100% 90deg, #2F2727, #1a82f7);
    background-image: -moz-radial-gradient(50% 20% 90deg,ellipse cover, #e2e2e2, #c6c9cc);
}

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /*cursor: default;*/
}

header {
    user-select: none;

display: inline-block;
color: #AAA;
font: bold 9pt arial;
text-decoration: none;
text-align: center;
width: 59px;
height: 41px;
margin: 5px;
background: #EFF0F2;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid whiteSmoke;
-webkit-box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
-moz-box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
text-shadow: 0px 1px 0px whiteSmoke;
    font-size: 18px;
    margin-bottom: 4px; padding-bottom: 0px;
    padding-top: 4px;
}

a span {
display: block;
margin: 3px 0 0;
text-transform: uppercase;
font-size: 11px;
}

a:hover, a:active {
outline: 0;
}

header:active, .keydown {
color: #888;
background: #EBECED;
margin: 7px 5px...