BARRAUX Arthur
3 years ago
16 changed files with 238 additions and 279 deletions
@ -1,380 +1,338 @@ |
|||||
@font-face { |
@font-face { |
||||
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; |
||||
background-color: #e5e5e5; |
background-color: #e5e5e5; |
||||
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; |
||||
font-size: 20px; |
font-size: 20px; |
||||
height: 20px; |
height: 20px; |
||||
} |
} |
||||
|
|
||||
.nav { |
.nav { |
||||
width: 80%; |
width: 80%; |
||||
margin-left: 10%; |
margin-left: 10%; |
||||
margin-bottom: 3%; |
margin-bottom: 3%; |
||||
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; |
||||
float: left; |
float: left; |
||||
position: relative; |
position: relative; |
||||
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; |
||||
color: white; |
color: white; |
||||
font-weight: bold; |
font-weight: bold; |
||||
display: inline-block; |
display: inline-block; |
||||
text-decoration: none; |
text-decoration: none; |
||||
} |
} |
||||
|
|
||||
.nav__link a:hover { |
.nav__link a:hover { |
||||
color: white; |
color: white; |
||||
} |
} |
||||
|
|
||||
form { |
form { |
||||
width: 20%; |
width: 20%; |
||||
min-width: 300px; |
min-width: 300px; |
||||
background-color: white; |
background-color: white; |
||||
display: block; |
display: block; |
||||
position: relative; |
position: relative; |
||||
margin: auto; |
margin: auto; |
||||
border-radius: 30px; |
border-radius: 30px; |
||||
padding: 20px; |
padding: 20px; |
||||
} |
} |
||||
|
|
||||
.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; |
||||
float: right; |
float: right; |
||||
width: 20px; |
width: 20px; |
||||
bottom: 20px; |
bottom: 20px; |
||||
right: 20px; |
right: 20px; |
||||
} |
} |
||||
|
|
||||
.container-field__field { |
.container-field__field { |
||||
background-color: inherit; |
background-color: inherit; |
||||
position: relative; |
position: relative; |
||||
display: block; |
display: block; |
||||
text-decoration-line: none; |
text-decoration-line: none; |
||||
appearance: none; |
appearance: none; |
||||
text-align: center; |
text-align: center; |
||||
color: #454444; |
color: #454444; |
||||
resize: none; |
resize: none; |
||||
outline: none; |
outline: none; |
||||
margin: 10px auto; |
margin: 10px auto; |
||||
border: 4px solid #4e4d4d; |
border: 4px solid #4e4d4d; |
||||
padding: 10px 10px; |
padding: 10px 10px; |
||||
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; |
||||
background-color: #82E6AC; |
background-color: #82E6AC; |
||||
} |
} |
||||
|
|
||||
.hint { |
.hint { |
||||
position: absolute; |
position: absolute; |
||||
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; |
||||
margin: 0; |
margin: 0; |
||||
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; |
||||
font-family: courier, monospace; |
font-family: courier, monospace; |
||||
padding: 3px 5px; |
padding: 3px 5px; |
||||
font-size: 14px; |
font-size: 14px; |
||||
} |
} |
||||
|
|
||||
.table { |
.table { |
||||
width: 80%; |
width: 80%; |
||||
border-radius: 5px; |
border-radius: 5px; |
||||
margin-left: 10%; |
margin-left: 10%; |
||||
margin-top: 2%; |
margin-top: 2%; |
||||
background-color: #84878C; |
background-color: #84878C; |
||||
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; |
||||
width: 1%; |
width: 1%; |
||||
min-width: 20px; |
min-width: 20px; |
||||
border-radius: 5px; |
border-radius: 5px; |
||||
text-align: center; |
text-align: center; |
||||
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: 0.05s; |
||||
transition: .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; |
||||
top: 0; |
top: 0; |
||||
left: 0; |
left: 0; |
||||
right: 0; |
right: 0; |
||||
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%; |
||||
content: ""; |
content: ""; |
||||
height: 26px; |
height: 26px; |
||||
width: 26px; |
width: 26px; |
||||
left: 4px; |
left: 4px; |
||||
bottom: 4px; |
bottom: 4px; |
||||
background-color: white; |
background-color: white; |
||||
transition: .4s; |
transition: 0.4s; |
||||
} |
} |
||||
|
|
||||
.container-popup { |
.container-popup { |
||||
z-index: 1; |
z-index: 1; |
||||
position: fixed; |
position: fixed; |
||||
top: 0; |
top: 0; |
||||
bottom: 0; |
bottom: 0; |
||||
left: 0; |
left: 0; |
||||
right: 0; |
right: 0; |
||||
background: rgba(0, 0, 0, 0.7); |
background: rgba(0, 0, 0, 0.7); |
||||
transition: opacity 500ms; |
transition: opacity 500ms; |
||||
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; |
||||
background: #fff; |
background: #fff; |
||||
top: 0; |
top: 0; |
||||
bottom: 0; |
bottom: 0; |
||||
left: 0; |
left: 0; |
||||
right: 0; |
right: 0; |
||||
border-radius: 5px; |
border-radius: 5px; |
||||
width: 30%; |
width: 30%; |
||||
height: 150px; |
height: 150px; |
||||
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; |
||||
right: 30px; |
right: 30px; |
||||
transition: all 200ms; |
transition: all 200ms; |
||||
font-size: 30px; |
font-size: 30px; |
||||
font-weight: bold; |
font-weight: bold; |
||||
text-decoration: none; |
text-decoration: none; |
||||
color: #333; |
color: #333; |
||||
} |
} |
||||
|
|
||||
.container-popup__popup__close:hover { |
.container-popup__popup__close:hover { |
||||
color: #06D85F; |
color: #06D85F; |
||||
} |
} |
||||
|
|
||||
.button { |
.button { |
||||
border: 3px solid #ac2a8d; |
border: 3px solid #ac2a8d; |
||||
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-radius: 5px; |
border-width: medium; |
||||
margin: 5px; |
border-radius: 5px; |
||||
color: #84878C; |
margin: 5px; |
||||
|
color: #84878C; |
||||
} |
} |
||||
|
|
||||
.button--large { |
.button--large { |
||||
color: #ac2a8d; |
color: #ac2a8d; |
||||
display: inline-block; |
display: inline-block; |
||||
margin-bottom: 3%; |
margin-bottom: 3%; |
||||
padding: 10px 40px; |
padding: 10px 40px; |
||||
border-radius: 20px; |
border-radius: 20px; |
||||
} |
} |
||||
|
|
||||
|
/*# sourceMappingURL=style.css.map */ |
||||
|
@ -1 +1 @@ |
|||||
{"version":3,"sourceRoot":"","sources":["../sass/main.scss"],"names":[],"mappings":"AAMA;EACI;EACA;;AAGJ;EACI;EACA;EACA,kBAbS;EAcT;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OA9BE;EA+BF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBA9CQ;EA+CR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBAhEG;EAiEH;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAUhB;EACI;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,cAnIF;EAoIE;;AAEJ;EACI;EACA;EACA;;;AASZ;EAII;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAlKS;EAmKT;;AAdA;EACI;;AAcJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAQR;EACI;EACA;EACA;EACA;EACA,kBA/LQ;EAgMR;EACA;;AACA;EACI;;AAEJ;EACI,kBArMK;EAuML;EACA;EACA;EACA;EAEA;EACA;EACA,OA/MI;;AAgNJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OAzNA;EA0NA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OAlOE;EAmOF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAOhB;EACI;EACA,kBA5US;EA6UT;EACA;EACA;;AACA;EACI,OAjVK;EAkVL,kBAhVE;;AAkVN;EACI;EACA;EACA;EACA,OAzVI;;AA2VR;EACI,OAzVE;EA0VF;EACA;EACA;EACA","file":"style.css"} |
{"version":3,"sourceRoot":"","sources":["../sass/main.scss"],"names":[],"mappings":"AAMA;EACI;EACA;;AAGJ;EACI;EACA;EACA,kBAbS;EAcT;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OA9BE;EA+BF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBA9CQ;EA+CR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBAhEG;EAiEH;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAUhB;EACI;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,cAnIF;EAoIE;;AAEJ;EACI;EACA;EACA;;;AASZ;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EAII;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAzKK;EA0KL;;AAbA;EACI;;AAaJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAWZ;EACI;EACA;EACA;EACA;EACA,kBAzMQ;EA0MR;EACA;;AACA;EACI;;AAEJ;EACI,kBA/MK;EAiNL;EACA;EACA;EACA;EAEA;EACA;EACA,OAzNI;;AA0NJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OAnOA;EAoOA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OA5OE;EA6OF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAOhB;EACI;EACA,kBAtVS;EAuVT;EACA;EACA;;AACA;EACI,OA3VK;EA4VL,kBA1VE;;AA4VN;EACI;EACA;EACA;EACA;EACA,OApWI;;AAsWR;EACI,OApWE;EAqWF;EACA;EACA;EACA","file":"style.css"} |
Binary file not shown.
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
Loading…
Reference in new issue