File size: 2,370 Bytes
cf82bf3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
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;
} |