Skip to content

Instantly share code, notes, and snippets.

@lazuee
Created April 8, 2022 14:18
Show Gist options
  • Save lazuee/647340cf303aeba7bad333fda7e7b654 to your computer and use it in GitHub Desktop.
Save lazuee/647340cf303aeba7bad333fda7e7b654 to your computer and use it in GitHub Desktop.
Streamlabs bubble chatbox
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment