redesign user frontend
This commit is contained in:
@@ -28,109 +28,166 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main {
|
||||
background: url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
.ac-custom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main .wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main .wrapper .form-container {
|
||||
background: #ffffff;
|
||||
header section .form-check {
|
||||
display: table;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
main .wrapper .form-container h1 {
|
||||
font: normal 32px Arial, Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
main .wrapper .form-container h1.sub-title {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
main .wrapper .form-container h2 {
|
||||
font: normal 18px Arial, Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
main .wrapper .form-container .form-input {
|
||||
background: #cbcbc8;
|
||||
min-width: 300px;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
header section h1 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
header section .input-submit button,
|
||||
header section .input-submit button:hover,
|
||||
header section .form-input,
|
||||
header section .form-input:focus,
|
||||
header section .form-input:hover {
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
-moz-transition: all 250ms ease-in-out;
|
||||
-o-transition: all 250ms ease-in-out;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
main .wrapper .form-container .form-input:focus {
|
||||
background: #e2e2de;
|
||||
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
main .wrapper .form-container .form-input.form-username {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
main .wrapper .form-container .form-check {
|
||||
header section .input-submit button {
|
||||
background: #83aed9;
|
||||
display: table;
|
||||
position: relative;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
main .wrapper .form-container .input-submit {
|
||||
font: bold 32px 'Rajdhani', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
width: 500px;
|
||||
border: 1px solid #658fb8;
|
||||
color: #FFFFFF;
|
||||
padding: 25px 100px;
|
||||
margin-top: 20px;
|
||||
|
||||
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
main .wrapper .form-container button,
|
||||
main .wrapper .form-container .fb-login {
|
||||
header section .input-submit button:hover {
|
||||
background: #86b5e1;
|
||||
|
||||
-webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
header section .form-input {
|
||||
display: block;
|
||||
background: #7dadcf;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
width: 500px;
|
||||
font: bold 22px 'Rajdhani', sans-serif;
|
||||
border: 1px solid #dddddd;
|
||||
color: #000000;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
transition: all 250ms ease-in-out;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
main .wrapper .form-container .fb-login {
|
||||
background: #3b5998;
|
||||
header section .form-input:focus,
|
||||
header section .form-input:hover {
|
||||
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
main .wrapper .form-container button:focus,
|
||||
main .wrapper .form-container button:hover,
|
||||
main .wrapper .form-container .fb-login:focus,
|
||||
main .wrapper .form-container .fb-login:hover {
|
||||
background: #6fa0c3;
|
||||
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
transition: all 250ms ease-in-out;
|
||||
header section h3.or {
|
||||
font: bold 16px 'Rajdhani', sans-serif;
|
||||
text-transform: uppercase;
|
||||
color: #a1a1a1;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
main .wrapper .form-container button i,
|
||||
main .wrapper .form-container .fb-login i {
|
||||
font-size: 32px;
|
||||
font-weight: bolder;
|
||||
color: #ffffff;
|
||||
header section .fb,
|
||||
header section form {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
header section a.fb-login {
|
||||
background: #5975b1;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 500px;
|
||||
height: 93px;
|
||||
border: 1px solid #50649f;
|
||||
margin: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
header section a.fb-login:hover {
|
||||
background: #42598c;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
header section a.fb-login i {
|
||||
position: absolute;
|
||||
font-size: 130px;
|
||||
top: 0;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
header section .form-input,
|
||||
header section .form-check {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
header section .input-submit button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header section > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header section a.fb-login {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
header section {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
header section .form-input {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
header section .form-check {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
header section .input-submit button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header section a.fb-login {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header section a.fb-login span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user