Styling

Custom Styling

Custom styling offers customers the flexibility to tailor the aesthetics of the Virtual Stadium widget to their precise requirements. This is accomplished by applying custom CSS properties to the widget's underlying HTML components. All customization takes place within the specified scope of the .sr-bb.sr-virtualStadium selector class, enabling customers to effectively alter the default visual presentation.
The srct-vs classes are designated styling classes for the Virtual Stadium. It's recommended to use the CSS properties listed below with these classes. While you can use other CSS properties as well, it's not advised. Using spacing properties like radius | top | padding | margin might cause issues with future updates to your setup.

Virtual stadium

Class	Customization options	Example 1	Example 2
srct-vs-container	`background-color`
srct-vs-floating-button	`background-color`, `color`

Header

Class	Customization options	Example 1	Example 2
srct-vs-navigation	`background-color`
srct-vs-title	`color`, `opacity`
srct-vs-navigation__close	`fill`
srct-vs-navigation__back	`fill`

Avatar

Class	Customization options	Example 1	Example 2
srct-vs-avatar	`color`

Peninsula

Class	Customization options	Example 1	Example 2
srct-vs-peninsula	`background-color`
srct-vs-peninsula-title	`color`, `fill`, `opacity`

Bet Suggestion

Class	Customization options	Example 1	Example 2
srct-vs-flash-bet	`background-color`
srct-vs-flash-bet__title	`color`, `fill`, `opacity`
srct-vs-flash-bet__outcome	`background-color`
srct-vs-flash-bet__outcome-market	`background-color`
srct-vs-flash-bet__outcome-odds	`color`, `opacity`
srct-vs-flash-bet__countdown	`background-color`
srct-vs-flash-bet__countdown-background	`background-color`

Chat

Class	Customization options	Example 1	Example 2
srct-vs-chat	`background-color`
srct-vs-scroll-to-bottom-button	`background-color`, `color`
srct-vs-timeline-message	`color`
srct-vs-empty-chat-message	`color`, `fill`

Message

Class	Customization options	Example 1	Example 2
srct-vs-message	`background-color`, `border-color`
srct-vs-vip-message	`background-color`, `border-color`
srct-vs-message__my-message	`background-color`, `border-color`
srct-vs-message__header	`color`, `opacity`
srct-vs-message-header__event-title	`color`, `opacity`
srct-vs-message-header__event-subtitle	`color`, `opacity`
srct-vs-vip-badge	`background-color`, `color`
srct-vs-drawer	`color`
srct-vs-message__content	`color`
srct-vs-message__reported .srct-vs-alert	`color`, `background-color`
srct-vs-quote	`background-color`
srct-vs-quote .srct-vs-alert	`color`, `background-color`
srct-vs-quote__post	`background-color`
srct-vs-quote__post .srct-vs-alert	`color`, `background-color`
srct-vs-quote__icon	`fill`, `opacity`
srct-vs-quote__message-header	`color`, `opacity`
srct-vs-quote__message	`color`, `opacity`
srct-vs-vip-quote	`background-color`, `border-color`, `color`
srct-vs-reactions	`background-color`, `color`
srct-vs-reaction_selected	`background-color`, `color`

Report

Class	Customization options	Example 1	Example 2
srct-vs-report__container	`background-color`
srct-vs-report__icon	`background-color`, `color`
srct-vs-report__title	`color`
srct-vs-report__content	`color`
srct-vs-report__quote	`background-color`, `border-color`, `color`
srct-vs-report__quote-message	`color`
srct-vs-report__button	`background-color`, `border-color`, `color`
srct-vs-report__cancel-button	`background-color`, `border-color`, `color`

Composer

Class	Customization options	Example 1	Example 2
srct-vs-composer__container	`background-color`
srct-vs-composer__wrapper	`background-color`, `border-color`
srct-vs-composer__input	`color`, `opacity`, `opacity`
srct-vs-send-button	`color`, `opacity`
srct-vs-send-button__inactive	`color`, `opacity`
srct-vs-composer__disabled-input	`background-color`, `border-color`, `color`, `fill`
srct-vs-composer__blocked-input	`background-color`, `color`, `border-color`, `fill`
srct-vs-composer-suggestion__list	`background-color`, `color`
srct-vs-composer-suggestion__list-active-item	`background-color`, `color`
srct-vs-composer-channel-tag	`color`
srct-vs-composer__channel-tag-highlighter	`outline-color`, `background-color`, `color`

Errors

Class	Customization options	Example 1	Example 2
srct-vs-color__warning	`color`, `background-color`, `fill`
srct-vs-color__error	`color`, `background-color`, `fill`
srct-vs-countdown__color-warning	`stroke`, `fill`
srct-vs-countdown__color-error	`stroke`, `fill`

Bet Slip Share

Class	Customization options	Example 1	Example 2
srct-vs-betslip-share__button	`background-color`, `color`
srct-vs-share-new-bet__button	`background-color`, `color`
srct-vs-betslip-share__pill-button	`background-color`, `color`
srct-vs-betslip-share__pill-button-selected	`background-color`, `color`
srct-vs-betslip-share__container-background	`background-color`
srct-vs-betslip-share__header	`color`
srct-vs-betslip	`background-color`, `border-color`
srct-vs-betslip__header	`color`
srct-vs-select-betslip-button	`border-color`, `color`
srct-vs-select-betslip-icon	`fill`
srct-vs-betslip__section	`border-color`
srct-vs-betslip__market-circle	`border-color`
srct-vs-betslip__sport-icon	`color`, `background-color`
srct-vs-betslip__market-line	`background-color`
srct-vs-betslip__market-match	`color`, `opacity`
srct-vs-betslip__market-outcome	`color`, `opacity`
srct-vs-betslip__market-name	`color`, `opacity`
srct-vs-betslip__market-more	`border-color`, `color`, `fill`
srct-vs-betslip__footer	`border-color`
srct-vs-betslip__footer-title	`color`, `opacity`
srct-vs-betslip__footer-value	`color`, `opacity`
srct-vs-betslip__footer-currency	`color`, `opacity`
srct-vs-betslip-share__post-button	`background-color`, `color`
srct-vs-betslip-share__post-button-disabled	`background-color`, `color`
srct-vs-betslip-share-composer	`background-color`, `color`, `border-color`
srct-vs-use-betslip	`border-color`
srct-vs-use-betslip-button	`background-color`, `color`
srct-vs-switch	`background-color`
srct-vs-switch.srm-active	`background-color`