Last active
January 4, 2023 19:36
-
-
Save adamak93/4608d6a10b6af09e455d3882cb039507 to your computer and use it in GitHub Desktop.
ToasterChatBox
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
@import url(https://fonts.googleapis.com/css?family=Roboto:500); | |
* { | |
box-sizing: border-box; | |
} | |
html, body { | |
height: 100%; | |
overflow: hidden; | |
} | |
body { | |
text-shadow: 0 0 1px #000, 0 0 2px #000; | |
/* background_color is set to whatever your Streamlabs settings are set to. */ | |
background: {background_color}; | |
font-family: 'Roboto'; | |
font-weight: 400; | |
font-size: 42; | |
line-height: 1.5em; | |
color: {text_color}; | |
} | |
#log>div { | |
margin-bottom: 5px; | |
background: linear-gradient(rgba(70, 70, 70, 0.75), rgba(50, 50, 50, 1)); | |
/* background: #6B7387; */ | |
padding: 5px 10px 10px; | |
animation: fadeIn 500ms ease, fadeOut 1s ease 10000ms forwards; | |
-webkit-animation: fadeIn 500ms ease, fadeOut 1s ease 10000ms forwards; | |
border-radius: 4px; | |
box-shadow: 0 0 4px rgb(0 0 0 / 40%); | |
display:flex; | |
flex-direction:column-reverse; | |
} | |
.colon { | |
display: none; | |
} | |
#log { | |
display: flex; | |
flex-direction:column-reverse; | |
/* position: absolute; */ | |
bottom: 0; | |
left: 0; | |
padding: 0 10px 10px; | |
width: 100%; | |
table-layout: fixed; | |
overflow: hidden; | |
} | |
#log>div { | |
display: table-row; | |
} | |
#log>div.deleted { | |
visibility: hidden; | |
} | |
#log .emote { | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: contain; | |
padding: 0.4em 0.2em; | |
position: relative; | |
} | |
#log .emote img { | |
display: inline-block; | |
height: 1em; | |
opacity: 0; | |
} | |
#log .message,#log .meta { | |
vertical-align: top; | |
/* display: table-cell; */ | |
padding-bottom: 0.1em; | |
} | |
#log .meta { | |
width: 100%; | |
/* text-align: right; | |
padding-right: 0.5em; */ | |
white-space: nowrap; | |
/* text-overflow: ellipsis; | |
overflow: hidden; */ | |
} | |
#log .message { | |
word-wrap: break-word; | |
width: 100%; | |
} | |
.badge { | |
/* display: inline-block; */ | |
/* margin-right: 0.2em; */ | |
position: relative; | |
height: 1em; | |
vertical-align: middle; | |
/* top: -0.1em; */ | |
float:right; | |
padding-left: 5px; | |
height: 0.8em; | |
} | |
.name { | |
font-size: 0.75em; | |
font-weight: 800; | |
} | |
.meta { | |
display: block; | |
line-height: 1em; | |
} | |
.message { | |
word-wrap: break-word; | |
line-height: 1.5em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment