hydra-werther/internal/web/templates/static/style.css

303 lines
5.8 KiB
CSS
Raw Normal View History

2019-11-28 13:47:29 +01:00
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Light'), local('Roboto-Light'), url('./fonts/Roboto-Light.ttf') format('ttf'),
url('./fonts/Roboto-Light.woff') format('woff'), url('./fonts/Roboto-Light.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Light'), local('Roboto-Light'), url('./fonts/Roboto-Light.ttf') format('ttf'),
url('./fonts/Roboto-Light.woff') format('woff'), url('./fonts/Roboto-Light.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Light'), local('Roboto-Light'), url('./fonts/Roboto-Light.ttf') format('ttf'),
url('./fonts/Roboto-Light.woff') format('woff'), url('./fonts/Roboto-Light.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Light'), local('Roboto-Light'), url('./fonts/Roboto-Light.ttf') format('ttf'),
url('./fonts/Roboto-Light.woff') format('woff'), url('./fonts/Roboto-Light.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
2019-02-18 14:57:54 +01:00
html {
box-sizing: border-box;
}
*,
::after,
::before {
box-sizing: inherit;
}
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
@media (max-width: 480px) {
.login-page {
width: 100%;
padding: 8% 5% 0;
}
}
.form {
position: relative;
z-index: 1;
background: #ffffff;
max-width: 360px;
margin: 0 auto 100px;
padding: 2.815em;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
@media (max-width: 480px) {
.form {
margin: 15% auto 0;
max-width: 100%;
padding: 0;
box-shadow: none;
}
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
@media (max-width: 480px) {
.form input {
font-size: 1.5em;
}
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #2ba6cb;
width: 100%;
border: 0;
padding: 1.08em;
color: #ffffff;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
@media (max-width: 480px) {
.form button {
padding: 0.8em;
font-size: 1.3em;
}
}
.form button:hover {
background: #2795b7;
}
.form button:active {
2019-11-28 13:47:29 +01:00
background: #2384a3;
2019-02-18 14:57:54 +01:00
}
.form .message {
margin: 0 0 15px;
color: #ff6961;
font-size: 15px;
}
@media (max-width: 480px) {
.form .message {
min-height: 3em;
font-size: 1.5em;
}
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #ef3b3a;
}
body {
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.remember-container {
padding-bottom: 2em;
font-size: 90%;
}
.checkbox {
cursor: pointer;
}
.checkbox div.checkbox-overlay {
position: relative;
overflow: hidden;
}
.checkbox input {
opacity: 0;
position: absolute;
cursor: pointer;
left: 0;
margin: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.checkbox label {
float: left;
line-height: initial;
font-size: 0.9em;
padding: 0.14em 1em;
}
@media (max-width: 480px) {
.checkbox label {
font-size:1.25em;
padding:0.28em 0.8em;
}
}
.checkbox div.checkbox-container {
float: left;
}
.checkbox div.checkbox-container .checkbox-checkmark {
position: relative;
background-color: #eee;
width: 20px;
height: 20px;
}
.checkbox div.checkbox-checkmark::after {
display: none;
position: absolute;
content: "";
border: solid white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
height: 12px;
width: 6px;
left: 7px;
top: 3px;
border-width: 0 2px 3px 0;
}
@media (max-width: 480px) {
.checkbox div.checkbox-container .checkbox-checkmark {
width: 34px;
height: 34px;
}
.checkbox div.checkbox-container .checkbox-checkmark:after {
height: 20.4px;
width: 10.2px;
left: 11.9px;
top: 4px;
border-width: 0 3px 5px 0;
}
}
.checkbox input:checked ~ .checkbox-container > .checkbox-checkmark {
background-color: #2ba6cb;
border: 0;
}
.checkbox input:checked ~ .checkbox-container > .checkbox-checkmark:after {
display: initial;
}
.checkbox input:checked:hover ~ .checkbox-container > .checkbox-checkmark {
background-color: #2ba6cb;
border: 0;
}
.checkbox
input:checked:hover
~ .checkbox-container
> .checkbox-checkmark:after {
border-color: white;
}
.checkbox input:hover ~ .checkbox-container > .checkbox-checkmark {
background-color: #ddd;
}
.checkbox input:hover ~ .checkbox-container > .checkbox-checkmark:after {
display: initial;
border-color: rgba(190, 190, 190, 1);
border-top: 0px;
border-left: 0px;
}