1423 lines
30 KiB
CSS
1423 lines
30 KiB
CSS
/* Переменные CSS для цветов, размеров и т.д. */
|
||
:root {
|
||
/* Цвета */
|
||
--color-primary: #4CAF50;
|
||
--color-primary-dark: #45a049;
|
||
--color-secondary: #2196F3;
|
||
--color-danger: #F44336;
|
||
--color-warning: #FF9800;
|
||
--color-light: #f5f5f5;
|
||
--color-dark: #333333;
|
||
--color-grey: #777777;
|
||
--color-grey-light: #e0e0e0;
|
||
--color-white: #ffffff;
|
||
--color-black: #000000;
|
||
--color-telegram: #0088cc;
|
||
--color-error: #e74c3c;
|
||
|
||
/* Цвета сообщений */
|
||
--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;
|
||
|
||
/* Размеры компонентов */
|
||
--sidebar-expanded-width: 325px;
|
||
--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);
|
||
}
|
||
|
||
/* Общие стили для всех элементов */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--color-white);
|
||
}
|
||
|
||
/* Стили для монопространственных шрифтов (код, верификация) */
|
||
code, .verification-code code, .address {
|
||
font-family: 'Courier New', Courier, monospace;
|
||
}
|
||
|
||
/* Унификация размеров шрифтов */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 500;
|
||
}
|
||
|
||
h3 {
|
||
font-size: var(--font-size-xl);
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
p {
|
||
font-size: var(--font-size-md);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
input, textarea {
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
/* Контейнеры */
|
||
.app-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background-color: var(--color-white);
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-width: 1200px;
|
||
margin: 0;
|
||
padding: 0 20px;
|
||
width: 100%;
|
||
background-color: var(--color-white);
|
||
}
|
||
|
||
/* Адаптация контента при боковой панели */
|
||
.main-content.no-right-sidebar {
|
||
margin-right: 190px;
|
||
}
|
||
|
||
.main-content:not(.no-right-sidebar) {
|
||
margin-right: 190px;
|
||
}
|
||
|
||
/* Стили для контейнера чата */
|
||
.chat-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: var(--spacing-lg) auto;
|
||
min-height: 500px;
|
||
max-width: 1150px;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.chat-messages {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
padding: var(--spacing-lg);
|
||
background: var(--color-white);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-grey-light);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||
transition: bottom var(--transition-normal);
|
||
}
|
||
|
||
/* Стили для сообщений */
|
||
.message {
|
||
margin-bottom: var(--spacing-md);
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
max-width: 75%;
|
||
word-wrap: break-word;
|
||
position: relative;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.user-message {
|
||
background-color: var(--color-user-message);
|
||
align-self: flex-end;
|
||
margin-left: auto;
|
||
margin-right: var(--spacing-sm);
|
||
border-bottom-right-radius: 2px;
|
||
}
|
||
|
||
.ai-message {
|
||
background-color: var(--color-ai-message);
|
||
align-self: flex-start;
|
||
margin-right: auto;
|
||
margin-left: var(--spacing-sm);
|
||
word-break: break-word;
|
||
max-width: 70%;
|
||
border-bottom-left-radius: 2px;
|
||
}
|
||
|
||
.system-message {
|
||
background-color: var(--color-system-message);
|
||
align-self: center;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
font-style: italic;
|
||
color: var(--color-system-text);
|
||
text-align: center;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.message-content {
|
||
margin-bottom: var(--spacing-xs);
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
font-size: var(--font-size-md);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.message-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.message-time {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--color-grey);
|
||
text-align: right;
|
||
}
|
||
|
||
.message-status {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
.sending-indicator {
|
||
color: var(--color-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.error-indicator {
|
||
color: var(--color-danger);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.is-local {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.has-error {
|
||
border: 1px solid var(--color-danger);
|
||
}
|
||
|
||
/* Стили для ввода сообщений */
|
||
.chat-input {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
background: var(--color-white);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-grey-light);
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
transition: all var(--transition-normal);
|
||
z-index: 10;
|
||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.input-area {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.chat-input textarea {
|
||
flex: 1;
|
||
border: none;
|
||
resize: none;
|
||
font-size: var(--font-size-md);
|
||
line-height: 1.5;
|
||
min-height: 24px;
|
||
max-height: 120px; /* Ограничение высоты textarea */
|
||
padding: 8px 0; /* Уменьшаем вертикальные отступы */
|
||
outline: none;
|
||
overflow-y: hidden; /* Убираем скролл, так как высота меняется динамически */
|
||
height: auto; /* Позволяем высоте изменяться */
|
||
}
|
||
|
||
.chat-input textarea:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/* Контейнер для иконок */
|
||
.chat-icons {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Стили для кнопок-иконок */
|
||
.chat-icon-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
color: var(--color-grey);
|
||
padding: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.chat-icon-btn:hover {
|
||
color: var(--color-primary);
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.chat-icon-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Стили для кнопки отправки */
|
||
.chat-icon-btn.send-button {
|
||
background-color: var(--color-primary);
|
||
color: white;
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.chat-icon-btn.send-button:hover:not(:disabled) {
|
||
background-color: var(--color-primary-dark);
|
||
color: white;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.chat-icon-btn.send-button:disabled {
|
||
background-color: #ccc;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Стили для состояния записи */
|
||
.chat-icon-btn.recording {
|
||
color: var(--color-danger);
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
|
||
.chat-icon-btn.recording::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: var(--color-danger);
|
||
border-radius: 50%;
|
||
top: 2px;
|
||
right: 2px;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* Стили для области предпросмотра */
|
||
.attachment-preview {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid var(--color-grey-light);
|
||
max-height: 100px; /* Ограничение высоты области превью */
|
||
overflow-y: auto; /* Скролл для превью */
|
||
}
|
||
|
||
.preview-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: var(--color-light);
|
||
border-radius: var(--radius-md);
|
||
padding: 4px 8px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.image-preview {
|
||
width: 40px;
|
||
height: 40px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-sm);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.audio-preview,
|
||
.video-preview,
|
||
.file-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.remove-attachment-btn {
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Новый контейнер для действий чата */
|
||
.chat-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Стили для кнопок в чате */
|
||
.chat-buttons {
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
margin-top: var(--spacing-xs);
|
||
padding-bottom: 0;
|
||
justify-content: flex-end;
|
||
flex-wrap: nowrap;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat-buttons button {
|
||
padding: 8px 16px;
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: var(--font-size-md);
|
||
transition: background-color var(--transition-normal);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
max-width: 150px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.chat-buttons .clear-btn {
|
||
background-color: var(--color-danger);
|
||
color: var(--color-white);
|
||
}
|
||
|
||
.chat-buttons .clear-btn:hover:not(:disabled) {
|
||
background-color: #da190b;
|
||
}
|
||
|
||
.chat-buttons button:disabled {
|
||
background-color: #cccccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Стили для правой панели */
|
||
.wallet-sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: var(--color-white);
|
||
z-index: 1000;
|
||
overflow-y: auto;
|
||
padding: var(--spacing-lg);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform var(--transition-normal), opacity var(--transition-normal);
|
||
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.wallet-sidebar-content {
|
||
max-width: 600px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 var(--spacing-md);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
/* Стили для заголовка */
|
||
.header {
|
||
background: var(--color-white);
|
||
padding: 15px 20px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.header-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 var(--spacing-lg);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.title {
|
||
font-size: var(--font-size-xxl);
|
||
font-weight: 500;
|
||
color: var(--color-dark);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: var(--font-size-lg);
|
||
color: #666;
|
||
}
|
||
|
||
/* Анимация появления и исчезновения правой панели */
|
||
.sidebar-slide-enter-active,
|
||
.sidebar-slide-leave-active {
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.sidebar-slide-enter-from,
|
||
.sidebar-slide-leave-to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar-slide-enter-to,
|
||
.sidebar-slide-leave-from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Стили для блока кнопок авторизации */
|
||
.auth-buttons-container {
|
||
width: 100%;
|
||
max-width: 450px;
|
||
margin-bottom: var(--spacing-lg);
|
||
background-color: var(--color-white);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
padding: var(--spacing-lg);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.auth-btn {
|
||
width: 100%;
|
||
height: var(--nav-btn-size);
|
||
border-radius: var(--radius-lg);
|
||
background-color: var(--color-light);
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
color: var(--color-dark);
|
||
font-size: var(--font-size-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
padding: 0 var(--spacing-md);
|
||
box-sizing: border-box;
|
||
transition: all var(--transition-normal);
|
||
margin: 0;
|
||
}
|
||
|
||
.auth-btn:hover {
|
||
background-color: var(--color-grey-light);
|
||
}
|
||
|
||
/* Медиа-запросы для адаптивности */
|
||
@media screen and (min-width: 1200px) {
|
||
.wallet-sidebar {
|
||
width: 30%;
|
||
max-width: 550px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 769px) and (max-width: 1199px) {
|
||
.wallet-sidebar {
|
||
width: 40%;
|
||
max-width: 500px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.wallet-sidebar {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.wallet-sidebar-content {
|
||
padding: 0;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.disconnect-block {
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.disconnect-btn,
|
||
.close-wallet-sidebar {
|
||
height: 42px;
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
width: 42px;
|
||
min-width: 42px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.identifiers-block {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.identifier-item {
|
||
font-size: var(--font-size-sm);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.identifier-label {
|
||
min-width: 80px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.wallet-sidebar {
|
||
padding: var(--spacing-sm);
|
||
}
|
||
|
||
.wallet-sidebar-content {
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.disconnect-block {
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.disconnect-btn,
|
||
.close-wallet-sidebar {
|
||
height: 36px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
width: 36px;
|
||
min-width: 36px;
|
||
}
|
||
|
||
.identifiers-block {
|
||
padding: var(--spacing-sm);
|
||
}
|
||
}
|
||
|
||
/* Анимации */
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutRight {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateY(-50px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Стили для форм email и telegram */
|
||
.auth-buttons-container .email-form,
|
||
.auth-buttons-container .telegram-form,
|
||
.auth-buttons-container .telegram-verification {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-md);
|
||
margin: var(--spacing-md) 0;
|
||
}
|
||
|
||
/* Стили для инпутов */
|
||
.auth-buttons-container input[type="email"],
|
||
.auth-buttons-container input[type="text"] {
|
||
width: 100%;
|
||
height: 48px;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border: 1px solid var(--color-grey-light);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-md);
|
||
margin: 0 0 var(--spacing-sm) 0;
|
||
box-sizing: border-box;
|
||
background-color: var(--color-white);
|
||
}
|
||
|
||
/* Стили для кнопок в формах */
|
||
.auth-buttons-container .email-form button,
|
||
.auth-buttons-container .telegram-form button,
|
||
.auth-buttons-container .telegram-verification button,
|
||
.auth-buttons-container .telegram-verification a {
|
||
width: 100%;
|
||
height: 48px;
|
||
margin: 0;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-lg);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all var(--transition-normal);
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Стили для основных кнопок */
|
||
.auth-buttons-container button[type="submit"],
|
||
.auth-buttons-container a[href*="telegram"] {
|
||
background-color: var(--color-primary);
|
||
color: var(--color-white);
|
||
}
|
||
|
||
.auth-buttons-container button[type="submit"]:hover,
|
||
.auth-buttons-container a[href*="telegram"]:hover {
|
||
background-color: var(--color-primary-dark);
|
||
}
|
||
|
||
/* Стили для кнопок отмены */
|
||
.auth-buttons-container button:not([type="submit"]) {
|
||
background-color: var(--color-grey-light);
|
||
color: var(--color-dark);
|
||
}
|
||
|
||
.auth-buttons-container button:not([type="submit"]):hover {
|
||
background-color: #d9d9d9;
|
||
}
|
||
|
||
/* Стили для телеграм-ссылки */
|
||
.auth-buttons-container a[href*="telegram"] {
|
||
background-color: var(--color-telegram);
|
||
}
|
||
|
||
.auth-buttons-container a[href*="telegram"]:hover {
|
||
background-color: #0077b3;
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.auth-buttons-container .email-form button,
|
||
.auth-buttons-container .telegram-form button,
|
||
.auth-buttons-container .telegram-verification button,
|
||
.auth-buttons-container .telegram-verification a,
|
||
.auth-buttons-container input[type="email"],
|
||
.auth-buttons-container input[type="text"] {
|
||
height: 42px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
}
|
||
|
||
/* Общие стили для форм */
|
||
.auth-buttons-container .email-form,
|
||
.auth-buttons-container .verification-block {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
margin: var(--spacing-sm) 0;
|
||
}
|
||
|
||
.auth-buttons-container .email-form-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
width: 100%;
|
||
}
|
||
|
||
/* Стили для инпутов */
|
||
.auth-buttons-container input[type="email"],
|
||
.auth-buttons-container input[type="text"] {
|
||
width: 100%;
|
||
height: 48px;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border: 1px solid var(--color-grey-light);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-md);
|
||
margin: 0 0 var(--spacing-sm) 0;
|
||
box-sizing: border-box;
|
||
background-color: var(--color-white);
|
||
}
|
||
|
||
/* Общие стили для всех кнопок в формах */
|
||
.auth-buttons-container .email-form button,
|
||
.auth-buttons-container .verification-block button,
|
||
.auth-buttons-container .verification-block a.bot-link {
|
||
width: 100%;
|
||
height: 48px;
|
||
margin: 0;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-lg);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all var(--transition-normal);
|
||
border: none;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Стили для кнопок отправки/подтверждения */
|
||
.auth-buttons-container button[type="submit"],
|
||
.auth-buttons-container .send-email-btn {
|
||
background-color: var(--color-primary);
|
||
color: var(--color-white);
|
||
}
|
||
|
||
/* Стили для кнопок отмены */
|
||
.auth-buttons-container button:not([type="submit"]):not(.send-email-btn):not(.bot-link) {
|
||
background-color: #E8E8E8;
|
||
color: var(--color-dark);
|
||
}
|
||
|
||
/* Стили для ссылки Telegram */
|
||
.auth-buttons-container .verification-block a.bot-link {
|
||
background-color: #0088cc;
|
||
color: var(--color-white);
|
||
}
|
||
|
||
/* Стили для блока с кодом верификации */
|
||
.auth-buttons-container .verification-code {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
margin-bottom: var(--spacing-sm);
|
||
font-size: var(--font-size-md);
|
||
width: 100%;
|
||
height: 48px;
|
||
border-radius: var(--radius-lg);
|
||
background-color: var(--color-white);
|
||
border: 1px solid var(--color-grey-light);
|
||
padding: 0 var(--spacing-md);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Стили для текста в формах */
|
||
.auth-buttons-container p {
|
||
margin: 0 0 var(--spacing-sm) 0;
|
||
font-size: var(--font-size-md);
|
||
color: var(--color-dark);
|
||
}
|
||
|
||
/* Эффекты при наведении */
|
||
.auth-buttons-container button[type="submit"]:hover,
|
||
.auth-buttons-container .send-email-btn:hover {
|
||
background-color: var(--color-primary-dark);
|
||
}
|
||
|
||
.auth-buttons-container button:not([type="submit"]):not(.send-email-btn):hover {
|
||
background-color: #DADADA;
|
||
}
|
||
|
||
.auth-buttons-container .verification-block a.bot-link:hover {
|
||
background-color: #0077b3;
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.auth-buttons-container .email-form button,
|
||
.auth-buttons-container .verification-block button,
|
||
.auth-buttons-container .verification-block a.bot-link,
|
||
.auth-buttons-container input[type="email"],
|
||
.auth-buttons-container input[type="text"] {
|
||
height: 42px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
}
|
||
|
||
/* Общие стили для контейнера */
|
||
.auth-buttons-container,
|
||
.wallet-info-container {
|
||
width: 100%;
|
||
max-width: 450px;
|
||
margin-bottom: var(--spacing-lg);
|
||
background-color: var(--color-white);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
padding: var(--spacing-lg);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
/* Стили для заголовка */
|
||
.header-with-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: var(--nav-btn-size);
|
||
margin-bottom: var(--spacing-lg);
|
||
position: relative;
|
||
}
|
||
|
||
/* Стили для кнопок в заголовке */
|
||
.header-button {
|
||
height: var(--nav-btn-size);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
/* Кнопка отключения */
|
||
.disconnect-btn {
|
||
background-color: var(--color-white);
|
||
border: 1px solid var(--color-error);
|
||
color: var(--color-error);
|
||
padding: 0 var(--spacing-md);
|
||
flex: 1;
|
||
margin-right: var(--spacing-sm);
|
||
}
|
||
|
||
.disconnect-btn:hover {
|
||
background-color: #ffebee;
|
||
}
|
||
|
||
/* Кнопка закрытия */
|
||
.close-wallet-sidebar {
|
||
width: var(--nav-btn-size);
|
||
height: var(--nav-btn-size);
|
||
min-width: var(--nav-btn-size);
|
||
background-color: var(--color-white);
|
||
color: var(--color-dark);
|
||
border: 1px solid var(--color-grey);
|
||
font-size: 20px;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.close-wallet-sidebar:hover {
|
||
background-color: var(--color-grey-light);
|
||
border-color: var(--color-dark);
|
||
}
|
||
|
||
/* Стили для кнопок авторизации */
|
||
.auth-buttons-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
width: 100%;
|
||
}
|
||
|
||
.auth-btn {
|
||
width: 100%;
|
||
height: var(--nav-btn-size);
|
||
border-radius: var(--radius-lg);
|
||
background-color: var(--color-light);
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
color: var(--color-dark);
|
||
font-size: var(--font-size-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
padding: 0 var(--spacing-md);
|
||
box-sizing: border-box;
|
||
transition: all var(--transition-normal);
|
||
margin: 0;
|
||
}
|
||
|
||
.auth-btn:hover {
|
||
background-color: var(--color-grey-light);
|
||
}
|
||
|
||
/* Стили для блока идентификаторов */
|
||
.identifiers-block {
|
||
margin-top: var(--spacing-lg);
|
||
border-top: 1px solid var(--color-grey-light);
|
||
padding-top: var(--spacing-lg);
|
||
}
|
||
|
||
.identifiers-block h3 {
|
||
margin: 0 0 var(--spacing-md) 0;
|
||
font-size: var(--font-size-xl);
|
||
color: var(--color-dark);
|
||
}
|
||
|
||
.identifier-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-sm);
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
.identifier-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.identifier-label {
|
||
min-width: 100px;
|
||
color: var(--color-grey);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.identifier-value {
|
||
flex: 1;
|
||
font-family: monospace;
|
||
color: var(--color-dark);
|
||
word-break: break-all;
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.auth-buttons-container,
|
||
.wallet-info-container {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.header-with-close {
|
||
height: 32px;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.header-button {
|
||
height: 32px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.disconnect-btn {
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
width: 32px;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.auth-btn {
|
||
height: 32px;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.identifiers-block {
|
||
margin-top: var(--spacing-md);
|
||
padding-top: var(--spacing-md);
|
||
}
|
||
|
||
.identifier-item {
|
||
font-size: var(--font-size-sm);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.identifier-label {
|
||
min-width: 80px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 360px) {
|
||
.auth-buttons-container,
|
||
.wallet-info-container {
|
||
padding: var(--spacing-sm);
|
||
}
|
||
|
||
.header-button {
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
|
||
.disconnect-btn {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.identifiers-block {
|
||
margin-top: var(--spacing-sm);
|
||
padding-top: var(--spacing-sm);
|
||
}
|
||
}
|
||
|
||
/* Общие стили для кнопок */
|
||
.auth-btn,
|
||
.disconnect-btn,
|
||
.close-wallet-sidebar,
|
||
.send-email-btn,
|
||
.chat-buttons button,
|
||
.header-button,
|
||
.connect-btn,
|
||
.cancel-btn,
|
||
.bot-link {
|
||
height: var(--button-height);
|
||
padding: 0 var(--spacing-lg);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-md);
|
||
font-weight: 500;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: var(--transition-fast);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--spacing-sm);
|
||
background: var(--color-primary);
|
||
color: var(--color-white);
|
||
width: 100%;
|
||
margin: 0;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Стили для квадратных кнопок (close) */
|
||
.close-wallet-sidebar {
|
||
width: var(--button-height);
|
||
padding: 0;
|
||
position: absolute;
|
||
top: var(--block-padding);
|
||
right: var(--block-padding);
|
||
background: var(--color-grey-light);
|
||
color: var(--color-dark);
|
||
font-size: var(--font-size-xl);
|
||
}
|
||
|
||
/* Общие стили для форм */
|
||
.email-form,
|
||
.verification-block,
|
||
.auth-buttons-wrapper,
|
||
.email-verification-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-md);
|
||
width: 100%;
|
||
margin-bottom: var(--block-margin);
|
||
}
|
||
|
||
/* Контейнер формы email */
|
||
.email-form-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
width: 100%;
|
||
}
|
||
|
||
/* Общие стили для инпутов */
|
||
input[type="email"],
|
||
input[type="text"],
|
||
.email-input {
|
||
height: var(--input-height);
|
||
padding: 0 var(--spacing-lg);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-grey-light);
|
||
font-size: var(--font-size-md);
|
||
width: 100%;
|
||
background: var(--color-white);
|
||
}
|
||
|
||
/* Общие стили для контейнеров */
|
||
.auth-container,
|
||
.wallet-info-container,
|
||
.identifiers-block,
|
||
.token-balances,
|
||
.user-info {
|
||
width: 100%;
|
||
max-width: 450px;
|
||
padding: var(--block-padding);
|
||
margin-bottom: var(--block-margin);
|
||
background: var(--color-white);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* Заголовки в блоках */
|
||
.identifiers-block h3,
|
||
.token-balances h3,
|
||
.user-info h3 {
|
||
margin: 0 0 var(--spacing-md) 0;
|
||
font-size: var(--font-size-xl);
|
||
color: var(--color-dark);
|
||
border-bottom: 1px solid var(--color-grey-light);
|
||
padding-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
/* Элементы списков */
|
||
.identifier-item,
|
||
.token-balance,
|
||
.user-info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-sm);
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
.identifier-label,
|
||
.token-name,
|
||
.user-info-label {
|
||
min-width: 100px;
|
||
color: var(--color-grey);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.identifier-value,
|
||
.token-amount,
|
||
.user-info-value {
|
||
flex: 1;
|
||
font-family: monospace;
|
||
color: var(--color-dark);
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* Код верификации */
|
||
.verification-code {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-md);
|
||
background: var(--color-light);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--font-size-md);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.verification-code code {
|
||
font-family: monospace;
|
||
color: var(--color-dark);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.copied-message {
|
||
color: var(--color-primary);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
/* Сообщения об ошибках */
|
||
.error-message {
|
||
color: var(--color-error);
|
||
padding: var(--spacing-sm);
|
||
margin-top: var(--spacing-sm);
|
||
background: #ffebee;
|
||
border-radius: var(--radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.close-error {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-error);
|
||
cursor: pointer;
|
||
font-size: var(--font-size-xl);
|
||
padding: 0 var(--spacing-xs);
|
||
}
|
||
|
||
/* Медиа-запросы */
|
||
@media screen and (max-width: 480px) {
|
||
:root {
|
||
--button-height: var(--button-height-mobile);
|
||
--input-height: var(--input-height-mobile);
|
||
--block-padding: var(--block-padding-mobile);
|
||
--block-margin: var(--block-margin-mobile);
|
||
}
|
||
|
||
/* Общие стили для кнопок на мобильных */
|
||
.auth-btn,
|
||
.disconnect-btn,
|
||
.close-wallet-sidebar,
|
||
.send-email-btn,
|
||
.chat-buttons button,
|
||
.header-button,
|
||
.connect-btn,
|
||
.cancel-btn,
|
||
.bot-link {
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
width: var(--button-height);
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* Адаптация размеров текста */
|
||
.verification-code,
|
||
.identifier-item,
|
||
.token-balance,
|
||
.user-info-item {
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.identifier-label,
|
||
.token-name,
|
||
.user-info-label {
|
||
min-width: 80px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 360px) {
|
||
:root {
|
||
--block-padding: var(--spacing-sm);
|
||
--block-margin: var(--spacing-sm);
|
||
}
|
||
|
||
.close-wallet-sidebar {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.auth-btn,
|
||
.disconnect-btn,
|
||
.send-email-btn,
|
||
.chat-buttons button,
|
||
.header-button,
|
||
.connect-btn,
|
||
.cancel-btn,
|
||
.bot-link {
|
||
font-size: var(--font-size-xs);
|
||
padding: 0 var(--spacing-sm);
|
||
}
|
||
|
||
.verification-code {
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
}
|
||
|
||
/* Анимации */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateY(-50px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Анимации для боковой панели */
|
||
.sidebar-slide-enter-active,
|
||
.sidebar-slide-leave-active {
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.sidebar-slide-enter-from,
|
||
.sidebar-slide-leave-to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar-slide-enter-to,
|
||
.sidebar-slide-leave-from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|