Streamlabs bubble chatbox

chat_bubble.css

body {
  background: $background_color;
  color: $text_color;
  font-size: $font_size;
}

.colon, .name {
  height: 0px;
}

.colon{
   color: #728fdf !important;
  font-size: 22px !important;
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
}

.message {color: #fff !important;
  font-size: 20px !important;
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
}

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

#custom_html {
  height: 100%;
  width: 100%;
  vertical-align: bottom;
}
.sl__chat__layout:after {
    content:'';
    top: 0;
    left: 0;
    height: 40px;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(251, 251, 251, 0) 100%);
    position: fixed;
}

.sl__chat__layout {
  width: 100%;
  /* font: 0.8em "Helvetica Neue",Helvetica,Arial,sans-serif; */
  font: 1em "Fira Code",NeoDunggeunmo,sans-serif;
  position: absolute;
  bottom: 0;
  padding-top: 0.1em;
  box-sizing: border-box;
}

/* text outline */
.text_outline {
  text-shadow: 
    -1px -1px 1px black, 
    1px -1px 1px black, 
    -1px 1px 1px black, 
    1px 1px 1px black;
}


.sl__chat__layout > div {
  padding: 0.2em 0;
  word-break: break-all;
  animation: fadeOut 1s ease $message_hide_delay forwards;
  -webkit-animation: fadeOut 1s ease $message_hide_delay forwards;
}

.sl__chat__layout > div {
  font-family: Segoe, Helvetica!important;
    background-color: rgba(140,140,140,0.7) !important;
   border-radius:25px!important;
padding:13px!important;margin-bottom:7px!important
}

/* makes messages go sideway */
.sl__chat__layout.horizontal_flow {
  right: 0;
  text-align: right;
  width: 2500%;
  height: 1.6em;
  overflow: hidden;
}
.sl__chat__layout.horizontal_flow > div {
  display: inline-block;
  margin-left: 1.0em;
  position: relative;
  /* left: 400px; */
  /* animation: slide 0.2s forwards; */

  /* forces each message container to be not taller than 1em */
  height: 1em;
  overflow: hidden;
}

.sl__chat__layout > div.deleted {
  visibility: hidden;
}

.sl__chat__layout .emote {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  padding: 0 4px;
  /*top: -.2em;*/
}

.sl__chat__layout .emote img {
  display: inline-block;
  height: 0.8em;
  opacity: 0;
}

.badge,.colon,.name {
  display: inline-block;
}

.sl__chat__layout .meta {
  /* the closing tag of `.meta` being in a new line creates a whitespace. */
  /* unless it changes, padding-right won't be included. */
  padding-right: 0px;
  position: relative;
}

.badge {
  margin-right: 4px;
  height: 1.2em;
  position: relative;
}

.name {
   color: #728fdf !important;
  font-size: 22px !important;
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
}

/* cheermote */
.message > img[src*=".gif"] {
  height: 1.2em;
  padding-right: 4px;
}
.message > img[src*=".gif"] + font {
  position: relative;
  top: -0.25em;
}

.avatar img{
     width: 50 !important;
    height: 50px !important;
    border-radius: 24px !important;
    margin-right: 4px !important;

 display: inline-block;
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
}