formulaire pour remplir des ticket de panne
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

271 lines
4.6 KiB

@font-face {
font-family: "monofonto";
src: url("../font/raleway.ttf") format("truetype");
}
body {
z-index: 1;
font-family: monofonto;
background-color: #e5e5e5;
margin: 20px;
text-align: center;
}
body .logo {
display: block;
}
body h1 {
margin: 40px;
font-weight: bold;
color: #454545;
}
body p {
font-weight: bold;
color: #ac2a8d;
font-size: 20px;
height: 20px;
}
.nav {
width: 80%;
margin-left: 10%;
margin-bottom: 3%;
background-color: #84878C;
border-radius: 20px;
}
.nav ul {
margin: auto;
padding: 0;
width: 60%;
}
.nav ul::after {
content: "";
display: block;
clear: both;
}
.nav__link {
width: 20%;
min-width: 100px;
float: left;
position: relative;
text-align: center;
list-style-type: none;
}
.nav__link:hover {
background-color: #59184E;
transition: 0.25s;
border-radius: 10px;
}
.nav__link a {
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
display: inline-block;
text-decoration: none;
}
.nav__link a:hover {
color: white;
}
form {
width: 20%;
min-width: 300px;
background-color: white;
display: block;
position: relative;
margin: auto;
border-radius: 30px;
padding: 20px;
}
.container-field {
position: relative;
}
.container-field small {
display: none;
color: red;
}
.container-field__img {
display: none;
position: relative;
float: right;
width: 20px;
bottom: 20px;
right: 20px;
}
.container-field__field {
background-color: inherit;
position: relative;
display: block;
text-decoration-line: none;
appearance: none;
text-align: center;
color: #454444;
resize: none;
outline: none;
margin: 10px auto;
border: 4px solid #4e4d4d;
padding: 10px 10px;
border-radius: 30px;
width: 60%;
max-width: 300px;
transition: 0.25s;
}
.container-field__field:focus, .container-field__field:hover {
width: 70%;
border-color: #ac2a8d;
background-color: white;
}
.container-field__field--submit:hover {
width: 65%;
border-color: #2ecc71;
background-color: #82E6AC;
}
.help {
display: none;
z-index: 2;
position: absolute;
width: 170px;
right: 0;
top: 30%;
border-radius: 30px;
box-shadow: 0 0 10px black;
padding: 15px;
margin: 0;
background-color: #e5e5e5;
font-size: 14px;
}
.help p {
position: relative;
font-size: 14px;
}
.help img {
border-radius: 15px;
width: 100%;
}
.help code {
background-color: #aaa;
border-radius: 5px;
font-family: courier, monospace;
padding: 3px 5px;
font-size: 14px;
}
.table {
width: 80%;
border-radius: 5px;
margin-left: 10%;
margin-top: 2%;
background-color: #84878C;
color: white;
border: 1px solid #84878C;
}
.table th {
width: 1%;
}
.table td {
background-color: #e5e5e5;
border: 1px solid #84878C;
min-width: 20px;
border-radius: 5px;
text-align: center;
word-break: break-all;
color: #84878C;
}
.table td img {
width: 40%;
max-width: 40px;
}
.table td input {
border: 2px solid #ac2a8d;
border-radius: 5px;
text-align: inherit;
outline: none;
color: #84878C;
transition: 0.05s;
}
.table td input:hover {
font-weight: bold;
}
.table td input:focus {
font-weight: bold;
border: 4px solid #ac2a8d;
}
.table__title td {
color: #ac2a8d;
font-weight: bold;
word-break: normal;
}
.table__switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.table__switch input {
opacity: 0;
width: 0;
height: 0;
}
.table__switch input:checked + .table__switch__slider {
background-color: #2ecc71;
}
.table__switch input:focus + .table__switch__slider {
box-shadow: 0 0 1px #2ecc71;
}
.table__switch input:checked + .table__switch__slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.table__switch__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: crimson;
border-radius: 34px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.table__switch__slider:before {
position: absolute;
border-radius: 50%;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.button {
border: 3px solid #ac2a8d;
background-color: #e5e5e5;
color: #ac2a8d;
font-weight: bold;
text-decoration: none;
transition: 0.5s;
}
.button:hover {
color: #e5e5e5;
background-color: #ac2a8d;
}
.button--small {
width: 3rem;
border-radius: 5px;
margin: 5px;
}
.button--large {
display: inline-block;
width: 6%;
margin-bottom: 3%;
padding: 10px 40px;
border-radius: 20px;
}
/*# sourceMappingURL=style.css.map */