Spaces:
Sleeping
Sleeping
| 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; | |
| } |