33 lines
915 B
CSS
33 lines
915 B
CSS
button {
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Red: 10+ clicks (2 or more digits) - put this FIRST */
|
|
button[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]):not([data-count="7"]):not([data-count="8"]):not([data-count="9"]) {
|
|
background-color: #ef4444;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
/* Green: 1-3 clicks - these override red due to higher specificity */
|
|
button[data-count="1"],
|
|
button[data-count="2"],
|
|
button[data-count="3"] {
|
|
background-color: #22c55e;
|
|
border-color: #22c55e;
|
|
}
|
|
|
|
/* Yellow: 4-6 clicks */
|
|
button[data-count="4"],
|
|
button[data-count="5"],
|
|
button[data-count="6"] {
|
|
background-color: #eab308;
|
|
border-color: #eab308;
|
|
}
|
|
|
|
/* Orange: 7-9 clicks */
|
|
button[data-count="7"],
|
|
button[data-count="8"],
|
|
button[data-count="9"] {
|
|
background-color: #f97316;
|
|
border-color: #f97316;
|
|
} |