Design Configuration

This section covers the design customization of the Ped Dialog. 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, everything that is inside css is css configuration, outside that is other design configuration. Play with it and you will see what changes.

{
  "css": {
    "background": "linear-gradient(180deg, rgba(0, 0, 0, 0) 72.8%, rgba(0, 0, 0, 0.29) 82.6%, #000000 107.18%)",
    "position-bottom": "3vw",

    "name-color": "#fff",
    "name-font-size": "2.6em",
    "group-color": "#212121",
    "group-font-size": ".8em",
    "group-background": "#CFFE6C",

    "message-color": "#fff",
    "message-width": "30vw",
    "message-font-size": ".95em",

    "button-background": "#0000008C",
    "button-text-color": "#fff",
    "button-border": "1px solid transparent",
    "button-hover-background": "#CFFE6C",
    "button-hover-text-color": "#212121",
    "button-hover-border": "1px solid transparent",
    "button-radius": "0",

    "menu-bg": "#000000CC",
    "menu-radius": "5px",
    "menu-padding": "2em",
    "menu-width": "55vw",
    "menu-gap-between": "1em",

    "menu-close-size": "1.2em",
    "menu-close-color": "#FFFFFF1A",
    "menu-close-color-hover": "#fff",

    "menu-title-size": "1.5em",
    "menu-title-color": "#fff",
    "menu-desc-size": ".8em",
    "menu-desc-color": "#898989",
    "menu-ped-group-height": "2em",

    "items-border": "1px solid #FFFFFF1A",
    "items-radius": "5px",
    "items-list-max-height": "33vh",
    "items-list-gap-between": "0",

    "item-width": "20vw",
    "item-height": "11vh",
    "item-padding": "1vw",
    "item-image-padding": ".3vw",
    "item-image-size": "100%",
    "item-gap-between-name-and-actions": ".8vw",
    "item-name-size": "1em",
    "item-name-color": "#fff",
    "item-actions-radius": "5px",
    "item-actions-font-size": "1em",
    "item-actions-padding": ".3vw 0",
    "item-actions-color": "#fff",

    "item-count-font-size": ".9em",
    "item-count-color": "#fff",
    "item-count-background": "transparent",

    "item-count-btn-background": "transparent",
    "item-count-btn-background-hover": "#FFFFFF1A",
    "item-count-btn-font-size": "1em",
    "item-count-btn-color": "#fff",
    "item-count-btn-size": "1vw",
    "item-count-radius": "3px",

    "item-sell-btn-bg": "#CFFE6C",
    "item-sell-btn-color": "#212121",
    "item-buy-btn-bg": "#CFFE6C",
    "item-buy-btn-color": "#212121"
  },
  "side-textures": true
}