CSS 변수를 설정하여 채팅 대화상자의 스타일을 맞춤설정할 수 있습니다.
일반 스타일 지정
다음 CSS 변수는 일반 스타일 지정 옵션을 제공합니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 위젯 전체에서 사용할 글꼴 모음 |
df-messenger-font-size |
선택사항 | 14px | 위젯 전체에서 사용할 텍스트 크기 |
df-messenger-font-color |
선택사항 | #1f1f1f | 위젯 전체에서 사용할 텍스트 색상 |
df-messenger-primary-color |
선택사항 | #0b57d0 | 위젯 전체에서 요소의 기본 색상(예: 제목 표시줄 배경, 작업 버튼 배경 등) |
df-messenger-focus-color |
선택사항 | #1e88e5 | 요소 주위의 포커스 링 색상 |
df-messenger-focus-color-contrast |
선택사항 | 흰색 | 제목 표시줄과 같이 배경 색상이 있는 상위 요소 내에 포함된 경우 요소 주위의 포커스 링 색상 |
df-messenger-chat-border |
선택사항 | 없음 | 대화상자 테두리 |
df-messenger-chat-border-radius |
선택사항 | 0 | 대화상자의 테두리 반경 |
df-messenger-chat-bubble 스타일 지정
df-messenger-chat-bubble 요소를 사용하면 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-chat-window-height |
선택사항 | 480px | 채팅 창 높이 |
df-messenger-chat-window-width |
선택사항 | 320px | 채팅 창 너비 |
df-messenger-chat-window-offset |
선택사항 | 16px | 채팅 풍선과 채팅 창 사이의 거리 |
df-messenger-chat-window-box-shadow |
선택사항 | 없음 | 채팅 창의 상자 그림자 |
df-messenger-chat-collapse-icon-size |
선택사항 | 설정되지 않음 | 제목 표시줄의 접기 버튼 아이콘 크기 |
df-messenger-chat-bubble-icon-size |
선택사항 | 36px | 채팅 풍선의 아이콘 크기 |
df-messenger-chat-bubble-close-icon-size |
선택사항 | 24px | 채팅 풍선의 닫기 아이콘 크기 |
df-messenger-chat-bubble-close-icon-transform-rotate |
선택사항 | -90도 | 채팅 풍선의 닫기 아이콘 회전, 채팅이 종료되면 0도로 회전 |
df-messenger-chat-bubble-icon-color |
선택사항 | 흰색 | 채팅 풍선의 아이콘 및 닫기 아이콘의 색상 |
df-messenger-chat-bubble-size |
선택사항 | 64px | 채팅 풍선 크기 |
df-messenger-chat-bubble-background |
선택사항 | #0b57d0 | 채팅 풍선의 배경 |
df-messenger-chat-bubble-border-radius |
선택사항 | 32px | 채팅 풍선의 테두리 반경 |
df-messenger-chat-bubble-border |
선택사항 | 없음 | 채팅 풍선의 테두리 |
df-messenger-chat-border-minimized |
선택사항 | 없음 | 최소화된 형태의 채팅의 테두리 |
df-messenger-chat-border-radius-minimized |
선택사항 | 0 | 최소화된 형태의 채팅의 테두리 반경 |
제목 표시줄 스타일 지정
제목 표시줄에는 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-titlebar-background |
선택사항 | #0b57d0 | 제목 표시줄의 배경 |
df-messenger-titlebar-padding |
선택사항 | 0 15px | 제목 표시줄 패딩 |
df-messenger-titlebar-border |
선택사항 | 없음 | 제목 표시줄 테두리 |
df-messenger-titlebar-border-bottom |
선택사항 | 없음 | 제목 표시줄 하단 테두리 |
df-messenger-titlebar-title-align |
선택사항 | start | 제목 표시줄에서 제목 텍스트의 텍스트 정렬, 허용되는 값은 start, center, end임 |
df-messenger-titlebar-font-color |
선택사항 | 흰색 | 제목 표시줄에 있는 텍스트의 텍스트 색상 |
df-messenger-titlebar-letter-spacing |
선택사항 | normal | 제목 표시줄에 있는 텍스트의 문자 간격 |
df-messenger-titlebar-title-font-size |
선택사항 | 18px | 제목 표시줄에 있는 제목 텍스트의 텍스트 크기 |
df-messenger-titlebar-title-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 제목 표시줄에 있는 제목 텍스트의 글꼴 모음 |
df-messenger-titlebar-title-font-weight |
선택사항 | 400 | 제목 표시줄에 있는 제목 텍스트의 글꼴 두께 |
df-messenger-titlebar-title-line-height |
선택사항 | normal | 제목 표시줄에 있는 제목 텍스트의 줄 높이 |
df-messenger-titlebar-title-letter-spacing |
선택사항 | normal | 제목 표시줄에 있는 제목 텍스트의 문자 간격 |
df-messenger-titlebar-subtitle-font-color |
선택사항 | 흰색 | 제목 표시줄에 있는 자막 텍스트의 텍스트 색상 |
df-messenger-titlebar-subtitle-font-size |
선택사항 | 18px | 제목 표시줄에 있는 자막 텍스트의 텍스트 크기 |
df-messenger-titlebar-subtitle-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 제목 표시줄에 있는 자막 텍스트의 글꼴 모음 |
df-messenger-titlebar-subtitle-font-weight |
선택사항 | 400 | 제목 표시줄에 있는 자막 텍스트의 글꼴 두께 |
df-messenger-titlebar-subtitle-line-height |
선택사항 | normal | 제목 표시줄에 있는 자막 텍스트의 줄 높이 |
df-messenger-titlebar-subtitle-letter-spacing |
선택사항 | normal | 제목 표시줄에 있는 자막 텍스트의 문자 간격 |
df-messenger-titlebar-title-order |
선택사항 | 행 | 제목 표시줄의 순서 요소, 허용되는 값은 row 또는 row-reverse임. 이 값은 chat-title-icon 속성이 지정된 경우에만 적용됩니다. |
df-messenger-titlebar-icon-width |
선택사항 | 18px | 제목 표시줄에 있는 아이콘의 너비입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다. |
df-messenger-titlebar-icon-height |
선택사항 | 18px | 제목 표시줄에 있는 아이콘의 높이입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다. |
df-messenger-titlebar-icon-padding |
선택사항 | 0 12px 0 0 | 제목 표시줄에 있는 아이콘 주위의 패딩입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다. |
채팅 창 스타일 지정
채팅 창에는 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-chat-background |
선택사항 | #fafafa | 메시지가 표시되는 에이전트 대화상자의 배경 |
df-messenger-chat-padding |
선택사항 | 10px | 메시지가 표시되는 에이전트 대화상자의 패딩 |
df-messenger-messagelist-border |
선택사항 | 없음 | 메시지 목록의 테두리 |
df-messenger-message-border |
선택사항 | 없음 | 에이전트 대화상자 메시지의 테두리 |
df-messenger-message-font-size |
선택사항 | 14px | 에이전트 대화상자 메시지의 텍스트 크기 |
df-messenger-message-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 에이전트 대화상자 메시지의 글꼴 모음 |
df-messenger-message-font-weight |
선택사항 | normal | 에이전트 대화상자 메시지의 글꼴 두께 |
df-messenger-message-bot-background |
선택사항 | #ecf3fe | 에이전트가 보낸 메시지의 배경 |
df-messenger-message-bot-border |
선택사항 | 없음 | 에이전트가 보낸 메시지의 테두리 |
df-messenger-message-bot-font-color |
선택사항 | #1f1f1f | 에이전트가 보낸 메시지의 텍스트 색상 |
df-messenger-message-bot-font-weight |
선택사항 | normal | 에이전트가 전송한 메시지의 글꼴 두께 |
df-messenger-message-user-background |
선택사항 | #e1e3e1 | 사용자가 보낸 메시지의 배경 |
df-messenger-message-user-border |
선택사항 | 없음 | 사용자가 보낸 메시지의 테두리 |
df-messenger-message-user-font-color |
선택사항 | #1f1f1f | 사용자가 보낸 메시지의 텍스트 색상 |
df-messenger-message-user-font-weight |
선택사항 | normal | 사용자가 보낸 메시지의 글꼴 두께 |
df-messenger-message-spacing |
선택사항 | 10px | 두 메시지 사이의 공간 |
df-messenger-message-border-radius |
선택사항 | 8px | 메시지의 테두리 반경입니다. 모든 모서리에 적용됩니다. |
df-messenger-message-bot-border-top-left-radius |
선택사항 | 8px | 에이전트 메시지 왼쪽 상단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-bot-border-top-right-radius |
선택사항 | 8px | 에이전트 메시지의 오른쪽 상단 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-bot-border-bottom-left-radius |
선택사항 | 8px | 에이전트 메시지 왼쪽 하단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-bot-border-bottom-right-radius |
선택사항 | 8px | 에이전트 메시지 오른쪽 하단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-user-border-top-left-radius |
선택사항 | 8px | 사용자 메시지 왼쪽 상단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-user-border-top-right-radius |
선택사항 | 8px | 사용자 메시지의 오른쪽 상단 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-user-border-bottom-left-radius |
선택사항 | 8px | 사용자 메시지 왼쪽 하단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-user-border-bottom-right-radius |
선택사항 | 8px | 사용자 메시지 오른쪽 하단의 테두리 반경, 일반 반경보다 우선함 |
df-messenger-message-stack-spacing |
선택사항 | 10px | 연속된 두 메시지 사이의 공간 |
df-messenger-message-bot-stack-border-top-left-radius |
선택사항 | 8px | 연속된 에이전트 메시지 왼쪽 상단의 테투리 반경, 에이전트 왼쪽 상단 반경보다 우선함 |
df-messenger-message-bot-stack-border-top-right-radius |
선택사항 | 8px | 연속된 에이전트 메시지 오른쪽 상단의 테두리 반경, 에이전트 오른쪽 상단 반경보다 우선함 |
df-messenger-message-bot-stack-border-bottom-left-radius |
선택사항 | 8px | 연속된 에이전트 메시지 왼쪽 하단의 테두리 반경, 에이전트 왼쪽 하단 반경보다 우선함 |
df-messenger-message-bot-stack-border-bottom-right-radius |
선택사항 | 8px | 연속된 에이전트 메시지 오른쪽 하단의 테두리 반경, 에이전트 오른쪽 하단보다 우선함 |
df-messenger-message-user-stack-border-top-left-radius |
선택사항 | 8px | 연속된 사용자 메시지 왼쪽 상단의 테두리 반경, 사용자 왼쪽 상단 반경보다 우선함 |
df-messenger-message-user-stack-border-top-right-radius |
선택사항 | 8px | 연속된 사용자 메시지 오른쪽 상단의 테두리 반경, 사용자 오른쪽 상단 반경보다 우선함 |
df-messenger-message-user-stack-border-bottom-left-radius |
선택사항 | 8px | 연속된 사용자 메시지 왼쪽 하단의 테두리 반경, 사용자 왼쪽 하단 반경보다 우선함 |
df-messenger-message-user-stack-border-bottom-right-radius |
선택사항 | 8px | 연속된 사용자 메시지 오른쪽 하단의 테두리 반경, 사용자 오른쪽 하단 반경보다 우선함 |
df-messenger-message-user-writing-image-width |
선택사항 | 24px | 에이전트가 쓰는 동안 표시되는 이미지의 너비, bot-writing-image가 설정된 경우에만 활성화됨 |
df-messenger-message-bot-writing-image-height |
선택사항 | 24px | 에이전트가 쓰는 동안 표시되는 이미지의 높이, bot-writing-image가 설정된 경우에만 활성화됨 |
df-messenger-message-bot-writing-font-color |
선택사항 | #1f1f1f | 에이전트가 쓰는 동안 표시되는 텍스트의 색상 |
df-messenger-message-bot-writing-font-weight |
선택사항 | normal | 에이전트가 쓰는 동안 표시되는 텍스트의 글꼴 두께 |
df-messenger-message-bot-writing-font-size |
선택사항 | 14px | 에이전트가 쓰는 동안 표시되는 텍스트의 크기 |
df-messenger-message-bot-writing-border |
선택사항 | 없음 | 에이전트가 쓰는 동안 표시되는 메시지의 테두리 |
df-messenger-message-bot-writing-background |
선택사항 | #ecf3fe | 에이전트가 쓰는 동안 표시되는 메시지의 배경 |
df-messenger-message-bot-writing-padding |
선택사항 | 12px | 에이전트가 쓰는 동안 표시되는 메시지의 패딩 |
df-messenger-message-bot-writing-spacing |
선택사항 | 10px | 에이전트가 쓰는 동안 표시되는 메시지와 이전 메시지 사이의 공백 |
df-messenger-chat-scroll-button-enabled-display |
선택사항 | 없음 | '아래로 이동' 버튼 표시를 정의하며, 버튼을 사용 설정하려면 flex로 설정함 |
df-messenger-chat-scroll-button-align |
선택사항 | 가운데 | '아래로 이동' 버튼의 정렬, 허용되는 값은 flex-start, center, flex-end임 |
df-messenger-chat-scroll-button-container-padding |
선택사항 | 8px | '아래로 이동' 버튼 주위의 컨테이너 패딩 |
df-messenger-chat-scroll-button-text-display |
선택사항 | inline | '아래로 이동' 버튼에서 아이콘 옆의 텍스트 표시, 텍스트를 숨기려면 none을 사용함 |
df-messenger-chat-scroll-button-font-size |
선택사항 | 14px | '아래로 이동' 버튼의 텍스트 크기 |
df-messenger-chat-scroll-button-font-color |
선택사항 | 흰색 | '아래로 이동' 버튼의 텍스트 색상 |
df-messenger-chat-scroll-button-background |
선택사항 | #0b57d0 | '아래로 이동' 버튼의 배경 |
df-messenger-chat-scroll-button-border-radius |
선택사항 | 999px | '아래로 이동' 버튼의 테두리 반경 |
df-messenger-chat-messagelist-scroll-shadow-background |
선택사항 | 방사형-그래디언트(가장 먼 쪽에서 50%, 100%, rgba(0,0,0,.2), 투명) 하단 |
목록이 맨 아래로 스크롤되지 않으면 메시지 목록 하단에 표시되는 섀도, 사용 중지하려면 none으로 설정함 |
작업 수행자 이미지 스타일 지정
작업 수행자 이미지는 봇이나 작업 수행자의 메시지와 함께 표시되는 이미지입니다. 이러한 작업 수행자 이미지의 경우 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-message-actor-spacing |
선택사항 | 16px | 작업 수행자 이미지와 메시지 사이의 거리 |
df-messenger-message-bot-actor-order |
선택사항 | 행 | 작업 수행자 이미지 및 메시지의 순서. 작업 수행자 이미지를 왼쪽에, 메시지를 오른쪽에 표시하려면 row를 사용하고 작업 수행자 이미지를 오른쪽에, 메시지를 왼쪽에 표시하려면 row-reverse를 사용합니다. |
df-messenger-message-user-actor-order |
선택사항 | row-reverse | 작업 수행자 이미지 및 메시지의 순서. 작업 수행자 이미지를 오른쪽에, 메시지를 왼쪽에 표시하려면 row-reverse를 사용하고 작업 수행자 이미지를 왼쪽에, 메시지를 오른쪽에 표시하려면 row를 사용합니다. |
df-messenger-message-actor-direction |
선택사항 | 열 | df-messenger-message-bot-actor-order 및 df-messenger-message-user-actor-order의 반대여야 하며, row 기반일 때는 column을 사용하고, column 기반일 때는 row를 사용합니다. |
df-messenger-message-actor-align |
선택사항 | flex-start | 메시지와 관련된 작업 수행자의 정렬. 작업 수행자 이미지를 상단에 표시하려면 flex-start를 사용하고 작업 수행자 이미지를 중앙에 표시하려면 center를 사용하고 작업 수행자 이미지를 하단에 표시하려면 flex-end를 사용합니다. |
df-messenger-message-actor-border-radius |
선택사항 | 999px | 작업 수행자 이미지의 테두리 반경 |
df-messenger-message-actor-padding |
선택사항 | 8px | 작업 수행자 이미지의 패딩 |
df-messenger-message-actor-image-size |
선택사항 | 24px | 작업 수행자 이미지의 크기 |
df-messenger-message-bot-actor-background |
선택사항 | 흰색 | 에이전트의 작업 수행자 이미지의 배경 |
df-messenger-message-bot-actor-border |
선택사항 | 없음 | 에이전트의 작업 수행자 이미지의 테두리 |
df-messenger-message-bot-actor-offset |
선택사항 | 0 | 에이전트의 작업 수행자 이미지를 이동할 오프셋 |
df-messenger-message-user-actor-background |
선택사항 | 흰색 | 사용자의 작업 수행자 이미지의 배경 |
df-messenger-message-user-actor-border |
선택사항 | 없음 | 사용자의 작업 수행자 이미지의 테두리 |
df-messenger-message-user-actor-offset |
선택사항 | 0 | 사용자의 작업 수행자 이미지를 이동할 오프셋 |
사용자 입력 스타일 지정
사용자 입력에는 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-send-icon-color |
선택사항 | #0b57d0 | 사용자 입력의 '전송' 아이콘의 색상 |
df-messenger-send-icon-color-hover |
선택사항 | #0b57d0 | 마우스 오버 시 사용자 입력에 있는 '전송' 아이콘의 색상 |
df-messenger-send-icon-color-active |
선택사항 | #0b57d0 | 텍스트 전송이 가능한 경우 사용자 입력에 있는 '전송' 아이콘의 색상 |
df-messenger-send-icon-offset-x |
선택사항 | 0 | 사용자 입력에 있는 '전송' 아이콘의 세로 오프셋 |
df-messenger-send-icon-offset-y |
선택사항 | -4px | 사용자 입력에 있는 '전송' 아이콘의 가로 오프셋 |
df-messenger-input-background |
선택사항 | 흰색 | 사용자 입력의 배경 |
df-messenger-input-padding |
선택사항 | 8px | 사용자 입력란(메시지 전송 버튼 포함)과 컨테이너 사이의 전체 패딩 |
df-messenger-input-inner-padding |
선택사항 | 0px 48px 0px 0 | 사용자 입력란(메시지 전송 버튼 제외)과 컨테이너 사이의 내부 패딩 |
df-messenger-input-border |
선택사항 | 없음 | 사용자 입력의 테두리 |
df-messenger-input-border-top |
선택사항 | 1px solid #e0e0e0 | 사용자 입력의 상단 테두리 |
df-messenger-input-border-bottom |
선택사항 | 없음 | 사용자 입력의 텍스트 필드의 테두리 하단 |
df-messenger-input-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 사용자 입력의 글꼴 모음 |
df-messenger-input-font-color |
선택사항 | #1f1f1f | 사용자 입력의 텍스트 색상 |
df-messenger-input-font-size |
선택사항 | 14px | 사용자 입력의 텍스트 크기 |
df-messenger-input-font-weight |
선택사항 | normal | 사용자 입력의 글꼴 두께 |
df-messenger-input-box-border |
선택사항 | 없음 | 사용자 입력 상자의 테두리 |
df-messenger-input-box-focus-border |
선택사항 | 없음 | 포커스가 있는 동안 사용자 입력 상자의 테두리 |
df-messenger-input-box-border-radius |
선택사항 | 0 | 사용자 입력 상자의 테두리 반경 |
df-messenger-input-box-padding |
선택사항 | 12px 0 | 사용자 입력 상자의 패딩 |
df-messenger-input-box-focus-padding |
선택사항 | 12px 0 | 포커스가 있는 동안 사용자 입력 상자의 패딩 |
df-messenger-input-gutter |
선택사항 | 안정됨 | 사용자 입력의 스크롤바 여백 |
df-messenger-input-info-font-size |
선택사항 | 14px | 사용자 입력에 포함된 정보 메시지의 텍스트 크기 |
df-messenger-input-info-font-weight |
선택사항 | normal | 사용자 입력에 포함된 정보 메시지의 글꼴 두께 |
df-messenger-input-info-padding |
선택사항 | 14px 16px | 사용자 입력에 있는 정보 메시지의 패딩 |
df-messenger-input-info-line-height |
선택사항 | 20px | 사용자 입력에 있는 정보 메시지의 줄 높이 |
df-messenger-input-long-text-warning-display |
선택사항 | 없음 | block으로 설정하면 입력이 256자를 초과할 때 경고 메시지가 표시됩니다. max-query-length 속성이 더 높은 경우에만(예: 사용 중지) 활성화됩니다. 추가 문서. |
df-messenger-input-warning-background |
선택사항 | #fef7e0 | 사용자 입력에 있는 경고 메시지의 배경 |
df-messenger-input-warning-color |
선택사항 | #410e0b | 사용자 입력에 있는 경고 메시지의 텍스트 색상 |
df-messenger-input-warning-icon-color |
선택사항 | #e37400 | 사용자 입력의 경고 메시지에 있는 아이콘의 색상 |
df-messenger-input-error-background |
선택사항 | #f9dedc | 사용자 입력에 있는 오류 메시지의 배경 |
df-messenger-input-error-color |
선택사항 | #410e0b | 사용자 입력에 있는 오류 메시지의 텍스트 색상 |
df-messenger-input-error-icon-color |
선택사항 | #b3261e | 사용자 입력의 경고 메시지에 있는 아이콘의 색상 |
인증 오버레이 스타일 지정
인증된 설정을 사용하는 경우 오버레이에 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-auth-background |
선택사항 | rgba(204, 204, 204, .8) | 인증이 표시될 때 에이전트 대화상자의 배경 |
df-messenger-auth-button-background |
선택사항 | #0b57d0 | 인증 버튼의 배경 |
df-messenger-auth-button-font-family |
선택사항 | 'Google Sans', 'Helvetica Neue', sans-serif | 인증 버튼의 글꼴 모음 |
df-messenger-auth-button-font-color |
선택사항 | 흰색 | 인증 버튼의 텍스트 색상 |
df-messenger-auth-button-font-size |
선택사항 | 14px | 인증 버튼의 텍스트 크기 |
df-messenger-auth-button-border |
선택사항 | 없음 | 인증 버튼의 테두리 |
df-messenger-auth-button-border-radius |
선택사항 | 8px | 인증 버튼의 테두리 반경 |
피드백 스타일 지정
응답 피드백 기능을 사용 설정하면 피드백 제어를 위해 다음 CSS 변수가 제공될 수 있습니다.
| 속성 | 입력 정책 | 기본값 | 설명 |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
선택사항 | 8px | 좋아요 버튼과 싫어요 버튼 사이의 거리 |
df-messenger-message-feedback-icon-font-color |
선택사항 | #444746 | 좋아요 버튼과 싫어요 버튼의 색상 |
df-messenger-message-feedback-icon-font-color-active |
선택사항 | #444746 | 활성 상태일 때 좋아요 및 싫어요 버튼 색상 |
df-messenger-message-feedback-icon-border |
선택사항 | 없음 | 좋아요 버튼과 싫어요 버튼의 테두리 |
df-messenger-message-feedback-icon-border-radius |
선택사항 | 0 | 좋아요 버튼과 싫어요 버튼의 테두리 반경 |
df-messenger-message-feedback-icon-background |
선택사항 | 없음 | 좋아요 버튼과 싫어요 버튼의 배경 |
df-messenger-message-feedback-icon-background-hover |
선택사항 | 없음 | 마우스를 올렸을 때 좋아요 버튼과 싫어요 버튼의 배경 |
df-messenger-message-feedback-icon-padding |
선택사항 | 0 | 좋아요 버튼과 싫어요 버튼의 패딩 |
df-messenger-message-rich-feedback-spacing |
선택사항 | 10px | 서식 있는 피드백에 있는 요소의 간격 |
df-messenger-message-rich-feedback-padding |
선택사항 | 0 | 서식 있는 피드백의 패딩 |
df-messenger-message-rich-feedback-background |
선택사항 | 없음 | 서식 있는 피드백의 배경 |
df-messenger-message-rich-feedback-border-radius |
선택사항 | 0 | 서식 있는 피드백의 테두리 반경 |
df-messenger-message-rich-feedback-border |
선택사항 | 없음 | 서식 있는 피드백의 테두리 |
df-messenger-rich-feedback-offset-left |
선택사항 | 0 | 왼쪽의 오프셋 |