Skip to content

Instantly share code, notes, and snippets.

@Dinir
Last active January 27, 2024 17:15
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Dinir/791bea7eb8dbe28b2af2c50113b8ada7 to your computer and use it in GitHub Desktop.
Save Dinir/791bea7eb8dbe28b2af2c50113b8ada7 to your computer and use it in GitHub Desktop.
Streamlabs Chat Box - Scrolling Sideway
body {
background: $background_color;
color: $text_color;
font-size: $font_size;
}
.colon, .name {
height: 0px;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
#custom_html {
height: 100%;
vertical-align: bottom;
}
.sl__chat__layout {
font: 1em "Helvetica Neue",Helvetica,Arial,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;
}
/* 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;
vertical-align: top;
}
.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 {
/* makes username thicker */
/* font-weight: 700; */
}
/* cheermote */
.message > img[src*=".gif"] {
height: 1.2em;
padding-right: 4px;
}
.message > img[src*=".gif"] + font {
position: relative;
top: -0.25em;
}
<!-- item will be appened to this layout -->
<div class="log_copy sl__chat__layout horizontal_flow text_outline">
</div>
<div class="log_copy sl__chat__layout horizontal_flow text_outline">
</div>
<div id="log" class="sl__chat__layout horizontal_flow text_outline">
</div>
<!-- chat item -->
<script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<span class="meta" style="color: {color}">
<span class="badges"></span><span class="name">{from}</span>
</span>
<span class="message">
{message}
</span>
</div>
</script>
let logInstances = []
logInstances.push(document.getElementById('log'))
logInstances.push(...Array.from(document.getElementsByClassName('log_copy')))
// 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
for (let i = 0; i < logInstances.length; i++) {
logInstances[i].dataset.row = i
if (i === 0) { continue }
logInstances[i].style.right = i * -100 + '%'
logInstances[i].style.marginBottom = i * 1.6 + 'em'
}
});
document.addEventListener('onEventReceived', function (obj) {
// obj will contain information about the event
for (let i = 0; i < logInstances.length; i++) {
keepRecentMessages(logInstances[i])
}
});
function keepRecentMessages (messageList, amountToKeep = 10) {
if (
typeof messageList === 'undefined' ||
typeof amountToKeep !== 'number'
) {
return false
}
while (messageList.children.length > amountToKeep) {
messageList.removeChild(messageList.firstElementChild)
}
return true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment