Skip to main content

CSS

Boardzilla can be entirely customized through standard CSS. By default many styles are included basic positioning and animation that are not intended to change. However all Boardzilla CSS is applied using a CSS @layer so that any CSS you provide will override these.

box-sizing

All Boardzilla elements use box-sizing: border-box by default.

DOM element reference​

Here you will find a list of all the elements and classes that can be targetted for custom CSS. As with any CSS development, it is often best to simply inspect the HTML and edit it directly to see what effect your custom CSS will have.

This HTML block is only intended to show the general structure and where examples of the main types of elements would appear in the DOM. This is not exhaustive and not all of these elements would be present at the same time.

<html>
  <body>
    <!-- if on the setup screen -->
    <div id="setup">
      <div id="background"/>
      <div id="seating">
      <div id="settings">
    </div>
    <-- if on the game screen -->
    <div id="game">
      <div id="background"/>
      <div id="play-area">
        <!-- example Space -->
        <div class="transform-wrapper">
          <div class="Space"> <!-- plus the name of the derived class, if any -->
            <!-- Any custom JSX in Space's render goes here -->
            <!-- example nested Piece -->
            <div class="transform-wrapper">
              <div class="Piece">
                <!-- Any custom JSX in Piece's render goes here -->
              </div>
            </div>
          </div>
        </div>
        <div class="profile-badge">
          <div class="avatar"/>
          <div class="player-name"/>
        </div>
      </div>
      <div class="player-controls">
        <div class="prompt"/>
      </div>
      <div id="announcement" class="modal-popup"/>
      <div id="info-container">
        <div id="info-drawer"/>
        <div id="info-modal" class="modal-popup">
          <div class="element-zoom">
        </div>
      </div>
    </div>
  </body>
</html>
use em or %

Since elements in Boardzilla can change size, it's important to never use absolute CSS units like px.

Always use em units when you want your CSS to be relative to the element it belongs to. CSS attributes that accept a % relative to parent size are also appropriate. Use rems in cases where you want the size to be relative to the entire game board.

<html>​

The html element is where dark-mode is set. To target dark mode with specific CSS, use

html.dark {

<body>​

The body element is typically targetted only for global CSS changes, like font-family.

#setup​

The game setup page with seating and settings is found here. Target this with CSS if you want to style the setup page specifically, e.g. with custom font treatment.

#game​

The top-level element for the game itself. This can have a variety of classes applied to it to target particular browsers and devices, namely:

  • mobile for mobile browsers
  • desktop for desktop browsers
  • browser-chrome for Chrome
  • browser-edge for Edge
  • browser-safari for Safari
  • browser-firefox for Firefox

#background​

The background element that contains the wood grain. This can be replaced or customized by changing background-image

#play-area​

The playing area is rendered here, as opposed to any player controls or informational text. Use this in case of CSS selectors that must be scoped to the board only. Remember that elements can appear in modals so element CSS should not be restricted to #play-area.

.transform-wrapper​

Every Space or Piece has a Wrapper div around it that Boardzilla uses for positioning, scaling and animations. Generally, it is inadvisable to target this directly with CSS. This element has font-size set to a value that scales with the size of the element. This means that any CSS applied to the element can use em units to ensure it stays proportionate to the element.

.Space or .Piece​

Specific Spaces and Pieces of your board are rendered with this element. They always a class name of Space or Piece depending on the base type. They also have a class name matching the Typescript class of the element if it is subclassed, e.g. a Card class that extends Piece with have CSS class names of both Card and Piece.

This element can be targetted for any styles except transform. All styles, including transform, can freely be applied to your elements inside the Space/Piece that you supply in the appearance.render. These elements all appear immediately inside this element. Note however, that if you wish to apply z-index layering for this element relative to other elements next to it, the z-index must be applied here.

There are additional class names that may be present depending on circumstances, and are useful for targetting to customize appearance:

  • selected If this element is selected
  • selectable If this element is currently selectable in an available action
  • droppable If this element is a valid drop zone for a dragged element
  • clickable If this element is clickable for any reason
  • invalid If this element is an invalid selection due to a validate rule

The properties you give to your Space/Piece class, as well as built-in properties like name and player are also added to the HTML element as data- attributes, e.g.:

  <div
    class="Piece Card"
    data-name="ace-of-hearts"
    data-suit="H"
    data-number="1"
  >

Also see appearance.

.profile-badge​

The <ProfileBadge> component, if it is included on the page, appears here, along with children for the avatar image and the player name. This can be targetted to customize font treatment, but should generally be left with little alteration for consistency's sake. This element additionally may have these classes:

  • online if the player is currently online
  • current if the player is the current player to act

.player-controls​

Any player input controls or prompts that sit on top of the page are here. They may include prompt text, with class name prompt. Additionally specific player controls can be targeted by using the the name of the Flow command. If a name is present this element will additionally have a class name for that step:

.player-controls.step-<step name> {

This class applies to all popup modals, whether they be information modals, annoucements or the "game finished" annoucement.

#announcement​

The announcement modal. This includes the "game finished" announcement.

#info-drawer​

The floating info panel in the top left once it's opened. This can be targetted for font and color treatment. For consistency's sake, styling should remain close to default.

#info-modal​

The floating info modal that appears when clicking on an information sidebar item or a game element with more info.

When selecting an element to see info, this modal contains the element in its .element-zoom child div. It is important to remember that an element's appearance.render JSX can appear in this context as well so CSS styles applied to elements must allow for this hierarchy, being completely outside the #play-area.

CSS Variables​

There are a few CSS variables set for convenience to access player's chosen colors. These are set on the #game or on the relevant .Space or .Piece element so that they cascade down to any relevant child elements:

  • --player-color: the color of the owner player for this element
  • --my-player-color: the color of the player viewing the game
  • --current-player-color: the color of the player who's turn it currently is, provided only a single player can act.

These can be accessed using the CSS var keyword, e.g.:

  .Token {
    background: var(--player-color);
  }

Hover​

Applying CSS to elements as players hover them can be done with the standard :hover pseudo-class on the Piece/Space element.

It is common in the case of stacked elements to have elements next to the hovered element splay out to reveal themselves to make it easy to leaf thru the stack. A standard, although somewhat complex CSS selector can be used to select the elements before and after the hover, e.g.:

  .transform-wrapper:has(+ .transform-wrapper .Card:hover) .Card {
    /* the card before the hover */
  }

  .transform-wrapper:has(.Card:hover) + .transform-wrapper .Card {
    /* the card after the hover */
  }

This can be further extended with even more esoteric CSS:

  .transform-wrapper:has(+ .transform-wrapper + .transform-wrapper .Card:hover) .Card {
    /* two cards before the hover */
  }
  .transform-wrapper:has(.Card:hover) + .transform-wrapper + .transform-wrapper .Card {
    /* two cards after the hover */
  }