Styling

For styling, most component-specific properties, such as background images, are handled directly within the components. However, general styling should primarily be applied using class names defined in your CSS file.

Here is an example of how to style the controller form for games:

.text-shadow-banner {
  text-shadow: 0px 4px 4px #00000040;
}
 
.contest-btn {
  background: linear-gradient(284.11deg, #18181b 86.77%, #16a34a 138.46%),
    linear-gradient(100.03deg, rgba(24, 24, 27, 0) 78.12%, #16a34a 121.35%);
}
 
.bet-controller {
  background-color: #20202a !important;
}
 
.bet-controller .tabs-list > button,
.autobet-increase-on-win > div,
.autobet-increase-on-loss > div,
.audio-loader > button,
.wager-input > fieldset button,
.mines-count button,
.coin-flip-controller > div,
.bet-controller .button {
  background-color: #373745;
}
.coin-flip-controller > div {
  border-radius: 10px;
}
 
.submit-button {
  background: linear-gradient(270.62deg, #5dfcce 0.59%, #3254d9 96.56%);
}
 
.submit-button:disabled {
  background: linear-gradient(270.62deg, #5dfcce 0.59%, #3254d9 96.56%) !important;
  opacity: 0.5 !important;
}
 
.secondary-button {
  background-color: #373745;
}
.secondary-button:hover {
  background-color: #37374570;
}
 
.bet-controller .total-wager,
.bet-controller .max-payout,
.bet-controller .increase-by-input,
.bet-controller .wager-input > fieldset > div:first-of-type,
.bet-controller .autobet-stop-gain > fieldset div:first-of-type,
.bet-controller .autobet-stop-loss > fieldset div:first-of-type,
.bet-controller .autobet-form-field fieldset div:first-of-type,
.bet-controller .plinko-input fieldset div:first-of-type,
.bet-controller .max-reward,
.bet-controller .mines-count div:first-of-type,
.bet-controller .multiplier-input,
.bet-controller .select-trigger,
.bet-controller .select-trigger .select-content {
  background-color: transparent;
  border: 1px solid #37373a;
  border-radius: 10px;
}
 
.select-content {
  background: #373745;
}

Getting Started Single Step Games