/* Vagabond Codex skin: every image the stylesheet uses, in one place.
   To use your own art, either replace the file in /assets/ui with one of the same name and size, or point the
   variable at a new file here. Colours are not set here: admins change those on the Theme page (#/theme).

   "Mask" images are white shapes: only their alpha is used, and the page fills them with a theme colour.
   "Frame" images are drawn as they are (9-slice border images; keep the slice sizes noted below). */
:root {
  /* Page */
  --img-grid: url("/assets/ui/bg-grid.png");               /* mask, tiled 512 px: BG_Grid */
  --img-vignette: url("/assets/ui/bg-shadow.png");         /* mask, stretched to the screen: BG_Shadow */
  --img-grain: url("/assets/ui/noise-big.png");            /* moving grain over everything */

  /* Top menu tabs (206 x 54) */
  --img-tab-plate: url("/assets/ui/tab-base.png");         /* mask 214 x 60 */
  --img-tab-frame: url("/assets/ui/tab-frame.png");        /* mask 206 x 54 */
  --img-tab-selected: url("/assets/ui/tab-sel-frame.png"); /* image 206 x 68 */
  --img-tab-neon: url("/assets/ui/tab-neon.png");          /* mask 164 x 18 */
  --img-tab-neon-glow: url("/assets/ui/tab-neon-glow.png");/* mask 176 x 30 */
  --img-tab-arrow: url("/assets/ui/tab-arrow.png");        /* image 30 x 40, points right */
  --img-tab-arrow-glow: url("/assets/ui/tab-arrow-glow.png"); /* mask 36 x 48 */
  /* Faction tabs (210 x 52) */
  --img-subtab-plate: url("/assets/ui/sub-base.png");      /* mask */
  --img-subtab-divider: url("/assets/ui/tab-divider.png"); /* image 10 x 28 */

  /* List rows (548 x 70) */
  --img-row-plate: url("/assets/ui/lib-row-base.png");     /* mask */
  --img-row-frame: url("/assets/ui/lib-row-frame.png");    /* frame, slice 0 209 0 194 */
  --img-row-cursor: url("/assets/ui/arrow-frames.png");    /* 4-frame strip, 26 x 26 each */

  /* Info panel */
  --img-panel-frame: url("/assets/ui/info-frame-box.png"); /* frame, slice 38 32 */
  --img-panel-divider: url("/assets/ui/info-divider.png"); /* image, stretched under the header */
  --img-thumb-frame: url("/assets/ui/thumb-frame.png");    /* frame, slice 16 */
  --img-thumb-shade: url("/assets/ui/thumb-shade.png");    /* frame, slice 28 */
  --img-popup-frame: url("/assets/ui/popup-frame.png");    /* frame, slice 30 60 */

  /* Help bar (bottom) */
  --img-help-plate: url("/assets/ui/help-base.png");       /* mask */
  --img-help-frame: url("/assets/ui/help-frame.png");      /* frame, slice 20 60 */
  --img-help-side-plate: url("/assets/ui/help-side-base.png"); /* mask */
  --img-help-side-frame: url("/assets/ui/help-side-frame.png"); /* frame, slice 20 40 */

  /* Noise layers */
  --img-noise-line: url("/assets/ui/noise-line-1.png");
  --img-noise-line-2: url("/assets/ui/noise-line-2.png");
  --img-noise-a: url("/assets/ui/tile-noise.png");
  --img-noise-b: url("/assets/ui/tile-noise-2.png");

  /* Small icons */
  --img-chevron: url("/assets/ui/chevron-small.png");
  --img-person: url("/assets/ui/person.png");
  --img-diamond: url("/assets/ui/diamond-small.png");
  --img-check: url("/assets/ui/check-empty.png");
  --img-check-on: url("/assets/ui/check-teal.png");
  --img-check-alert: url("/assets/ui/check-red.png");
  --img-alert-curve: url("/assets/ui/curve-red-b.png");
}