Splitted login and register pages
This commit is contained in:
Joey Lai
@@ -1,98 +1,117 @@
|
||||
::selection {
|
||||
background: #845663;
|
||||
color: white;
|
||||
background: #845663;
|
||||
color: white;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #845663;
|
||||
color: white;
|
||||
background: #845663;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:hover, a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.button {
|
||||
background-color: #845663;
|
||||
border: 2px solid black;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
height: 50%;
|
||||
margin: 8px 0;
|
||||
padding: 14px 20px;
|
||||
width: 25%;
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
|
||||
div[data-title]:hover:after{
|
||||
content: attr(data-title);
|
||||
padding: 4px 4px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
z-index: 20;
|
||||
white-space: nowrap;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-shadow: 0px 0px 4px #222;
|
||||
-webkit-box-shadow: 0px 0px 4px #222;
|
||||
box-shadow: 0px 0px 4px #222;
|
||||
background-color: #333;
|
||||
font-size: 15px;
|
||||
line-height: normal;
|
||||
font-family: Arial, sans-serif;
|
||||
content: attr(data-title);
|
||||
padding: 4px 4px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
z-index: 20;
|
||||
white-space: nowrap;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-shadow: 0px 0px 4px #222;
|
||||
-webkit-box-shadow: 0px 0px 4px #222;
|
||||
box-shadow: 0px 0px 4px #222;
|
||||
background-color: #333;
|
||||
font-size: 15px;
|
||||
line-height: normal;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Add Zoom Animation */
|
||||
.animate {
|
||||
animation: animatezoom 0.6s
|
||||
-webkit-animation: animatezoom 0.6s;
|
||||
animation: animatezoom 0.6s
|
||||
-webkit-animation: animatezoom 0.6s;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
height: 100%;
|
||||
height: 900px;
|
||||
|
||||
background-color: #B78996;
|
||||
color: #333;
|
||||
background-image: url(https://images2.pixlis.com/background-image-plaid-checkered-seamless-tileable-235ftm.png);
|
||||
background-size: contain;
|
||||
background-attachment: fixed;
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
/*background-color: #B78996;*/
|
||||
color: #333;
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* stijl voor alle buttons */
|
||||
button {
|
||||
background-color: #845663;
|
||||
border: 2px solid black;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
height: 50%;
|
||||
margin: 8px 0;
|
||||
padding: 14px 20px;
|
||||
width: 25%;
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
background-color: #845663;
|
||||
border: 2px solid black;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
height: 50%;
|
||||
margin: 8px 0;
|
||||
padding: 14px 20px;
|
||||
width: 25%;
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
/* Position it in the top right corner outside of the modal */
|
||||
color: white;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 0;
|
||||
color: white;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Close button on hover */
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* inlogform */
|
||||
form {
|
||||
background-color: #a87a87;
|
||||
/*background-color: #a87a87;*/
|
||||
border: 5px solid #325da3;
|
||||
background-color: #a87a87;
|
||||
border-radius: 12px;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
width: 55%;
|
||||
height: 57%;
|
||||
margin: 8px auto;
|
||||
width: 45%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* inlog titel */
|
||||
@@ -142,14 +161,21 @@ label {
|
||||
|
||||
/* padding voor registreer container */
|
||||
.login_containerregister {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* padding voor login_containers */
|
||||
.login_containerlogin {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* padding voor foutmelding login */
|
||||
.login_containerfault {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
@@ -175,12 +201,13 @@ label {
|
||||
margin: 5px auto; /* 15% from the top and centered */
|
||||
overflow-y: auto;
|
||||
width: 40%; /* Could be more or less, depending on screen size */
|
||||
height: 80%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes animatezoom {
|
||||
from {transform: scale(0)}
|
||||
to {transform: scale(1)}
|
||||
from {transform: scale(0)}
|
||||
to {transform: scale(1)}
|
||||
}
|
||||
|
||||
/* datepicker */
|
||||
@@ -203,6 +230,6 @@ select {
|
||||
}
|
||||
|
||||
ul {
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user