181 lines
3.6 KiB
CSS
181 lines
3.6 KiB
CSS
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Knöpfe */
|
|
.btn {
|
|
display: block;
|
|
background: hsl(86, 76%, 71%);
|
|
color: hsl(0, 0, 100);
|
|
text-decoration: none;
|
|
margin: 20px 0;
|
|
padding: 15px 15px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.btn::after
|
|
{
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all .2s ease-in-out;
|
|
box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0), 0 3px 3px hsla(0, 0, 0, .2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.btn:hover{
|
|
background: hsla(0, 0, 0, 0.1);
|
|
box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
.login-thirtparty {
|
|
padding-left: 15px;
|
|
color: #000;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-thirtparty:hover {
|
|
box-shadow: inset 0 3px 0 #000;
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
.login-thirtparty .fa {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 50px;
|
|
height: 100%;
|
|
text-align: center;
|
|
background: hsla(0, 0, 0, 0.1);
|
|
line-height: 3.2;
|
|
border-radius: 5px 0 0 5px;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.login-facebook {
|
|
background-color: hsl(221, 44%, 41%);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.login-twitter {
|
|
background-color: hsl(206, 82%, 63%);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.login-google {
|
|
background-color: hsl(7, 71%, 55%);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.thirtpartylogos {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.form fieldset {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 20px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.form fieldset input {
|
|
width: 100%;
|
|
height: 48px;
|
|
color: hsl(0, 0, 20);
|
|
padding: 15px 40px 15px 15px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
outline: none!important;
|
|
border: 1px solid hsla(0, 0, 0, 0.3);
|
|
box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.form button {
|
|
width: 100%;
|
|
outline: none!important;
|
|
background: linear-gradient(-5deg, hsl(86, 61%, 44%), hsl(86, 65%, 54%));
|
|
border: none;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
box-shadow: 0 3px 0px hsla(86, 21%, 44%, 0.2);
|
|
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
.anmelden {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
width: 800px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 25px hsla(0, 0, 0, 0.2);
|
|
display: flex;
|
|
}
|
|
|
|
.thirtpartylogin, .email-login {
|
|
width: 50%;
|
|
padding: 30px 40px;
|
|
}
|
|
|
|
.thirtpartylogin {
|
|
background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%));
|
|
border-radius: 10px;
|
|
color: hsl(0, 0, 100);
|
|
width: 45%;
|
|
}
|
|
|
|
.thirtpartylogin h1 {
|
|
font-size: 30px;
|
|
margin-top: 10px;
|
|
margin-bottom: 40px;
|
|
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.email-login h2 {
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
margin-top: 23px;
|
|
margin-bottom: 43px;
|
|
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.email-login fieldset::after {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 17px;
|
|
z-index: 2;
|
|
width: 20px;
|
|
color: hsla(0, 0, 0, .2);
|
|
text-align: center;
|
|
}
|
|
|
|
.email-login fieldset.username::after {
|
|
content: '👨'; /* User Name Emoji (Person) */
|
|
}
|
|
|
|
.email-login fieldset.email::after {
|
|
content: '📧'; /* Email Emoji */
|
|
}
|
|
.email-login fieldset.passwort::after {
|
|
content: '🔑'; /* Schlüssel (Passwort) Emoji */
|
|
} |