100 lines
No EOL
3.2 KiB
CSS
100 lines
No EOL
3.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
|
|
|
|
:root {
|
|
|
|
/*
|
|
The fonts and font colours the site will use
|
|
*/
|
|
--fonts: "Roboto", "Open Sans", sans-serif;
|
|
--input-fonts: "Roboto Slab", var(--fonts);
|
|
--light-font-colour: #dac8b0;
|
|
--dark-font-colour: #000f3d;
|
|
|
|
/* The full-site background used for the game view area only */
|
|
--game-view-background: #29170c;
|
|
|
|
/*
|
|
The darkest colour in the trio for backgrounds, this is used for the
|
|
site-wide background and modal content.
|
|
*/
|
|
--background1: #111113;
|
|
--background1-darken: #09090a;
|
|
--background1-lighten: #1c1c1f;
|
|
--background1-text: var(--light-font-colour);
|
|
|
|
/*
|
|
The middle colour in the trio for backgrounds.
|
|
Used for hand background, buttons, regions, etc.
|
|
*/
|
|
--background2: #4f5156;
|
|
--background2-darken: #3d3e42;
|
|
--background2-lighten: #676a70;
|
|
--background2-text: var(--light-font-colour);
|
|
|
|
/* The colours used for the lightest shades of the background regions. */
|
|
--background3: #e5d9ba;
|
|
--background3-darken: #bbae8f;
|
|
--background3-lighten: #fff4d7;
|
|
--background3-text: var(--dark-font-colour);
|
|
|
|
/*
|
|
The colours for the cards in the hands of the players
|
|
*/
|
|
--card-background: var(--background1);
|
|
--card-text: var(--light-font-colour);
|
|
--card-button: var(--background3);
|
|
--card-button-darken: var(--background3-darken);
|
|
--card-button-lighten: var(--background3-lighten);
|
|
|
|
/*
|
|
The colours used for the main game board. While playing, the alt colour
|
|
is used for the text input backgrounds.
|
|
*/
|
|
--board-background: var(--background1);
|
|
--board-background-alt: var(--background3);
|
|
--board-background-alt-darken: var(--background3-darken);
|
|
--board-background-alt-lighten: var(--background3-lighten);
|
|
--board-background-text: var(--background1-text);
|
|
--board-background-alt-text: var(--background3-text);
|
|
|
|
/* The colours for the object cards that the spirits pick from */
|
|
--object-card-background: var(--background3);
|
|
--object-card-text: var(--background3-text);
|
|
--object-button-default: var(--background2);
|
|
--object-button-hover: var(--background2-lighten);
|
|
--object-button-focus: var(--background2-darken);
|
|
--object-button-text: var(--background2-text);
|
|
|
|
/*
|
|
Colours used for the past questions insert and button
|
|
*/
|
|
--past-questions-button-default: var(--background3);
|
|
--past-questions-button-hover: var(--background3-lighten);
|
|
--past-questions-button-focus: var(--background3-darken);
|
|
--past-questions-background: var(--background3);
|
|
--past-questions-field: var(--background1);
|
|
|
|
|
|
/* The fill colour of the eyes on the game board */
|
|
--eye-colour: #000000;
|
|
|
|
/* The colours for the modals */
|
|
--modal-background-blur: #000000a6;
|
|
--modal-content-background: var(--background1);
|
|
--modal-content-text: var(--background1-text);
|
|
|
|
/* The colours used for the buttons in the modal that are for confirming actions */
|
|
--confirm-background: #018501;
|
|
--confirm-background-darken: #006600;
|
|
--confirm-background-lighten: #00aa00;
|
|
--confirm-text: white;
|
|
--cancel-background: #c94a4a;
|
|
--cancel-background-darken: #a54141;
|
|
--cancel-background-lighten: #fa7d7d;
|
|
--cancel-text: white;
|
|
|
|
/* Trash button */
|
|
--trash-button-background: var(--background2);
|
|
--team-reminder-background: var(--background2);
|
|
--object-reminder-background: var(--background2);
|
|
} |