/* source: comments.php */ :root { --cmt-bg: var(--bg-card, #fff); --cmt-bg-soft: var(--bg-light, #f7f8fa); --cmt-bg-hover: #f3f5f8; --cmt-border: var(--border-color, rgba(0,0,0,.07)); --cmt-border-soft: rgba(0,0,0,.055); --cmt-text: var(--text-primary, #1d2129); --cmt-text-2: var(--text-secondary, #4b5563); --cmt-muted: var(--text-muted, #89919d); --cmt-theme: var(--theme-color, #eb144c); --cmt-theme-rgb: var(--theme-color-rgb, 235,20,76); --cmt-soft: rgba(var(--cmt-theme-rgb), .08); --cmt-soft-2: rgba(var(--cmt-theme-rgb), .13); --cmt-radius: 15px; --cmt-radius-sm: 10px; --cmt-shadow: 0 3px 18px rgba(0,0,0,.035); --cmt-input: var(--input-bg, #f8f9fb); --cmt-input-border: var(--input-border, #e2e5e9); } body.dark-mode { --cmt-bg: #171a21; --cmt-bg-soft: #1d2129; --cmt-bg-hover: #252a33; --cmt-border: rgba(255,255,255,.08); --cmt-border-soft: rgba(255,255,255,.065); --cmt-text: #eef0f3; --cmt-text-2: #c8ccd3; --cmt-muted: #858c97; --cmt-input: #1d2129; --cmt-input-border: rgba(255,255,255,.10); --cmt-shadow: 0 3px 18px rgba(0,0,0,.22); } .comments-section { width: 100%; box-sizing: border-box; background: var(--cmt-bg); border: 1px solid var(--cmt-border); border-radius: var(--cmt-radius); padding: 18px; margin: 0 auto 20px; box-shadow: var(--cmt-shadow); direction: rtl; text-align: right; } .comments-section:not(.full-width) { max-width: 880px; } .comments-header { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid var(--cmt-border); } .comments-header-icon { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; flex: 0 0 39px; color: #fff; background: linear-gradient( 135deg, var(--cmt-theme), rgba(var(--cmt-theme-rgb), .72) ); border-radius: 11px; box-shadow: 0 5px 13px rgba(var(--cmt-theme-rgb), .20); } .comments-header-icon svg { width: 19px; height: 19px; fill: currentColor; } .comments-header-content { min-width: 0; } .comments-header-title { display: block; margin: 0; color: var(--cmt-text); font-size: .98rem; font-weight: 800; line-height: 1.5; } .comments-header-subtitle { display: block; margin-top: 2px; color: var(--cmt-muted); font-size: .67rem; font-weight: 500; } .comments-header-count { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 8px; margin-right: auto; color: var(--cmt-theme); background: var(--cmt-soft); border-radius: 8px; font-size: .68rem; font-weight: 800; } .comment-notice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 15px; color: var(--cmt-muted); background: var(--cmt-bg-soft); border: 1px solid var(--cmt-border); border-radius: 10px; font-size: .79rem; font-weight: 600; line-height: 1.7; } .comment-notice svg { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor; } .comment-notice.notice-password { color: #c53030; background: rgba(197,48,48,.07); border-color: rgba(197,48,48,.15); } body.dark-mode .comment-notice.notice-password { color: #fc8181; background: rgba(252,129,129,.08); border-color: rgba(252,129,129,.16); } .comments-list, .comments-list ul, .comments-list ol { list-style: none; margin: 0; padding: 0; } .comments-list { margin-bottom: 18px; } .comments-list > li.comment { position: relative; margin-bottom: 9px; background: var(--cmt-bg-soft); border: 1px solid var(--cmt-border-soft); border-radius: 14px; overflow: hidden; } .comment-body { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; } .comment-avatar-letter { position: relative; display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; flex: 0 0 41px; border-radius: 50%; color: #fff; font-size: .95rem; font-weight: 800; line-height: 1; overflow: hidden; box-shadow: 0 3px 9px rgba(0,0,0,.12); } .comment-avatar-letter::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,.25), transparent 55% ); pointer-events: none; } .comment-meta { flex: 1; min-width: 0; } .comment-author-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--cmt-text); font-size: .84rem; font-weight: 800; line-height: 1.5; } .comment-date { color: var(--cmt-muted); font-size: .64rem; font-weight: 500; } .comment-reply-to { display: inline-flex; align-items: center; padding: 2px 6px; color: var(--cmt-muted); background: rgba(0,0,0,.035); border-radius: 6px; font-size: .61rem; font-weight: 500; line-height: 1.6; } body.dark-mode .comment-reply-to { background: rgba(255,255,255,.055); } .comment-reply-to::before { content: "↩"; margin-left: 4px; font-size: .66rem; } .comment-text { margin-top: 7px; color: var(--cmt-text-2); font-size: .81rem; line-height: 1.9; word-break: break-word; } .comment-text p { margin: 0 0 6px; } .comment-text p:last-child { margin-bottom: 0; } .comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .comment-vote-box { display: flex; align-items: center; gap: 3px; } .comment-vote-btn, .comment-reply-link, .reply-link a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 5px 9px; background: transparent; color: var(--cmt-muted); border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: .67rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; } .comment-vote-btn svg, .comment-reply-link svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; } .comment-vote-btn:hover, .comment-reply-link:hover, .reply-link a:hover { color: var(--cmt-theme); background: var(--cmt-soft); text-decoration: none; } .comment-vote-btn.is-active { color: var(--cmt-theme); background: var(--cmt-soft); border-color: rgba(var(--cmt-theme-rgb), .10); } .comment-vote-btn .vote-count { min-width: 12px; text-align: center; font-weight: 700; } .comments-list ul.children { margin: 0; padding: 3px 0; background: rgba(0,0,0,.018); border-top: 1px solid var(--cmt-border); } body.dark-mode .comments-list ul.children { background: rgba(255,255,255,.018); } .comments-list ul.children li.comment { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; } .comments-list ul.children li.comment .comment-body { position: relative; padding: 10px 15px 10px 25px; } .comments-list ul.children li.comment .comment-avatar-letter { width: 33px; height: 33px; flex-basis: 33px; font-size: .78rem; } .comments-list ul.children li.comment .comment-author-name { font-size: .77rem; } .comments-list ul.children li.comment .comment-text { font-size: .76rem; } .comments-list ul.children li.comment .comment-body::before { content: ""; position: absolute; right: 31px; top: 0; bottom: 0; width: 1px; background: var(--cmt-border); } .comments-list ul.children li.comment:first-child .comment-body::before { top: 50%; } .comments-list ul.children li.comment:last-child .comment-body::before { bottom: 50%; } .comments-list ul.children li.comment:only-child .comment-body::before { display: none; } .comments-load-more { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; padding: 10px 14px; color: var(--cmt-text); background: var(--cmt-bg-soft); border: 1px solid var(--cmt-border); border-radius: 10px; font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; } .comments-load-more:hover { color: var(--cmt-theme); background: var(--cmt-soft); border-color: rgba(var(--cmt-theme-rgb), .20); } .comments-load-more svg { width: 13px; height: 13px; fill: currentColor; } .load-more-count { padding: 3px 6px; color: var(--cmt-muted); background: var(--cmt-bg); border-radius: 6px; font-size: .61rem; font-weight: 600; } .comments-list li.apkt-hidden { display: none !important; } #commentform { direction: rtl; text-align: right; margin-top: 18px; padding: 16px; background: var(--cmt-bg-soft); border: 1px solid var(--cmt-border); border-radius: 13px; } .apkt-comment-form-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--cmt-text); font-size: .88rem; font-weight: 800; } .apkt-comment-form-title-icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; color: var(--cmt-theme); background: var(--cmt-soft); border-radius: 8px; } .apkt-comment-form-title-icon svg { width: 15px; height: 15px; fill: currentColor; } .comment-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; } .comment-form-group { margin-bottom: 9px; } .comment-input, .comment-textarea { display: block; width: 100%; box-sizing: border-box; padding: 11px 12px; color: var(--cmt-text); background: var(--cmt-input); border: 1px solid var(--cmt-input-border); border-radius: 9px; outline: none; font-family: inherit; font-size: .79rem; line-height: 1.6; transition: border-color .2s ease, box-shadow .2s ease; } .comment-input:focus, .comment-textarea:focus { border-color: var(--cmt-theme); box-shadow: 0 0 0 3px var(--cmt-soft); } .comment-input::placeholder, .comment-textarea::placeholder { color: var(--cmt-muted); } .comment-textarea { min-height: 105px; resize: vertical; } .apkt-captcha-wrapper { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 1px 0 11px; direction: ltr !important; text-align: left !important; box-sizing: border-box; } .apkt-captcha-box { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 46px; max-width: 100%; padding: 7px; box-sizing: border-box; background: linear-gradient( 135deg, var(--cmt-soft), rgba(var(--cmt-theme-rgb), .025) ); border: 1px solid rgba( var(--cmt-theme-rgb), .14 ); border-radius: 11px; direction: ltr !important; text-align: left !important; transition: border-color .2s ease, background .2s ease, opacity .2s ease; } .apkt-captcha-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; color: var(--cmt-theme); background: var(--cmt-bg); border: 1px solid var(--cmt-border-soft); border-radius: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.035); } .apkt-captcha-icon svg { width: 14px; height: 14px; fill: currentColor; } .apkt-captcha-question { display: inline-flex; align-items: center; justify-content: center; width: 91px; min-width: 91px; height: 30px; padding: 0 7px; box-sizing: border-box; color: var(--cmt-text); background: var(--cmt-bg); border: 1px solid var(--cmt-border-soft); border-radius: 8px; direction: ltr !important; unicode-bidi: isolate; text-align: center; white-space: nowrap; font-family: Arial, sans-serif; font-size: .76rem; font-weight: 800; letter-spacing: .4px; } .apkt-captcha-input { display: inline-block; width: 58px; min-width: 58px; height: 30px; padding: 5px 6px; box-sizing: border-box; color: var(--cmt-text); background: var(--cmt-bg); border: 1px solid var(--cmt-border); border-radius: 8px; outline: none; font-family: Arial, sans-serif; font-size: .76rem; font-weight: 700; text-align: center; direction: ltr !important; unicode-bidi: isolate; transition: border-color .2s ease, box-shadow .2s ease; } .apkt-captcha-input::placeholder { color: var(--cmt-muted); } .apkt-captcha-input:focus { border-color: var(--cmt-theme); box-shadow: 0 0 0 3px var(--cmt-soft); } .apkt-captcha-refresh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; color: var(--cmt-muted); background: var(--cmt-bg); border: 1px solid var(--cmt-border); border-radius: 8px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } .apkt-captcha-refresh:hover { color: var(--cmt-theme); background: var(--cmt-soft); border-color: rgba(var(--cmt-theme-rgb), .25); } .apkt-captcha-refresh:active { transform: rotate(-25deg); } .apkt-captcha-refresh svg { width: 13px; height: 13px; fill: currentColor; } .apkt-captcha-loading { opacity: .55; pointer-events: none; } .comment-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 41px; padding: 9px 19px; color: #fff !important; background: var(--cmt-theme); border: 0; border-radius: 9px; font-family: inherit; font-size: .77rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba( var(--cmt-theme-rgb), .18 ); } .comment-submit-btn:hover { background: var(--theme-color-safe, #d11142); } .comment-submit-btn:active { transform: translateY(1px); } .comment-submit-btn svg { width: 14px; height: 14px; fill: currentColor; } .comment-pagination { margin-top: 15px; text-align: center; } .comment-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 33px; height: 33px; margin: 0 2px; padding: 0 7px; color: var(--cmt-text-2); background: var(--cmt-bg-soft); border: 1px solid var(--cmt-border); border-radius: 8px; font-size: .69rem; font-weight: 600; text-decoration: none; } .comment-pagination .page-numbers:hover, .comment-pagination .page-numbers.current { color: #fff; background: var(--cmt-theme); border-color: var(--cmt-theme); } .comment-vote-btn:focus-visible, .comment-reply-link:focus-visible, .reply-link a:focus-visible, .comments-section input:focus-visible, .comments-section textarea:focus-visible, .comments-section button:focus-visible { outline: 2px solid var(--cmt-theme) !important; outline-offset: 2px; } @media (max-width: 767px) { .comments-section { padding: 13px 10px; border-radius: 12px; } .comments-header { gap: 9px; margin-bottom: 14px; padding-bottom: 12px; } .comments-header-icon { width: 35px; height: 35px; flex-basis: 35px; border-radius: 9px; } .comments-header-icon svg { width: 17px; height: 17px; } .comments-header-title { font-size: .86rem; } .comments-header-subtitle { font-size: .61rem; } .comment-body { gap: 9px; padding: 11px; } .comment-avatar-letter { width: 37px; height: 37px; flex-basis: 37px; font-size: .86rem; } .comment-author-name { font-size: .78rem; } .comment-date { font-size: .60rem; } .comment-text { font-size: .76rem; line-height: 1.85; } .comment-form-row { grid-template-columns: 1fr; gap: 0; } #commentform { padding: 12px; } .apkt-captcha-wrapper { justify-content: flex-start; direction: ltr !important; } .apkt-captcha-box { width: auto; max-width: 100%; flex-wrap: nowrap; gap: 6px; padding: 7px; direction: ltr !important; } .apkt-captcha-question { width: 88px; min-width: 88px; } .apkt-captcha-input { width: 55px; min-width: 55px; } .comment-submit-btn { width: 100%; } .comments-list ul.children li.comment .comment-body { padding: 9px 9px 9px 14px; } } @media (max-width: 380px) { .comments-section { padding: 11px 8px; } .comment-body { padding: 9px; } .comment-avatar-letter { width: 34px; height: 34px; flex-basis: 34px; } .comment-text { font-size: .73rem; } .apkt-captcha-box { gap: 5px; padding: 6px; } .apkt-captcha-icon { width: 28px; height: 28px; flex-basis: 28px; } .apkt-captcha-question { width: 82px; min-width: 82px; font-size: .70rem; } .apkt-captcha-input { width: 52px; min-width: 52px; } .apkt-captcha-refresh { width: 28px; height: 28px; flex-basis: 28px; } } @media (prefers-reduced-motion: reduce) { .comment-submit-btn, .comment-input, .comment-textarea, .apkt-captcha-box, .apkt-captcha-refresh { transition: none !important; } }