SHA256
UI: улучшить личные сообщения и поиск контактов
This commit is contained in:
AidarKC
+101
-13
@@ -1168,6 +1168,35 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.contact-search-form-card,
|
||||
.contact-search-results-card {
|
||||
margin: 0 6px;
|
||||
padding: 14px;
|
||||
border-radius: 24px;
|
||||
background: rgba(7, 10, 18, 0.88);
|
||||
border: 1px solid rgba(140, 99, 255, 0.24);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.contact-search-input {
|
||||
min-height: 48px;
|
||||
border-radius: 16px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.contact-search-results-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgba(252, 234, 192, 0.92);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-search-result-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
@@ -3573,8 +3602,8 @@ textarea.input {
|
||||
grid-template-columns: 60px minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 92px; /* карточки не ужимаем; тап-зона ≥44px */
|
||||
padding: 14px 16px 14px 14px;
|
||||
min-height: 74px;
|
||||
padding: 10px 12px 10px 10px;
|
||||
border-radius: 26px;
|
||||
background: rgba(7, 10, 18, 0.88);
|
||||
backdrop-filter: blur(24px);
|
||||
@@ -3636,6 +3665,7 @@ textarea.input {
|
||||
.dm-head-name { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-head-sub { font-size: 11px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-head-title { font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; text-align: center; padding: 0 6px; }
|
||||
.dm-list-screen .dm-head-title { color: #FCEAC0; text-shadow: 0 0 6px rgba(240, 184, 46, 0.32), 0 0 14px rgba(240, 184, 46, 0.12); }
|
||||
/* Центр шапки — светящийся бренд «Shine» */
|
||||
.dm-head-shine {
|
||||
font-size: 21px; letter-spacing: 0.6px; color: #FCEAC0;
|
||||
@@ -3648,7 +3678,7 @@ textarea.input {
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .dm-head-shine { animation: none; } }
|
||||
.dm-head-plus {
|
||||
justify-self: end; width: 48px; height: 48px; border-radius: 15px;
|
||||
justify-self: end; width: 48px; height: 48px; border-radius: 50%;
|
||||
display: grid; place-items: center; font-size: 24px; line-height: 1; font-weight: 300;
|
||||
color: #FFD98A; border: 1.5px solid rgba(240, 184, 46, 0.6);
|
||||
background: rgba(12, 12, 16, 0.66);
|
||||
@@ -3660,20 +3690,34 @@ textarea.input {
|
||||
.dm-divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: var(--rel-family); box-shadow: 0 0 8px var(--rel-family-glow); }
|
||||
|
||||
/* список: скролл внутри контента, карточки не ужимаем, отступ снизу под bottom nav (86px) + 16px */
|
||||
.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; padding-bottom: calc(86px + 16px); }
|
||||
.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; padding-bottom: calc(86px + 16px); }
|
||||
|
||||
/* текст карточки */
|
||||
.dm-row-main { min-width: 0; }
|
||||
.dm-row-titleline { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||||
.dm-row-titlewrap { flex-wrap: wrap; row-gap: 6px; }
|
||||
.dm-dialog-card .dm-row-title { font-size: 16px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-dialog-card .dm-row-last-message { font-size: 14px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-contact-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(244, 246, 255, 0.62);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* галочка-подтверждён у имени (золотая, без слова «Подтверждён») */
|
||||
.dm-name-check { display: inline-flex; flex: 0 0 auto; color: var(--rel-family); }
|
||||
.dm-name-check svg { width: 16px; height: 16px; }
|
||||
|
||||
/* AvatarRing — обод/свечение по тону (адаптация орбов «Связей», без тяжёлой магии) */
|
||||
.dm-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; position: relative; }
|
||||
.dm-av .avatar { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border: none; box-shadow: none; }
|
||||
.dm-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
|
||||
.dm-av .avatar { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border: none; box-shadow: none; }
|
||||
/* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
|
||||
.dm-av--default { box-shadow: none; }
|
||||
.dm-av--family { box-shadow: none; }
|
||||
@@ -3697,10 +3741,35 @@ textarea.input {
|
||||
.dm-av--shining::before { animation: none; }
|
||||
}
|
||||
|
||||
/* правая зона: один статус сверху, ниже [unread + chevron] */
|
||||
/* правая зона: один горизонтальный ряд [статус][unread][chevron] на общей оси */
|
||||
.dm-dialog-card .dm-row-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
|
||||
.dm-dialog-card .dm-row-meta .dm-chevron { margin-left: 4px; } /* отступ бейдж→chevron ≈ 12px */
|
||||
.dm-row-meta-col {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
.dm-row-meta-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.dm-row-meta-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.dm-row-time {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(244, 246, 255, 0.44);
|
||||
}
|
||||
.dm-row-time--empty {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* непрочитанные — отдельная violet-сфера (НЕ изумруд) */
|
||||
.dm-unread-badge {
|
||||
min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
|
||||
@@ -3711,6 +3780,17 @@ textarea.input {
|
||||
.dm-chevron { display: inline-flex; color: rgba(244, 246, 255, 0.32); }
|
||||
.dm-chevron svg { width: 16px; height: 16px; }
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.dm-dialog-card {
|
||||
grid-template-columns: 60px minmax(0, 1fr);
|
||||
row-gap: 10px;
|
||||
}
|
||||
.dm-row-meta-col {
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Значок «связь через кого» — ТОЛЬКО иконка (кликабельная); детали пути в попапе ниже */
|
||||
.dm-via {
|
||||
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
|
||||
@@ -3894,9 +3974,14 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.dm-message-actions-menu {
|
||||
width: min(52vw, 240px);
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
width: min(72vw, 220px);
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||||
background: rgba(10, 12, 18, 0.96);
|
||||
backdrop-filter: blur(22px);
|
||||
-webkit-backdrop-filter: blur(22px);
|
||||
}
|
||||
|
||||
.dm-floating-menu-layer {
|
||||
@@ -3925,7 +4010,10 @@ html, body { overflow-x: hidden; }
|
||||
|
||||
.dm-message-action-btn {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
justify-content: flex-start;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dm-message-action-btn--danger {
|
||||
|
||||
Reference in New Issue
Block a user