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 |
省略可 | -90deg | チャットのふきだしを閉じるアイコンの回転。チャットを閉じると 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 | 2 つのメッセージ間のスペース。 |
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 | ユーザー メッセージの右下の枠線の半径。一般的な半径をオーバーライドします。user-actor-image が設定されている場合にのみ有効です。スタック内の最後のメッセージにのみ適用されます。 |
df-messenger-message-stack-spacing |
省略可 | 10px | 2 つの連続するメッセージ間のスペース。 |
df-messenger-message-bot-stack-border-top-left-radius |
省略可 | 8px | 連続するエージェント メッセージの左上の枠線の半径。エージェントの左上の半径をオーバーライドします。bot-actor-image が設定されている場合にのみ有効です。スタック内の最初のメッセージにのみ適用されます。 |
df-messenger-message-bot-stack-border-top-right-radius |
省略可 | 8px | 連続するエージェント メッセージの右上の枠線の半径。エージェントの右上の半径をオーバーライドします。bot-actor-image が設定されている場合にのみ有効です。スタック内の最初のメッセージにのみ適用されます。 |
df-messenger-message-bot-stack-border-bottom-left-radius |
省略可 | 8px | 連続するエージェント メッセージの左下の枠線の半径。エージェントの左下の半径をオーバーライドします。bot-actor-image が設定されている場合にのみ有効です。スタック内の最後のメッセージにのみ適用されます。 |
df-messenger-message-bot-stack-border-bottom-right-radius |
省略可 | 8px | 連続するエージェント メッセージの右下の枠線の半径。エージェントの右下の半径をオーバーライドします。bot-actor-image が設定されている場合にのみ有効です。スタック内の最後のメッセージにのみ適用されます。 |
df-messenger-message-user-stack-border-top-left-radius |
省略可 | 8px | 連続するユーザー メッセージの左上の枠線の半径。ユーザーの左上の半径をオーバーライドします。user-actor-image が設定されている場合にのみ有効です。 |
df-messenger-message-user-stack-border-top-right-radius |
省略可 | 8px | 連続するユーザー メッセージの右上の枠線の半径。ユーザーの右上の半径をオーバーライドします。user-actor-image が設定されている場合にのみ有効です。スタック内の最初のメッセージにのみ適用されます。 |
df-messenger-message-user-stack-border-bottom-left-radius |
省略可 | 8px | 連続するユーザー メッセージの左下の枠線の半径。ユーザーの左下の半径をオーバーライドします。user-actor-image が設定されている場合にのみ有効です。スタック内の最後のメッセージにのみ適用されます。 |
df-messenger-message-user-stack-border-bottom-right-radius |
省略可 | 8px | 連続するユーザー メッセージの右下の枠線の半径。ユーザーの右下の半径をオーバーライドします。user-actor-image が設定されている場合にのみ有効です。スタック内の最後のメッセージにのみ適用されます。 |
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-message-bot-writing-border-radius |
省略可 | 8px | エージェントの書き込み中に表示されるメッセージの枠線の半径。 |
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 |
省略可 | インライン | [下に移動] ボタンのアイコン横のテキスト表示。テキストを非表示にするには 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 を使用すると、右側にアクターの画像、左側にメッセージが表示されます。このフラグは、bot-actor-image 属性が設定されている場合にのみ使用されます。 |
df-messenger-message-user-actor-order |
省略可 | row-reverse | アクター画像とメッセージの順序。row-reverse を使用すると、アクターの画像が右側に、メッセージが左側に表示されます。row を使用すると、アクターの画像が左側に、メッセージが右側に表示されます。このフラグは、user-actor-image 属性が設定されている場合にのみ使用されます。 |
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 を使用するとアクターの画像が下部に表示されます。このフラグは、bot-actor-image 属性または user-actor-image 属性が設定されている場合にのみ使用されます。 |
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 |
省略可 | Stable | ユーザー入力のスクロールバーの溝。 |
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 | 左側の豊富なフィードバックのオフセット。 |