ваше сообщение коммита
This commit is contained in:
58
frontend/src/assets/styles/base.css
Normal file
58
frontend/src/assets/styles/base.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* frontend/src/assets/styles/base.css */
|
||||
|
||||
/* Общие стили для всех элементов */
|
||||
* {
|
||||
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);
|
||||
color: var(--color-dark);
|
||||
font-size: var(--font-size-md); /* Добавим базовый размер шрифта */
|
||||
line-height: 1.5; /* Добавим базовую высоту строки */
|
||||
}
|
||||
|
||||
/* Стили для монопространственных шрифтов (код, верификация) */
|
||||
code, .verification-code code, .address {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Унификация размеров шрифтов */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
line-height: 1.3; /* Сделаем заголовки чуть плотнее */
|
||||
margin-bottom: var(--spacing-md); /* Добавим отступ снизу по умолчанию */
|
||||
}
|
||||
|
||||
h1 { font-size: var(--font-size-xxl); }
|
||||
h2 { font-size: var(--font-size-xl); }
|
||||
h3 { font-size: var(--font-size-lg); }
|
||||
/* h3 из home.css имел margin-bottom, убрали здесь, чтобы не дублировать */
|
||||
|
||||
p {
|
||||
/* font-size и line-height уже заданы для body */
|
||||
margin-bottom: var(--spacing-md); /* Добавим отступ снизу */
|
||||
}
|
||||
|
||||
input, textarea, button {
|
||||
font-family: inherit; /* Наследуем шрифт */
|
||||
font-size: inherit; /* Наследуем размер шрифта */
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer; /* Указатель для всех кнопок */
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary); /* Базовый цвет ссылок */
|
||||
text-decoration: none; /* Убираем подчеркивание по умолчанию */
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; /* Подчеркивание при наведении */
|
||||
}
|
||||
@@ -51,7 +51,6 @@
|
||||
--transition-normal: 0.3s ease;
|
||||
|
||||
/* Размеры компонентов */
|
||||
--sidebar-width: 110px;
|
||||
--sidebar-expanded-width: 325px;
|
||||
--nav-btn-size: 40px;
|
||||
--chat-input-min-height: 100px;
|
||||
@@ -130,16 +129,13 @@ input, textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-lg);
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Адаптация контента при боковой панели */
|
||||
.sidebar-expanded ~ .main-content {
|
||||
margin-left: 190px;
|
||||
}
|
||||
|
||||
.main-content.no-right-sidebar {
|
||||
margin-right: 190px;
|
||||
}
|
||||
@@ -148,159 +144,15 @@ input, textarea {
|
||||
margin-right: 190px;
|
||||
}
|
||||
|
||||
/* Стили для боковой панели (sidebar) */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
background-color: var(--color-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: var(--spacing-lg);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.sidebar.sidebar-expanded {
|
||||
width: var(--sidebar-expanded-width);
|
||||
min-width: var(--sidebar-expanded-width);
|
||||
}
|
||||
|
||||
/* Кнопка меню в боковой панели */
|
||||
.menu-button {
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-dark);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 68px;
|
||||
position: fixed;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: var(--color-dark);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: var(--color-dark);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hamburger::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hamburger::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
/* Навигационные кнопки */
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
width: var(--sidebar-width);
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: 35px;
|
||||
top: 108px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
border: 1px solid var(--color-dark);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.nav-btn-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-dark);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn-text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-btn-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
/* Кнопка в нижней части боковой панели */
|
||||
.sidebar-bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 35px;
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
transition: width var(--transition-normal);
|
||||
}
|
||||
|
||||
.sidebar-expanded .sidebar-bottom-btn {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn-number {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .sidebar-bottom-btn .nav-btn-text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: static;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Стили для контейнера чата */
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(--spacing-lg) 0 35px 0;
|
||||
margin: var(--spacing-lg) auto;
|
||||
min-height: 500px;
|
||||
max-width: 1150px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -316,6 +168,7 @@ input, textarea {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||||
transition: bottom var(--transition-normal);
|
||||
}
|
||||
|
||||
@@ -632,7 +485,7 @@ input, textarea {
|
||||
}
|
||||
|
||||
/* Стили для правой панели */
|
||||
.wallet-sidebar {
|
||||
.wallet-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -660,382 +513,10 @@ input, textarea {
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Блок с кнопкой отключения */
|
||||
.disconnect-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disconnect-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-error);
|
||||
color: var(--color-error);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-size-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.disconnect-btn:hover {
|
||||
background-color: #ffebee;
|
||||
}
|
||||
|
||||
/* Кнопка закрытия */
|
||||
.close-wallet-sidebar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-dark);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: all var(--transition-normal);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.close-wallet-sidebar:hover {
|
||||
background-color: var(--color-grey-light);
|
||||
border-color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* Блок идентификаторов */
|
||||
.identifiers-block {
|
||||
width: 100%;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.identifiers-block 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 {
|
||||
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 (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);
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для блока кнопок авторизации */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Стили для заголовка */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Стили для кнопок авторизации */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Стили для блока информации о пользователе и баланса токенов */
|
||||
.user-info, .token-balances {
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-info h3, .token-balances h3 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-dark);
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-info-item, .token-balance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.user-info-label, .token-name {
|
||||
min-width: 80px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info-value, .token-amount {
|
||||
flex: 1;
|
||||
color: var(--color-dark);
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
margin-left: var(--spacing-xs);
|
||||
color: #666;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Стили для кнопки бургера в шапке */
|
||||
.header-wallet-btn {
|
||||
margin-left: var(--spacing-lg);
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
color: var(--color-dark);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
transition: background-color var(--transition-normal);
|
||||
position: relative;
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-wallet-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-wallet-btn .nav-btn-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-wallet-btn .nav-btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before,
|
||||
.header-wallet-btn::after,
|
||||
.header-wallet-btn .hamburger-line {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: var(--color-dark);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.header-wallet-btn::before {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::after {
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.header-wallet-btn .hamburger-line {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Анимация при наведении */
|
||||
.header-wallet-btn:hover::before {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.header-wallet-btn:hover::after {
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
/* Анимация при активном состоянии */
|
||||
.header-wallet-btn.active::before {
|
||||
transform: rotate(45deg);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.header-wallet-btn.active::after {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.header-wallet-btn.active .hamburger-line {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Стили для заголовка */
|
||||
.header {
|
||||
background: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-grey-light);
|
||||
padding: var(--spacing-lg) 0;
|
||||
padding: 15px 20px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@@ -1134,97 +615,43 @@ input, textarea {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
.wallet-sidebar {
|
||||
width: 100%;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.wallet-sidebar-content {
|
||||
padding: 0;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: var(--spacing-md);
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sidebar-block h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.identifier-item,
|
||||
.token-balance {
|
||||
.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,
|
||||
.token-name {
|
||||
.identifier-label {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin: var(--spacing-sm) 0 25px 0;
|
||||
height: calc(100vh - 165px);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 85%;
|
||||
padding: 8px var(--spacing-sm);
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.chat-input textarea {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
margin-right: var(--spacing-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
white-space: normal;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-wallet-btn {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@@ -1236,171 +663,24 @@ input, textarea {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
height: 32px;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.wallet-header-buttons {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.wallet-connect-btn-header,
|
||||
.wallet-disconnect-btn-header,
|
||||
.auth-btn.disconnect-wallet-btn {
|
||||
height: 32px;
|
||||
font-size: var(--font-size-sm);
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.auth-buttons-container {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
height: 32px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin: var(--spacing-xs) 0 var(--spacing-lg) 0;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 90%;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
height: 36px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.ai-message, .user-message {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-buttons button {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.auth-btn,
|
||||
.email-btn,
|
||||
.telegram-btn,
|
||||
.connect-wallet-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.send-email-btn,
|
||||
button.email-btn {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.chat-buttons {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.chat-buttons button {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.header-wallet-btn {
|
||||
margin-left: var(--spacing-xs);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before,
|
||||
.header-wallet-btn::after,
|
||||
.header-wallet-btn .hamburger-line {
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::after {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.auth-buttons-container {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.auth-buttons-container button.auth-btn,
|
||||
.auth-buttons-container button.email-btn,
|
||||
.auth-buttons-container button.telegram-btn,
|
||||
.auth-buttons-container button.connect-wallet-btn {
|
||||
height: 42px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
.wallet-sidebar {
|
||||
padding: 8px 3px;
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.wallet-connect-btn-header,
|
||||
.wallet-disconnect-btn-header,
|
||||
.auth-btn.disconnect-wallet-btn {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.close-wallet-sidebar {
|
||||
font-size: 16px;
|
||||
}
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.identifiers-block {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.identifiers-block h3 {
|
||||
font-size: var(--font-size-md);
|
||||
padding-bottom: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимации */
|
||||
@@ -1711,7 +991,7 @@ input, textarea {
|
||||
}
|
||||
|
||||
/* Кнопка закрытия */
|
||||
.close-wallet-sidebar {
|
||||
.close-wallet-sidebar {
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
min-width: var(--nav-btn-size);
|
||||
|
||||
81
frontend/src/assets/styles/layout.css
Normal file
81
frontend/src/assets/styles/layout.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* frontend/src/assets/styles/app-layout.css */
|
||||
|
||||
/* Общий контейнер приложения */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex-direction: column; /* Header сверху, остальное ниже */
|
||||
height: 100vh;
|
||||
overflow: hidden; /* Предотвращаем двойную прокрутку */
|
||||
}
|
||||
|
||||
/* Обертка для основного контента и сайдбара */
|
||||
.app-content-wrapper {
|
||||
display: flex;
|
||||
flex-grow: 1; /* Занимает все доступное пространство под хедером */
|
||||
overflow: hidden; /* Важно для предотвращения двойной прокрутки */
|
||||
}
|
||||
|
||||
/* Контейнер для RouterView */
|
||||
.main-view {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto; /* Позволяет прокручивать только контент страницы */
|
||||
position: relative; /* Для позиционирования оверлея загрузки */
|
||||
height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер (примерное значение) */
|
||||
}
|
||||
|
||||
/* Оверлей загрузки для основного вида */
|
||||
.loading-overlay.main-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1000; /* Выше контента, ниже хедера/сайдбара */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* Стили для сайдбара (возможно, нужно перенести из Sidebar.vue или home.css) */
|
||||
.wallet-sidebar {
|
||||
width: var(--sidebar-width, 300px); /* Ширина сайдбара */
|
||||
flex-shrink: 0;
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey-light);
|
||||
transition: width 0.3s ease;
|
||||
overflow-y: auto; /* Позволяет прокручивать сайдбар */
|
||||
height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер */
|
||||
position: relative; /* Или sticky, если нужно */
|
||||
}
|
||||
|
||||
/* Анимация появления/скрытия сайдбара */
|
||||
.sidebar-slide-enter-active,
|
||||
.sidebar-slide-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-slide-enter-from,
|
||||
.sidebar-slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Адаптация */
|
||||
@media (max-width: 768px) {
|
||||
/* На мобильных можно скрывать сайдбар по умолчанию
|
||||
и показывать его как оверлей или уменьшать ширину */
|
||||
.wallet-sidebar {
|
||||
width: var(--sidebar-width-mobile, 250px);
|
||||
/* Можно добавить position: fixed; top: var(--header-height); right: 0;
|
||||
если нужен оверлей */
|
||||
}
|
||||
}
|
||||
|
||||
/* Определим переменную для высоты хедера, если нужно */
|
||||
:root {
|
||||
--header-height: 65px; /* Примерная высота хедера из Header.vue */
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-width-mobile: 250px;
|
||||
}
|
||||
80
frontend/src/assets/styles/variables.css
Normal file
80
frontend/src/assets/styles/variables.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* frontend/src/assets/styles/variables.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 width) */
|
||||
/* --sidebar-width: 110px; */
|
||||
/* --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);
|
||||
}
|
||||
Reference in New Issue
Block a user