Skip to content

Instantly share code, notes, and snippets.

@dingo-d
Last active January 20, 2016 12:56
Show Gist options
  • Save dingo-d/1538213417d3a9b4cacd to your computer and use it in GitHub Desktop.
Save dingo-d/1538213417d3a9b4cacd to your computer and use it in GitHub Desktop.
Unfinished .css file for AJAX log in and register. Part of Header AJAX login/register gist (4)
/*------------------------ AJAX login -------------------------*/
.top_bar{
text-align: right;
}
.top_bar .ajax_login{
display: inline-block;
margin-right: 10px;
}
.top_bar .ajax_login_overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.5);
display: none;
cursor: default;
z-index: 101;
transform: translateZ(1px);
}
.top_bar .ajax_login form#login{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .ajax_login form#login h1{
color: #656565;
background: #eee;
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
padding: 2px 20px;
text-align: left;
}
.top_bar .ajax_login form#login p.status{
display: none;
padding: 0 20px;
margin-bottom: 12px;
}
.top_bar .ajax_login form#login input#username,
.top_bar .ajax_login form#login input#password{
margin: 10px 20px;
width: 400px;
display: block;
}
.top_bar .ajax_login form#login .forgotten_box{
display: inline-block;
padding: 3px 20px 0 20px;
}
.top_bar .ajax_login form#login .forgotten_box .lost{
display: block;
padding: 5px;
padding-left: 0;
margin-bottom: 0;
}
.top_bar .ajax_login form#login input.submit_button{
padding: 15px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
margin-right: 20px;
float: right;
cursor: pointer;
-webkit-transition: all 180ms ease-in;
-moz-transition: all 180ms ease-in;
-o-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
.top_bar .ajax_login .login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}
.top_bar .ajax_login .login_button,
.top_bar .register a{
display: inline-block;
color: #0c0f0b;
font-size: 12px;
font-weight: 700;
line-height: 30px;
}
.top_bar .ajax_login .login_button:hover{
color: #d84949;
}
.top_bar .register{
display: inline-block;
}
/*------------------------ AJAX register -------------------------*/
.top_bar .register #register_form{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .register #register_form input[type="text"]{
margin: 10px 20px;
width: 400px;
display: block;
background: #f2f2f2;
border: 0;
font-family: 'Roboto', sans-serif;
color: rgb(115, 115, 115);
color: rgba(115, 115, 115, 0.5);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
font-style: italic;
}
.top_bar .register #register_form .register-heading{
background: #be0017;
font-family: Arial;
color: #ffffff;
font-size: 16px;
line-height: 12px;
font-weight: 700;
letter-spacing: 0.64px;
text-align: left;
padding:15px 20px;
text-transform:uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment