body { | |
font-family: "Montserrat", sans-serif; | |
background: #fafafa; | |
margin: 24px; | |
color: #1f2937; | |
} | |
h1 { | |
font-size: 1.8rem; | |
margin-bottom: 24px; | |
} | |
.row { | |
display: flex; | |
gap: 24px; | |
margin-bottom: 24px; | |
} | |
.column { | |
flex: 1; | |
display: flex; | |
flex-direction: column; | |
gap: 12px; | |
} | |
button { | |
background-color: #6c63ff; | |
color: white; | |
font-weight: 600; | |
font-size: 1rem; | |
padding: 10px 14px; | |
border: none; | |
border-radius: 0.6em; | |
cursor: pointer; | |
box-shadow: 0 2px 8px rgb(31 41 55 / 8%); | |
transition: background-color 0.2s ease; | |
} | |
button:hover { | |
background-color: #5753d6; | |
} | |
button:disabled { | |
cursor: default; | |
background-color: #778191; | |
} | |
select { | |
padding: 10px 14px; | |
border-radius: 0.6em; | |
border: none; | |
box-shadow: 0 2px 8px rgb(31 41 55 / 8%); | |
font-size: 1rem; | |
color: #374151; | |
background: #f3f4f6; | |
appearance: none; | |
cursor: pointer; | |
} | |
select:focus { | |
outline: none; | |
box-shadow: 0 0 0 2px #6c63ff; | |
background: white; | |
} | |
select:hover { | |
background: #e5e7eb; | |
} | |
select:disabled { | |
cursor: default; | |
} | |
.dropdown-content { | |
position: absolute; | |
/* ou fixed si tu veux */ | |
z-index: 9999; | |
/* un nombre élevé pour être sûr que c'est au dessus */ | |
background-color: white; | |
/* pour que ce soit bien visible */ | |
border: 1px solid #ccc; | |
/* autres styles que tu avais déjà */ | |
border-radius: 0.6em; | |
box-shadow: 0 2px 8px rgb(31 41 55 / 8%); | |
padding: 10px; | |
max-height: 55vh; | |
overflow-y: auto; | |
} | |
#dropbtn { | |
background: #f3f4f6; | |
color: #374151; | |
font-size: 1rem; | |
font-family: "Montserrat", sans-serif; | |
/* même font que body */ | |
padding: 10px 14px; | |
border-radius: 0.6em; | |
font-weight: normal; | |
border: none; | |
box-shadow: 0 2px 8px rgb(31 41 55 / 8%); | |
cursor: pointer; | |
width: 100%; | |
text-align: left; | |
appearance: none; | |
/* supprime les styles natives du bouton */ | |
user-select: none; | |
transition: background-color 0.2s ease; | |
display: inline-block; | |
} | |
#dropbtn:hover { | |
background: #e5e7eb; | |
} | |
#dropbtn:disabled { | |
cursor: default; | |
} | |
#dropbtn:focus { | |
outline: none; | |
box-shadow: 0 0 0 2px #6c63ff; | |
background: white; | |
} | |
option { | |
background: white; | |
} | |
progress { | |
width: 300px; | |
height: 30px; | |
} |