// ============================================================================= // Feed-Specific Styles (SCSS) // ============================================================================= // Стили, специфичные для постов в ленте новостей // ============================================================================= // ПЕРЕМЕННЫЕ // ============================================================================= $feed-pin-bg-light: #fff3cd; $feed-pin-color-light: #664d03; $feed-pin-border-light: #ffe69c; $feed-pin-bg-dark: #3b2e04; $feed-pin-color-dark: #ffda6a; $feed-pin-border-dark: #4f3f0a; $feed-title-color-light: #4b4b4b; // ============================================================================= // ЗНАЧОК ЗАКРЕПЛЕНИЯ // ============================================================================= .feed-pin { margin-left: auto; font-size: 0.75rem; padding: var(--space-1, 0.25rem); border-radius: 999px; background: $feed-pin-bg-light; color: $feed-pin-color-light; border: 1px solid $feed-pin-border-light; flex-shrink: 0; [data-bs-theme="dark"] & { background: $feed-pin-bg-dark; color: $feed-pin-color-dark; border-color: $feed-pin-border-dark; } } // ============================================================================= // ЗАГОЛОВОК ПОСТА // ============================================================================= .feed-title { font: 700 1.3rem/1.5 var(--bs-body-font-family); margin: var(--space-1, 0.25rem) 0; color: $feed-title-color-light; [data-bs-theme="dark"] & { 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); img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } } // ============================================================================= // КНОПКИ ДЕЙСТВИЙ (ЛАЙКИ, КОММЕНТАРИИ) // ============================================================================= .feed-action { display: inline-flex; align-items: center; gap: var(--space-1, 0.25rem); padding: var(--space-1, 0.25rem); 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; &:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } &.active { color: var(--bs-primary); font-weight: 600; } i { font-size: 1rem; } } // ============================================================================= // ФУТЕР ПОСТА // ============================================================================= .feed-footer { padding: var(--space-2, 0.5rem) var(--card-padding, 1rem); border-top: 1px solid var(--bs-border-color); font-size: 0.875rem; color: var(--bs-secondary-color); } // ============================================================================= // АДАПТИВНОСТЬ // ============================================================================= @media (max-width: 576px) { .feed-title { font-size: 1.1rem; } }