[CSS Snippet] Dialogue 플러그인의 iMessage 스타일 적용하기

Dialogue 플러그인의 iMessage 스타일 적용한 Css Snippet입니다. 

예시

 

CSS 코드

.theme-light {
--imessage-blue: rgba(10, 132, 255, .9);
--imessage-grey: rgba(234, 234, 234, 1);
}
.theme-dark {
--imessage-blue: rgba(10, 132, 255, .7);
--imessage-grey: var(--color-base-30);
}

.dialogue-plugin-message {
  background-color:unset;
}

.dialogue-plugin-message-wrapper-right {
  text-align: right;
}

.dialogue-plugin-message-title {
    font-size: var(--font-smallest);
    padding: 0px var(--size-2-2);
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight:unset;
    background-color:unset;
}

.dialogue-plugin-message-wrapper-left .dialogue-plugin-message-content {
    background: var(--imessage-grey);
    color: var(--color-base-100);
    border-radius: var(--radius-xl);
}

.dialogue-plugin-message-wrapper-right .dialogue-plugin-message-content {
    background: var(--imessage-blue);
    color: var(--text-on-accent);
    border-radius: var(--radius-xl);
}

관련 플러그인

대화형 노트를 만들 수 있는 Dialogue 플러그인

---