Design Configuration

This section covers the design customization of the HUD. With minimal CSS knowledge, you can adjust colors, font sizes, and other design elements to match your server's theme.

Design config file could be found at /web/design.json .

There is really nothing to explain. Just play with it and you will see what changes.

{
  "info-hud-text": "#fff",
  "info-hud-icon": "#797979",
  "info-hud-bg": "rgba(0, 0, 0, 0.7)",
  "info-hud-font-size": ".72vw",
  "info-hud-logo-size": "1.1vw",
  "info-hud-height": "2vw",
  "info-hud-pos-top": "1vw",
  "info-hud-pos-bottom": "1vw",
  "info-hud-pos-left": "0",
  "info-hud-pos-right": "0",

  "status-bg": "rgba(0, 0, 0, 0.7)",
  "status-gap-between": "5px",
  "status-size": 43,
  "status-border-width": 4,
  "status-bg-width": 4,
  "status-use-map-height": true,
  "status-container-bottom": "1vw",

  "compass-bg": "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 19.56%, rgba(0, 0, 0, 0.35) 50.05%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%)",
  "compass-pos-top": "1vw",

  "speedo-speed": "#CFFE6C",
  "speedo-speed-secondary": "rgba(0, 0, 0, 0.35)",
  "speedo-speed-metric": "rgba(255, 255, 255, 0.35)",
  "speedo-fuel-bg": "rgba(0, 0, 0, 0.7)",
  "speedo-fuel": "#CFFE6C",
  "speedo-indicator-bg": "rgba(0, 0, 0, 0.7)",
  "speedo-indicator": "rgba(255, 255, 255, 0.4)",
  "speedo-indicator-active": "#CFFE6C",

  "notification-bg": "rgba(0, 0, 0, 0.5)",
  "notification-text": "rgba(255, 255, 255, .7)",
  "notification-type-error": "#833333",
  "notification-type-success": "#82db59",
  "notification-type-info": "#999999",
  "notifications-width": "17vw",
  "notifications-pos-top": "0",
  "notifications-pos-right": "0",
  "notifications-pos-bottom": "0",
  "notifications-pos-left": "0",
  "notifications-color-w": "rgba(255, 255, 255, .7)",
  "notifications-color-u": "#000000",
  "notifications-color-r": "#ef075d",
  "notifications-color-b": "#0099cc",
  "notifications-color-g": "#a3ff12",
  "notifications-color-y": "#ffcc00",
  "notifications-color-p": "#651FFF",
  "notifications-color-o": "#F76A2E",
  "notifications-color-c": "#12b886",
  "notifications-color-m": "#495057",

  "keybinds-label-size": "14px",
  "keybinds-label": "#FFFFFF99",
  "keybinds-key": "#FFFFFF",
  "keybinds-key-bg": "rgba(0, 0, 0, 0.7)",
  "keybinds-key-size": "2vw",
  "keybinds-key-font": "15px",

  "settings-title": "HUD Settings",
  "settings-action-close": "Apply",
  "settings-action-reset": "Reset to default",
  "settings-bg": "#0B0B0B",
  "settings-color": "#fff",
  "settings-secondary-color": "#909090",
  "settings-border-color": "#1D1D1D",
  "settings-toggler-bg": "#242424",
  "settings-toggler-color": "#3E3E3E",
  "settings-toggler-active": "#CFFE6C",
  "settings-action-color": "#FFFFFF",
  "settings-action-bg": "transparent",
  "settings-action-border": "#242424",
  "settings-action-hover-bg": "#CFFE6C",
  "settings-action-hover-color": "#0B0B0B"
}