Improve Chat Style

[brunocalado]

Hi.

I'm using a macro with cooler chat message. I think you copy the style to the system.

Current Chat messages

New Style

code:

  static async styledChatMessage(myTitle, message1, message2='') {
    let chatData = {
      speaker: null,
      content: `<div style="position:relative; background: #ddd9d5;padding: 0.5rem; margin-left:-7px;margin-right:-7px;margin-bottom:-7px;margin-top:-27px"><label class="titulo" style="font-size:35px; color: #b02b2e;">${myTitle}</label><div style="position: absolute;top: 0;right: 0;width: 50px;height:50px;background: linear-gradient(45deg, #00000000 50%, #000000 50%);"></div><br><label style="font-size: 15px">${message1}</label><div style="margin-top:5px ;height: 5px;width: 100%;background: linear-gradient(20deg,  #000000 70%, #ddd9d500 70%);"></div><p>${message2}</p></div>`};
    ChatMessage.create(chatData, {});
  }

[drewg13]

I'm not sure how you would even go about implementing this in-system, as you're adding some custom fields that aren't supported by the base system. The "Diabo" I presume is the speaker, but there's no current support for getting a sub-header in a chat message. Also, I personally don't love the look for every chat message, even if I found a way to implement it. I prefer a simpler style from both an aesthetic and a code maintenance perspective.

I would definitely change the first margin-top: from -27px to -37px or -38px in order to get rid of that awkward remaining gap at the top of each one, for one thing. But I think this is something better left to macros like yours or to Custom CSS rules, if you want to restyle things more globally.