@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: inherit;
font-size: inherit;
font-family: inherit;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
color: #ffffff;
font-size: $font_sizepx;
font-family: '$font_face', sans-serif;
}
#log {
width: 100%;
height: auto;
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
display: flex;
align-items: flex-end;
flex-direction: column;
}
#log > div {
width: 100%;
display: inline-flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 5px;
padding: 7px 10px 1px;
animation: flipInX .5s ease, fadeOutUp 1s ease $message_hide_delays forwards;
-webkit-animation: flipInX .5s ease, fadeOutUp 1s ease $message_hide_delays forwards;
}
#log > div.deleted {
visibility: hidden;
}
.meta {
width: 100%;
display: flex;
line-height: 1em;
}
.message {
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
line-height: 1.5em;
}
.name {
text-transform: uppercase;
font-weight: 700;
font-size: calc($font_sizepx * 0.72);
flex: 1 0 auto;
text-align: right;
}
.colon {
display: none;
}
.badge {
float: right;
font-size: 0.7em;
padding-left: 5px;
height: 0.8em;
margin: 0.7rem 0 0 0
}
#log .emote_wrap {
position: relative;
}
#log .emote_wrap img.emoticon {
height: $font_sizepx;
vertical-align: middle;
margin: -5px 0;
}
body,
html {
height: 100%;
}
body {
text-shadow: 0 0 1px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .6);
}
body {
background: $background_color;
color: $text_color;
}
#log {
font: 600 $font_sizepx '$font_face';
}
span.message > img {
height: 1em;
}
두번째. 버블 css
@charset "UTF-8";
* {
box-sizing: border-box;
}
html {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
font-size: $font_sizepx;
font-family: '$font_face', sans-serif;
}
body {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
}
#log {
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
word-wrap: break-word;
}
.reverse #log {
align-items: flex-end;
text-align: left;
}
#log > div {
display: inline-block;
padding: 0.5rem 0.75rem;
margin: 0.125rem;
background: rgba(0, 0, 0, 0.25);
border-radius: 2rem;
color: #fff;
animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
float: right;
}
.meta {
display: inline-flex;
align-content: center;
margin-right: 0.25rem;
float: right;
}
.message {
display: inline;
text-shadow:
0 0 0.125rem rgba(0, 0, 0, 0.5),
0 0 0.125rem rgba(0, 0, 0, 0.5);
color: $text_color;
vertical-align: top;
text-align: left;
word-break: break-all;
}
.name,
.colon,
.badge,
.name {
flex-grow: 1;
font-size: calc($font_sizepx * 0.7);
order: 100;
color: #fff !important;
text-shadow:
0 0 0.125rem rgba(255, 255, 255, 0.5),
0 0 0.125rem var(--color),
0 0 0.125rem var(--color),
0 0 0.125rem var(--color),
0 0 0.125rem var(--color);
margin-left: 0.3em;
margin-top: 0.5em
}
.name::before {
content: ': '
}
.colon {
display: none;
}
.badge {
width: 0.7rem;
height: 0.7rem;
margin: 0.4rem 0 0 0.4rem;
overflow: hidden;
vertical-align: middle;
}
---------------------------------------------------------------------------------
기존에 있던 거에서 닉네임 크기 줄이고, 뱃지 크기 줄인거에요.
뱃지도 너무 큰것보다 작은게 나을거 같아서...
닉네임크기는 제가 표시 해둔 곳에 숫자 키우거나 줄이시면 닉네임 폰트 크기 바뀝니다!