유키 사쿠라 이벤트 리스트 스킨

html, .widget-EventList li > div {
    transform: rotateX($rotate_x) rotateY($rotate_y)
}

.widget-EventList {
    font: $font_size '$font_family', NanumGothic, serif;
    font-weight: $font_weight;
    overflow: hidden;
    list-style: none;
    position: relative;
    background: $background_color;
    transform: rotate(180deg);
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0.2em
}

.widget-EventList, .widget-EventList * {
    box-sizing: border-box
}

.widget-EventList li {
    transform: rotate(-180deg);
    line-height: 1.3em;
    overflow: hidden;
    margin-bottom: 0.1em
}

.widget-EventList li > div:last-child {
    /*padding: 0 10px;*/
    height: 1.3em;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-align: right;
    display: inline-block;
}

.widget-EventList .message {
    text-overflow: ellipsis;
}

.widget-EventList li > div:last-child,
.widget-EventList .tag,
.widget-EventList .message {
    white-space: nowrap;
    display: inline-block;
    margin: 0 0.25em;
    float: right;
}

.widget-EventList li:first-child div:last-child,
.widget-EventList li:nth-child(2) div:last-child,
.widget-EventList li:nth-child(3) div:last-child,
.widget-EventList li > div:last-child {
    color: #222;
    background: $theme_color;
    border-radius: 0.1em;
    margin: 0.1em;
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.widget-EventList li:first-child div:last-child {
    color: $text_color;
    border-right: 0.3em solid $text_color;
    opacity: 1
}

.widget-EventList li:nth-child(2) div:last-child {
    opacity: 0.8
}

.widget-EventList li:nth-child(3) div:last-child {
    opacity: 0.6
}

.widget-EventList li:nth-child(4) > div:last-child {
    opacity: 0.4
}

.widget-EventList li > div:last-child {
    opacity: 0.2;
    animation: grow 0.5s forwards;
    -webkit-animation: grow 0.5s forwards
}

.widget-EventList li:nth-child(n+ $max_events ) {
    animation: fadeOut $animation_speed forwards;
    -webkit-animation: fadeOut $animation_speed forwards
}

@keyframes grow {
  0% {
    height: 0;
    padding-top: 0;
    padding-bottom: 0
  }
}

@-webkit-keyframes grow {
  0% {
    height: 0;
    padding-top: 0;
    padding-bottom: 0
  }
}

기존에 있는 이벤트 스킨을 깔끔하게 만들었습니다

스타일 색상을 #FFFFFF 로 하고, 글자 색상을 #ED597C 로 설정해 주시면 됩니다!

게시자: 하루

하루 입니다! Twitch 스트리머이며 사진 보정과 영상 보정 도와드리고 있어요

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: