/*======C) CSS (add to your main stylesheet; uses your dark theme)===========*/ /* ==================== Section(Comments Badge CSS)Start ==================== */ .bd-comment-badge { display:inline-flex; align-items:center; gap:.35rem; background:#1c1c1c; color:#ddd; border:1px solid #2a2a2a; padding:.15rem .45rem; border-radius:999px; font-size:.85rem; line-height:1; } .bd-comment-badge .bd-comment-count { font-weight:700; } /* ==================== Section(Comments Badge CSS)End ==================== */ /* ==================== Section(Comments CSS)Start ==================== */ #product-comments { margin-top: 1rem; color: #eee; background: #121212; border: 1px solid #2a2a2a; border-radius: 10px; } #product-comments .bdc-header { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid #242424; } #product-comments .bdc-title { font-weight:700; } #product-comments .bdc-count { opacity:.8; font-size:.9rem; } #product-comments .bdc-list { padding: .5rem 1rem 1rem; } #product-comments .bdc-item { padding: .75rem 0; border-bottom: 1px solid #202020; } #product-comments .bdc-item:last-child { border-bottom: none; } #product-comments .bdc-head { display:flex; align-items:center; gap:.75rem; } #product-comments .bdc-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#333; } #product-comments .bdc-user { display:flex; flex-direction:column; } #product-comments .bdc-username { font-weight:600; } #product-comments .bdc-date { font-size:.85rem; opacity:.75; } #product-comments .bdc-hide { margin-left:auto; background:#2b2b2b; border:1px solid #3b3b3b; color:#ddd; padding:.25rem .5rem; border-radius:6px; cursor:pointer; } #product-comments .bdc-hide:hover { background:#3b3b3b; } #product-comments .bdc-body { margin-top:.35rem; line-height:1.4; white-space:pre-wrap; } #product-comments .bdc-formWrap { border-top:1px solid #242424; padding: .75rem 1rem; } #product-comments .bdc-form { display:flex; gap:.5rem; align-items:flex-start; } #product-comments .bdc-text { flex:1; min-height:58px; max-height:220px; background:#0f0f0f; border:1px solid #303030; color:#eee; border-radius:8px; padding:.6rem; } #product-comments .bdc-submit { background:#fe8f22; color:#111; border:none; font-weight:700; padding:.55rem .85rem; border-radius:8px; cursor:pointer; } #product-comments .bdc-submit:disabled { opacity:.6; cursor:not-allowed; } #product-comments .bdc-error { display:none; color:#ff6b6b; margin-top:.35rem; } /* ==================== Section(Comments CSS)End ==================== */ /* To add theme to any page …

…

*/ /* ==================== Section(Admin Theme Toggle CSS)Start ==================== */ .admin-comments .theme-toggle-btn{ padding:9px 14px; border-radius:10px; cursor:pointer; font-weight:600; border:1px solid var(--accent, #ff7a00); background:var(--accent, #ff7a00); color:#ffffff; } .admin-comments .theme-toggle-btn:hover{ background:var(--accent-hover, #ff9433); } /* ==================== Section(Admin Theme Toggle CSS)End ====================== */ /* ==================== Section(Comments Dark Theme Overrides)Start ==================== */ /* Activate by adding class="theme-dark" on or a wrapper; or add class on the widget div itself */ .theme-dark #product-comments, #product-comments.theme-dark{ --bd-bg:#0d0f12; --bd-panel:#111318; --bd-panel-2:#151922; --bd-text:#ffffff; --bd-muted:#a7b0b8; --bd-border:#232833; --bd-accent:#ff7a00; /* orange buttons */ --bd-accent-hover:#ff9433; --bd-link:#b8ff33; /* lime links */ --bd-link-hover:#d9ff7a; color:var(--bd-text); background:var(--bd-panel); border:1px solid var(--bd-border); border-radius:12px; } /* Header + count */ .theme-dark #product-comments .bdc-header, #product-comments.theme-dark .bdc-header{ background:var(--bd-panel-2); color:var(--bd-text); border-bottom:1px solid var(--bd-border); } .theme-dark #product-comments .bdc-title h2, #product-comments.theme-dark .bdc-title h2{ color:var(--bd-text); } /* List items */ .theme-dark #product-comments .bdc-item, #product-comments.theme-dark .bdc-item{ border-bottom:1px solid var(--bd-border); color:var(--bd-text); } .theme-dark #product-comments .bdc-username, #product-comments.theme-dark .bdc-username{ color:var(--bd-text); } .theme-dark #product-comments .bdc-date, #product-comments.theme-dark .bdc-date{ color:var(--bd-muted); } /* Form */ .theme-dark #product-comments .bdc-form .bdc-text, #product-comments.theme-dark .bdc-form .bdc-text{ background:var(--bd-panel-2); color:var(--bd-text); border:1px solid var(--bd-border); border-radius:10px; } .theme-dark #product-comments .bdc-form .bdc-text:focus, #product-comments.theme-dark .bdc-form .bdc-text:focus{ border-color:var(--bd-link); box-shadow:0 0 0 3px color-mix(in srgb, var(--bd-link) 35%, transparent); } /* Buttons */ .theme-dark #product-comments .bdc-submit, #product-comments.theme-dark .bdc-submit, .theme-dark #product-comments .bdc-hide, #product-comments.theme-dark .bdc-hide{ background:var(--bd-accent); color:#ffffff; border:1px solid var(--bd-accent); border-radius:10px; } .theme-dark #product-comments .bdc-submit:hover, #product-comments.theme-dark .bdc-submit:hover, .theme-dark #product-comments .bdc-hide:hover, #product-comments.theme-dark .bdc-hide:hover{ background:var(--bd-accent-hover); } /* Links inside widget (if any) */ .theme-dark #product-comments a, #product-comments.theme-dark a{ color:var(--bd-link); } .theme-dark #product-comments a:hover, #product-comments.theme-dark a:hover{ color:var(--bd-link-hover); } /* Error text */ .theme-dark #product-comments .bdc-error, #product-comments.theme-dark .bdc-error{ color:#ffd1d1; /* readable on dark */ } /* ==================== Section(Comments Dark Theme Overrides)End ====================== */