/*
- Streamlabs Giffed
- Last Modified: Saturday, 23rd December 2023, 9:35:37 pm
*/
@import url('[Link]
:root {
--font_family: {font_picked};
--message_hide_delay: {message_hide_delay};
--box_spacing: {box_spacing}px;
--username_bg_color: {username_background_color};
--username_border_width: {username_border_width}px;
--username_border_color: {username_border_color};
--username_border_style: {username_border_style};
--username_border_radius: {username_border_radius}px;
--username_text_color: {username_text_color};
--username_font_size: {username_font_size}px;
--username_font_weight: {username_font_weight};
--username_transform: {username_transform};
--message_border_width: {messsage_border_width}px;
--message_border_style: {message_border_style};
--message_border_color: {message_border_color};
--message_border_radius: {message_border_radius}px;
--message_background_color: {message_background_color};
--message_text_color: {message_text_color};
--message_font_size: {message_font_size}px;
--message_transform: {message_transform};
--message_font_weight: {message_font_weight};
--image_upload: {image_upload};
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
font-family: var(--font_family), 'Helvetica Neue', sans-serif;
line-height: 1.5em;
}
.colon {
display: none;
}
#log {
display: block;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px 10px;
width: 100%;
}
#log>[Link] {
visibility: hidden;
}
#log>div {
margin-bottom: var(--box_spacing);
animation: fadeOut 0.5s ease var(--message_hide_delay) forwards;
-webkit-animation: fadeOut 0.5s ease var(--message_hide_delay) forwards;
}
.meta {
display: inline-block;
}
.badges {
display: inline-block;
padding: 4px 4px 2px 2px;
vertical-align: middle;
}
.badge {
display: inline-block;
margin: 0;
position: relative;
height: fit-content;
max-height: 1em;
vertical-align: middle;
margin-top: -2px;
margin-left: 5px;
}
.username_box {
background-color: var(--username_bg_color);
margin-left: 5px;
margin-bottom: -10px;
display: inline-block;
border: var(--username_border_width) var(--username_border_style) var(--
username_border_color);
border-radius: var(--username_border_radius);
z-index: 1;
/* cause position relative @ .message-box */
}
.name {
display: inline-block;
color: var(--username_text_color);
font-size: var(--username_font_size);
font-weight: var(--username_font_weight);
letter-spacing: 1px;
text-transform: var(--username_transform);
padding: 2px 4px ;
}
.message_box {
border-width: var(--message_border_width);
border-style: var(--message_border_style);
border-color: var(--message_border_color);
padding-top: 5px;
background-color: var(--message_background_color);
border-radius: var(--message_border_radius);
position: relative;
z-index: -1; /* cause position relative */
}
.message_box::after {
content: "";
background: url(var(--image_upload)) no-repeat;
background-size: contain;
height: 30px;
width: 30px;
position: absolute;
top: -20px;
right: 15px;
}
.message {
display: block;
color: var(--message_text_color);
letter-spacing: 0.9px;
text-transform: var(--message_transform);
margin-left: 5px;
padding: 6px 6px ;
word-wrap: break-word;
font-size: var(--message_font_size);
font-weight: var(--message_font_weight);
}
#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;
}