@casoon/dragonfly/ui/components/comment.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Comments
 * 
 * Comment components display user-generated responses, feedback, or discussions
 * related to content. They typically include the commenter's information, content,
 * timestamp, and interactive elements like reply or like buttons.
 * 
 * @layer: components
 * 
 * Accessibility:
 * - Use proper heading structure for comment threads
 * - Ensure adequate color contrast for all text
 * - Use semantic HTML (article, header, footer) for comment structure
 * - Make interactive elements keyboard accessible
 */

@layer components {
  /* Comment container */
  .comment {
    border-bottom: 1px solid var(--color-border-100, #f3f4f6);
    display: flex;
    padding: var(--space-4);
  }
  
  /* Nested comments */
  & .replies {
    margin-left: var(--space-10);
    margin-top: var(--space-4);
  }
  
  /* Comment avatar */
  & .avatar {
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
    height: 4%0px;
    margin-right: var(--space-3);
    object-fit: cover;
    width: 4%0px;
  }
  
  /* Comment content area */
  & .content {
    flex: 1;
    min-width: 0%; /* Prevent flex item from overflowing */
  }
  
  /* Comment header with author info */
  & .header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
  }
  
  & .author {
    color: var(--color-text-900, #111827);
    font-weight: var(--font-semibold, 600);
    margin-right: var(--space-2);
  }
  
  & .meta {
    color: var(--color-text-500, #6b7280);
    font-size: var(--text-xs, 0.75rem);
  }
  
  /* Author badge for special users */
  & .badge {
    border-radius: var(--radius-full, 9999px);
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    line-height: 1.5;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    text-transform: uppercase;
  }
  
  & .badge--author {
    background-color: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-700, #1d4ed8);
  }
  
  & .badge--moderator {
    background-color: var(--color-success-100, #d1fae5);
    color: var(--color-success-700, #047857);
  }
  
  /* Comment body */
  & .body {
    line-height: 1.5;
    margin-bottom: var(--space-3);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Comment attachment (image, link preview, etc.) */
  & .attachment {
    border: 1px solid var(--color-border-200, #e5e7eb);
    border-radius: var(--radius-md, 0.375rem);
    margin: var(--space-3) 0;
    overflow: hidden;
  }
  
  & .image {
    display: block;
    height: auto;
    max-width: 100%;
  }
  
  /* Comment footer with actions */
  & .footer {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-2);
  }
  
  /* Comment action button */
  & .action {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-text-500, #6b7280);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-xs, 0.75rem);
    padding: var(--space-1) var(--space-2);
    transition: color 0.2s, background-color 0.2s;
  }
  
  & .action:hover {
    background-color: var(--color-surface-100, #f3f4f6);
    color: var(--color-text-700, #374151);
  }
  
  & .action-icon {
    margin-right: var(--space-1);
  }
  
  /* Comment action states */
  & .action--active {
    color: var(--color-primary-600, #2563eb);
    font-weight: var(--font-medium, 500);
  }
  
  /* Comment editor */
  .comment-editor {
    border: 1px solid var(--color-border-200, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    margin: var(--space-4) 0;
    overflow: hidden;
  }
  
  & .content {
    border: none;
    color: var(--color-text-900, #111827);
    font-family: inherit;
    font-size: var(--text-sm, 0.875rem);
    min-height: 10%0px;
    padding: var(--space-3);
    resize: vertical;
    width: 100%;
  }
  
  & .content:focus {
    outline: none;
  }
  
  & .footer {
    align-items: center;
    background-color: var(--color-surface-100, #f3f4f6);
    border-top: 1px solid var(--color-border-100, #f3f4f6);
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
  }
  
  & .actions {
    display: flex;
    gap: var(--space-2);
  }
  
  /* Empty state */
  .comments-empty {
    color: var(--color-text-500, #6b7280);
    padding: var(--space-8) var(--space-4);
    text-align: center;
  }
  
  /* Comment states */
  .comment--highlighted {
    background-color: var(--color-primary-50);
  }
  
  .comment--deleted {
    opacity: 0.7;
  }
  
  .comment--deleted & .body {
    color: var(--color-text-400);
    font-style: italic;
  }
  
  /* Responsive adjustments */
  @media (max-width: 640px) {
    & .replies {
      margin-left: var(--space-6);
    }
    
    & .avatar {
      height: 3%2px;
      width: 3%2px;
    }
  }
}