1
0
mirror of https://github.com/Foltik/Shimapan synced 2024-12-11 22:12:18 -05:00
shimapan/public/css/form.css
2019-01-01 18:09:16 -05:00

120 lines
2.2 KiB
CSS

body {
background-color: #000000;
margin: 0;
color: #d3d3d3;
font-family: 'Roboto', sans-serif;
}
::-moz-focus-inner {
border: 0;
}
.form {
margin: 50px auto;
width: 300px;
}
.form h3 {
background-color: #000;
border: 2px solid #2a9fd6;
border-radius: 5px 5px 0 0;
color: #eee;
font-size: 18px;
padding: 20px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
fieldset {
border: 2px solid #2a9fd6;
border-top: none;
margin: 0;
background: #000;
border-radius: 0 0 5px 5px;
padding: 20px;
position: relative;
}
fieldset:before {
border-bottom: 2px solid #2a9fd6;
border-right: 2px solid #2a9fd6;
background-color: #000;
content: "";
width: 8px;
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
transform: rotate(45deg) translateY(-2px);
}
.form input {
display: block;
font-size: 14px;
background: #000;
color: #d3d3d3;
border: 1px solid #999;
width: 226px;
padding: 12px 12px;
margin: auto auto 5px;
}
button {
background: #000;
border: 2px solid #2a9fd6;
border-radius: 4px;
color: #d3d3d3;
cursor: pointer;
display: block;
padding: 10px 30px;
margin: 20px auto auto;
transition: background 0.25s, border-color 0.25s;
}
button:hover {
background: #2a9fd6;
color: #fff;
text-decoration: none;
outline: none;
}
button.error {
background: #ff6666;
border-color: #ff6666;
color: #fff;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
button.warn {
background: #ffa500;
border-color: #ffa500;
color: #fff;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}