Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements.
The widget's custom class selectors and supported CSS properties are listed below. Note that all custom classes must be nested within the .sr-bb.sr-swipebet selector class.
This ensures that the custom styles only apply to that widget and not to other elements on the page.
| Class | Customization options |
|---|---|
| srct-br-container | background-color, font-family |
| srct-br-header | background-color, color, border-radius |
| srct-br-header__title | font-size, color |
| srct-br-header__divider | border-color |
| srct-br-content__title | font-weight |
| srct-br-footer | font-size, color, background-color, border-radius |
| srct-br-loading | background-color, border-radius |
| srct-br-navigation | background-color, color |
| srct-br-card | background-color, color, border-radius |
| srct-br-card__divider | border-color |
| srct-br-outcome | background-color, color, border-radius, border |
| srct-br-outcome--selected | background-color, color, border-radius, border |
| srct-br-outcome--disabled | background-color, color, border-radius |
| srct-br-outcome__name | font-size, color, opacity |
| srct-br-outcome__value | font-size, color, font-weight |
| srct-br-eventinfo | font-size, color |
| srct-br-eventinfo__icon | color |
| srct-br-eventinfo__time | font-size, color |
| srct-br-eventinfo__status | font-size, color |
| srct-br-eventinfo__name | font-size, color |
| srct-br-scoreboard | font-size, color |
| srct-br-scoreboard__teams | font-size, color |
| srct-br-scoreboard__scores | font-size, color |
| srct-br-customjersey | mask-image |
| srct-br-widgetbutton | font-size, color, border-radius, padding, background-color |
| srct-br-widgetbutton__icon | height, width |
| srct-br-closebutton | font-size, color, border-radius, background-color |
| srct-br-thumb | background-color, border-radius |
| srct-br-thumb--like | background-color, border-radius |
| srct-br-thumb--dislike | background-color, border-radius |
| srct-br-thumb--active | background-color, border-radius |
| srct-br-thumb--disabled | background-color, border-radius |
| srct-br-thumb__icon | color |
| srct-br-thumb__icon--active | color |
| srct-br-thumb__icon--disabled | color |
| srct-br-thumb__icon--like | color |
| srct-br-thumb__icon--dislike | color |
| srct-br-bet-counter | color, background-color |
| srct-br-marketselectionbutton | font-size, color, border-radius, border-color, background-color |
| srct-br-marketselectionbutton--disabled | font-size, color, border-radius, border-color, background-color |
| srct-br-market__name | font-size, color |
| srct-br-market__change-text | font-size, color |
| srct-br-market__change-icon | width, height |
| srct-br-betslipbutton | font-size, color, border, border-radius, background-color, opacity |