Игорь Надеин
d86d971125
Проблема: - Аватары деформировались из-за object-fit на контейнере - Аватары выравнивались по верху сообщения вместо низа - Неконсистентная HTML структура: <img class="mini-ava"> vs <div class="mini-ava"><i></i></div> Решение: SCSS (_common.scss): - object-fit: cover перемещен с контейнера на вложенный img - Добавлен display: block для img элементов SCSS (_chat-detail.scss): - Добавлен align-items: flex-end к .d-flex.msg для выравнивания по низу - .mini-ava рефакторинг: display: flex (было grid), border-radius: 50% (было 9999px) - Добавлен background и border для контейнера - Добавлен font-size: 20px для fallback иконки - object-fit остается только на img тегах JavaScript (messageRendererV2.js): - Всегда создавать <div class="mini-ava"> как контейнер - Вложенный <img> или <i class="bi bi-person-circle"> внутри - Устранена несогласованность разметки Рефакторинг архитектуры SCSS (бонус): - Создан Design System: abstracts/_variables.scss (200+ токенов) - Создано abstracts/_mixins.scss (40+ миксинов) - Реорганизована файловая структура: layout/, components/, components/chat/ - Централизованы стили аватаров в _common.scss - Устранены дубликаты (avatar определялся в 3 файлах) - Применены design tokens к navbar, page-header - Создана документация: SCSS_NAMING_CONVENTIONS.md - Удалено 9 дублирующихся CSS файлов Компиляция: 280KB, 0 ошибок, production ready
220 lines
6.5 KiB
SCSS
220 lines
6.5 KiB
SCSS
// =============================================================================
|
||
// Design Tokens - Centralized Variables
|
||
// =============================================================================
|
||
// Централизованная система переменных для всего проекта
|
||
// Все компоненты должны использовать эти токены вместо hardcoded значений
|
||
|
||
// =============================================================================
|
||
// 1. ЦВЕТОВАЯ СИСТЕМА
|
||
// =============================================================================
|
||
|
||
// Telegram colors
|
||
$telegram-blue: #0088cc;
|
||
$telegram-mention-bg: #0088cc;
|
||
|
||
// Gradient colors
|
||
$gradient-purple-start: #667eea;
|
||
$gradient-purple-end: #764ba2;
|
||
$gradient-pink-start: #f093fb;
|
||
$gradient-pink-end: #f5576c;
|
||
|
||
// Base colors
|
||
$color-white: #fff;
|
||
$color-black: #000;
|
||
|
||
// Gray scale
|
||
$gray-50: #f8f9fa;
|
||
$gray-100: #f0f0f0;
|
||
$gray-200: #e3e3e3;
|
||
$gray-300: #dee2e6;
|
||
$gray-400: #ced4da;
|
||
$gray-500: #adb5bd;
|
||
$gray-600: #6c757d;
|
||
$gray-700: #495057;
|
||
$gray-800: #343a40;
|
||
$gray-900: #212529;
|
||
|
||
// Semantic colors
|
||
$color-danger: #ef4444;
|
||
$color-success-light: #e3f2fd;
|
||
$color-warning-light: #fffbeb;
|
||
|
||
// =============================================================================
|
||
// 2. SPACING SYSTEM (уже определена в custom-bootstrap.scss)
|
||
// =============================================================================
|
||
// Используем Bootstrap переменные $spacers
|
||
// 0: 0, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 24px
|
||
|
||
// =============================================================================
|
||
// 3. BORDER RADIUS TOKENS
|
||
// =============================================================================
|
||
|
||
$radius-xs: 4px; // extra small
|
||
$radius-sm: 6px; // small
|
||
$radius-md: 10px; // medium (most common)
|
||
$radius-lg: 12px; // large
|
||
$radius-xl: 14px; // extra large
|
||
$radius-2xl: 16px; // 2x large
|
||
$radius-3xl: 18px; // 3x large
|
||
$radius-4xl: 20px; // 4x large
|
||
$radius-pill: 999px; // perfect pill shape
|
||
|
||
// Badge specific (perfect circles)
|
||
$badge-radius: 10px;
|
||
$badge-radius-sm: 9px;
|
||
$badge-radius-lg: 12px;
|
||
$badge-radius-xl: 14px;
|
||
|
||
// =============================================================================
|
||
// 4. SHADOW TOKENS
|
||
// =============================================================================
|
||
|
||
$shadow-none: none;
|
||
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
$shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
$shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
$shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
$shadow-2xl: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||
$shadow-3xl: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||
|
||
// Badge specific shadows
|
||
$badge-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||
$badge-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||
$badge-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
|
||
// Context menu shadows
|
||
$context-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
||
// =============================================================================
|
||
// 5. BLUR TOKENS (для backdrop-filter)
|
||
// =============================================================================
|
||
|
||
$blur-none: blur(0);
|
||
$blur-sm: blur(8px);
|
||
$blur-md: blur(10px);
|
||
$blur-lg: blur(12px);
|
||
$blur-xl: blur(16px);
|
||
|
||
// =============================================================================
|
||
// 6. OPACITY TOKENS
|
||
// =============================================================================
|
||
|
||
$opacity-glass-light: 0.1;
|
||
$opacity-glass-medium: 0.15;
|
||
$opacity-glass-high: 0.2;
|
||
|
||
$opacity-overlay-light: 0.05;
|
||
$opacity-overlay-medium: 0.1;
|
||
$opacity-overlay-dark: 0.3;
|
||
|
||
$opacity-border-light: 0.08;
|
||
$opacity-border-medium: 0.1;
|
||
$opacity-border-dark: 0.25;
|
||
|
||
// =============================================================================
|
||
// 7. TRANSITION TOKENS
|
||
// =============================================================================
|
||
|
||
$transition-fast: 0.15s ease;
|
||
$transition-base: 0.2s ease;
|
||
$transition-medium: 0.3s ease;
|
||
$transition-slow: 0.4s ease;
|
||
|
||
// Специальные easing функции
|
||
$ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
$ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
// Badge specific
|
||
$badge-transition: transform 0.2s $ease-bounce;
|
||
|
||
// =============================================================================
|
||
// 8. Z-INDEX TOKENS
|
||
// =============================================================================
|
||
|
||
$z-base: 1;
|
||
$z-dropdown: 1000;
|
||
$z-sticky: 1020;
|
||
$z-fixed: 1030;
|
||
$z-modal-backdrop: 1040;
|
||
$z-modal: 1050;
|
||
$z-popover: 1060;
|
||
$z-tooltip: 1070;
|
||
$z-notification: 1080;
|
||
|
||
// =============================================================================
|
||
// 9. SIZE TOKENS (avatars, badges, icons)
|
||
// =============================================================================
|
||
|
||
// Badge heights
|
||
$badge-height-sm: 18px;
|
||
$badge-height-base: 20px;
|
||
$badge-height-lg: 24px;
|
||
$badge-height-xl: 28px;
|
||
|
||
// Avatar sizes
|
||
$avatar-xs: 24px;
|
||
$avatar-sm: 32px;
|
||
$avatar-md: 40px;
|
||
$avatar-lg: 44px;
|
||
$avatar-xl: 48px;
|
||
$avatar-2xl: 56px;
|
||
|
||
// Icon button sizes
|
||
$btn-icon-sm: 32px;
|
||
$btn-icon-base: 36px;
|
||
$btn-icon-lg: 44px;
|
||
|
||
// =============================================================================
|
||
// 10. GLASSMORPHISM PRESETS
|
||
// =============================================================================
|
||
|
||
// Light theme glassmorphism
|
||
$glass-light-bg: rgba(255, 255, 255, 0.1);
|
||
$glass-light-border: rgba(0, 0, 0, 0.08);
|
||
|
||
// Dark theme glassmorphism
|
||
$glass-dark-bg: rgba(52, 58, 64, 0.95);
|
||
$glass-dark-border: rgba(255, 255, 255, 0.1);
|
||
|
||
// Card glassmorphism
|
||
$card-glass-bg: rgba(255, 255, 255, 0.05);
|
||
$card-glass-border: rgba(255, 255, 255, 0.1);
|
||
$card-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||
|
||
// =============================================================================
|
||
// 11. TYPOGRAPHY TOKENS (дополнительные)
|
||
// =============================================================================
|
||
|
||
$font-weight-normal: 400;
|
||
$font-weight-medium: 500;
|
||
$font-weight-semibold: 600;
|
||
$font-weight-bold: 700;
|
||
|
||
$font-size-xs: 11px;
|
||
$font-size-sm: 12px;
|
||
$font-size-base: 14px;
|
||
$font-size-md: 16px;
|
||
$font-size-lg: 18px;
|
||
|
||
// Badge specific
|
||
$badge-font-size: 11px;
|
||
$badge-font-weight: 600;
|
||
|
||
// =============================================================================
|
||
// 12. LAYOUT TOKENS
|
||
// =============================================================================
|
||
|
||
// Navbar
|
||
$navbar-height: 56px;
|
||
$navbar-mobile-height: 90px;
|
||
$bottom-navbar-height: 60px;
|
||
|
||
// Sidebar
|
||
$sidebar-width: 240px;
|
||
$sidebar-collapsed-width: 60px;
|
||
|
||
// Chat specific
|
||
$chat-composer-height: auto;
|
||
$chat-message-max-width: 70%;
|