Refonte complète
This commit is contained in:
@@ -1,72 +1,85 @@
|
||||
body{
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: #131313;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.erreur {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.download_complete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-group label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.all {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-control {
|
||||
background-color: #232323;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.titre{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: rgb(24,216,96);
|
||||
/* align-items: center; */
|
||||
}
|
||||
/* .form-control:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgb(24,216,96);
|
||||
} */
|
||||
.form-control:valid:not(:placeholder-shown) {
|
||||
outline: none;
|
||||
border: 2px solid rgb(24,216,96);
|
||||
}
|
||||
.form-control:invalid {
|
||||
outline: none;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.procedure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.url {
|
||||
display: block;
|
||||
justify-content:center;
|
||||
width: auto;
|
||||
flex: 1 1 0;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.btn {
|
||||
background-color: rgb(24,216,96);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
color: #131313;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
.urlbox {
|
||||
display: block;
|
||||
/* align-items: flex-start; */
|
||||
flex: 1 1 0;
|
||||
width: 225;
|
||||
}
|
||||
.btn2 {
|
||||
margin-top: 10px;
|
||||
background-color: rgb(24,216,96);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
color: #131313;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex ;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width : auto ;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgb(24,216,96);
|
||||
color: whitesmoke
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
.title {
|
||||
color: rgb(24,216,96);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,208 +0,0 @@
|
||||
@media (max-width: 600px) {
|
||||
.urlbox {
|
||||
/* les styles pour les appareils mobiles vont ici */
|
||||
width: 100%; /* étend l'élément sur toute la largeur de l'écran */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 900px) {
|
||||
.urlbox {
|
||||
/* les styles pour les tablettes vont ici */
|
||||
width: 50%; /* étend l'élément sur la moitié de la largeur de l'écran */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.urlbox {
|
||||
/* les styles pour les écrans de bureau vont ici */
|
||||
width: 25%; /* étend l'élément sur un quart de la largeur de l'écran */
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* border: 2px #eee solid; */
|
||||
color: rgb(24,216,96);
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.url {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* min-height:100%; */
|
||||
background-color: black;
|
||||
color: white
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
/* min-height:100%; */
|
||||
background-color: black;
|
||||
color: white
|
||||
}
|
||||
|
||||
.logs {
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.urlbox:empty {
|
||||
border: 2px solid grey;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
|
||||
|
||||
}
|
||||
.urlbox:valid:not(:placeholder-shown) {
|
||||
border: 2px solid rgb(24,216,96);
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
.urlbox:invalid {
|
||||
border: 2px solid red;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button{
|
||||
/* margin-right: 0px; */
|
||||
height: 30px;
|
||||
width:130px;
|
||||
border-radius: 5px ;
|
||||
border: none;
|
||||
/* float: right; */
|
||||
background-color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background-color: rgb(24,216,96);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: rgb(24,216,96);
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.url {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logs {
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.urlbox {
|
||||
border: 2px solid grey;
|
||||
font-size: 13px;
|
||||
padding: 7px;
|
||||
border-radius: 9px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.urlbox:valid:not(:placeholder-shown) {
|
||||
border: 2px solid rgb(24,216,96);
|
||||
}
|
||||
|
||||
.urlbox:invalid {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 30px;
|
||||
width: 130px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background-color: #ddd;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgb(24,216,96);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
/* Mise en forme générale */
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Titre principal */
|
||||
h1 {
|
||||
color: rgb(24,216,96);
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Titre secondaire */
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.url {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Conteneurs secondaires */
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Conteneur des logs */
|
||||
.logs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Bouton de soumission du formulaire */
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Bouton générique */
|
||||
button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
/* Champ de saisie de l'URL */
|
||||
.urlbox:empty {
|
||||
border: 2px solid grey;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
height: 30px;
|
||||
/* width: 150; */
|
||||
}
|
||||
.urlbox:valid:not(:placeholder-shown) {
|
||||
border: 2px solid rgb(24,216,96);
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
/* width: 150%; */
|
||||
height: 30px;
|
||||
}
|
||||
.urlbox:invalid {
|
||||
border: 2px solid red;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
/* width: 150%; */
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* Bouton de téléchargement */
|
||||
button {
|
||||
height: 30px;
|
||||
width: 130px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background-color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgb(24,216,96);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mise en forme pour écrans de smartphone */
|
||||
@media only screen and (max-width: 480px) {
|
||||
/* Titre principal */
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Titre secondaire */
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.url {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* Champ de saisie de l'URL */
|
||||
.urlbox {
|
||||
width: 150%;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
/* Bouton de téléchargement */
|
||||
button {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mise en forme pour écrans de tablette */
|
||||
@media only screen and (min-width: 481px) and (max-width: 768px) {
|
||||
/* Titre principal */
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* Titre secondaire */
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.url {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Champ de saisie de l'URL */
|
||||
.urlbox {
|
||||
width: 150%;
|
||||
}
|
||||
|
||||
/* Bouton de téléchargement */
|
||||
button {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mise en forme pour écrans d'ordinateur */
|
||||
@media only screen and (min-width: 769px) {
|
||||
/* Titre principal */
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
/* Titre secondaire */
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.url {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Champ de saisie de l'URL */
|
||||
.urlbox {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
/* Bouton de téléchargement */
|
||||
button {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user