133 lines
5.6 KiB
CSS
133 lines
5.6 KiB
CSS
/*
|
||
* Copyright (c) 2024-2025 Тарабанов Александр Викторович
|
||
* All rights reserved.
|
||
*
|
||
* This software is proprietary and confidential.
|
||
* Unauthorized copying, modification, or distribution is prohibited.
|
||
*
|
||
* For licensing inquiries: info@hb3-accelerator.com
|
||
* Website: https://hb3-accelerator.com
|
||
* GitHub: https://github.com/VC-HB3-Accelerator
|
||
*/
|
||
|
||
/* frontend/src/assets/styles/variables.css */
|
||
:root {
|
||
/*
|
||
* ЦВЕТОВАЯ СХЕМА
|
||
* Основная палитра цветов приложения
|
||
*/
|
||
--color-primary: #4CAF50; /* Основной цвет (зеленый) */
|
||
--color-primary-dark: #45a049; /* Темно-зеленый для наведения и акцентов */
|
||
--color-secondary: #2196F3; /* Второстепенный цвет (синий) */
|
||
--color-accent: #5E35B1; /* Акцентный цвет (фиолетовый) */
|
||
--color-accent-dark: #4527A0; /* Темно-фиолетовый для наведения */
|
||
|
||
/* Статусные цвета */
|
||
--color-danger: #F44336; /* Ошибки, удаление, опасные действия */
|
||
--color-warning: #FF9800; /* Предупреждения */
|
||
--color-error: #e74c3c; /* Текст ошибок */
|
||
|
||
/* Нейтральные цвета */
|
||
--color-light: #f5f5f5; /* Светлый фон, фон секций */
|
||
--color-dark: #333333; /* Основной текст, заголовки */
|
||
--color-grey: #777777; /* Второстепенный текст */
|
||
--color-grey-light: #e0e0e0; /* Границы, разделители */
|
||
--color-white: #ffffff; /* Белый */
|
||
--color-black: #000000; /* Черный */
|
||
|
||
/* Цвета текста */
|
||
--color-text: #333333; /* Основной текст */
|
||
--color-text-light: #999999; /* Неакцентированный текст */
|
||
--color-border: #e0e0e0; /* Цвет рамок */
|
||
|
||
/* Цвета брендов */
|
||
--color-telegram: #0088cc; /* Фирменный цвет Telegram */
|
||
|
||
/* Цвета сообщений */
|
||
--color-user-message: #EFFAFF; /* Фон сообщений пользователя */
|
||
--color-ai-message: #F8F8F8; /* Фон сообщений ИИ */
|
||
--color-system-message: #FFF3E0; /* Фон системных сообщений */
|
||
--color-system-text: #FF5722; /* Текст системных сообщений */
|
||
|
||
/*
|
||
* ТЕНИ
|
||
* Для создания эффекта глубины и иерархии элементов
|
||
*/
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); /* Легкая тень */
|
||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* Средняя тень */
|
||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Глубокая тень */
|
||
|
||
/*
|
||
* ОТСТУПЫ
|
||
* Для обеспечения консистентных интервалов и отступов
|
||
*/
|
||
--spacing-xs: 5px; /* Очень маленькие отступы (между близкими элементами) */
|
||
--spacing-sm: 10px; /* Маленькие отступы */
|
||
--spacing-md: 15px; /* Средние отступы */
|
||
--spacing-lg: 20px; /* Большие отступы */
|
||
--spacing-xl: 30px; /* Очень большие отступы (между крупными блоками) */
|
||
|
||
/*
|
||
* РАЗМЕРЫ ШРИФТОВ
|
||
* Типографическая шкала
|
||
*/
|
||
--font-size-xs: 12px; /* Маленькие надписи, подписи к полям */
|
||
--font-size-sm: 13px; /* Второстепенный текст */
|
||
--font-size-md: 14px; /* Основной текст */
|
||
--font-size-lg: 16px; /* Подзаголовки */
|
||
--font-size-xl: 18px; /* Заголовки разделов */
|
||
--font-size-xxl: 24px; /* Главные заголовки */
|
||
|
||
/*
|
||
* РАДИУСЫ СКРУГЛЕНИЯ
|
||
* Для элементов интерфейса
|
||
*/
|
||
--radius-sm: 4px; /* Небольшое скругление (кнопки, поля ввода) */
|
||
--radius-md: 6px; /* Среднее скругление (карточки, панели) */
|
||
--radius-lg: 8px; /* Большое скругление (модальные окна, боковые панели) */
|
||
|
||
/*
|
||
* ПЕРЕХОДЫ
|
||
* Для плавных анимаций
|
||
*/
|
||
--transition-fast: 0.2s ease; /* Быстрые переходы (ховеры, небольшие анимации) */
|
||
--transition-normal: 0.3s ease; /* Стандартные переходы (появление элементов) */
|
||
|
||
/*
|
||
* РАЗМЕРЫ КОМПОНЕНТОВ
|
||
* Стандартные размеры для элементов интерфейса
|
||
*/
|
||
--nav-btn-size: 40px;
|
||
--chat-input-min-height: 100px;
|
||
--chat-input-max-height: 200px;
|
||
--chat-input-focus-min-height: 170px;
|
||
--chat-input-focus-max-height: 300px;
|
||
|
||
/*
|
||
* УНИФИЦИРОВАННЫЕ РАЗМЕРЫ
|
||
* Для кнопок и форм
|
||
*/
|
||
--button-height: 48px;
|
||
--button-height-mobile: 42px;
|
||
--button-padding: 0 var(--spacing-lg);
|
||
--button-gap: var(--spacing-md);
|
||
|
||
--form-gap: var(--spacing-md);
|
||
|
||
--block-padding: 24px;
|
||
--block-padding-mobile: 16px;
|
||
--block-margin: 24px;
|
||
--block-margin-mobile: 16px;
|
||
|
||
--input-height: 48px;
|
||
--input-height-mobile: 42px;
|
||
--input-padding: 0 var(--spacing-lg);
|
||
|
||
/*
|
||
* ОБЩИЕ СТИЛИ
|
||
* Производные параметры для единого стиля
|
||
*/
|
||
--button-radius: var(--radius-lg);
|
||
--input-radius: var(--radius-lg);
|
||
--block-radius: var(--radius-lg);
|
||
} |