From 516ff1b846f0f47a2de8883bcee5552c601884cf Mon Sep 17 00:00:00 2001 From: Evan Pratten Date: Fri, 17 Apr 2020 18:36:29 -0400 Subject: [PATCH] Add CSS mappings and docs --- docs/_sass/ui/page-loader.scss | 6 +++--- docs/assets/js/constants.js | 3 ++- docs/assets/js/injection/cssinjector.js | 20 ++++++++++++++------ docs/index.html | 15 ++++++++++++--- 4 files changed, 31 insertions(+), 13 deletions(-) diff --git a/docs/_sass/ui/page-loader.scss b/docs/_sass/ui/page-loader.scss index 5a5fa5f..e5a0b52 100644 --- a/docs/_sass/ui/page-loader.scss +++ b/docs/_sass/ui/page-loader.scss @@ -9,8 +9,8 @@ height: 99.9vh; width: 99.9vw; overflow: hidden; - background-color: #242424; - color: white; + background-color: var(--theme-webpage-bg_color); + color: var(--theme-webpage-text_color); } .disappear { @@ -32,7 +32,7 @@ top: calc(50% - 40px); display: inline-block; vertical-align: text-bottom; - border: 8px solid #ff4136; + border: 8px solid var(--theme-webpage-loading_animation_color);; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index a16c253..71638b2 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -11,7 +11,8 @@ var constants = { webpage: { bg_color: "#242424", text_color: "#ffffff", - canvas_border: "rgb(63, 63, 63)" + canvas_border: "rgb(63, 63, 63)", + loading_animation_color: "#ff4136" }, // Theme variables specific to the game diff --git a/docs/assets/js/injection/cssinjector.js b/docs/assets/js/injection/cssinjector.js index 22cd1c5..b07245a 100644 --- a/docs/assets/js/injection/cssinjector.js +++ b/docs/assets/js/injection/cssinjector.js @@ -1,6 +1,13 @@ +/** + * This file contains code that injects variables from constants.js + * into the document root as CSS variables or use inside style scripts. + * + * To add a new dictionary of variables to the document, just add a + * new line to the "mappings" section + */ -// Document root theme -let _rootCSS = document.body.style; +// Document root style object +let _rootStyle = document.documentElement.style; /** * Inject all KVPs from a dictionary into the document @@ -17,15 +24,16 @@ function injectMultiCSS(prefix, source_dict) { Object.keys(source_dict).forEach((k) => { let varname = `--${prefix}-${k}`; - - _rootCSS += `${varname}:${source_dict[k]};` - + + _rootStyle.setProperty(varname, source_dict[k]); + }); } + /* Mappings from constants file to CSS */ // If you are adding theme variables to constants.js, // make sure to also define them here injectMultiCSS("theme-webpage", constants.ui.theme.webpage); -injectMultiCSS("theme-game", constants.ui.theme.game); \ No newline at end of file +injectMultiCSS("theme-game", constants.ui.theme.game); diff --git a/docs/index.html b/docs/index.html index ebac9fb..e925d13 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,14 +5,14 @@ title @@ -20,10 +20,19 @@ + + + + + + + + + \ No newline at end of file