quest-rando/style.css

118 lines
2.2 KiB
CSS
Raw Normal View History

2024-11-24 15:15:45 +01:00
/* Conteneur principal pour éviter les styles flex globaux */
.main-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
/* Bouton retour aligné à droite */
.btn-retour {
float: right;
margin: 10px; /* Aligne le contenu à droite */
margin-bottom: 20px;
2024-12-01 19:20:28 +01:00
display: inline-block;
2024-11-24 15:15:45 +01:00
}
.btn-retour a img {
display: inline-block; /* Assure que l'image reste au format bouton */
}
body {
2024-12-01 19:20:28 +01:00
font-family: "Times New Roman", Georgia, Times, serif;
font-size: 12pt;
2024-11-24 15:15:45 +01:00
background-color: #f4f4f4;
color: #333;
background-image: url(../quest-rando/images/ciel-overlay2.jpg);
background-attachment: fixed;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
color: #090090;
}
h2 {
color: #090090;
}
h3 {
color: #090090;
}
form {
background: #fff;
padding: 2% 3%;
margin-bottom: 20px;
box-shadow: 0 2px 4px grey;
border-radius: 5px;
max-width: 800px;
width: 100%;
}
input[type="text"],
textarea {
font-size: 11pt;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #2980b9;
}
.annonce {
background: #fff;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 4px grey;
border-radius: 5px;
max-width: 900px;
width: 100%;
}
.annonce small {
color: #888;
}
/* Bouton haut page */
/* Effet fluide */
/* Style du bouton */
#scrollToTop {
position: fixed;
bottom: 20px;
right: 150px; /*Position*/
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s,
visibility 0.3s;
}
/* Afficher le bouton lorsqu'on est en bas de page */
#scrollToTop.show {
opacity: 1;
visibility: visible;
}