התאמות אישיות של CSS ב-Dialogflow CX Messenger

אתם יכולים להתאים אישית את הסגנון של תיבת הדו-שיח של הצ'אט באמצעות הגדרת משתני CSS.

סגנון כללי

משתני ה-CSS הבאים מספקים אפשרויות עיצוב כלליות:

מאפיינים מדיניות הקלט ערך ברירת המחדל תיאור
df-messenger-font-family אופציונלי "Google Sans", "Helvetica Neue", sans-serif משפחת הגופנים שבה ייעשה שימוש בווידג'ט.
df-messenger-font-size אופציונלי 14 פיקסלים גודל הטקסט שיוצג בווידג'ט.
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 אופציונלי ‫480 פיקסלים הגובה של חלון הצ'אט.
df-messenger-chat-window-width אופציונלי ‎320 px רוחב חלון הצ'אט.
df-messenger-chat-window-offset אופציונלי 16 פיקסלים המרחק בין בועת הצ'אט לחלון הצ'אט.
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 אופציונלי 24 פיקסלים גודל סמל הסגירה של בועת הצ'אט.
df-messenger-chat-bubble-close-icon-transform-rotate אופציונלי -90deg סיבוב של סמל הסגירה של בועת הצ'אט, מסתובב ל-0 מעלות כשסוגרים את הצ'אט.
df-messenger-chat-bubble-icon-color אופציונלי לבן הצבע של הסמל ושל סמל הסגירה של בועת הצ'אט.
df-messenger-chat-bubble-size אופציונלי 64 פיקסלים גודל בועת הצ'אט.
df-messenger-chat-bubble-background אופציונלי #0b57d0 הרקע של בועת הצ'אט.
df-messenger-chat-bubble-border-radius אופציונלי 32 פיקסלים רדיוס הגבולות של בועת הצ'אט.
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,‏ center או end.
df-messenger-titlebar-font-color אופציונלי לבן צבע הטקסט בשורת הכותרת.
df-messenger-titlebar-letter-spacing אופציונלי רגיל הריווח בין האותיות בטקסט שבשורת הכותרת.
df-messenger-titlebar-title-font-size אופציונלי 18 פיקסלים גודל הטקסט של הכותרת בסרגל הכותרת.
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 אופציונלי רגיל גובה השורה של הטקסט בשורת הכותרת.
df-messenger-titlebar-title-letter-spacing אופציונלי רגיל הריווח בין האותיות בטקסט של הכותרת בסרגל הכותרת.
df-messenger-titlebar-subtitle-font-color אופציונלי לבן צבע הטקסט של כותרת המשנה בסרגל הכותרת.
df-messenger-titlebar-subtitle-font-size אופציונלי 18 פיקסלים גודל הטקסט של כותרת המשנה בסרגל הכותרת.
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 אופציונלי רגיל גובה השורה של הטקסט בכותרת המשנה בסרגל הכותרת.
df-messenger-titlebar-subtitle-letter-spacing אופציונלי רגיל הריווח בין האותיות בטקסט של כותרת המשנה בסרגל הכותרת.
df-messenger-titlebar-title-order אופציונלי שורה סדר הרכיבים בסרגל הכותרת. הערכים המותרים הם row או row-reverse. הערך הזה רלוונטי רק אם ציינתם את המאפיין chat-title-icon.
df-messenger-titlebar-icon-width אופציונלי 18 פיקסלים רוחב הסמל בסרגל הכותרת. הערך הזה חל רק אם צוין chat-title-icon.
df-messenger-titlebar-icon-height אופציונלי 18 פיקסלים גובה הסמל בסרגל הכותרת. הערך הזה חל רק אם צוין 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 אופציונלי 10 פיקסלים המרווח הפנימי של תיבת הדו-שיח של הנציג שבה מוצגות ההודעות.
df-messenger-messagelist-border אופציונלי ללא הגבול של רשימת ההודעות.
df-messenger-message-border אופציונלי ללא הגבול של ההודעות בתיבת הדו-שיח של הסוכן.
df-messenger-message-font-size אופציונלי 14 פיקסלים גודל הטקסט של ההודעות בתיבת הדו-שיח של הנציג.
df-messenger-message-font-family אופציונלי "Google Sans", "Helvetica Neue", sans-serif משפחת הגופנים של ההודעות בתיבת הדו-שיח של הסוכן.
df-messenger-message-font-weight אופציונלי רגיל עובי הגופן של ההודעות בתיבת הדו-שיח של הנציג.
df-messenger-message-bot-background אופציונלי #ecf3fe רקע של ההודעות שנשלחות על ידי הנציג.
df-messenger-message-bot-border אופציונלי ללא הגבול של ההודעות שנשלחות על ידי הנציג.
df-messenger-message-bot-font-color אופציונלי #1f1f1f צבע הטקסט של ההודעות שנשלחות על ידי הנציג.
df-messenger-message-bot-font-weight אופציונלי רגיל משקל הגופן של ההודעות שנשלחות על ידי הנציג.
df-messenger-message-user-background אופציונלי #e1e3e1 רקע ההודעות שהמשתמש שלח.
df-messenger-message-user-border אופציונלי ללא הגבול של ההודעות שהמשתמש שולח.
df-messenger-message-user-font-color אופציונלי #1f1f1f צבע הטקסט של ההודעות שהמשתמש שולח.
df-messenger-message-user-font-weight אופציונלי רגיל עובי הגופן של ההודעות שהמשתמש שולח.
df-messenger-message-spacing אופציונלי 10 פיקסלים רווח בין שתי הודעות.
df-messenger-message-border-radius אופציונלי 8 פיקסלים רדיוס הגבול של ההודעות, חל על כל הפינות.
df-messenger-message-bot-border-top-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית העליונה של הודעות הנציג, מבטל את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-bot-border-top-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית העליונה של הודעות הנציג, שמחליף את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-bot-border-bottom-left-radius אופציונלי 8 פיקסלים רדיוס הגבולות בפינה השמאלית התחתונה של הודעות הנציג, שמחליף את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-bot-border-bottom-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית התחתונה של הודעות הנציג, שמחליף את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-user-border-top-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית העליונה של הודעות המשתמש, שמחליף את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-user-border-top-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית העליונה של הודעות המשתמש, מבטל את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-user-border-bottom-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית התחתונה של הודעות המשתמש, שמחליף את הרדיוס הכללי. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-user-border-bottom-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית התחתונה של הודעות המשתמש, שמחליף את הרדיוס הכללי. ההגדרה פעילה רק אם המדיניות user-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-stack-spacing אופציונלי 10 פיקסלים המרווח בין שתי הודעות עוקבות.
df-messenger-message-bot-stack-border-top-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית העליונה של הודעות עוקבות של הנציג, מבטל את הרדיוס בפינה השמאלית העליונה של הנציג. ההגדרה פעילה רק אם המדיניות bot-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-bot-stack-border-top-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית העליונה של הודעות עוקבות של הנציג, מבטל את הרדיוס בפינה הימנית העליונה של הנציג. ההגדרה פעילה רק אם המדיניות bot-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-bot-stack-border-bottom-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית התחתונה של הודעות עוקבות של הנציג, שמחליף את הרדיוס בפינה השמאלית התחתונה של הנציג. ההגדרה פעילה רק אם המדיניות bot-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-bot-stack-border-bottom-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית התחתונה של הודעות עוקבות של הנציג, מבטל את הרדיוס בפינה הימנית התחתונה של הנציג. ההגדרה פעילה רק אם המדיניות bot-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-user-stack-border-top-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית העליונה של הודעות משתמש עוקבות, מבטל את רדיוס הפינה השמאלית העליונה של המשתמש. ההגדרה פעילה רק אם המדיניות user-actor-image מוגדרת.
df-messenger-message-user-stack-border-top-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית העליונה של הודעות משתמש עוקבות, מבטל את רדיוס הפינה הימנית העליונה של המשתמש. ההגדרה פעילה רק אם המדיניות user-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה הראשונה בשרשור.
df-messenger-message-user-stack-border-bottom-left-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה השמאלית התחתונה להודעות משתמש עוקבות, מבטל את רדיוס הפינה השמאלית התחתונה של המשתמש. ההגדרה פעילה רק אם המדיניות user-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-user-stack-border-bottom-right-radius אופציונלי 8 פיקסלים רדיוס הגבול בפינה הימנית התחתונה של הודעות עוקבות של המשתמש, שמחליף את רדיוס הפינה הימנית התחתונה של המשתמש. ההגדרה פעילה רק אם המדיניות user-actor-image מוגדרת. ההגדרה הזו חלה רק על ההודעה האחרונה באשכול.
df-messenger-message-user-writing-image-width אופציונלי 24 פיקסלים רוחב התמונה שמוצגת בזמן שהנציג כותב, פעיל רק אם bot-writing-image מוגדר.
df-messenger-message-bot-writing-image-height אופציונלי 24 פיקסלים גובה התמונה שמוצגת בזמן שהנציג כותב, פעיל רק אם bot-writing-image מוגדר.
df-messenger-message-bot-writing-font-color אופציונלי #1f1f1f צבע הטקסט שמוצג בזמן שהנציג כותב.
df-messenger-message-bot-writing-font-weight אופציונלי רגיל עובי הגופן של הטקסט שמוצג בזמן שהנציג כותב.
df-messenger-message-bot-writing-font-size אופציונלי 14 פיקסלים גודל הטקסט שמוצג בזמן שהנציג כותב.
df-messenger-message-bot-writing-border אופציונלי ללא הגבול של ההודעה שמוצגת בזמן שהנציג כותב.
df-messenger-message-bot-writing-background אופציונלי #ecf3fe הרקע של ההודעה שמוצגת בזמן שהנציג כותב.
df-messenger-message-bot-writing-padding אופציונלי 12 פיקסלים הריפוד של ההודעה שמוצגת בזמן שהנציג כותב.
df-messenger-message-bot-writing-spacing אופציונלי 10 פיקסלים המרווח בין ההודעה שמוצגת בזמן שהנציג כותב לבין ההודעה הקודמת.
df-messenger-message-bot-writing-border-radius אופציונלי 8 פיקסלים רדיוס הגבול של ההודעה שמוצגת בזמן שהנציג כותב.
df-messenger-chat-scroll-button-align אופציונלי מרכז יישור הלחצן "מעבר לתחתית". הערכים המותרים כוללים את flex-start,‏ center ו-flex-end.
df-messenger-chat-scroll-button-container-padding אופציונלי 8 פיקסלים המרווח הפנימי של המאגר מסביב לכפתור "מעבר לתחתית".
df-messenger-chat-scroll-button-text-display אופציונלי בתוך השורה הצגת הטקסט לצד הסמל בכפתור "דילוג לתחתית". אפשר להשתמש ב-none כדי להסתיר את הטקסט.
df-messenger-chat-scroll-button-font-size אופציונלי 14 פיקסלים גודל הטקסט של הכפתור "דילוג לתחתית".
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 אופציונלי radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom הצל שמוצג בתחתית רשימת ההודעות כשהרשימה לא נגללת עד הסוף, מוגדר כ-none כדי להשבית.

עיצוב תמונות של שחקנים

תמונות של דמויות מופיעות לצד הודעות מהבוט או מהמשתמש. אתם יכולים להוסיף את משתני ה-CSS הבאים כדי להתאים אישית את המראה של תמונות השחקנים:

מאפיינים מדיניות הקלט ערך ברירת המחדל תיאור
df-messenger-message-actor-spacing אופציונלי 16 פיקסלים המרחק בין תמונת השחקן לבין ההודעות.
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. צריך להשתמש ב-column כשהם מבוססים על row, או ב-row כשהם מבוססים על column.
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 אופציונלי 8 פיקסלים הריפוד של תמונת השחקן.
df-messenger-message-actor-image-size אופציונלי 24 פיקסלים גודל התמונה של השחקן.
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 אופציונלי 8 פיקסלים המרווח הכולל בין השדה להזנת קלט (כולל הלחצן לשליחת הודעה) לבין הקונטיינר.
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 אופציונלי 14 פיקסלים גודל הטקסט של קלט המשתמש.
df-messenger-input-font-weight אופציונלי רגיל משקל הגופן של הקלט מהמשתמש.
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 אופציונלי 14 פיקסלים גודל הטקסט של הודעות המידע בקלט של המשתמש.
df-messenger-input-info-font-weight אופציונלי רגיל עובי הגופן של הודעות המידע בקלט של המשתמש.
df-messenger-input-info-padding אופציונלי 14px 16px ריפוד של הודעות מידע בקלט של המשתמש.
df-messenger-input-info-line-height אופציונלי 20 פיקסלים גובה השורה של הודעות המידע בקלט של המשתמש.
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 אופציונלי 14 פיקסלים גודל הטקסט של לחצן האימות.
df-messenger-auth-button-border אופציונלי ללא הגבול של כפתור האימות.
df-messenger-auth-button-border-radius אופציונלי 8 פיקסלים רדיוס הגבול של כפתור האימות.

עיצוב המשוב

כשהתכונה משוב על תשובות מופעלת, אתם יכולים להגדיר את משתני ה-CSS הבאים לפקדי המשוב.

מאפיינים מדיניות הקלט ערך ברירת המחדל תיאור
df-messenger-message-feedback-icon-distance אופציונלי 8 פיקסלים המרחק בין הכפתורים "אהבתי" ו"לא אהבתי".
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 אופציונלי 10 פיקסלים המרווח בין הרכיבים במשוב המפורט.
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 היסט של המשוב המפורט בצד שמאל.