Chat - Alanzoka

by XandX_

HTML

<div class="top-degrade"></div>

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout"></div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <div class="meta" style="background-color: {color};">
      <span class="badges"></span>
      <span class="name">{from}</span>
    </div>

    <div class="message">
      <div class="container-message">
        {message}
      </div>
    </div>
  </div>
</script>

<div class="bottom-degrade"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:700);
@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap);

* { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {line-height: 1.5em; color: #fff; -webkit-mask-image: -webkit-gradient(linear, left 16%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
#log>div { animation: bounceInUp .3s ease forwards, fadeOut 0.5s ease 15s forwards;}

.colon { display: none; }

#log {position: absolute; width: 100%; bottom: 0; left: 0; padding: 0 10px 10px;}


/* ===== USERNAME ===== */
#log .meta {box-shadow: 10px 10px 10px rgba(9, 19, 20, 0.35); position: absolute; top: 0; left: 10px; padding: 9px 14px; line-height: 15px; border-radius: 8px; z-index: 1;
  font-family: 'Ubuntu'; font-size: 14px; font-weight: 900;}
  #log .meta .badges {float: left; margin-right: 10px;}
    #log .meta .badges > img { width: 18px; height: 18px; margin-right: 5px;}
      #log .meta .badges > img:last-child {margin-right: 0;}
  #log .meta .name {float: left; line-height: 21px;}

/* ===== USERMESSAGE ===== */
#log .message {position: relative; min-height: 20px;}
  #log .message .container-message {box-shadow: 10px 10px 10px rgba(9, 19, 20, 0.35); background: rgba(9, 19, 20, 0.75); padding: 20px 18px 15px 18px; border: 2px solid #2FC9C5; border-radius: 0 10px 10px 10px; display: inline-block;
    font-family: 'Roboto'; font-size: 18px; word-break: break-word;}
    #log .message .container-message .emote {background-image: none !important;}
    #log .message .container-message .emote img {max-width: 25px;}

JavaScript

// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
	// obj will be empty for chat widget
	// this will fire only once when the widget loads
});

document.addEventListener('onEventReceived', function(obj) {
  	// obj will contain information about the event
	
});