20 changed files with 691 additions and 433 deletions
@ -0,0 +1,271 @@ |
|||||
|
@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 */ |
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"sourceRoot":"","sources":["../sass/main.scss"],"names":[],"mappings":"AAMA;EACI;EACA;;AAGJ;EACI;EACA;EACA,kBAbS;EAcT;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OAxBE;EAyBF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBAxCQ;EAyCR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBA1DG;EA2DH;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,cA7HF;EA8HE;;AAEJ;EACI;EACA;EACA;;;AASZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAzJS;EA0JT;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAQR;EACI;EACA;EACA;EACA;EACA,kBAtLQ;EAuLR;EACA;;AACA;EACI;;AAEJ;EACI,kBA5LK;EA8LL;EACA;EACA;EAEA;EACA;EACA,OArMI;;AAsMJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OA/MA;EAgNA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OAxNE;EAyNF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA,kBAjRS;EAkRT,OAhRM;EAiRN;EACA;EACA;;AACA;EACI,OAvRK;EAwRL,kBAtRE;;AAwRN;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"style.css"} |
||||
@ -0,0 +1,15 @@ |
|||||
|
{ |
||||
|
"name": "ticket_panne", |
||||
|
"version": "1.0.0", |
||||
|
"description": "", |
||||
|
"main": "index.js", |
||||
|
"scripts": { |
||||
|
"sass": "sass --watch ./sass/main.scss:./css/style.css" |
||||
|
}, |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "https://paulconstans.ddns.info/gitea/barraux.a/ticket_panne.git" |
||||
|
}, |
||||
|
"author": "", |
||||
|
"license": "ISC" |
||||
|
} |
||||
@ -1,4 +1,4 @@ |
|||||
<meta charset="utf-8"> |
<meta charset="utf-8"> |
||||
<title>Admin ticket</title> |
<title>Admin ticket</title> |
||||
<link href="../stylepage.css" rel="stylesheet"> |
<link href="../css/style.css" rel="stylesheet"> |
||||
<img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px"> |
<a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px"></a> |
||||
|
|||||
@ -1,11 +1,11 @@ |
|||||
<header> |
<header> |
||||
<nav> |
<nav class="nav"> |
||||
<ul> |
<ul> |
||||
<li class="menu"><a href="index.php">Accueil</a></li> |
<li class="nav__link"><a href="index.php">Accueil</a></li> |
||||
<li class="menu"><a href="search.php">Recherche</a></li> |
<li class="nav__link"><a href="search.php">Recherche</a></li> |
||||
<li class="menu"><a href="liste.php">Liste</a></li> |
<li class="nav__link"><a href="liste.php">Liste</a></li> |
||||
<li class="menu"><a href="admin.php">Admin</a></li> |
<li class="nav__link"><a href="admin.php">Admin</a></li> |
||||
<li class="menu"><a href="export.php">Export</a></li> |
<li class="nav__link"><a href="export.php">Export</a></li> |
||||
</ul> |
</ul> |
||||
</nav> |
</nav> |
||||
</header> |
</header> |
||||
|
|||||
@ -0,0 +1,296 @@ |
|||||
|
$dark-grey: #84878C; |
||||
|
$light-grey: #e5e5e5; |
||||
|
$dark-bordeau: #59184E; |
||||
|
$bordeau: #ac2a8d; |
||||
|
|
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "monofonto"; |
||||
|
src: url('../font/raleway.ttf') format('truetype'); |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
z-index: 1; |
||||
|
font-family: monofonto; |
||||
|
background-color: $light-grey; |
||||
|
margin: 20px; |
||||
|
text-align: center; |
||||
|
.logo { |
||||
|
display: block; |
||||
|
} |
||||
|
h1 { |
||||
|
margin: 40px; |
||||
|
font-weight: bold; |
||||
|
color: #454545; |
||||
|
} |
||||
|
p { |
||||
|
font-weight: bold; |
||||
|
color: $bordeau; |
||||
|
font-size: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// nav |
||||
|
|
||||
|
|
||||
|
.nav { |
||||
|
width: 80%; |
||||
|
margin-left: 10%; |
||||
|
margin-bottom: 3%; |
||||
|
background-color: $dark-grey; |
||||
|
border-radius: 20px; |
||||
|
ul { |
||||
|
margin: auto; |
||||
|
padding: 0; |
||||
|
width: 60%; |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
&__link{ |
||||
|
width: 20%; |
||||
|
min-width: 100px; |
||||
|
float: left; |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
list-style-type: none; |
||||
|
&:hover { |
||||
|
background-color: $dark-bordeau; |
||||
|
transition: .25s; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
a { |
||||
|
padding-top: 10px; |
||||
|
padding-bottom: 10px; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
display: inline-block; |
||||
|
text-decoration: none; |
||||
|
&:hover { |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// formulaire |
||||
|
|
||||
|
|
||||
|
form { |
||||
|
width: 20%; |
||||
|
min-width: 300px; |
||||
|
|
||||
|
background-color: white; |
||||
|
display: block; |
||||
|
|
||||
|
position: relative; |
||||
|
margin: auto; |
||||
|
border-radius: 30px; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.container-field { |
||||
|
position: relative; |
||||
|
small { |
||||
|
display: none; |
||||
|
color: red; |
||||
|
} |
||||
|
&__img { |
||||
|
display: none; |
||||
|
position: relative; |
||||
|
float: right; |
||||
|
width: 20px; |
||||
|
bottom: 20px; |
||||
|
right: 20px; |
||||
|
} |
||||
|
&__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: .25s; |
||||
|
&:focus, &:hover { |
||||
|
width: 70%; |
||||
|
border-color: $bordeau; |
||||
|
background-color: white; |
||||
|
} |
||||
|
&--submit:hover { |
||||
|
width: 65%; |
||||
|
border-color: #2ecc71; |
||||
|
background-color: #82E6AC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// help |
||||
|
|
||||
|
|
||||
|
.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: $light-grey; |
||||
|
font-size: 14px; |
||||
|
p { |
||||
|
position: relative; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
img { |
||||
|
border-radius: 15px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
code { |
||||
|
background-color: #aaa; |
||||
|
border-radius: 5px; |
||||
|
font-family: courier, monospace; |
||||
|
padding: 3px 5px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// table |
||||
|
|
||||
|
|
||||
|
.table { |
||||
|
width: 80%; |
||||
|
border-radius: 5px; |
||||
|
margin-left: 10%; |
||||
|
margin-top: 2%; |
||||
|
background-color: $dark-grey; |
||||
|
color: white; |
||||
|
border: 1px solid $dark-grey; |
||||
|
th { |
||||
|
width: 1%; |
||||
|
} |
||||
|
td { |
||||
|
background-color: $light-grey; |
||||
|
|
||||
|
border: 1px solid $dark-grey; |
||||
|
min-width: 20px; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
text-align: center; |
||||
|
word-break: break-all; |
||||
|
color: $dark-grey; |
||||
|
img { |
||||
|
width: 40%; |
||||
|
max-width: 40px; |
||||
|
} |
||||
|
input { |
||||
|
border: 2px solid $bordeau; |
||||
|
border-radius: 5px; |
||||
|
text-align: inherit; |
||||
|
outline: none; |
||||
|
color: $dark-grey; |
||||
|
transition: .05s; |
||||
|
&:hover { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
&:focus { |
||||
|
font-weight: bold; |
||||
|
border: 4px solid $bordeau; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&__title td{ |
||||
|
color: $bordeau; |
||||
|
font-weight: bold; |
||||
|
word-break: normal; |
||||
|
} |
||||
|
&__switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: 60px; |
||||
|
height: 34px; |
||||
|
input { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
&:checked + .table__switch__slider { |
||||
|
background-color: #2ecc71; |
||||
|
} |
||||
|
&:focus + .table__switch__slider { |
||||
|
box-shadow: 0 0 1px #2ecc71; |
||||
|
} |
||||
|
&:checked + .table__switch__slider:before { |
||||
|
-webkit-transform: translateX(26px); |
||||
|
-ms-transform: translateX(26px); |
||||
|
transform: translateX(26px); |
||||
|
} |
||||
|
} |
||||
|
&__slider { |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: crimson; |
||||
|
border-radius: 34px; |
||||
|
-webkit-transition: .4s; |
||||
|
transition: .4s; |
||||
|
&:before { |
||||
|
position: absolute; |
||||
|
border-radius: 50%; |
||||
|
content: ""; |
||||
|
height: 26px; |
||||
|
width: 26px; |
||||
|
left: 4px; |
||||
|
bottom: 4px; |
||||
|
background-color: white; |
||||
|
-webkit-transition: .4s; |
||||
|
transition: .4s; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
border: 3px solid $bordeau; |
||||
|
background-color: $light-grey; |
||||
|
color: $bordeau; |
||||
|
font-weight: bold; |
||||
|
text-decoration: none; |
||||
|
transition: .5s; |
||||
|
&:hover { |
||||
|
color: $light-grey; |
||||
|
background-color: $bordeau; |
||||
|
} |
||||
|
&--small { |
||||
|
width: 3rem; |
||||
|
border-radius: 5px; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
&--large { |
||||
|
display: inline-block; |
||||
|
width: 6%; |
||||
|
margin-bottom: 3%; |
||||
|
padding: 10px 40px; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
} |
||||
@ -1,298 +0,0 @@ |
|||||
/*2eme test de versio,*/ |
|
||||
|
|
||||
@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; |
|
||||
} |
|
||||
|
|
||||
.logo{ |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
h1{ |
|
||||
margin: 40px; |
|
||||
font-weight: bold; |
|
||||
color: #454545; |
|
||||
} |
|
||||
|
|
||||
p{ |
|
||||
font-weight: bold; |
|
||||
color: #454444; |
|
||||
font-size: 20px; |
|
||||
height: 20px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Form */ |
|
||||
|
|
||||
|
|
||||
form{ |
|
||||
width: 20%; |
|
||||
min-width: 300px; |
|
||||
|
|
||||
background-color: #ffffff; |
|
||||
display: block; |
|
||||
|
|
||||
position: relative; |
|
||||
margin: auto; |
|
||||
border-radius: 30px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
|
|
||||
.container-champ{ |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.container-champ small{ |
|
||||
display: none; |
|
||||
color: red; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.input{ |
|
||||
background-color: inherit; |
|
||||
position: relative; |
|
||||
display: block; |
|
||||
|
|
||||
text-decoration-line: none; |
|
||||
text-align: center; |
|
||||
color: #454444; |
|
||||
|
|
||||
margin: 10px auto; |
|
||||
border: 4px solid #4e4d4d; |
|
||||
padding: 10px 10px; |
|
||||
border-radius: 30px; |
|
||||
|
|
||||
width: 60%; |
|
||||
max-width: 300px; |
|
||||
|
|
||||
transition: .25s; |
|
||||
} |
|
||||
|
|
||||
.input:focus, .input:hover{ |
|
||||
width: 70%; |
|
||||
border-color: #ac2a8d; |
|
||||
background-color: #dddddd; |
|
||||
} |
|
||||
|
|
||||
.input img{ |
|
||||
display: none; |
|
||||
position: relative; |
|
||||
float: right; |
|
||||
width: 20px; |
|
||||
bottom: 20px; |
|
||||
right: 20px; |
|
||||
} |
|
||||
|
|
||||
.entry{ |
|
||||
border: none; |
|
||||
resize: none; |
|
||||
outline: none; |
|
||||
width: 100%; |
|
||||
text-align: center; |
|
||||
background-color: rgba(0, 0, 0, 0); |
|
||||
appearance: none; |
|
||||
} |
|
||||
|
|
||||
#submit:hover{ |
|
||||
width: 65%; |
|
||||
border-color: #2ecc71; |
|
||||
background-color: #82E6AC; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Indice */ |
|
||||
|
|
||||
|
|
||||
.help{ |
|
||||
display: none; |
|
||||
z-index: 2; |
|
||||
position: absolute; |
|
||||
width: 170px; |
|
||||
right: 0; |
|
||||
top: 30%; |
|
||||
border-radius: 30px; |
|
||||
padding: 15px; |
|
||||
margin: 0; |
|
||||
background-color: #dddddd; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.help * { |
|
||||
font-size: 14px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.help p{ |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.help img{ |
|
||||
border-radius: 15px; |
|
||||
} |
|
||||
|
|
||||
code { |
|
||||
background-color: #aaa; |
|
||||
border-radius: 5px; |
|
||||
font-family: courier, monospace; |
|
||||
padding: 3px 5px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Nav */ |
|
||||
|
|
||||
|
|
||||
nav{ |
|
||||
width: 80%; |
|
||||
margin-left: 10%; |
|
||||
margin-bottom: 5%; |
|
||||
background-color: #84878C; /*couleur nav entière*/ |
|
||||
border-radius: 20px; |
|
||||
} |
|
||||
|
|
||||
nav > ul{ |
|
||||
margin-left: auto; |
|
||||
margin-right: auto; |
|
||||
padding: 0px; |
|
||||
width: 60%; |
|
||||
} |
|
||||
|
|
||||
nav > ul::after{ |
|
||||
content: ""; |
|
||||
display: block; |
|
||||
clear: both; |
|
||||
} |
|
||||
|
|
||||
nav > ul > li{ |
|
||||
width: 20%; |
|
||||
float: left; |
|
||||
position: relative; |
|
||||
text-align: center; |
|
||||
list-style-type: none; |
|
||||
} |
|
||||
|
|
||||
nav> ul > li > a{ |
|
||||
font-size: 100%; |
|
||||
padding-top: 10px; |
|
||||
padding-bottom: 10px; |
|
||||
color: #eee; |
|
||||
display: inline-block; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
.menu:hover{ |
|
||||
background-color: #59184E; |
|
||||
transition: .25s; |
|
||||
border-radius: 10px; |
|
||||
} |
|
||||
|
|
||||
.menu:hover > a{ |
|
||||
color: #fff; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Table */ |
|
||||
|
|
||||
|
|
||||
.table-title td{ |
|
||||
color: #ac2a8d; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
table{ |
|
||||
width: 80%; |
|
||||
border-radius: 5px; |
|
||||
margin-left: 10%; |
|
||||
margin-top: 2%; |
|
||||
background-color: #84878C; |
|
||||
color: #fff; |
|
||||
border: 1px solid #84878C; |
|
||||
} |
|
||||
|
|
||||
th{ |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
td { |
|
||||
background-color: #e5e5e5; |
|
||||
|
|
||||
border: 1px solid #84878C; |
|
||||
min-width: 20px; |
|
||||
border-radius: 5px; |
|
||||
|
|
||||
text-align: center; |
|
||||
word-break: break-all; |
|
||||
color: #84878C; |
|
||||
} |
|
||||
|
|
||||
td img { |
|
||||
width: 40%; |
|
||||
max-width: 40px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* SWITCH */ |
|
||||
|
|
||||
|
|
||||
.switch { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
width: 60px; |
|
||||
height: 34px; |
|
||||
} |
|
||||
|
|
||||
.switch input { |
|
||||
opacity: 0; |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
} |
|
||||
|
|
||||
.slider { |
|
||||
position: absolute; |
|
||||
cursor: pointer; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
background-color: crimson; |
|
||||
border-radius: 34px; |
|
||||
-webkit-transition: .4s; |
|
||||
transition: .4s; |
|
||||
} |
|
||||
|
|
||||
.slider:before { |
|
||||
position: absolute; |
|
||||
border-radius: 50%; |
|
||||
content: ""; |
|
||||
height: 26px; |
|
||||
width: 26px; |
|
||||
left: 4px; |
|
||||
bottom: 4px; |
|
||||
background-color: white; |
|
||||
-webkit-transition: .4s; |
|
||||
transition: .4s; |
|
||||
} |
|
||||
|
|
||||
input:checked + .slider { |
|
||||
background-color:#2ecc71; |
|
||||
} |
|
||||
|
|
||||
input:focus + .slider { |
|
||||
box-shadow: 0 0 1px #2ecc71; |
|
||||
} |
|
||||
|
|
||||
input:checked + .slider:before { |
|
||||
-webkit-transform: translateX(26px); |
|
||||
-ms-transform: translateX(26px); |
|
||||
transform: translateX(26px); |
|
||||
} |
|
||||
Loading…
Reference in new issue