registration design
This commit is contained in:
Hannes Mannerheim
parent
d36a03fb0c
commit
0d7a73194f
192
css/1.css
192
css/1.css
|
|
@ -358,6 +358,10 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
|
|||
padding-top: 1px;
|
||||
width:123px;
|
||||
}
|
||||
|
||||
.dropdown-menu.quitter-settings li.language {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#birds-top {
|
||||
display:block;
|
||||
|
|
@ -382,8 +386,57 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
|
|||
direction: ltr;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
.front-welcome-text {
|
||||
color: #EEEEEE;
|
||||
font-size: 30px;
|
||||
font-weight: 300;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
text-shadow: 0 1px 2px #000000;
|
||||
display:none;
|
||||
font-family: "Helvetica Neue",Arial,sans-serif;
|
||||
}
|
||||
body.rtl .front-welcome-text {
|
||||
direction:rtl;
|
||||
text-align:right;
|
||||
font-family:Tahoma,Arial,sans-serif;
|
||||
}
|
||||
.front-welcome-text h1 {
|
||||
color: #FFFFFF;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 2px #000000;
|
||||
}
|
||||
.front-welcome-text #federated-tooltip {
|
||||
text-decoration:underline;
|
||||
position:relative;
|
||||
cursor:help;
|
||||
}
|
||||
#federated-tooltip #what-is-federation {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid #333333;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
color: #333333;
|
||||
display: none;
|
||||
font-size: 17px;
|
||||
left: 0;
|
||||
line-height: 22px;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 3px #CCCCCC;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
z-index:10000;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#login-content {
|
||||
#login-content,
|
||||
.front-signup {
|
||||
font-family: Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
|
@ -414,12 +467,17 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
|
|||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
|
||||
position:fixed;
|
||||
position:absolute;
|
||||
opacity:0;
|
||||
margin-top:1px;
|
||||
z-index:2000;
|
||||
}
|
||||
|
||||
.front-signup {
|
||||
margin-top:123px;
|
||||
height: 206px;
|
||||
}
|
||||
|
||||
.front-signup input,
|
||||
#login-content input#username,
|
||||
#login-content input#password {
|
||||
font-family: Arial,sans-serif;
|
||||
|
|
@ -491,6 +549,20 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
|
|||
padding: 4px;
|
||||
margin-left:-1px;
|
||||
}
|
||||
.front-signup input {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.front-signup input:focus,
|
||||
#login-content input#username:focus,
|
||||
#login-content input#password:focus {
|
||||
border: 1px solid #56B4EF;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
.front-signup input.disabled {
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
table.password-signin {
|
||||
left: 12px;
|
||||
|
|
@ -631,12 +703,113 @@ button#submit-login:hover {
|
|||
width: 276px;
|
||||
height: 30px;
|
||||
}
|
||||
.signup-input-container {
|
||||
position:relative;
|
||||
color: #333333;
|
||||
margin-left: 12px;
|
||||
margin-top:6px;
|
||||
width: 276px;
|
||||
height: 30px;
|
||||
}
|
||||
#password-container {
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.front-signup h2 {
|
||||
border-bottom: 1px solid #E2E2E2;
|
||||
box-shadow: 0 1px 0 #FFFFFF;
|
||||
color: #777777;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
margin-top:0;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
font-family: "Helvetica Neue",Arial,sans-serif;
|
||||
}
|
||||
.front-signup h2 strong {
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.front-signup .signup-btn {
|
||||
font-family: "Helvetica Neue",Arial,sans-serif;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
background-color: #FD9A0F;
|
||||
background: -moz-linear-gradient(top, rgba(254,233,79,1) 0px, rgba(253,154,15,1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(254,233,79,1)), color-stop(100%,rgba(253,154,15,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(254,233,79,1) 0px,rgba(253,154,15,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(254,233,79,1) 0px,rgba(253,154,15,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(254,233,79,1) 0px,rgba(253,154,15,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(254,233,79,1) 0px,rgba(253,154,15,1) 100%);
|
||||
border: 1px solid #FFAA22;
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #FFFFFF;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
}
|
||||
.front-signup .signup-btn:hover, .front-signup .signup-btn:focus {
|
||||
background-color: #FD9512;
|
||||
background: -moz-linear-gradient(top, rgba(254,220,77,1) 0px, rgba(253,149,18,1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(254,220,77,1)), color-stop(100%,rgba(253,149,18,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(254,220,77,1) 0px,rgba(253,149,18,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(254,220,77,1) 0px,rgba(253,149,18,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(254,220,77,1) 0px,rgba(253,149,18,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(254,220,77,1) 0px,rgba(253,149,18,1) 100%);
|
||||
border-color: #EC8B11;
|
||||
}
|
||||
|
||||
.modal-body .front-signup {
|
||||
width:100%;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
margin-top:10px;
|
||||
height:346px;
|
||||
}
|
||||
.modal-body .front-signup .signup-input-container {
|
||||
margin:6px auto 0 auto;
|
||||
width:276px;
|
||||
}
|
||||
.modal-body .front-signup #atsign,
|
||||
.modal-body .front-signup .fieldhelp {
|
||||
font-size: 16px;
|
||||
height: 20px;
|
||||
left: -20px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: 20px;
|
||||
}
|
||||
.modal-body .front-signup .fieldhelp {
|
||||
color: #AAAAAA;
|
||||
font-size: 14px;
|
||||
left: 0;
|
||||
margin-left: 276px;
|
||||
padding-left: 5px;
|
||||
right: 3px;
|
||||
top: 6px;
|
||||
width: auto;
|
||||
}
|
||||
.modal-body .front-signup .signup-input-container input.invalid,
|
||||
.modal-body .front-signup .signup-input-container input.nickname-taken {
|
||||
background-color:pink;
|
||||
}
|
||||
|
||||
#page-container {
|
||||
width:837px;
|
||||
padding:14px 14px 0 14px;
|
||||
|
|
@ -2051,6 +2224,9 @@ ul.stats li:hover a strong,
|
|||
cursor: pointer;
|
||||
text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 1px;
|
||||
}
|
||||
button.signup-btn.disabled:hover,
|
||||
button.signup-btn.disabled:focus,
|
||||
button.signup-btn.disabled,
|
||||
#queet-toolbar button.disabled,
|
||||
.queet-toolbar button.disabled {
|
||||
background-color: #DDDDDD;
|
||||
|
|
@ -2413,6 +2589,12 @@ div.clearfix {
|
|||
margin-left:-10px;
|
||||
z-index:10000;
|
||||
}
|
||||
.signup-input-container .spinner-wrap {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:25px;
|
||||
margin-left:243px;
|
||||
}
|
||||
.spinner {
|
||||
height: 20px; width: 20px;
|
||||
margin: -20px auto 0;
|
||||
|
|
@ -2437,6 +2619,10 @@ div.clearfix {
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-input-container .spinner i {
|
||||
background:rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.spinner i:nth-child(1) { opacity: 0.08; }
|
||||
.spinner i:nth-child(2) { transform: rotate(30deg); transform: rotate(30deg); transform: rotate(30deg); opacity: 0.167; }
|
||||
.spinner i:nth-child(3) { transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); opacity: 0.25; }
|
||||
|
|
|
|||
23
index.php
23
index.php
|
|
@ -91,6 +91,14 @@
|
|||
<li><a id="settings"></a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a id="logout"></a></li>
|
||||
<li class="language dropdown-divider"></li>
|
||||
<li class="language"><a class="language-link" title="Arabic" data-lang-code="ar">العربيّة</a></li>
|
||||
<li class="language"><a class="language-link" title="German" data-lang-code="de">Deutsch</a></li>
|
||||
<li class="language"><a class="language-link" title="English" data-lang-code="en">English</a></li>
|
||||
<li class="language"><a class="language-link" title="Spanish" data-lang-code="es">Español</a></li>
|
||||
<li class="language"><a class="language-link" title="Farsi" data-lang-code="fa">فارسی</a></li>
|
||||
<li class="language"><a class="language-link" title="French" data-lang-code="fr">français</a></li>
|
||||
<li class="language"><a class="language-link" title="Swedish" data-lang-code="sv">svenska</a></li>
|
||||
</ul>
|
||||
<img id="birds-top" src="<?php print $qvitterpath; ?>img/birds.png" />
|
||||
<div class="global-nav">
|
||||
|
|
@ -132,7 +140,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="page-container">
|
||||
<div id="user-container" style="display:none;">
|
||||
<div class="front-welcome-text">
|
||||
<h1></h1>
|
||||
<p></p>
|
||||
</div>
|
||||
<div id="user-container" style="display:none;">
|
||||
<div id="login-content">
|
||||
<div id="username-container">
|
||||
<input id="username" type="text" value="" tabindex="1" />
|
||||
|
|
@ -151,6 +163,13 @@
|
|||
<input type="checkbox" id="rememberme" name="rememberme" value="yes" tabindex="3"> <span id="rememberme_label"></span> · <a href="http://quitter.se/main/recoverpassword"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="front-signup">
|
||||
<h2></h2>
|
||||
<div class="signup-input-container"><input placeholder="" type="text" name="user[name]" autocomplete="off" class="text-input" id="signup-user-name"></div>
|
||||
<div class="signup-input-container"><input placeholder="" type="text" name="user[email]" autocomplete="off" id="signup-user-email"></div>
|
||||
<div class="signup-input-container"><input placeholder="" type="password" name="user[user_password]" class="text-input" id="signup-user-password"></div>
|
||||
<button id="signup-btn-step1" class="signup-btn" type="submit"></button>
|
||||
</div>
|
||||
<div id="user-header">
|
||||
<img id="user-avatar" src="" />
|
||||
<div id="user-name"></div>
|
||||
|
|
@ -200,7 +219,7 @@
|
|||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/dom-functions-1.js"></script>
|
||||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/misc-functions-1.js"></script>
|
||||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/ajax-functions-1.js"></script>
|
||||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter-1.js"></script>
|
||||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lan-1.js"></script>
|
||||
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter-1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user