FastComments.com
Menu Icon

שפה 🇮🇱 עברית
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇳 हिन्दी 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

התחלה

איך להתאים סגנונות

עיצוב וידג'ט

התאמת גבול תיבת ההערה
הפניות CSS מותאמות לוידג'ט ההערות (גרסה 2, העדכנית ביותר)
עיצוב וידג'ט ההערות האחרונות
עיצוב וידג'ט הדפים המדוברים ביותר
עיצוב וידג'ט הדיונים האחרונים

ספריות קצה קדמי אחרות

ספריות קצה קדמי אחרות

מדריך לעיצוב מותאם אישית

המדריך הזה מספק את ה-CSS המלא של ברירת המחדל המשמש את הווידג'ט התגובות של FastComments (v2) וכן כמה הוראות לעקיפת הסגנונות.

הבנת ה-CSS ברירת המחדל מאפשרת לך:

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

כיצד לעקוף סגנונות

הדרך לעקוף סגנונות משתנה בהתאם לווידג'ט. עבור ווידג'ט התגובות, עליך להשתמש בפרמטר התצורה customCSS כדי להעביר את ה-CSS אל ה-iframe, או לציין את ה-CSS בדף ההתאמה (Customization) בלוח הניהול, שיספק את ה-CSS מ-CDN שלנו.

איך להתאים סגנונות Internal Link

כיצד להתאים את סגנונות ווידג'ט התגובות

ניתן להתאים את עיצוב ווידג'ט התגובות בשתי דרכים:

אפשרות 1: באמצעות הפרמטר customCSS

העבר את ה-CSS המותאם שלך כמחרוזת לפרמטר customCSS בעת אתחול הווידג'ט:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

אפשרות 2: באמצעות לוח הניהול

  1. גש לדף התאמת הווידג'ט בלוח הניהול שלך
  2. גלול אל מקטע "CSS מותאם" תחת "מתקדם"
  3. הזן את ה-CSS המותאם שלך
  4. לחץ על "שמור"

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

טיפים

  • השתמש ב-!important כדי לעקוף סגנונות ברירת מחדל במידת הצורך
  • כוון סלקטורים ספציפיים כדי למנוע השפעה על חלקים אחרים באתר שלך
  • בדוק את ה-CSS שלך בדפדפנים שונים עבור תאימות
  • הווידג'ט משתמש ב-CSS סטנדרטי — אין צורך במעבדי CSS מיוחדים

התאמת גבול תיבת ההערה Internal Link

הגבול סביב תיבת התגובות מורכב מהמסגרת של אזור הטקסט עצמו ועוד כמה קווים דקים שהווידג'ט מצייר סביבו. כדי לשנות את הצבע או עיגול הפינות שלו, הגדירו את משתני ה-CSS הבאים במקום לעצב את ה-textarea ישירות. המשתנים מעצבים מחדש את כל חלקי הגבול בבת אחת, כך שהפינות והצבעים תמיד יתאימו.

משתנהמה הוא משנהברירת מחדל
--fc-input-border-colorצבע הגבול#bfbfbf
--fc-input-border-color-focusצבע הגבול בזמן שהמשתמש מקליד#555
--fc-input-border-radiusעיגול הפינות המעוגלות11px
--fc-input-border-start-start-radiusעיגול הפינה המרובעת השמאלית-עליונה (הימנית-עליונה בשפות מימין לשמאל)0

הוסיפו את ה-CSS לתיבת Custom CSS בדף התאמה אישית של הווידג'ט, או העבירו אותו עם האפשרות customCSS. צריך להגדיר רק את המשתנים שרוצים לשנות.

אפשר גם להשתמש בכלי העזר Comment box border ממש מתחת לתיבת ה-Custom CSS, שכותב את ה-CSS הזה עבורכם.

שינוי צבע הגבול

צבע הגבול
Copy Copy
1
2:root {
3 --fc-input-border-color: #d1d5db;
4}
5

שינוי צבע הגבול בזמן הקלדה

צבע הגבול בזמן הקלדה
Copy Copy
1
2:root {
3 --fc-input-border-color-focus: #2563eb;
4}
5

עיגול כל ארבע הפינות

כברירת מחדל הפינה השמאלית-עליונה מרובעת. הגדירו את שני משתני הרדיוס כדי לעגל את כל ארבע הפינות באופן זהה:

עיגול כל ארבע הפינות
Copy Copy
1
2:root {
3 --fc-input-border-radius: 12px;
4 --fc-input-border-start-start-radius: 12px;
5}
6

פינות מרובעות

פינות מרובעות
Copy Copy
1
2:root {
3 --fc-input-border-radius: 0;
4}
5

התאמה למותג שלכם

צבעים ופינות של המותג
Copy Copy
1
2:root {
3 --fc-input-border-color: #c7d2fe;
4 --fc-input-border-color-focus: #4f46e5;
5 --fc-input-border-radius: 8px;
6 --fc-input-border-start-start-radius: 8px;
7}
8

צבעים שונים במצב כהה

כשהווידג'ט נמצא במצב כהה יש לו את המחלקה dark, ולכן אפשר להגדיר ערכים שונים למצב הכהה:

צבעי גבול במצב כהה
Copy Copy
1
2:root {
3 --fc-input-border-color: #d1d5db;
4}
5.dark {
6 --fc-input-border-color: #444;
7 --fc-input-border-color-focus: #aaa;
8}
9

למה לא לעצב את אזור הטקסט ישירות?

הווידג'ט מצייר בעצמו חלק מהגבול של תיבת התגובות, סביב אזור הטקסט. אם תגדירו border-color או border-radius רק על ה-textarea, הקווים האלה יישארו בסגנון ברירת המחדל והגבול ייראה לא אחיד, למשל קו מרובע שחוצה פינה מעוגלת. המשתנים לעיל משנים את שניהם בבת אחת.

הפניות CSS מותאמות לוידג'ט ההערות (גרסה 2, העדכנית ביותר) Internal Link

Comment Widget Default CSS
Copy Copy
1
2body { margin: 0; padding: 0; }
3 d { display: block }
4 @keyframes pop-in { 0% { transform: scale(0.3); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
5 @keyframes placeHolderShimmer { 0% { background-position: 0 0 } 100% { background-position: 100% 0 } }
6 /* shimmer skeleton for in-flight saves and lazy avatar loads. To restyle the loading state, target .animated-background. */
7 .comment-reply .comment-input.animated-background, .comment-reply input.animated-background, .animated-background { animation-duration: 1s; animation-iteration-count: infinite; animation-name: placeHolderShimmer; background: #f6f7f8; background: linear-gradient(to right, #eee 8%, #dddddd 18%, #eee 33%); background-size: 50% 50%; }
8 .comment-reply .tos-checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer }
9 .comment-reply .tos-checkbox a { color: inherit }
10 .comment-reply > .tos-checkbox { margin: 8px }
11 .comment-reply .tos-checkbox input[type=checkbox] { margin: 0; width: auto; box-shadow: none }
12 @keyframes backgroundToNormal { from { background: lightblue } to { background: inherit } }
13 /* widget root. Scope custom rules under .fast-comments. Config-driven modifier classes also land here: .readonly, .hide-avatars, .disable-image-redirect, .single-line-comment-input, .vote-style-1, .new-to-bottom -- use them as conditional ancestors. */
14 /* flow-root: establishes a block formatting context so child margins (e.g. .pagination's margin-top) cannot collapse out through the root. Escaped margins are excluded from offset/client/scrollHeight, which makes broadcastHeight() under-report and the embedding iframe clip the bottom of the widget. */
15 .fast-comments { position: relative; display: flow-root; width: 100%; font-size: 13px }
16 .hidden { display: none }
17 /* user-written text takes its direction from its own content, while margins and padding keep following the widget's direction */
18 .comment-text, .commenter-name .username, [name="fastcomments-comment"], .comment-text-edit { unicode-bidi: plaintext; }
19 /* unicode-bidi is not inherited, so blocks inside user text need it too; pre is left alone so code stays LTR */
20 .comment-text :is(p, div, blockquote, li, h1, h2, h3, h4, h5, h6), [name="fastcomments-comment"] :is(p, div, blockquote, li) { unicode-bidi: plaintext; }
21 .comment-text :is(pre, code), [name="fastcomments-comment"] :is(pre, code) { direction: ltr; unicode-bidi: isolate; }
22 /* isolates each tag with its own direction so a Latin tag keeps its leading "#" inside Arabic text */
23 .hash-tag { unicode-bidi: plaintext; }
24 .invisible { visibility: hidden }
25 .inline-block { display: inline-block }
26 .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
27 .icon.bubble { background: url("${FC_CDN}/images/svg/v2/text_bubble_dark.svg") no-repeat center; background-size: 22px 22px; }
28 .icon.bubble-white { background: url("${FC_CDN}/images/svg/v2/text_bubble_white.svg") no-repeat center; background-size: 22px 22px; }
29 .icon.cross { background: url("${FC_CDN}/images/svg/v2/close.svg") no-repeat center; background-size: 9px 9px; }
30 .icon.reply-arrow-inactive { background: url("${FC_CDN}/images/svg/v2/reply_inactive.svg") no-repeat center; background-size: 15px 15px; }
31 .icon.reply-arrow-active { background: url("${FC_CDN}/images/svg/v2/reply.svg") no-repeat center; background-size: 15px 15px; }
32 .icon.up { background: url("${FC_CDN}/images/svg/v2/thumbs_up_light.svg") no-repeat center; background-size: 12px 12px; }
33 .icon.up.active, .icon.up:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_up_dark.svg") no-repeat center; background-size: 12px 12px; }
34 .icon.down { background: url("${FC_CDN}/images/svg/v2/thumbs_down_light.svg") no-repeat center; background-size: 12px 12px; }
35 .icon.down.active, .icon.down:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_down_dark.svg") no-repeat center; background-size: 12px 12px; }
36 .icon.pin-small { background: url("${FC_CDN}/images/svg/v2/pin.svg") no-repeat center; background-size: 15px 15px; }
37 .icon.lock-small { background: url("${FC_CDN}/images/padlock.svg") no-repeat center; background-size: 15px 15px; }
38 .icon.logo { width: 27px; height: 33px; background: url("${FC_CDN}/images/svg/v2/logo.svg") no-repeat center; background-size: 22px; }
39 .icon.edit-small { background: url("${FC_CDN}/images/svg/menu.svg") no-repeat center; background-size: 17px 17px; }
40 .icon.edit-big { background: url("${FC_CDN}/images/svg/v2/edit.svg") no-repeat center; background-size: 22px 22px; }
41 .icon.trash { background: url("${FC_CDN}/images/svg/v2/trash_thin.svg") no-repeat center; background-size: 22px 22px; }
42 .icon.eye { background: url("${FC_CDN}/images/svg/v2/view.svg") no-repeat center; background-size: 22px 22px; }
43 .icon.eye-slash { background: url("${FC_CDN}/images/svg/v2/view_hide.svg") no-repeat center; background-size: 22px 22px; }
44 .icon.replied { background: url("${FC_CDN}/images/svg/v2/replied.svg") no-repeat center; background-size: 22px 22px; }
45 :where([dir="rtl"]) .icon.reply-arrow-inactive, :where([dir="rtl"]) .icon.reply-arrow-active, :where([dir="rtl"]) .icon.replied, :where([dir="rtl"]) .icon.return { transform: scaleX(-1); }
46 .icon.bold { background: url("${FC_CDN}/images/svg/v2/editor_bold.svg") no-repeat center; background-size: 9px; }
47 .icon.ul { position: relative; top: 1px; background: url("${FC_CDN}/images/svg/v2/editor_underline.svg") no-repeat center; background-size: 10px; }
48 .icon.it { background: url("${FC_CDN}/images/svg/v2/editor_itallic.svg") no-repeat center; background-size: 7px; }
49 .icon.s { background: url("${FC_CDN}/images/svg/v2/editor_strike.svg") no-repeat center; background-size: 10px; }
50 .icon.code { background: url("${FC_CDN}/images/svg/v2/editor_embed.svg") no-repeat center; background-size: 16px; }
51 .icon.link { position: relative; top: -1px; background: url("${FC_CDN}/images/svg/v2/editor_link.svg") no-repeat center; background-size: 14px; }
52 .icon.img-up { background: url("${FC_CDN}/images/svg/v2/editor_image.svg") no-repeat center; background-size: 16px; }
53 .icon.img-btn-wrap { position: relative; }
54 .icon.return { background: url("${FC_CDN}/images/svg/return.svg") no-repeat center; background-size: 22px; margin-inline-start: 6px; }
55 .icon.gif { width: auto; height: auto; font-size: 0; }
56 .icon.gif::before { content: "GIF"; font-size: 12px; }
57 .icon.spoiler { font-size: 12px; }
58 .icon.gif::before, .t-btn.txt { display: inline-block; width: auto; height: auto; margin-inline-end: 3px; text-align: center; vertical-align: middle; font-weight: 500; }
59 .icon.bell { background: url("${FC_CDN}/images/svg/v2/bell.svg") no-repeat center; background-size: 22px; }
60 .icon.bell-red { background: url("${FC_CDN}/images/svg/v2/bell-red.svg") no-repeat center; background-size: 22px; }
61 .divider { display: inline-block; height: 25px; margin: 0 10px; vertical-align: middle; border-inline-end: 1px solid #c2c2c2; }
62 .icon.block { background: url("${FC_CDN}/images/svg/v2/ban.svg") no-repeat; background-size: 22px 22px; }
63 .icon.flag { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat; background-size: 22px 22px; }
64 .icon.flag-small { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat center; background-size: 15px 15px; }
65 .select-dir-wrapper { clear: both; text-align: end; border-bottom: 1px solid #afafaf; }
66 .select-dir-wrapper .comment-count { /* physical-ok */ float: left; float: inline-start; font-weight: 500; }
67 .select-dir-wrapper > * { margin: 9px; height: 16px }
68 .select-dir { display: inline-block }
69 .dropdown { position: relative; z-index: 3; text-align: end }
70 .dropdown .drop-label { padding: 0 0 7px 0; cursor: pointer; font-weight: 500 }
71 .dropdown .drop-label i { position: relative; display: inline-block; top: -2px; font-size: 7px }
72 .dropdown .items { position: absolute; display: none; top: 20px; inset-inline-end: 0; width: 150px; overflow: hidden; border-radius: 0 0 4px 4px; background: #fff; }
73 .dropdown:hover .items { position: absolute; display: block }
74 .dropdown .items > * { padding: 5px 9px; cursor: pointer; font-weight: 500; text-align: start; font-size: 13px }
75 .no-comments { clear: both; text-align: center; font-weight: 500; font-size: 16px; }
76 .new-comments-message { width: fit-content; margin: 20px auto 0; padding: 5px 10px; text-align: center; cursor: pointer; font-weight: 500 }
77 .new-comments-message .new-comments-count { pointer-events: none; position: relative; top: 1px; display: inline-block; min-width: 12px; padding: 2px 5px 4px 5px; margin-inline-end: 3px; border: 1px solid #a2a2a2; border-radius: 4px; border-start-end-radius: 0; }
78 .new-comments-message span { pointer-events: none; padding-bottom: 2px; border-bottom: 1px solid #a3a3a3; }
79 .comment .new-comments-message { margin: 10px auto 0; }
80 .sso-login-wrapper, .fastcomments-message-wrapper { display: flex; height: fit-content; min-height: 130px; padding: 30px 0; box-sizing: border-box; align-items: center; justify-content: center; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
81 .sso-login-wrapper .message-text, .fastcomments-message-wrapper .message-text { display: inline; pointer-events: none; }
82 .fastcomments-message-wrapper .message-text a { color: #fff; pointer-events: all; }
83 .sso-login-wrapper .sso-login, .fastcomments-message-wrapper .fastcomments-message { display: inline-block; animation: pop-in 0.5s; animation-timing-function: ease; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
84 .fastcomments-message-wrapper .fastcomments-message { margin: 0 5%; cursor: default; }
85 .sso-login-wrapper .sso-login[href] { cursor: pointer; }
86 .sso-login-wrapper .sso-login .message-text, .fastcomments-message-wrapper .fastcomments-message .message-text { margin-inline-end: 10px; }
87 .sso-login-wrapper .sso-login .icon, .fastcomments-message-wrapper .fastcomments-message .icon { pointer-events: none; }
88 .sso-login-wrapper .sso-login.clickable { cursor: pointer; }
89 .comment .sso-login-wrapper { padding: 7px 0; text-align: start }
90 .comment .sso-login-wrapper .sso-login { font-size: 16px }
91 /* Toolbar, auth fields, and cancel button carry .default-hidden -- they're collapsed (height:0, opacity:0) until the user focuses the input, which adds .show-default-hidden to the .comment-reply form. When styling these elements, account for the collapsed state. */
92 .default-hidden { transition-duration: 300ms }
93 .comment-input:not(.show-default-hidden) .default-hidden { height: 0; margin: 0 !important; opacity: 0; pointer-events: none; transition-duration: 200ms }
94 .loading .pagination { opacity: 0.5; pointer-events: none; }
95 .card { border: 1px solid #d0d0d0; background: #fdfdfd; border-radius: 3px; box-shadow: 5px 5px 7px rgba(0,0,0,.1) }
96 button, .button { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 7px; border-start-start-radius: 0; font-size: 15px; background: #fbfbfb; color: #333; text-decoration: none; border: 1px solid #a2a2a2; cursor: pointer }
97 .fast-comments, textarea { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif }
98 textarea::placeholder { font-size: 13px; font-weight: 500; transition-duration: 150ms }
99 textarea:focus::placeholder { color: transparent }
100 .fc-red { display: inline-block; margin: 5px; color: #ff0000 }
101 .comment-error { padding: 10px }
102 /* Brand shape: square top-left, rounded other 3 corners (border-radius: 0 N N N). Match this when adding new buttons/inputs/cards to stay on-theme. */
103 /*
104 * INPUT BORDER VARIABLES: the easiest way to restyle the comment box border. Set them in custom CSS, e.g. :root { --fc-input-border-color: #d1d5db; --fc-input-border-radius: 8px; }
105 * They keep the text area and the frame lines drawn around it (.horizontal-border-*) in sync; overriding border-color or border-radius on the textarea alone leaves the frame lines mismatched.
106 * --fc-input-border-color border color (default #bfbfbf)
107 * --fc-input-border-color-focus border color while the comment box has focus (default #555)
108 * --fc-input-border-radius radius of the rounded corners (default 11px)
109 * --fc-input-border-start-start-radius radius of the square top-left corner, top-right in RTL (default 0)
110 */
111 input, textarea { padding: 12px 20px; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); box-sizing: border-box; outline: none; background: transparent; }
112 input { padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; }
113 /* Focus state must be applied to BOTH the textarea border and the sibling .horizontal-border-wrapper (faux border around .comment-input -- see below). Set --fc-input-border-color-focus, or override both selectors, when changing focus color. */
114 input:focus, textarea:focus, textarea:focus + .horizontal-border-wrapper, .comment-input textarea:focus { border-color: var(--fc-input-border-color-focus, #555) } /* .comment-reply textarea:focus for ssr */
115 /* Focus anywhere inside the box (the textarea or content an extension rendered below it) colours the whole frame. */
116 .comment-input:focus-within > textarea, .comment-input:focus-within > [contenteditable].comment-input, .comment-input:focus-within .horizontal-border-wrapper { border-color: var(--fc-input-border-color-focus, #555) }
117 .pagination { margin-top: 50px; line-height: 19px; text-align: center; user-select: none; }
118 .pagination > * { display: inline-block; cursor: pointer; font-weight: 700; }
119 .pagination > * > span { font-weight: normal; pointer-events: none; }
120 .pagination > * > span::before { content: "("; }
121 .pagination > * > span::after { content: ")"; }
122 .pagination .load-next-page { padding-inline-end: 25px; }
123 .pagination .load-all { padding-inline-start: 25px; border-inline-start: 2px solid #555; } /* important that border is on the one to the right, as it doesn't always show */
124 .comments-toggle { display: block; width: fit-content; margin: 20px auto; cursor: pointer; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; user-select: none; }
125 .replying-to { margin-bottom: 5px }
126 .comment-reply { position: relative; width: 100%; margin: 10px 0 15px 0; }
127 .comment-reply.root { padding: 15px; box-sizing: border-box; }
128 @media(max-width: 500px) { .comment-reply.root { padding: 15px 5px 15px 5px; } }
129 .comment-reply .fast-comments-waiting { display: block; margin: 5px 0 }
130 .comment-reply .comment-reply-top-bar { position: relative; min-height: 25px; margin: 0 26px 15px 26px; line-height: 25px; } /* relative positioned for things like notifications list */
131 .comment-reply .comment-reply-top-bar .logged-in-info { display: inline-block; width: calc(100% - 60px); min-width: 150px; }
132 .comment-reply .comment-reply-top-bar .logged-in-info .avatar { display: inline-block; height: 25px; vertical-align: middle; margin-inline-end: 5px; border-radius: 25px; overflow: hidden; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07); font-size: 0; }
133 .comment-reply .comment-reply-top-bar .logged-in-info .avatar .open-profile { cursor: pointer; }
134 .comment-reply .comment-reply-top-bar .logged-in-info .avatar.animated-background img { opacity: 0.1; }
135 .comment-reply .comment-reply-top-bar .logged-in-info .avatar img { width: 25px; height: 25px; object-fit: cover; }
136 .comment-reply .comment-reply-top-bar .logged-in-info .username { display: inline-block; max-width: calc(50% - 25px); overflow: hidden; vertical-align: middle; text-overflow: ellipsis; font-weight: 700; white-space: nowrap; }
137 .comment-reply .comment-reply-top-bar .logged-in-info .username.open-profile { cursor: pointer; }
138 .comment-reply .comment-reply-top-bar .logged-in-info .badges { display: inline-block; margin-inline-start: 5px; }
139 .comment-reply .comment-reply-top-bar .right { /* physical-ok */ float: right; float: inline-end; }
140 .comment-reply .comment-reply-top-bar .right > * { display: inline-block; }
141 .comment-reply .comment-reply-top-bar .right .menu { font-weight: 500; font-size: 11px; }
142 .comment-reply .comment-reply-top-bar .right .menu:hover { z-index: 9002; }
143 .comment-reply .comment-reply-top-bar .right .menu .drop-label i { display: inline-block; width: 4px; height: 4px; background: #333; border-radius: 4px; margin: 0 2px; }
144 .comment-reply .comment-reply-top-bar .right .menu .items { top: 25px; padding: 20px; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; border-start-end-radius: 0; }
145 .comment-reply .comment-reply-top-bar .right .menu .items > * { font-weight: 700; }
146 .comment-reply .comment-reply-top-bar .right .notification-bell { position: relative; margin-inline-start: 5px; cursor: pointer; }
147 .comment-reply .comment-reply-top-bar .right .notification-bell .count { position: absolute; top: -3px; inset-inline-start: 19px; min-width: 15px; height: 15px; text-align: center; font-size: 11px; pointer-events: none; color: red; display: none; }
148 .comment-reply .comment-reply-top-bar .right .notification-bell .icon.bell-red { display: none; }
149 .comment-reply .comment-reply-top-bar .right .notification-bell > * { pointer-events: none; }
150 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell { display: none; }
151 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell-red { display: inline-block; }
152 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .count { display: block; }
153 .toolbar { position: relative; display: inline-block; margin: 5px 0 0 0; font-size: 13px }
154 .toolbar .t-btn { display: inline-block; margin: 0 1px; vertical-align: middle; cursor: pointer; transition-duration: 200ms; user-select: none; }
155 .toolbar .t-btn:hover { opacity: 0.7; }
156 .toolbar .img-btn-wrap { display: inline-block; overflow: hidden }
157 .toolbar .t-btn input[type=file] { position: absolute; padding: 40px; font-size: 100px; top: 0; inset-inline-start: 0; opacity: 0; cursor: pointer }
158 .commenty-input:not(.show-default-hidden) .toolbar { width: 100%; margin-top: -50px; }
159 @media(max-width: 500px) { .toolbar { display: flex; width: 100%; padding-bottom: 12px; justify-content: space-evenly; align-items: center; } }
160 @media(max-width: 500px) { .comment-input .toolbar { margin-top: 50px; border-bottom: 1px solid var(--fc-input-border-color, #bfbfbf); } }
161 .comment-reply .auth-input, .comment-vote-auth.auth-input { margin: 10px 0; font-size: 13px }
162 .comment-reply .auth-input .fc-login { margin: 10px 0 0; }
163 .comment-reply .auth-input .reasoning, .comment-vote-auth.auth-input .reasoning { font-weight: 600; }
164 .comment-reply .auth-input .fc-red, .comment-vote-auth.auth-input .fc-red { display: block }
165 .comment-reply .auth-input input, .comment-vote-auth.auth-input input { width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; font-size: 14px; border: 1px solid #a2a2a2; }
166 .comment-reply .auth-input .solicitation-info, .comment-vote-auth.auth-input .solicitation-info { margin-top: 10px; }
167 .comment-reply .auth-input .fast-comments-reply { margin-top: 10px; padding: 10px 45px; border-radius: 5px; border-start-end-radius: 0; background: #333; color: #fff; border: none; }
168 /* padding-bottom reserves space for the absolute toolbar/submit button. Don't remove it without also repositioning those elements. */
169 .comment-input, .comment-edit { position: relative; padding-bottom: 30px; border-radius: var(--fc-input-border-radius, 11px); border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
170 /* The textarea has no bottom border or bottom radius -- the bottom edge is drawn by .horizontal-border-bottom-* divs. To restyle the bottom of the input, target those, not the textarea. */
171 .comment-input textarea { display: block; width: 100%; height: 130px; padding-block: 15px; padding-inline: 15px 25px; resize: none; font-size: 16px; border-bottom: none; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-start-end-radius: var(--fc-input-border-radius, 11px); }
172 .comment-input textarea::placeholder { font-size: 16px; font-weight: 400; }
173 .comment-input input { display: block; width: 100%; font-size: 14px; }
174 .comment-input .fastcomments-message-wrapper { border: 1px solid var(--fc-input-border-color, #bfbfbf); border-bottom: none; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-start-end-radius: var(--fc-input-border-radius, 11px); }
175 .comment-input input[name=fastcomments-link] { display: block; width: 100%; margin: 10px 0; }
176 /*
177 * COMMENT INPUT BORDER: drawn by 6 absolutely-positioned divs inside .horizontal-border-wrapper (top-left, top-right, left, right, bottom-left, bottom-right), NOT by the textarea's border. To change the input's border color or radius, prefer the --fc-input-border-* variables above, which restyle the textarea and all 6 pieces together. Otherwise target .horizontal-border-wrapper (sets border-color, inherited by all 6 pieces) and the individual .horizontal-border-* rules. The bottom-center is intentionally open so the submit button can overlap it. Top pieces are display:none on the root reply box and re-shown only for nested reply boxes (rule near end of block).
178 */
179 .comment-input .horizontal-border-wrapper { pointer-events: none; border-color: var(--fc-input-border-color, #bfbfbf); }
180 .comment-input .horizontal-border { position: absolute; height: 20px; border-bottom: 1px solid; border-color: inherit; }
181 .comment-input .horizontal-border-left { bottom: 0; inset-inline-start: 0; border-radius: 0; border-end-start-radius: var(--fc-input-border-radius, 11px); }
182 .comment-input .horizontal-border-right { bottom: 0; inset-inline-end: 0; width: 20px; border-radius: 0; border-end-end-radius: var(--fc-input-border-radius, 11px); }
183 .comment-input .horizontal-border-top-left, .comment-input .horizontal-border-top-right { display: none; position: absolute; top: 20px; border-bottom: 0; border-top: 1px solid; border-color: inherit; }
184 .comment-input .horizontal-border-top-right { top: 0; inset-inline-end: 0; border-radius: 0; border-start-end-radius: var(--fc-input-border-radius, 11px); width: 20px; }
185 .comment-input .horizontal-border-top-left { top: 0; inset-inline-start: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); }
186 /* Side pieces span the whole box (top to bottom), so anything an extension renders below the textarea sits inside the frame with no borders of its own. Over the textarea they overlap its own side border pixel for pixel, so their top corners use the same radius variables as the textarea's. */
187 .comment-input .horizontal-border-bottom-left { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-start: 0; border-color: inherit; border-bottom: 0; border-inline-start-width: 1px; border-inline-start-style: solid; border-radius: 0; border-start-start-radius: var(--fc-input-border-start-start-radius, 0); border-end-start-radius: var(--fc-input-border-radius, 11px); }
188 .comment-input .horizontal-border-bottom-right { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-end: 0; border-color: inherit; border-bottom: 0; border-inline-end-width: 1px; border-inline-end-style: solid; border-radius: 0; border-start-end-radius: var(--fc-input-border-radius, 11px); border-end-end-radius: var(--fc-input-border-radius, 11px); }
189 /* Re-shows top border pieces for nested reply boxes (input rendered inside a .comment) so the input gets a full frame. */
190 .comment .comment-input .horizontal-border-top-left, .comment .comment-input .horizontal-border-top-right { display: block }
191 @media(max-width: 500px) { .comment-input textarea, .comment-input .fastcomments-message-wrapper { height: 130px; } }
192 /* Submit button. Sits in the gap between the .horizontal-border-bottom-left/right pieces -- if you change the input's bottom border layout, retune top/right here too. */
193 .comment .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -19px; inset-inline-end: 26px; border-radius: 7px; border-start-start-radius: 0; }
194 .comment .fast-comments-reply, .comment .edit-save { padding: 10px 27px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; }
195 /* X cancel button. Only rendered for nested replies, not the root reply box. */
196 .comment .cancel-button-wrapper { position: absolute; top: 9px; inset-inline-end: 25px; border-radius: 4px; }
197 .comment .comment-edit .cancel-button-wrapper { top: -13px }
198 .comment .fast-comments-reply-cancel { margin-bottom: 0; padding: 1px 1px; border-radius: 4px; }
199 .comment .fast-comments-reply-cancel .cross { pointer-events: none; }
200 .comment-reply.root .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -20px; inset-inline-end: 27px; margin-bottom: 10px; border-radius: 7px; border-start-start-radius: 0; }
201 .comment-reply.root button { margin-bottom: 0; padding: 7px 20px; font-weight: 600; }
202 .comment-reply.root button .bubble { margin-inline-start: 10px; pointer-events: none; }
203 .comments { clear: both; padding: 15px 0; }
204 @media(max-width: 500px) { .comments { padding: 15px 5px; } }
205 .comment { position: relative; margin-top: 15px }
206 @media(max-width: 500px) { .comment { margin-top: 5px; } }
207 .comment .comment-text spoiler:not(:hover) { background: #eee; color: #eee; border: 1px dotted #a2a2a2; }
208 .comment .comment-text spoiler:has(div, p) { display: block; }
209 .comment .comment-text .inline-image { display: block; max-width: 500px; margin: 3px 0 3px 0 } /* must not select inline-image in wysiwyg */
210 .comment .comment-text .inline-image img { max-width: 100%; max-height: 400px } /* must not select inline-image in wysiwyg */
211 .disable-image-redirect .comment .inline-image { cursor: default; }
212 /*
213 * Comment state classes on .comment -- target these to restyle moderation/state visuals:
214 * .is-live newly streamed-in comment (flash animation)
215 * .is-unread not yet seen by current user (avatar glow)
216 * .unverified commenter hasn't clicked email confirmation (dimmed)
217 * .is-spam flagged as spam (red border)
218 * .is-unapproved awaiting moderation (orange border)
219 * .is-blocked from a blocked user (text truncated to 40px)
220 * .is-deleted, .is-admin, .is-own, .24hr, .readonly are also added but not styled by default.
221 */
222 .comment.is-live > .inner { animation: backgroundToNormal 1.5s }
223 .comment.is-unread > .inner .avatar-wrapper { box-shadow: 0 0 20px #89f796; }
224 .comment.unverified > .commenter-name, .comment.unverified > .comment-content .commenter-name { opacity: 0.7 }
225 .comment.unverified > .comment-content > .comment-text { opacity: 0.7 }
226 .comment.is-spam > .comment-content { border: 1px solid red; } /* can be set when saving comment initially */
227 .comment.is-unapproved > .comment-content { border: 1px solid #ffa700; } /* can be set when saving comment initially */
228 .comment.is-blocked > .inner > .comment-content > .comment-text { max-height: 40px; overflow: hidden; }
229 .comment > .requires-verification-approval { margin: 3px 0 6px }
230 .comment > .inner > .spam-notice { margin: 0 0 10px 0; font-size: 12px; color: red }
231 @media(max-width: 500px) { .comment > .inner > .spam-notice { margin-top: 18px; } }
232 .comment .avatar-wrapper { position: relative; display: inline-block; width: 56px; height: 56px; overflow: hidden; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.10); border-radius: 15px; border-start-end-radius: 0; vertical-align: top; }
233 /* .anon = placeholder avatar (no custom default configured + anonymous user). Style this to change how unidentified commenters appear. */
234 .comment .avatar-wrapper.anon { border: 1px solid #3f3f3f; }
235 .comment .avatar-wrapper .open-profile { cursor: pointer; }
236 .comment .avatar-wrapper.animated-background img { opacity: 0.1; }
237 @media(max-width: 500px) { .comment .avatar-wrapper { width: 36px; height: 36px; } }
238 .comment .avatar { width: 100%; height: 100%; object-fit: cover; }
239 @media(max-width: 500px) { .comment .avatar { vertical-align: middle } }
240 .comment .commenter-name .badges { margin-bottom: 5px; }
241 .badges .badge { display: inline-block; vertical-align: middle; line-height: initial; margin-block: 3px; margin-inline: 0 5px; padding: 5px 7px; cursor: default; font-size: 12px; white-space: nowrap; border-radius: 4px; color: #000; }
242 .badges .badge img { max-width: 22px; }
243 .badges .badge.ib { padding: 0; }
244 .comment .commenter-name { font-size: 14px }
245 .comment > .commenter-name { display: none; vertical-align: middle; color: #000 }
246 @media(max-width: 500px) { .comment > .commenter-name { display: inline-block; margin-inline-start: 5px; vertical-align: middle } }
247 .comment > .commenter-name a { display: block; color: #000; text-decoration: none }
248 .comment .commenter-name .website-url { color: #000; text-decoration: underline }
249 .comment .commenter-name .label { font-size: 10px; text-transform: uppercase; font-weight: 500; color: #666666; } /* common label styling (unverified label, admin label, custom labels, etc) */
250 .comment > .inner { position: relative; padding: 8px 8px 10px 8px; } /* relative is required for blocked message */
251 @media(max-width: 500px) { .comment > .inner { padding: 5px 5px 5px 5px; } }
252 .comment > .inner > .comment-content { position: relative; display: inline-block; width: calc(99% - 101px); margin-inline-start: 15px; }
253 .hide-avatars .comment > .inner > .comment-content { margin-inline-start: 0; }
254 .hide-avatars .comments > .comment > .inner > .comment-content > .commenter-name, .hide-avatars .comments > .comment > .inner > .comment-content > .comment-text { padding-inline-start: 0; }
255 @media(max-width: 500px) { .comment > .inner > .comment-content { display: inline; margin-inline-start: 3px; background: transparent } }
256 .comment > .inner > .comment-content .commenter-name { display: inline-block; max-width: 50%; vertical-align: middle; padding-block: 5px 0; padding-inline: 2px 0; color: #171717 }
257 .comment > .inner > .comment-content .commenter-name > .username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
258 @media(max-width: 500px) { .comment > .inner > .comment-content .commenter-name { padding-block: 5px 0; padding-inline: 4px 0; } }
259 .comment > .inner > .comment-content .comment-text { padding: 5px 2px; color: #000; line-height: 22px; font-size: 14px; word-break: break-word; white-space: pre-line; overflow-y: auto }
260 .comment > .inner > .comment-content .comment-text ol, .comment > .inner > .comment-content .comment-text ul { white-space: normal; }
261 .comment > .inner > .comment-content .comment-text .react { display: inline; max-height: 20px; margin: 0 3px; vertical-align: text-top; }
262 .comment > .inner > .comment-content > .comment-text b > a { color: #000; text-decoration: none; }
263 .comment > .inner > .comment-content > .comment-text blockquote { margin: 15px 0; padding: 0 20px; border-inline-start: 1px solid #e5e5e5; }
264 .comment > .inner > .comment-content .comment-text-edit { width: 100%; margin-top: 15px; }
265 @media(max-width: 500px) { .comment > .children .comment-text { margin-inline-start: 27px; } }
266 .comment > .inner > .comment-content .comment-text br { line-height: 0.5em }
267 .comment > .inner > .comment-content textarea.comment-text, .comment > .inner > .comment-content input.comment-text { display: block; width: calc(100% - 20px); height: fit-content; margin: 10px 10px 0 10px; padding: 5px 11px; resize: vertical }
268 .comment > .inner > .comment-content .edit-failure { display: block; margin: 10px 0; text-align: center }
269 .comment > .inner > .comment-content .comment-toolbar-vote { position: relative; margin-inline-start: 8px }
270 @media(max-width: 500px) { .comment > .inner > .comment-content .comment-toolbar-vote { margin-inline-start: 0 } }
271 .comment > .inner > .comment-content .comment-toolbar-vote .vote-awaiting-verification { padding: 5px 0; font-weight: 500 }
272 .comment > .inner > .comment-bottom { margin-top: 25px; border-bottom: 1px solid #e5e5e5; }
273 @media(max-width: 500px) { .comment > .inner > .comment-bottom { margin-top: 10px; } }
274 .children .comment > .inner > .comment-bottom { margin-inline-start: 28px; }
275 @media(max-width: 500px) { .children .comment > .inner > .comment-bottom { margin-inline-start: 21px; } }
276 @media(min-width: 500px) { .hide-avatars .children .comment > .inner > .comment-bottom { margin-inline-start: 33px; } }
277 /* min-height reserves space for the absolutely-positioned reply button (.comment-toolbar-reply, top:-4px below). */
278 .comment > .inner > .comment-bottom > .comment-bottom-toolbar { position: relative; min-height: 36px; }
279 .comment > .inner > .comment-bottom .comment-vote-options .votes-up, .comment > .inner > .comment-bottom .comment-vote-options .votes-down { position: relative; top: 1px; vertical-align: middle; font-size: 12px; font-weight: 500; }
280 .comment > .inner > .comment-bottom .comment-vote-options .votes-up { margin-inline-end: 5px; }
281 .comment > .inner > .comment-bottom .comment-vote-options .votes-down { margin-inline-start: 5px; }
282 .comment > .inner > .comment-bottom .comment-toolbar-vote .comment-votes .divider { height: 20px; }
283 .comment > .inner > .comment-bottom .comment-vote-options { display: inline-block; margin-block: 0; margin-inline: 2px 7px; font-size: 12px; }
284 .comment > .inner > .comment-bottom .comment-vote-options > span { cursor: pointer }
285 .comment > .inner > .comment-bottom .comment-votes, .comment > .inner > .comment-bottom .comment-reply-start { display: inline-block; margin: 5px 2px; font-size: 12px }
286 .comment > .inner > .comment-bottom .comment-vote-options button { margin: 0 3px }
287 .comment > .inner > .comment-bottom .comment-vote-options .view-count { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; margin-inline-start: 3px; color: #828282; }
288 .comment > .inner > .comment-bottom .comment-vote-options .view-count .icon { opacity: 0.7; }
289 .comment > .inner > .comment-bottom .comment-toolbar-reply { position: absolute; inset-inline-end: 0; top: -4px; }
290 .comment > .inner > .comment-bottom .comment-reply-start { border: none; background: none; font-weight: 600; }
291 .comment > .inner > .comment-bottom .comment-reply-start i { position: relative; top: -2px; pointer-events: none; }
292 .comment > .inner > .comment-bottom .comment-vote-auth { width: 100%; max-width: 400px }
293 .comment > .inner > .comment-bottom .comment-vote-auth .fast-comments-waiting { /* physical-ok */ float: left; float: inline-start }
294 .comment > .inner > .comment-bottom .comment-vote-auth .buttons { text-align: end }
295 .comment > .inner > .comment-bottom .comment-vote-auth button { margin-block: 5px 0; margin-inline: 5px 0; padding: 10px 35px; background: #333; color: #fff; border: none; }
296 .comment > .inner > .comment-bottom .reply-form-wrapper { padding: 5px }
297 .comment > .toggle-replies { margin-block: 0; margin-inline: 15px 0; line-height: 24px; font-weight: 500; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
298 .children .comment > .toggle-replies { margin-inline-start: 41px; }
299 @media(max-width: 500px) { .children .comment > .toggle-replies { margin-inline-start: 12px; } }
300 .comment > .toggle-replies > * { vertical-align: middle; pointer-events: none; }
301 .comment > .toggle-replies > i { margin-inline-end: 5px; }
302 .comment > .toggle-replies > span > .count { color: #1f1f1f; }
303 .comment > .toggle-replies > span > .count:before { content: "("; }
304 .comment > .toggle-replies > span > .count:after { content: ")"; }
305 .comment .prompt { position: absolute; top: -2px; inset-inline-start: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background: rgba(255, 255, 255, 0.9); text-align: center } /* -2px to ensure covers up arrow */
306 .comment .prompt p { font-weight: 500; }
307 .comment .prompt button { user-select: none; }
308 .comment .prompt button:not(:last-child) { margin-inline-end: 10px }
309 .comment .comment-error p:before { padding-inline-end: 5px; content: "❗" }
310 @media(max-width: 500px) { .comment .prompt { padding: 5px } }
311 @media(max-width: 500px) { .comment .prompt p { margin: 0 0 .4em 0 } }
312 .comment > .inner > .requires-verification-approval, .comment > .inner > .awaiting-approval-notice { margin: 15px 0; }
313 /* Date + flag/pin/lock icons + menu (3-dot/edit). On hover, z-index jumps so the open menu can overlap sibling comments. Match this when styling custom menu overlays. */
314 .comment .top-right { position: absolute; top: 0; inset-inline-end: 0; z-index: 2; }
315 .comment .top-right:hover { z-index: 9001; }
316 .comment .jump-link { padding-inline-end: 5px; vertical-align: baseline; font-size: 12px; text-decoration: none; color: #4f4f4f }
317 .comment .jump-link .abs-date { margin-inline-start: 5px; }
318 @media(max-width: 500px) { .comment > .inner > .top-right { top: -10px; } } /* if top is too low, will go above highlighting for admin actions */
319 .comment .top-right > * { display: inline-block; vertical-align: middle }
320 .comment > .inner > .replied { display: inline-block; margin-block: -7px 0; margin-inline: 0 5px; vertical-align: top; }
321 .hide-avatars .comment > .inner > .replied { margin-block: 0; margin-inline: 0 5px; }
322 .children > .comment:not(:first-child) > .replied { opacity: 0.5; }
323 .comment .menu { position: relative; padding-block: 10px; padding-inline: 0 10px; user-select: none }
324 .comment .menu .menu-btn { cursor: pointer }
325 .comment .menu .menu-btn i { display: inline-block; width: 4px; height: 4px; margin: 2px; background: #333; border-radius: 10px }
326 /* .menu.empty rendered when no actions are available -- kept in DOM to preserve layout, dimmed and non-clickable. */
327 .comment .menu.empty .menu-btn { cursor: default; opacity: 0.5; }
328 .menu-content { position: absolute; width: 130px; min-width: max-content; padding: 20px; background-color: #fff; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.10); border-radius: 10px; border-start-end-radius: 0; z-index: 9001; }
329 .menu-content div { padding: 3px; font-weight: 700; cursor: pointer; font-size: 13px }
330 .menu-content div > * { vertical-align: middle; pointer-events: none; }
331 .menu-content div > i { margin-block: 0; margin-inline: 0 5px; }
332 .menu-content div > span { display: inline-block; width: calc(100% - 29px); padding: 7px 10px; box-sizing: border-box; }
333 .menu-content div:not(:last-child) > span { border-bottom: 1px solid #dcdcdc; }
334 .menu-content.corner-bottom-right { border-radius: 10px; border-end-end-radius: 0; }
335 @media(max-width: 500px) { .comment .menu { padding-block: 10px; padding-inline: 0 5px; } } /* if top is too low, will go above highlighting for admin actions */
336 .comment > .children { margin-block: 15px 0; margin-inline: 15px 0 }
337 /* "Powered by FastComments" footer. White-labeled tenants get .empty (no content) - hidden entirely, like the live chat widget does. Custom tenant CSS can still restore it via .footer.empty. */
338 .footer { height: 65px; margin-top: 25px; padding-top: 20px; text-align: center; font-size: 12px; }
339 .footer:not(.empty) { border-top: 1px solid #ccc }
340 .footer.empty { display: none; }
341 .footer a, .footer .logo { vertical-align: top; text-decoration: none; color: #201600; font-weight: bold; font-size: 14px }
342 .footer .logo { margin-top: -2px; padding-inline-end: 2px; }
343 .comment.readonly .comment-vote-options { display: none }
344 /* Autocomplete dropdown for @mentions and #hashtags inside the comment input. Anchored relative to .comment-input. */
345 .search-list { position: absolute; z-index: 4; width: 100%; margin-top: -9px; box-sizing: border-box; border-radius: 0 0 11px 11px; background: #fff; border: 1px solid var(--fc-input-border-color, #bfbfbf); }
346 .search-list .cross { position: absolute; top: -11px; inset-inline-end: 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid var(--fc-input-border-color, #bfbfbf); border-inline-end: 0; border-radius: 16px; border-start-end-radius: 0; border-end-end-radius: 0; cursor: pointer; }
347 .search-list .search-entry { padding: 5px 10px; cursor: pointer; }
348 .search-list .search-entry.last { border-radius: 0 0 11px 11px }
349 .search-list .search-entry img { width: 20px; height: 20px; margin-inline-end: 3px; vertical-align: middle; border-radius: 20px; }
350 .search-list .search-entry > * { pointer-events: none; }
351 .search-list .search-entry:hover, .search-list .search-entry.kb-select, .search-list .cross:hover { background-color: #eee; }
352 .search-list .search-section-header { padding: 4px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; user-select: none; }
353 .search-list .search-section-loading { padding: 4px 10px; font-size: 11px; color: #888; font-style: italic; pointer-events: none; user-select: none; }
354 /* .search-list-open is added to .comment-input while the @/# autocomplete is showing -- hides the submit button so it doesn't collide with the dropdown. */
355 .comment-input.search-list-open .reply-button-wrapper { display: none; }
356 .avatar-wrapper .activity-icon { position: absolute; top: 4px; inset-inline-end: 4px; }
357 .activity-icon { width: 8px; height: 8px; border-radius: 10px; }
358 .username .activity-icon { position: relative; top: 2px; display: none; margin-inline-end: 5px; }
359 .activity-icon.online { display: inline-block; background: lime; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); }
360 .hide-avatars .activity-icon.online { top: -1px; }
361 @media(max-width: 500px) { .activity-icon { width: 5px; height: 5px; } }
362

עיצוב וידג'ט ההערות האחרונות Internal Link

ווידגט תגובות אחרונות מציג רשימה של ההערות האחרונות באתר שלך או עבור עמוד מסוים. הוא כולל כותרת, תמונות פרופיל מעוגלות, תצוגות מקדימות של תגובות, תאריכים לחיצים שמקשרים ישירות להערה, וזיהוי אוטומטי של מצב כהה.

התקנה בסיסית

התקנת ווידגט תגובות אחרונות
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-recent-comments-v2.min.js"></script>
3<div id="fastcomments-widget-recent-comments"></div>
4<script>
5 FastCommentsRecentCommentsV2(document.getElementById('fastcomments-widget-recent-comments'), {
6 tenantId: 'demo'
7 });
8</script>
9

אפשרויות תצורה

  • tenantId (נדרש): מזהה ה-tenant של FastComments שלך
  • urlId (אופציונלי): סינון לעמוד יחיד. השאר null לכל הדפים
  • count (אופציונלי): מספר ההערות להצגה. ברירת המחדל היא 10
  • hasDarkBackground (אופציונלי): כפה עיצוב מצב כהה. אם לא מוגדר — ייתגלה אוטומטית לפי רקע העמוד

מבנה הווידגט

הווידגט מציג את מבנה ה-HTML הבא:

מבנה HTML של ווידגט תגובות אחרונות
Copy Copy
1
2<div class="fc-rc2">
3 <div class="fc-rc2-heading">Recent Comments</div>
4 <div class="fc-rc2-list">
5 <div class="fc-rc2-card">
6 <div class="fc-rc2-header">
7 <img class="fc-rc2-avatar" src="..." alt="Avatar" />
8 <div class="fc-rc2-meta">
9 <span class="fc-rc2-name">Username</span>
10 <a class="fc-rc2-date" href="...">2 hours ago</a>
11 </div>
12 </div>
13 <div class="fc-rc2-body">Comment preview...</div>
14 <a class="fc-rc2-page-link" href="...">Page Title</a>
15 </div>
16 </div>
17</div>
18

CSS ברירת המחדל

CSS ברירת המחדל של ווידגט תגובות אחרונות
Copy Copy
1
2.fc-rc2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-rc2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-rc2-card { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-rc2-card:last-child { border-bottom: none; }
15.fc-rc2-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
16.fc-rc2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
17.fc-rc2-name { font-size: 13px; font-weight: 600; }
18.fc-rc2-date { font-size: 11.5px; color: #999; text-decoration: none; }
19.fc-rc2-body { font-size: 14px; line-height: 1.55; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
20.fc-rc2-page-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #777; text-decoration: none; }
21.fc-rc2-page-link:hover { color: #0066cc; text-decoration: underline; }
22

דוגמאות להתאמה אישית

שינוי גודל תמונת הפרופיל

גודל תמונת פרופיל מותאם
Copy Copy
1
2.fc-rc2-avatar {
3 width: 40px !important;
4 height: 40px !important;
5}
6

הצג יותר שורות של תגובה

הצג יותר שורות של תגובה
Copy Copy
1
2.fc-rc2-body {
3 -webkit-line-clamp: 5 !important;
4}
5

הסר את גבול המכולה

הסר את גבול המכולה
Copy Copy
1
2.fc-rc2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

עיצוב וידג'ט הדפים המדוברים ביותר Internal Link

התוסף ווידג'ט "הדפים המדוברים ביותר" מציג רשימה מדורגת של הדפים שלך שקיבלו את מירב התגובות. הוא כולל כותרת, דירוגים ממוספרים, ספירות תגובות עם אייקונים, תאריכי פעילות אחרונים וזיהוי אוטומטי של מצב כהה.

התקנה בסיסית

התקנת ווידגט הדפים המדוברים ביותר
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-top-pages-v2.min.js"></script>
3<div id="fastcomments-widget-top-pages"></div>
4<script>
5 FastCommentsTopPagesV2(document.getElementById('fastcomments-widget-top-pages'), {
6 tenantId: 'demo'
7 });
8</script>
9

אפשרויות תצורה

  • tenantId (נדרש): מזהה ה-tenant של FastComments שלך
  • hasDarkBackground (אופציונלי): לכפות עיצוב למצב כהה. אם לא מוגדר, יזוהה אוטומטית מהרקע של הדף

מבנה הווידג'ט

הווידג'ט מציג את מבנה ה-HTML הבא:

מבנה ה-HTML של ווידגט הדפים המדוברים ביותר
Copy Copy
1
2<div class="fc-tp2">
3 <div class="fc-tp2-heading">Most Discussed Pages</div>
4 <div class="fc-tp2-list">
5 <div class="fc-tp2-item">
6 <div class="fc-tp2-rank">1</div>
7 <div class="fc-tp2-detail">
8 <a class="fc-tp2-title" href="...">Page Title</a>
9 <span class="fc-tp2-activity">Last activity Mar 21, 2026</span>
10 </div>
11 <div class="fc-tp2-count">42</div>
12 </div>
13 </div>
14</div>
15

הפניה ל-CSS ברירת מחדל

CSS ברירת המחדל של ווידגט הדפים המדוברים ביותר
Copy Copy
1
2.fc-tp2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-tp2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-tp2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-tp2-item:last-child { border-bottom: none; }
15.fc-tp2-rank { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: #f0f0f0; color: #888; }
16.fc-tp2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
17.fc-tp2-activity { font-size: 11px; color: #999; }
18.fc-tp2-count { font-size: 12px; font-weight: 600; color: #666; }
19

דוגמאות להתאמה אישית

הסר את תגי הדירוג

הסר תגי הדירוג
Copy Copy
1
2.fc-tp2-rank {
3 display: none !important;
4}
5

הסר את גבול המיכל

הסר את גבול המיכל
Copy Copy
1
2.fc-tp2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

עיצוב וידג'ט הדיונים האחרונים Internal Link

הווידג'ט Recent Discussions מציג רשימה של עמודים ממוינים לפי פעילות התגובות האחרונה. הוא כולל כותרת, תאריכי פעילות אחרונה, מספרי תגובות עם אייקונים, וזיהוי אוטומטי של מצב כהה.

התקנה בסיסית

הגדרת עיצוב לווידג'ט Recent Discussions
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-recent-discussions-v2.min.js"></script>
3<div id="fastcomments-widget-recent-discussions"></div>
4<script>
5 FastCommentsRecentDiscussionsV2(document.getElementById('fastcomments-widget-recent-discussions'), {
6 tenantId: 'demo'
7 });
8</script>
9

אפשרויות תצורה

  • tenantId (נדרש): מזהה ה-tenant שלך ב-FastComments
  • count (אופציונלי): מספר העמודים להצגה. ברירת המחדל היא 20, מקסימום 100
  • hasDarkBackground (אופציונלי): כופה עיצוב במצב כהה. מזוהה אוטומטית מרקע העמוד אם לא הוגדר

מבנה הווידג'ט

הווידג'ט מוצג עם מבנה ה-HTML הבא:

מבנה HTML של ווידג'ט Recent Discussions
Copy Copy
1
2<div class="fc-rd2">
3 <div class="fc-rd2-heading">Recent Discussions</div>
4 <div class="fc-rd2-list">
5 <div class="fc-rd2-item">
6 <div class="fc-rd2-detail">
7 <a class="fc-rd2-title" href="...">Page Title</a>
8 <span class="fc-rd2-activity">Last activity Mar 21, 2026</span>
9 </div>
10 <div class="fc-rd2-count">42</div>
11 </div>
12 </div>
13</div>
14

הפניה ל-CSS ברירת מחדל

CSS ברירת מחדל של ווידג'ט Recent Discussions
Copy Copy
1
2.fc-rd2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-rd2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-rd2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-rd2-item:last-child { border-bottom: none; }
15.fc-rd2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
16.fc-rd2-activity { font-size: 11px; color: #999; }
17.fc-rd2-count { font-size: 12px; font-weight: 600; color: #666; }
18

דוגמאות התאמה אישית

הסרת מסגרת המכולה

הסרת מסגרת המכולה
Copy Copy
1
2.fc-rd2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

צבע קישור מותאם אישית

צבע קישור מותאם אישית
Copy Copy
1
2a.fc-rd2-title:hover {
3 color: #e63946 !important;
4}
5

ספריות קצה קדמי אחרות Internal Link

כל ספריות ה-frontend הרשמיות של FastComments עבור React, Angular, Vue, וכדומה, מקבלות את פרמטר התצורה customCSS והן עטיפות סביב ספריית ה-vanilla js עם אותו מבנה HTML.

תרום למדריך זה