@svar-ui/react-comments/dist/index.css

Lightweight React component for adding a modern-looking comments section to your app

.wx-user.wx-cyzBpibr{font-size:12px;font-weight:500;line-height:12px;border-radius:50%;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:#ca9cec;color:var(--wx-color-font)}.wx-user.wx-normal.wx-cyzBpibr{width:36px;height:36px;font-size:var(--wx-font-size)}.wx-user.wx-small.wx-cyzBpibr{width:24px;height:24px;font-size:var(--wx-font-size-sm)}.wx-user.wx-cyzBpibr img{display:block;width:100%;height:100%;object-fit:cover}.wx-user.wx-cyzBpibr:not(:first-child){margin-left:-15px}.wx-user.wx-comments-avatar-color-light.wx-cyzBpibr{color:var(--wx-color-primary-font)}.wx-user.wx-comments-avatar-color-dark.wx-cyzBpibr{color:var(--wx-avatar-color-dark)}.wx-comments-textarea.wx-v2rD0VHO{width:100%;background-color:inherit;display:flex;flex-direction:column;gap:12px}.wx-textarea-wrapper.wx-v2rD0VHO{position:relative;display:flex;gap:8px}.wx-comments-textarea.wx-flow .wx-textarea-avatar.wx-v2rD0VHO{margin-left:20px}.wx-textarea-bottombar.wx-v2rD0VHO{text-align:right}.wx-textarea-bottombar button{padding:6px 16px;font-weight:600;line-height:20px}.wx-bubble.wx-aluyyvxH{width:100%;display:flex;justify-content:end}.wx-bubble.wx-owned.wx-aluyyvxH{justify-content:start}.wx-bubble-wrapper.wx-aluyyvxH{width:65%;display:flex;justify-content:end;gap:8px}.wx-aluyyvxH .wx-owned .wx-bubble-wrapper{width:calc(65% + 28px);justify-content:start}.wx-author-name.wx-aluyyvxH{margin-left:auto}.wx-aluyyvxH .wx-owned .wx-author-name{margin-left:0}.wx-message.wx-aluyyvxH{background-color:var(--wx-comments-msg-background);padding:8px 12px;white-space:pre-wrap;line-height:24px;border-radius:6px 0 6px 6px;width:100%;display:flex;flex-direction:column}.wx-aluyyvxH .wx-owned .wx-message{background-color:var(--wx-comments-msg-background-agent);border-radius:0 6px 6px;width:100%}.wx-author-name.wx-aluyyvxH{font-weight:600;font-size:14px;line-height:24px}.wx-agent-message.wx-aluyyvxH{display:flex;align-items:flex-end;gap:4px;cursor:pointer}.wx-menu-icon.wx-aluyyvxH{opacity:0;height:24px;color:#9fa1ae;cursor:pointer;height:100%}.wx-aluyyvxH .wx-menu-icon i{font-size:24px;line-height:24px}.wx-aluyyvxH .wx-menu-icon:hover{color:var(--wx-color-primary)}.wx-aluyyvxH .wx-agent-message:hover .wx-menu-icon{opacity:1;transition:all .2s linear}.wx-main-bubble.wx-aluyyvxH{display:flex;flex-direction:column;gap:4px;width:100%}.wx-avatar.wx-aluyyvxH{height:32px;width:32px}.wx-bubble.wx-aluyyvxH:not(.wx-owned) .wx-bubble-wrapper{flex-direction:row-reverse}.wx-comment-date.wx-aluyyvxH{font-size:var(--wx-font-size-sm);color:var(--wx-color-font-alt);display:flex;flex-direction:row-reverse}.wx-flow.wx-N2LqQbZL{width:100%;padding:16px 20px;border-radius:6px}.wx-flow.wx-owned.wx-N2LqQbZL{background-color:var(--wx-comments-msg-background-agent)}.wx-flow.wx-N2LqQbZL:hover .wx-menu-icon.wx-N2LqQbZL{opacity:1;transition:all .2s linear}.wx-flow-toolbar.wx-N2LqQbZL{width:100%;display:flex;gap:8px}.wx-message.wx-N2LqQbZL{margin-left:32px;line-height:24px;white-space:pre-wrap}.wx-author-name.wx-N2LqQbZL{font-weight:600;font-size:14px;line-height:24px}.wx-menu-icon.wx-N2LqQbZL{color:#9fa1ae;cursor:pointer;margin-left:auto;opacity:0;height:24px}.wx-menu-icon.wx-N2LqQbZL:hover{color:var(--wx-color-primary)}.wx-menu-icon.wx-N2LqQbZL i.wx-N2LqQbZL{font-size:24px;line-height:24px}.wx-comment-date.wx-N2LqQbZL{margin-left:32px;font-size:var(--wx-font-size-sm);color:var(--wx-color-font-alt)}.wx-messages.wx-6HAxmtjJ{padding:10px 0;display:flex;flex-direction:column}.wx-messages.wx-bubbles.wx-6HAxmtjJ{gap:24px}.wx-messages.wx-cards.wx-6HAxmtjJ{gap:16px}.wx-messages.wx-blocks.wx-6HAxmtjJ{gap:24px}.wx-comments-list.wx-8ZGHQX6e{height:100%;width:100%;display:flex;flex-direction:column}.wx-list.wx-8ZGHQX6e{display:flex;flex-direction:column;margin-bottom:4px;overflow-y:auto;flex:1}.wx-willow-theme{--wx-theme-name: willow;--wx-comments-msg-background: #d5eaf7;--wx-comments-msg-background-agent: #f4f5f9;--wx-avatar-color-dark: #2a2b2d}.wx-willow-dark-theme{--wx-theme-name: willow-dark;--wx-comments-msg-background: rgba(122, 102, 235, .2);--wx-comments-msg-background-agent: #384047;--wx-avatar-color-dark: #2a2b2d}