Игорь Надеин
8363cbd541
- Migrated all 28 CSS components to SCSS architecture
- Deleted 29 source CSS files (kept only compiled app.css & bootstrap-custom.css)
- Created 30 SCSS component modules in scss/components/
- Cleaned 24 templates from duplicate CSS links
- Updated main.scss with new imports (layout-spacing, spacing-utils, rightbar-calendar)
- Filled empty _navbar.scss with content
- Refactored css/ folder: removed obsolete files, updated README.md
- Created comprehensive documentation (migration complete, quick reference, reports)
Migration Statistics:
- Components migrated: 28 (~4,768 lines SCSS)
- CSS files deleted: 29
- Templates cleaned: 24
- app.css size: 95 KB (compiled from SCSS)
- bootstrap-custom.css: 301 KB
- Total: 396 KB
Phase 6 Complete: 100% SCSS architecture achieved ✅
135 lines
3.7 KiB
SCSS
135 lines
3.7 KiB
SCSS
// =============================================================================
|
||
// 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;
|
||
}
|
||
}
|