updated so balls are coloured to their respective game. need to thing about set for life.

This commit is contained in:
2025-03-28 14:52:50 +00:00
parent cabc283673
commit 75d8d1700e
3 changed files with 113 additions and 65 deletions

View File

@@ -19,12 +19,6 @@
gap: 0.5rem;
}
.matched {
background-color: #22c55e;
color: white;
font-weight: bold;
}
.bonus {
border: 2px solid #facc15;
}
@@ -36,52 +30,79 @@
animation: pulse 1s infinite;
}
.prize-badge {
/* .prize-badge {
background-color: #9333ea;
color: white;
border-radius: 9999px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
} */
.ball.bonus {
background-color: #d8b4fe;
background-color: red;
}
.ball.matched {
background-color: #4ade80 !important;
animation: pulse 1s ease-in-out infinite;
color: white !important;
border: 2px solid red !important;
}
.ball.game-thunderball {
background-color: #1e3a8a; /* Dark blue */
color: white;
.ball.game-lotto.lotto-range-01-09 {
background-color: white;
border: .1px solid #000000;
color: black;
}
.ball.game-lotto.lotto-range-10-19 {
background-color: #add8e6;
color: black;
}
.ball.game-lotto.lotto-range-20-29 {
background-color: #ffc0cb;
color: black;
}
.ball.game-lotto.lotto-range-30-39 {
background-color: #90ee90;
color: black;
}
.ball.game-lotto.lotto-range-40-49 {
background-color: #ffff99;
color: black;
}
.ball.game-lotto.lotto-range-50-plus {
background-color: #B40AE3;
color: black;
}
.ball[class*="game-thunderball"]:not(.bonus) {
background-color: #6B65FC;
border: 2px solid white;
}
.ball[class*="game-thunderball"] {
background-color: #d8b4fe ;
border: 2px solid white;
}
.ball[class*="game-euromillions"]:not(.bonus) {
background-color: #BF1314;
border: 2px solid white;
}
.ball[class*="game-euromillions"] {
background-color: #FFDE59 ;
border: 2px solid white;
border-radius: 12px; /* Remove side rounding */
}
/* Lotto main balls Orange */
.ball.game-lotto {
background-color: #f97316; /* Bright orange */
color: white;
border: none;
border-radius: 12px;
}
/* Optional: Euromillions, Set For Life define as needed */
.ball.game-euromillions {
background-color: #2563eb; /* Royal blue */
color: white;
border-radius: 50%;
}
.ball.game-setforlife {
background-color: #6b7280; /* Slate gray */
color: white;
border-radius: 50%;
/* .ball[class*="game-setforlife"]:not(.bonus) {
background-color: #6B65FC;
border: 2px solid white;
} */
.ball[class*="game-setforlife"] {
background-color: #98F5F9 ;
border: 2px solid white;
}
@keyframes pulse {
0% { transform: scale(1); }