프로그램 트위치 박스채팅 깔끔하게 해주는 CSS공유합니당.

워프_
2018-09-02 19:31:20 13169 13 20

21bbfa46ac92fa738de7c393fea9a769.jpgda992b84805ab0bbc5df510b851ec63e.jpg

이 밑에 코드를 복사하시고 트윕 커스텀CSS에 붙여넣기 그리고 채팅창 확인하세용.

#log,

body,

html {

    overflow: hidden

}

#log {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    box-sizing: border-box;

    padding: 100px 15px 10px;

}

#log > div {

    margin-bottom: 5px;

    --background: linear-gradient(rgba(70, 70, 70, .6), rgba(50, 50, 50, .7));

    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;

    border-radius: 3px;

    --box-shadow: 0 0 4px rgba(0, 0, 0, .4)

}

#log>div.deleted {

    visibility: hidden

}

.meta {

    display: block;

    line-height: 1em

}

.message {

    word-wrap: break-word;

    line-height: 1.5em

}

.name {

    text-transform: uppercase;

    font-weight: 700

}

.colon {

    display: none

}

.badge {

    float: right;

    padding-left: 5px;

    height: .8em

}

#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;

}

POWERNAO님이 주셨습니당

댓글 20개  
이전 댓글 더 보기
광고
방송하기프로그램채팅/봇업데이트
24
09-03
11
09-03
5
방송하기
크리에이티브 Sound BlasterX G6 리뷰 [5]
박두영씨
08-29
37
08-26
21
08-25
10
08-22
0
방송하기
KeirStarmer 괴담 그 진실은? [5]
채널_이니셜
08-21
8
프로그램
OBS 22.0.2 업데이트(핫픽스가 나왔습니다) [22]
베리머취래빗
08-21
13
업데이트
트위치 프라임과 터보 비교 [10]
진한자몽커피
08-21
인기글 글 쓰기