|
@ -2,7 +2,6 @@ |
|
|
font-family: "monofonto"; |
|
|
font-family: "monofonto"; |
|
|
src: url("../font/raleway.ttf") format("truetype"); |
|
|
src: url("../font/raleway.ttf") format("truetype"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
body { |
|
|
z-index: 1; |
|
|
z-index: 1; |
|
|
font-family: monofonto; |
|
|
font-family: monofonto; |
|
@ -10,24 +9,20 @@ body { |
|
|
margin: 143px 20px; |
|
|
margin: 143px 20px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
body > a { |
|
|
body > a { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: 20px; |
|
|
left: 20px; |
|
|
top: 20px; |
|
|
top: 20px; |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
body .logo { |
|
|
body .logo { |
|
|
display: block; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
body h1 { |
|
|
body h1 { |
|
|
margin: 40px; |
|
|
margin: 40px; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: #454545; |
|
|
color: #454545; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
body p { |
|
|
body p { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: #ac2a8d; |
|
|
color: #ac2a8d; |
|
@ -42,19 +37,16 @@ body p { |
|
|
background-color: #84878C; |
|
|
background-color: #84878C; |
|
|
border-radius: 20px; |
|
|
border-radius: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav ul { |
|
|
.nav ul { |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
width: 60%; |
|
|
width: 60%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav ul::after { |
|
|
.nav ul::after { |
|
|
content: ""; |
|
|
content: ""; |
|
|
display: block; |
|
|
display: block; |
|
|
clear: both; |
|
|
clear: both; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav__link { |
|
|
.nav__link { |
|
|
width: 20%; |
|
|
width: 20%; |
|
|
min-width: 100px; |
|
|
min-width: 100px; |
|
@ -63,13 +55,11 @@ body p { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
list-style-type: none; |
|
|
list-style-type: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav__link:hover { |
|
|
.nav__link:hover { |
|
|
background-color: #59184E; |
|
|
background-color: #59184E; |
|
|
transition: .25s; |
|
|
transition: 0.65s; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav__link a { |
|
|
.nav__link a { |
|
|
padding-top: 10px; |
|
|
padding-top: 10px; |
|
|
padding-bottom: 10px; |
|
|
padding-bottom: 10px; |
|
@ -78,7 +68,6 @@ body p { |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
text-decoration: none; |
|
|
text-decoration: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav__link a:hover { |
|
|
.nav__link a:hover { |
|
|
color: white; |
|
|
color: white; |
|
|
} |
|
|
} |
|
@ -97,12 +86,10 @@ form { |
|
|
.container-field { |
|
|
.container-field { |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-field small { |
|
|
.container-field small { |
|
|
display: none; |
|
|
display: none; |
|
|
color: red; |
|
|
color: red; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-field__img { |
|
|
.container-field__img { |
|
|
display: none; |
|
|
display: none; |
|
|
position: relative; |
|
|
position: relative; |
|
@ -111,7 +98,6 @@ form { |
|
|
bottom: 20px; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-field__field { |
|
|
.container-field__field { |
|
|
background-color: inherit; |
|
|
background-color: inherit; |
|
|
position: relative; |
|
|
position: relative; |
|
@ -128,15 +114,13 @@ form { |
|
|
border-radius: 30px; |
|
|
border-radius: 30px; |
|
|
width: 60%; |
|
|
width: 60%; |
|
|
max-width: 300px; |
|
|
max-width: 300px; |
|
|
transition: .25s; |
|
|
transition: 0.25s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-field__field:focus, .container-field__field:hover { |
|
|
.container-field__field:focus, .container-field__field:hover { |
|
|
width: 70%; |
|
|
width: 70%; |
|
|
border-color: #ac2a8d; |
|
|
border-color: #ac2a8d; |
|
|
background-color: white; |
|
|
background-color: white; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-field__field--submit:hover { |
|
|
.container-field__field--submit:hover { |
|
|
width: 65%; |
|
|
width: 65%; |
|
|
border-color: #2ecc71; |
|
|
border-color: #2ecc71; |
|
@ -148,18 +132,16 @@ form { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
top: 0; |
|
|
top: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__int { |
|
|
.hint__int { |
|
|
position: relative; |
|
|
position: relative; |
|
|
left: 35%; |
|
|
left: 35%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__help { |
|
|
.hint__help { |
|
|
display: none; |
|
|
display: none; |
|
|
z-index: 2; |
|
|
z-index: 2; |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 170px; |
|
|
width: 170px; |
|
|
right: -50px; |
|
|
left: 71%; |
|
|
border-radius: 30px; |
|
|
border-radius: 30px; |
|
|
box-shadow: 0 0 10px black; |
|
|
box-shadow: 0 0 10px black; |
|
|
padding: 15px; |
|
|
padding: 15px; |
|
@ -167,21 +149,17 @@ form { |
|
|
background-color: #e5e5e5; |
|
|
background-color: #e5e5e5; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__help:hover { |
|
|
.hint__help:hover { |
|
|
display: block; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__help p { |
|
|
.hint__help p { |
|
|
position: relative; |
|
|
position: relative; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__help img { |
|
|
.hint__help img { |
|
|
border-radius: 15px; |
|
|
border-radius: 15px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hint__help code { |
|
|
.hint__help code { |
|
|
background-color: #aaa; |
|
|
background-color: #aaa; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
@ -199,11 +177,9 @@ form { |
|
|
color: white; |
|
|
color: white; |
|
|
border: 1px solid #84878C; |
|
|
border: 1px solid #84878C; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table th { |
|
|
.table th { |
|
|
width: 1%; |
|
|
width: 1%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table td { |
|
|
.table td { |
|
|
background-color: #e5e5e5; |
|
|
background-color: #e5e5e5; |
|
|
border: 1px solid #84878C; |
|
|
border: 1px solid #84878C; |
|
@ -214,61 +190,50 @@ form { |
|
|
word-break: break-all; |
|
|
word-break: break-all; |
|
|
color: #84878C; |
|
|
color: #84878C; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table td img { |
|
|
.table td img { |
|
|
width: 40%; |
|
|
width: 40%; |
|
|
max-width: 40px; |
|
|
max-width: 40px; |
|
|
} |
|
|
} |
|
|
|
|
|
.table td .input { |
|
|
.table td input { |
|
|
|
|
|
border: 2px solid #ac2a8d; |
|
|
border: 2px solid #ac2a8d; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
text-align: inherit; |
|
|
text-align: inherit; |
|
|
outline: none; |
|
|
outline: none; |
|
|
color: #84878C; |
|
|
color: #84878C; |
|
|
transition: .05s; |
|
|
transition: 0.05s; |
|
|
} |
|
|
} |
|
|
|
|
|
.table td .input:hover { |
|
|
.table td input:hover { |
|
|
|
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
} |
|
|
} |
|
|
|
|
|
.table td .input:focus { |
|
|
.table td input:focus { |
|
|
|
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
border: 4px solid #ac2a8d; |
|
|
border: 4px solid #ac2a8d; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__title td { |
|
|
.table__title td { |
|
|
color: #ac2a8d; |
|
|
color: #ac2a8d; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
word-break: normal; |
|
|
word-break: normal; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch { |
|
|
.table__switch { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
width: 60px; |
|
|
width: 60px; |
|
|
height: 34px; |
|
|
height: 34px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch input { |
|
|
.table__switch input { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
height: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch input:checked + .table__switch__slider { |
|
|
.table__switch input:checked + .table__switch__slider { |
|
|
background-color: #2ecc71; |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch input:focus + .table__switch__slider { |
|
|
.table__switch input:focus + .table__switch__slider { |
|
|
box-shadow: 0 0 1px #2ecc71; |
|
|
box-shadow: 0 0 1px #2ecc71; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch input:checked + .table__switch__slider:before { |
|
|
.table__switch input:checked + .table__switch__slider:before { |
|
|
transform: translateX(26px); |
|
|
transform: translateX(26px); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch__slider { |
|
|
.table__switch__slider { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
@ -278,9 +243,8 @@ form { |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
background-color: crimson; |
|
|
background-color: crimson; |
|
|
border-radius: 34px; |
|
|
border-radius: 34px; |
|
|
transition: .4s; |
|
|
transition: 0.4s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.table__switch__slider:before { |
|
|
.table__switch__slider:before { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
@ -290,7 +254,7 @@ form { |
|
|
left: 4px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
transition: 0.4s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup { |
|
|
.container-popup { |
|
@ -305,12 +269,10 @@ form { |
|
|
visibility: hidden; |
|
|
visibility: hidden; |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup:target { |
|
|
.container-popup:target { |
|
|
visibility: visible; |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup__popup { |
|
|
.container-popup__popup { |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
@ -325,17 +287,14 @@ form { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
transition: all 5s ease-in-out; |
|
|
transition: all 5s ease-in-out; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup__popup h2 { |
|
|
.container-popup__popup h2 { |
|
|
margin-top: 0; |
|
|
margin-top: 0; |
|
|
color: #333; |
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup__popup p { |
|
|
.container-popup__popup p { |
|
|
max-height: 30%; |
|
|
max-height: 30%; |
|
|
overflow: auto; |
|
|
overflow: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup__popup__close { |
|
|
.container-popup__popup__close { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
top: 20px; |
|
@ -346,7 +305,6 @@ form { |
|
|
text-decoration: none; |
|
|
text-decoration: none; |
|
|
color: #333; |
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container-popup__popup__close:hover { |
|
|
.container-popup__popup__close:hover { |
|
|
color: #06D85F; |
|
|
color: #06D85F; |
|
|
} |
|
|
} |
|
@ -356,21 +314,19 @@ form { |
|
|
background-color: #e5e5e5; |
|
|
background-color: #e5e5e5; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
text-decoration: none; |
|
|
text-decoration: none; |
|
|
transition: .5s; |
|
|
transition: 0.5s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.button:hover { |
|
|
.button:hover { |
|
|
color: #e5e5e5; |
|
|
color: #e5e5e5; |
|
|
background-color: #ac2a8d; |
|
|
background-color: #ac2a8d; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.button--small { |
|
|
.button--small { |
|
|
width: 3rem; |
|
|
width: 3rem; |
|
|
|
|
|
border-width: medium; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
margin: 5px; |
|
|
margin: 5px; |
|
|
color: #84878C; |
|
|
color: #84878C; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.button--large { |
|
|
.button--large { |
|
|
color: #ac2a8d; |
|
|
color: #ac2a8d; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
@ -378,3 +334,5 @@ form { |
|
|
padding: 10px 40px; |
|
|
padding: 10px 40px; |
|
|
border-radius: 20px; |
|
|
border-radius: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*# sourceMappingURL=style.css.map */ |
|
|