Styling tips

The style sheet included with the HCJE is essential for controlling the appearance and scaling of the game area and associated elements, such as buttons. The following information should help when creating your own style sheets.

Colour palette

All colors used for buttons and dialogs use the variables defined below:

:root {
  --color-primary: #06AED5;
  --color-secondary: #F0C808;
  --color-tertiary: #FFF1D0;
  --color-highlight: #DD1C1A;
  --color-highlight2: #059B15;
  
  --color-primary-contrast: #fff;
  --color-secondary-contrast: #000;
  --color-tertiary-contrast: #000;
  --color-highlight-contrast: #fff;
  
  --color-primary-shadow: #086788;
  --color-dark-grey: #404040;
  --color-light-grey: #d3d3d3; 
}

Z-index of items

Some items have an explicit z-index set to ensure they are displayed correctly over other elements.

Item	Selector	z-index
Busy indicator	.hcje-busy-selector	1500
Menu bar	.hcje-menu-bar	901
Menu opener	.hcej-menu-opener	900