태그: 이벤트 리스트

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 로 설정해 주시면 됩니다!