Theming / Styling

To style the existing widgets and add your own theme, we have applied CSS variables.

The fantasy solution theme engine is inspired by Material Design by Google, where there are three main colors: Primary (60% usage), Secondary (30% usage) and Accent (10% usage). For each of these three variables there are two additional shades of it (hue and subtle), and associated text-colors in three shades that you should make sure work with their parent color. In addition there is a super-accent color pair for elements that need to stand out above everything else.

Example

Given you have set a --primary-color: #1973C2, then you should make sure that all your --primary-text shades are readable on --primary-color, --primary-color-hue and --primary-color-subtle.

In this case a shade of white is a nice color that contrasts well on our primary color: --primary-text: #E6EBF0

Scout Gaming Group Style Guide

Theme colors


--primary-color: #2c323a;
--primary-color-hue: #3E4651;
--primary-color-subtle: #f2f2f7;

--primary-text: #fff;
--primary-text-hue: rgba(255, 255, 255, 0.7);
--primary-text-disabled: rgba(255, 255, 255, 0.5);
--primary-divider: rgba(255, 255, 255, 0.12);

--accent-color: #71bc4f;
--accent-color-hue: #99e165;
--accent-color-tinted: #c5fc97;
--accent-text: #fff;

--super-accent: #ffda35;
--super-accent-text: #000;

--secondary-color: #ffffff;
--secondary-color-hue: #e7eaf0;
--secondary-color-subtle: #cbd4df;
--overlay-background: var(--secondary-color, #ffffff);

--secondary-text: #000;
--secondary-text-hue: rgba(0, 0, 0, 0.7);
--secondary-text-disabled: rgba(0, 0, 0, 0.5);
--secondary-divider: rgba(0, 0, 0, 0.12);

Dimensions


--padding: 0.5em;
--margin: 1em;
--border: thin solid rgba(0, 0, 0, 0.5);
--border-radius: 2px;
--border-color: var(--secondary-text-disabled);
--box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

Intents

Intents are cultural colors that indicate a form of status. For instance in most western cultures, green indicates success or something positive. Red indicates error or that something has failed. We recommend to keep the main color the same and only adjust for shades of the same color to fit your theme.


--success: #71bd4f;
--success-hover: #68ad47;
--success-text: #fff;
--warning: #f9a115;
--warning-hover: #e0932e;
--warning-text: #fff;
--danger: #e74c3c;
--danger-hover: #d34736;
--danger-text: #fff;
--info: #3c94dc;
--info-hover: #3f86bc;
--info-text: #fff;

Transitions


--short-transition: .2s;

Field

Field artwork is loaded automatically by the widgets — no CSS is required. For each sport the platform tries the following images in order and uses the first one that exists:

  1. https://fantasy.assets.scoutgg.net/fields/v1/{client}/{sport}.png — your branded field, if one has been uploaded for your client
  2. https://fantasy.assets.scoutgg.net/fields/v1/default/{sport}.png — our default field for the sport
  3. https://fantasy.assets.scoutgg.net/fields/v1/default/fallback.png — a generic fallback

Esports tournaments load from v2 instead of v1, and in-play football uses the dedicated fields/v1/default/inplay/football.png image.

To use your own branded fields, provide the artwork to your Key Account Manager (KAM) and we will upload it to your client folder — the widgets pick it up automatically.

Default artwork is available for the following sports: football, hockey, basket, golf, cycling, dota2, e_football, american_football, baseball, rugby_union, cc_ski, alpine, biathlon, tennis, cricket, curling, mma, kabaddi and ski_jump, plus csgo and lol in v2 only. Horse racing has no dedicated field image and uses the generic fallback. Football format variants (five-a-side, six-a-side, flexi) use the football artwork.

How the artwork is fitted into the field can be adjusted per sport with CSS variables. The defaults are:


--football-background-size: 100% 100%;
--football-background-size-mobile: auto 100%;
--american-football-background-size: 100% 100%;
--baseball-background-size: auto 100%;
--rugby-union-background-size: 100% 100%;
--cycling-background-size: 100% 100%;
--cycling-background-size-tablet: 100% 100%;
--cycling-background-position: center top;
--cycling-background-position-tablet: center center;
--alpine-background-size: auto;
--biathlon-background-size: auto;
--cc_ski-background-size: cover;

The --baseball-background-size variable is also used for the MMA field. The predictions dashboard additionally reads --hockey-background as a plain CSS background (color or image) with skyblue as its default.

Player statuses


--player-status-not-play: #e74c3c;
--player-awaiting-confirmation: #c07bc4;
--player-status-playing: #71bd4f;
--player-status-bench: #f9a115;
--player-status-not-started: #76808c;
--player-status-finished: #3c94dc;