Corp/backend/static/css/components/feed-cards.css

/**
 * Feed Cards Component
 * 
 * Переиспользуемые стили для карточек в ленте новостей, документов и других списков
 * Использует CSS переменные из variables.css
 * 
 * Использование:
 * <link rel="stylesheet" href="{% static 'css/components/feed-cards.css' %}">
 */

/* ===== Заголовок секции ленты ===== */
.feed-header {
  display: flex;
  align-items: center;
  gap: var(--gap-component);      /* 16px - унифицировано */
  margin-bottom: var(--space-3);  /* 24px - между секциями */
}

.feed-header .title {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0;
}

/* ===== Контейнер потока карточек ===== */
.feed-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ===== Базовая карточка ===== */
.feed-card {
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 10%);
  border-radius: var(--feed-radius, 18px);
  background: var(--bs-body-bg);
  box-shadow: var(--feed-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.feed-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* ===== Шапка карточки (аватар + мета-информация) ===== */
.feed-hd {
  display: flex;
  align-items: center;
  gap: var(--gap-component);                 /* 16px - унифицировано */
  padding: var(--card-padding);              /* 16px со всех сторон */
  padding-bottom: var(--space-1);            /* 8px снизу для компактности */
}

/* Аватар */
.feed-ava {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  background: var(--bs-tertiary-bg);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.feed-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Мета-информация (имя автора, дата и т.д.) */
.feed-meta {
  line-height: 1.2;
  flex: 1;
  min-width: 0; /* для корректного text-overflow */
}

.feed-author {
  font-weight: 700;
  color: var(--bs-body-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-sub {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Значок закрепления */
.feed-pin {
  margin-left: auto;
  font-size: 0.75rem;
  padding: var(--space-1);
  border-radius: 999px;
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffe69c;
  flex-shrink: 0;
}

[data-bs-theme="dark"] .feed-pin {
  background: #3b2e04;
  color: #ffda6a;
  border-color: #4f3f0a;
}

/* ===== Тело карточки ===== */
.feed-body {
  padding: var(--space-1) var(--card-padding);  /* 8px верх/низ, 16px лево/право */
  padding-bottom: var(--space-1);               /* 8px снизу */
  position: relative;
}

.feed-title {
  font: 700 1.3rem/1.5 var(--bs-body-font-family);
  margin: var(--space-1) 0;  /* 8px сверху/снизу */
  color: #4b4b4b;
}

[data-bs-theme="dark"] .feed-title {
  color: var(--bs-body-color);
}

.feed-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bs-body-color);
  margin: 0;
}

/* ===== Изображение в карточке ===== */
.feed-img {
  position: relative;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.feed-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ===== Действия (лайки, комментарии и т.д.) ===== */
.feed-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);                /* 8px между кнопками */
  padding: var(--card-padding);       /* 16px со всех сторон */
  padding-top: var(--space-2);        /* 16px сверху */
  border-top: 1px solid var(--bs-border-color);
  position: relative;
  z-index: 2;
}

.feed-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);      /* 8px между иконкой и текстом */
  padding: var(--space-1);  /* 8px внутри кнопки */
  border-radius: var(--radius-md, 10px);
  background: transparent;
  border: none;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.feed-action:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.feed-action.active {
  color: var(--bs-primary);
  font-weight: 600;
}

.feed-action i {
  font-size: 1rem;
}

/* ===== Футер карточки ===== */
.feed-footer {
  padding: var(--space-2) var(--card-padding);  /* 16px сверху/снизу, 16px лево/право */
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

/* ===== Вариации карточек ===== */

/* Компактная карточка */
.feed-card.compact .feed-hd {
  padding: var(--space-1) var(--card-padding-sm);  /* 8px сверху/снизу, 8px лево/право */
}

.feed-card.compact .feed-body {
  padding: var(--space-1) var(--card-padding-sm);  /* 8px со всех сторон */
}

.feed-card.compact .feed-ava {
  width: 32px;
  height: 32px;
}

/* Карточка без границ (для списков) */
.feed-card.borderless {
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.feed-card.borderless:hover {
  transform: none;
  box-shadow: none;
  background: var(--bs-tertiary-bg);
}

/* Карточка с выделением (например, непрочитанное) */
.feed-card.highlighted {
  border-left: 3px solid var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary), transparent 95%);
}

/* ===== Адаптивность ===== */
@media (max-width: 576px) {
  .feed-header {
    gap: var(--space-2);  /* 16px остается */
    flex-wrap: wrap;
  }
  
  .feed-hd {
    padding: var(--space-2);           /* 16px со всех сторон */
    padding-bottom: var(--space-1);    /* 8px снизу */
  }
  
  .feed-ava {
    width: 36px;
    height: 36px;
  }
  
  .feed-title {
    font-size: 1.1rem;
  }
  
  .feed-actions {
    padding: var(--space-2);           /* 16px со всех сторон */
  }
}