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 user works with its parent color.

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

This is the guide for printing Download styleguide

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: $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;

Transitions

    

      

      

      

    
    
--short-transition: .2s;

Field

The fields are variables set on the css background: property. The purpose is for you to be able to change it to your own branded field if you choose to do so.

If no fields are set the system will fall back to default background colors:

    

      

      

      

    
    
--football-background: darkgreen;
--football-background-mobile: darkgreen;
--hockey-background: skyblue;
--basket-background: burlywood;
--golf-background: darkgreen;
--cycling-background: black;
--horse-background: brown;
--dota2-background: burlywood;

Our default provided fields can be used by adding:

    

      

      

      

    
    
--football-background: url("https://fantasy.assets.scoutgg.net/fields/football/v1/field.png");
--football-background-mobile: url("https://fantasy.assets.scoutgg.net/fields/football/v1/field-mobile.png");
--hockey-background: url("https://fantasy.assets.scoutgg.net/fields/hockey/v1/field.png");
--hockey-background-mobile: url("https://fantasy.assets.scoutgg.net/fields/hockey/v1/field-mobile.png");
--basket-background: url("//fields/basket/v1/field.png");
--golf-background: url("https://fantasy.assets.scoutgg.net/fields/golf/v1/field.png");
--cycling-background: url("https://fantasy.assets.scoutgg.net/fields/cycling/v1/field.png");
--horses-background: url("https://fantasy.assets.scoutgg.net/fields/horse-racing/v1/field.png");
--dota2-background: url("https://fantasy.assets.scoutgg.net/fields/dota2/v1/field.png");

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;
Test