Created
April 8, 2022 14:18
-
-
Save lazuee/647340cf303aeba7bad333fda7e7b654 to your computer and use it in GitHub Desktop.
Streamlabs bubble chatbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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