Mail Message Send Window

This pane was designed for the handle compose/reply/forward screen. Thanks - court kizer

by kizer

HTML

<body class='sessions new'>
    <div id='app'>
      <div class='middle' id='welcome'>
        <header>
          <h1>
            handl
            <span>alpha</span>
          </h1>
        </header>
        <div class='well'>
          
          <form accept-charset="UTF-8" action="/users/sign_in" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="WRpmKUNAjnM785EZqSLkcMkyajsrkuC7U5Py5E6ax8E=" /></div>
            <fieldset>
            <div class='input'>
              <input id="user_email" name="user[email]" placeholder="Username" size="30" tabindex="10" type="text" value="" />
            </div>
            <div class='input'>
              <input id="user_password" name="user[password]" placeholder="Password" size="30" tabindex="20" type="password" />
            </div>
            </fieldset>
            <div class='input'>
              <input class="btn primary" id="sign_in" name="commit" type="submit" value="" />
            </div>
          </form>
        </div>
      </div>
    </div>
    
  </body>

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    /* Improves handling of kerning pairs and ligatures */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}




/*login-window-system */

#welcome {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 357px;
  height: 169px;
  border-radius: 3px;
  padding: 20px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  box-shadow: 0 2px 8px rgba(0,0,0, .6384);
  background: #f5f5f5;
  /* Below behavior prevents text selection - nice clean web app */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

#welcome h1 {
  -webkit-margin-before: 0px;
  margin-top: -5px;
  height: 35px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
  -webkit-font-smoothing: antialiased;
  /* Below behavior prevents text selection - nice clean web app */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

#welcome h1 span {
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(76,76,76,.589);
}

#welcome input[type="text"], input[type="password"] {
 ...