Pre-release
AdventureJS Docs Downloads Bundler Devlog
Score: 0 Moves: 0
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;
}