UNPKG

@pulseui/core

Version:

A production-ready, headless React UI component library offering maximum styling flexibility with robust TypeScript support and comprehensive accessibility features

1 lines 5.29 kB
.strive-comment-system{--strive-comment-border-color:#e0e0e0;--strive-comment-background:#fff;--strive-comment-hover-background:#f9f9f9;--strive-comment-text-color:#333;--strive-comment-meta-color:#666;--strive-comment-highlight-color:#06c;--strive-comment-avatar-size:40px;--strive-comment-spacing:16px;--strive-comment-border-radius:4px;--strive-comment-thread-indent:24px;color:var(--strive-comment-text-color);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5}.strive-comment-system-list{display:flex;flex-direction:column;gap:var(--strive-comment-spacing)}.strive-comment-system-thread{margin-bottom:var(--strive-comment-spacing)}.strive-comment-system-replies{border-left:2px solid var(--strive-comment-border-color);margin-left:var(--strive-comment-thread-indent);padding-left:var(--strive-comment-spacing)}.strive-comment-system-item{background-color:var(--strive-comment-background);border:1px solid var(--strive-comment-border-color);border-radius:var(--strive-comment-border-radius);display:flex;gap:var(--strive-comment-spacing);padding:var(--strive-comment-spacing)}.strive-comment-system-item:hover{background-color:var(--strive-comment-hover-background)}.strive-comment-system-item.pinned{border-left:4px solid var(--strive-comment-highlight-color)}.strive-comment-system-item.deleted{opacity:.7}.strive-comment-system-avatar,.strive-comment-system-avatar-fallback{border-radius:50%;height:var(--strive-comment-avatar-size);-o-object-fit:cover;object-fit:cover;width:var(--strive-comment-avatar-size)}.strive-comment-system-avatar-fallback{align-items:center;background-color:var(--strive-comment-highlight-color);color:#fff;display:flex;font-weight:700;justify-content:center}.strive-comment-system-item-body{flex:1}.strive-comment-system-author{font-weight:700;margin-bottom:4px}.strive-comment-system-author-role{color:var(--strive-comment-meta-color);font-size:.8em;margin-left:8px}.strive-comment-system-author-you{color:var(--strive-comment-highlight-color);font-size:.8em;margin-left:8px}.strive-comment-system-content{margin-bottom:var(--strive-comment-spacing)}.strive-comment-system-metadata{align-items:center;color:var(--strive-comment-meta-color);display:flex;font-size:.8em;margin-bottom:8px}.strive-comment-system-edited{margin-left:8px}.strive-comment-system-timestamp{color:var(--strive-comment-meta-color)}.strive-comment-system-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.strive-comment-system-reaction{align-items:center;background:transparent;border:1px solid var(--strive-comment-border-color);border-radius:16px;cursor:pointer;display:flex;gap:4px;padding:4px 8px;transition:background-color .2s}.strive-comment-system-reaction:hover{background-color:var(--strive-comment-hover-background)}.strive-comment-system-reaction.active{background-color:rgba(0,102,204,.1);border-color:var(--strive-comment-highlight-color)}.strive-comment-system-actions{display:flex;flex-wrap:wrap;gap:8px}.strive-comment-system-action{background:transparent;border:none;border-radius:var(--strive-comment-border-radius);color:var(--strive-comment-meta-color);cursor:pointer;font-size:.9em;padding:4px 8px}.strive-comment-system-action:hover{background-color:var(--strive-comment-hover-background);color:var(--strive-comment-highlight-color)}.strive-comment-system-form{border:1px solid var(--strive-comment-border-color);border-radius:var(--strive-comment-border-radius);margin:var(--strive-comment-spacing) 0;padding:var(--strive-comment-spacing)}.strive-comment-system-form-editing,.strive-comment-system-form-replying-to{align-items:center;background-color:var(--strive-comment-hover-background);border-radius:var(--strive-comment-border-radius);display:flex;font-size:.9em;justify-content:space-between;margin-bottom:8px;padding:8px}.strive-comment-system-form-textarea{border:1px solid var(--strive-comment-border-color);border-radius:var(--strive-comment-border-radius);font-family:inherit;margin-bottom:12px;min-height:80px;padding:12px;resize:vertical;width:100%}.strive-comment-system-form-actions{display:flex;gap:8px;justify-content:flex-end}.strive-comment-system-form-cancel,.strive-comment-system-form-submit{border-radius:var(--strive-comment-border-radius);cursor:pointer;padding:8px 16px}.strive-comment-system-form-submit{background-color:var(--strive-comment-highlight-color);border:none;color:#fff}.strive-comment-system-form-submit:disabled{cursor:not-allowed;opacity:.5}.strive-comment-system-form-cancel{background-color:transparent;border:1px solid var(--strive-comment-border-color)}.strive-comment-system-sort{margin-bottom:var(--strive-comment-spacing);padding:8px}.strive-comment-system-load-more,.strive-comment-system-sort{border:1px solid var(--strive-comment-border-color);border-radius:var(--strive-comment-border-radius)}.strive-comment-system-load-more{background-color:transparent;cursor:pointer;margin-top:var(--strive-comment-spacing);padding:8px 16px;width:100%}.strive-comment-system-load-more:hover{background-color:var(--strive-comment-hover-background)}.strive-comment-system-empty,.strive-comment-system-loading{color:var(--strive-comment-meta-color);padding:var(--strive-comment-spacing);text-align:center}