body {
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20% )
}
body,
html {
font: $font_sizepx '$font_face', serif;
background-color: $background_color;
height: 100%;
overflow: hidden
}
#log {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0.5em 0.1em;
width: 100%;
box-sizing: border-box
}
#log > div {
background-color: white;
padding: 0.2em 0.5em;
margin: -0.3em 0.3em 0.7em 0.3em;
border-left: 0.4em solid black;
box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.5);
animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}
.reverse #log > div {
border-left: none;
border-right: 0.4em solid black;
}
#log > div:nth-last-child(10n-9) {
border-color: #ff7f82
}
#log > div:nth-last-child(10n-8) {
border-color: #ffce70
}
#log > div:nth-last-child(10n-7) {
border-color: #a6f480
}
#log > div:nth-last-child(10n-6) {
border-color: #97e9b6
}
#log > div:nth-last-child(10n-5) {
border-color: #80daf4
}
#log > div:nth-last-child(10n-4) {
border-color: #80b1f4
}
#log > div:nth-last-child(10n-3) {
border-color: #7c7fe4
}
#log > div:nth-last-child(10n-2) {
border-color: #a680f4
}
#log > div:nth-last-child(10n-1) {
border-color: #ce80f4
}
#log > div:nth-last-child(10n) {
border-color: #f2a3e2
}
.meta {
margin-right: -0.5em;
font-weight: 700
}
.colon {
float: right;
}
.name {
float: right;
}
.message {
float: right;
color: $text_color !important;
line-height: 1.3em;
margin-right: 0.5em;
/*margin-top: 0.9em;*/
font-weight: 400
float: right;
}
.deleted {
visibility: hidden
}
.badge,
.colon,
.name,
.message {
vertical-align: middle;
text-align: right;
}
.badge {
margin-right: 0.3em;
height: 1em
}
.colon {
margin-right: 0.7em
}
.message > img {
height: 1em
}
.emote_wrap {
position: relative
}
.emoticon {
height: $font_sizepx;
vertical-align: middle;
margin: -0.1em 0;
image-rendering: pixelated
}
/* 닉네임 가독성 해결 */
span.meta[style="color: #00FF00"] {
color: #37B737 !important
}
span.meta[style="color: #0000FF"] {
color: #2A74FF !important
}
span.meta[style="color: #5F9EA0"] {
color: #56BFA8 !important
}
span.meta[style="color: #B22222"] {
color: #FB6767 !important
}
span.meta[style="color: #2E8B57"] {
color: #1CC24D !important
}
span.meta[style="color: #191970"] {
color: #8383DE !important
}
span.meta[style="color: #008000"] {
color: #49CC49 !important
}
span.meta[style="color: #D2691E"] {
color: #DC8444 !important
}
span.meta[style="color: #FF0000"] {
color: #FF4A4A !important
}