SHA256
Merge: UI «Связи» (финал) + редизайн «Личные» (чистый прод) в main
- Граф «Связи»: обновлён до финальной версии поверх PR #3 «pixel-связи» (орбы 12/13.06, единый PNG-оверлей орбов, мягкий край, вибрация выключена). - «Личные»: редизайн списка как формы «Связей» — фото-аватары/инициалы, золотая галочка подтверждения у имени, значок-цепочка связи с попапом пути (Ты → посредники → цель) и переходом в профиль, граница карточки по типу связи, шапка «Shine». Данные пока мок-плейсхолдер (реальные relations/чаты — отдельная задача с бэкендом). - Чистый прод: сняты обе демо-лаборатории (граф/ЛС), demo-чат, гость-обвязка ЛС и demo-avatars; экран «Личные» под логином. - Сохранена работа агента в main (DM-ревизии/редактирование, wallet/pairing, esp32). - VERSION: client 1.2.217 (server 1.2.204 без изменений). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pixel
+191
-86
@@ -1,3 +1,9 @@
|
||||
/* Глобально отключаем синюю tap-подсветку мобильных браузеров/WebView на ВСЕХ элементах
|
||||
(Android/Chromium): синего квадрата при нажатии нигде быть не должно. */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3562,13 +3568,24 @@ textarea.input {
|
||||
}
|
||||
|
||||
.dm-dialog-card {
|
||||
background: rgba(20, 25, 35, 0.4);
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 60px minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 92px; /* карточки не ужимаем; тап-зона ≥44px */
|
||||
padding: 14px 16px 14px 14px;
|
||||
border-radius: 26px;
|
||||
background: rgba(7, 10, 18, 0.88);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(140, 99, 255, 0.32); /* оконтовка = цвет линии связи; default = violet (контакт) */
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
|
||||
cursor: pointer;
|
||||
}
|
||||
.dm-dialog-card:focus-visible { outline: 2px solid var(--rel-link); outline-offset: 2px; }
|
||||
.dm-card--family { border-color: rgba(240, 184, 46, 0.42); } /* линия связи: gold (семья) */
|
||||
.dm-card--shining { border-color: rgba(104, 216, 255, 0.45); } /* линия связи: cyan (сияющий) */
|
||||
|
||||
.dm-screen .list-item .avatar {
|
||||
width: 48px;
|
||||
@@ -3591,66 +3608,142 @@ textarea.input {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dm-status-line {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
/* ===== «Личные сообщения» v2 — списочная форма «Связей» ===== */
|
||||
/* Токены-мост: НЕ придумываем цвета, наследуем канонический язык «Связей» (network-graph.css :root). */
|
||||
.dm-screen {
|
||||
--dm-tone-default: var(--rel-contact);
|
||||
--dm-tone-family: var(--rel-family);
|
||||
--dm-tone-shining: var(--rel-shining);
|
||||
}
|
||||
|
||||
.dm-screen .unread {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(212, 175, 55, 0.5);
|
||||
background: rgba(212, 175, 55, 0.22);
|
||||
color: rgba(255, 200, 50, 0.95);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
|
||||
/* DM-шапка через grid 1fr auto 1fr: бренд слева, title строго по центру, «+» справа. */
|
||||
.dm-head {
|
||||
position: sticky; top: 0; z-index: 12;
|
||||
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
|
||||
padding: 14px 14px 0;
|
||||
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
|
||||
background: linear-gradient(180deg, rgba(10,12,18,0.82), rgba(10,12,18,0.0));
|
||||
}
|
||||
.dm-head-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.dm-head-hex {
|
||||
width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
|
||||
font-weight: 700; font-size: 15px; color: #1a1205;
|
||||
background: linear-gradient(150deg, #F0B82E, #D49F22);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
box-shadow: 0 0 14px rgba(240, 184, 46, 0.35);
|
||||
}
|
||||
.dm-head-id { min-width: 0; display: grid; }
|
||||
.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; }
|
||||
/* Центр шапки — светящийся бренд «Shine» */
|
||||
.dm-head-shine {
|
||||
font-size: 21px; letter-spacing: 0.6px; color: #FCEAC0;
|
||||
text-shadow: 0 0 6px rgba(240, 184, 46, 0.55), 0 0 16px rgba(240, 184, 46, 0.38), 0 0 30px rgba(240, 184, 46, 0.20);
|
||||
animation: dm-shine-pulse 3.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dm-shine-pulse {
|
||||
0%, 100% { text-shadow: 0 0 5px rgba(240, 184, 46, 0.42), 0 0 12px rgba(240, 184, 46, 0.26), 0 0 22px rgba(240, 184, 46, 0.12); }
|
||||
50% { text-shadow: 0 0 9px rgba(240, 184, 46, 0.68), 0 0 20px rgba(240, 184, 46, 0.46), 0 0 34px rgba(240, 184, 46, 0.26); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .dm-head-shine { animation: none; } }
|
||||
.dm-head-plus {
|
||||
justify-self: end; width: 48px; height: 48px; border-radius: 15px;
|
||||
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);
|
||||
box-shadow: 0 0 20px rgba(240, 184, 46, 0.32), 0 0 6px rgba(240, 184, 46, 0.28), inset 0 0 12px rgba(240, 184, 46, 0.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
.dm-divider { position: relative; height: 18px; margin: 6px 14px 8px; }
|
||||
.dm-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 184, 46, 0.5), transparent); }
|
||||
.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-row-main { min-width: 0; }
|
||||
.dm-row-titleline { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||||
.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-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; }
|
||||
/* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
|
||||
.dm-av--default { box-shadow: none; }
|
||||
.dm-av--family { box-shadow: none; }
|
||||
/* Сияющий аватар = АДАПТАЦИЯ сияющего узла экрана «Связи»: та же небесная палитра, тот же небесный rim,
|
||||
тот же двойной «дышащий» пульс. Переиспользуем ОБЩИЕ keyframes графа (fg-shine-glow — пульс box-shadow,
|
||||
fg-shine-halo — дыхание радиального ореола; объявлены в network-graph.css, грузится глобально), а не рисуем
|
||||
второй похожий эффект. Радиальный ореол повторяет стопы узла графа; SVG-фильтр #fg-shine-glow есть только на
|
||||
стр. «Связи», поэтому здесь мягкий CSS-blur. Мини-сфера компактная — не размывает текст/соседей. */
|
||||
.dm-av--shining {
|
||||
border: 1px solid rgba(150, 240, 255, 0.62);
|
||||
animation: fg-shine-glow 3.6s ease-in-out infinite;
|
||||
}
|
||||
.dm-av--shining::before {
|
||||
content: ''; position: absolute; inset: -12px; border-radius: 50%; z-index: -1; pointer-events: none;
|
||||
background: radial-gradient(circle, rgba(140, 240, 255, 0.5) 0%, rgba(130, 235, 255, 0.18) 46%, rgba(130, 235, 255, 0) 72%);
|
||||
filter: blur(3.4px); /* = stdDeviation 3.4 SVG-фильтра #fg-shine-glow графа; геометрия inset −12px тоже как у узла (58px↔56px, scale≈1) */
|
||||
animation: fg-shine-halo 3.6s ease-in-out infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dm-av--shining { animation: none; }
|
||||
.dm-av--shining::before { animation: none; }
|
||||
}
|
||||
|
||||
.dm-row-meta-col {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
align-content: end;
|
||||
gap: 6px;
|
||||
min-width: 64px;
|
||||
align-self: stretch;
|
||||
/* правая зона: один статус сверху, ниже [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 */
|
||||
/* непрочитанные — отдельная violet-сфера (НЕ изумруд) */
|
||||
.dm-unread-badge {
|
||||
min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700; color: var(--text);
|
||||
background: rgba(140, 99, 255, 0.16); border: 1px solid rgba(140, 99, 255, 0.55);
|
||||
}
|
||||
.dm-chevron { display: inline-flex; color: rgba(244, 246, 255, 0.32); }
|
||||
.dm-chevron svg { width: 16px; height: 16px; }
|
||||
|
||||
.dm-row-main {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 4px;
|
||||
/* Значок «связь через кого» — ТОЛЬКО иконка (кликабельная); детали пути в попапе ниже */
|
||||
.dm-via {
|
||||
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
|
||||
width: 24px; height: 24px; padding: 0; border-radius: 8px; cursor: pointer;
|
||||
color: var(--rel-link); border: 1px solid rgba(25, 229, 138, 0.5); background: rgba(25, 229, 138, 0.08);
|
||||
}
|
||||
.dm-via-icon { display: inline-flex; }
|
||||
.dm-via-icon svg { width: 14px; height: 14px; }
|
||||
/* попап пути связи: Ты → …посредники… → он; узлы = аватар+имя, кликабельные → профиль */
|
||||
.dm-via-path {
|
||||
display: none; position: absolute; left: 14px; right: 14px; top: 46px; z-index: 6;
|
||||
flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 12px;
|
||||
background: rgba(8, 12, 20, 0.97); border: 1px solid rgba(25, 229, 138, 0.35);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
.dm-via-path.is-open { display: flex; }
|
||||
.dm-via-node {
|
||||
display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border-radius: 11px;
|
||||
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: var(--text); font-size: 12px; cursor: default;
|
||||
}
|
||||
button.dm-via-node { cursor: pointer; }
|
||||
button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
|
||||
.dm-via-node-ava { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
|
||||
.dm-via-node-ava .avatar { width: 20px; height: 20px; min-width: 20px; min-height: 20px; border: none; box-shadow: none; }
|
||||
.dm-via-node-ava .avatar-fallback { font-size: 9px; font-weight: 700; }
|
||||
.dm-via-me { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(150deg, #F0B82E, #D49F22); color: #1a1205; font-size: 10px; font-weight: 700; }
|
||||
.dm-via-node-name { white-space: nowrap; }
|
||||
.dm-via-arrow { font-size: 12px; color: rgba(25, 229, 138, 0.8); }
|
||||
|
||||
.dm-row-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dm-row-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dm-row-last-message {
|
||||
margin-top: 0 !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.dm-row-time {
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Горизонтальный overflow: орб-ореол .dm-screen::before выходит на 12px по бокам (inset -12px) и
|
||||
даёт лишний скролл. Фон НЕ меняем — клиппим overflow на уровне страницы (как просит ТЗ, п.4). */
|
||||
html, body { overflow-x: hidden; }
|
||||
|
||||
.dm-chat-wrap {
|
||||
gap: 12px;
|
||||
@@ -3851,34 +3944,6 @@ textarea.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* DM messages-list status + empty block as full glass buttons */
|
||||
.dm-screen .dm-status-line {
|
||||
display: block;
|
||||
width: calc(100% - 40px);
|
||||
margin: 2px 20px 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(18, 24, 38, 0.42);
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(212, 175, 55, 0.32);
|
||||
color: rgba(255, 227, 154, 0.92);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Hide "Нет диалогов." line on DM list per UI request */
|
||||
.dm-screen .dm-status-line {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dm-screen .dm-status-line.is-available {
|
||||
color: rgba(255, 227, 154, 0.92);
|
||||
}
|
||||
|
||||
.dm-screen .dm-status-line.is-unavailable {
|
||||
color: rgba(255, 161, 176, 0.95);
|
||||
}
|
||||
|
||||
.dm-screen .dm-list > .card.meta-muted {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
@@ -4008,6 +4073,39 @@ textarea.input {
|
||||
text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
|
||||
/* Неоновые PNG-иконки вкладок (свечение запечено в PNG). Цвет доп.свечения — var --tab-glow (инлайн на img). */
|
||||
.toolbar-icon-img {
|
||||
--tab-icon-size: 27px; /* крупнее (бар-иконки); герой ниже ещё больше */
|
||||
width: var(--tab-icon-size);
|
||||
height: var(--tab-icon-size);
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
transition: transform .12s ease, filter .15s ease;
|
||||
}
|
||||
/* Активная вкладка — лёгкое доп. свечение (подпись подсвечивается правилом .active span:last-child выше). */
|
||||
.toolbar-btn.active .toolbar-icon-img {
|
||||
filter: drop-shadow(0 0 5px var(--tab-glow)) brightness(1.08);
|
||||
}
|
||||
/* Нажатие — вдавливание + краткая вспышка свечения; на отпускании возврат. */
|
||||
.toolbar-btn:active .toolbar-icon-img {
|
||||
transform: scale(0.9);
|
||||
filter: drop-shadow(0 0 9px var(--tab-glow)) brightness(1.2);
|
||||
}
|
||||
/* «Связи» — герой: крупнее и всегда чуть светится сильнее остальных; press-feedback ярче. */
|
||||
.toolbar-btn-hero .toolbar-icon-img {
|
||||
/* Крупнее ВИЗУАЛЬНО через transform (origin center) — раскладочный размер как у остальных (27px),
|
||||
поэтому иконка остаётся на одной линии с другими, а не задирается вверх. */
|
||||
transform: scale(1.63); /* ≈44px при базовых 27px */
|
||||
filter: brightness(1.05); /* CSS-ореол убран — светится только сама PNG (логотип не тронут) */
|
||||
}
|
||||
.toolbar-btn-hero.active .toolbar-icon-img {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
.toolbar-btn-hero:active .toolbar-icon-img {
|
||||
transform: scale(1.47); /* 1.63 × 0.9 (нажатие) */
|
||||
filter: brightness(1.25); /* нажатие — только подсветление, без ореола */
|
||||
}
|
||||
|
||||
.toolbar-channels-hold-overlay {
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
@@ -4424,10 +4522,17 @@ textarea.input {
|
||||
.toolbar-btn-network {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent; /* нет синей вспышки-квадрата при тапе (Android WebView/Chromium) */
|
||||
}
|
||||
/* нет рамки/подсветки фокуса ВОКРУГ кнопки — светится только сама иконка (её drop-shadow) */
|
||||
.toolbar-btn-network:focus,
|
||||
.toolbar-btn-network:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toolbar-btn-network::before {
|
||||
content: "";
|
||||
display: none; /* подсветка-подложка вокруг иконки «Связи» убрана по запросу (иконка и её drop-shadow-ореол не тронуты) */
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 10px;
|
||||
|
||||
Reference in New Issue
Block a user