Tutorial explaining how to modify the CSS for the AdventureJS display.
tutorial, custom, display CSS
GUI:Display CSS
:root {
--my-game-display-width: 100%;
--my-game-display-min-width: 1024px;
--my-game-display-max-width: 1200px;
--my-text-window-width: 50%;
--my-text-window-min-width: 480px;
--my-text-window-max-width: 620px;
--my-image-window-width: calc(50% - 64px);
--my-image-window-min-width: 600px;
--my-ui-column-width: 128px;
--my-ui-background-color: #17121f;
--my-labelbar-height: 30px;
--my-compasspoint-enabled-color: #1dff54;
--my-compasspoint-hover-color: #fff819;
--my-compasspoint-disabled-color: #083613;
--my-compasspoint-cardinal-flat-face: 25px solid
var(--my-compasspoint-disabled-color);
--my-compasspoint-cardinal-angle-face: 20px solid transparent;
--my-compasspoint-ordinal-flat-face: 20px solid
var(--my-compasspoint-disabled-color);
--my-compasspoint-ordinal-angle-face: 12px solid transparent;
--my-compasspoint-ud-width: 100%;
--my-compasspoint-ud-height: 33%;
--my-compasspoint-up-top: 0;
--my-compasspoint-down-top: 60%;
--my-compasspoint-grid-size: 42px;
--my-compasspoint-middle-grid-size: 42px;
--my-dockbutton-enabled-color: var(--my-ui-background-color); /*#1d9cff;*/
--my-dockbutton-hover-color: #fff819;
--my-dockbutton-disabled-color: #0d3655;
}