Чат v1.1.1: упростить ввод и стороны по устройству

This commit is contained in:
2026-08-24 12:17:13 +03:00
parent d7624dfade
commit 1a56d2f8a1
17 changed files with 146 additions and 318 deletions
+1 -1
View File
@@ -43,7 +43,7 @@ font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monos
- Десктоп: сайдбар 224 px с правой границей `line`, шапка 64 px, отступы контента 32 px.
- Мобильный: шапка 56 px, отступы 20 px, ввод с min-height 44 px. Нижнее поле подвала и строки ввода считается с `env(safe-area-inset-bottom)`: под системную полосу iPhone они не заходят (ADR-075).
- Сообщения — поток на обеих ширинах, автор и время над текстом; свои — у правого края ленты, чужие — у левого, ширина блока не больше `min(640px, 85%)` (ADR-065).
- Сообщения — поток, автор и время над текстом; на телефоне и планшете свои — у правого края, чужие — у левого, на десктопе все — у левого; ширина блока не больше `min(640px, 85%)` (ADR-077).
- Ввод — рамка 1 px ink, без скруглений, `>` цветом mark слева.
- Активный элемент списка — инверсия: фон ink, текст bone.
- Разделители — 1 px `line`; разделитель «новые» — 1 px mark.
+2 -1
View File
@@ -30,7 +30,7 @@
.author { color:var(--mute); font-size:12px; }
.author.me { color:var(--mark); }
.author .t { color:var(--stone); }
/* поток сообщений: свои — у правого края, чужие — у левого (ADR-065) */
/* поток сообщений: на touch своё справа, на десктопе всё слева (ADR-077) */
.msg { display:flex; flex-direction:column; gap:4px; max-width:min(640px, 85%); }
.msg.me { align-self:flex-end; align-items:flex-end; }
.msg p { margin:0; }
@@ -42,6 +42,7 @@
/* 2a — десктоп */
.desktop { width:1120px; height:700px; display:grid; grid-template-columns:224px 1fr; }
.desktop .msg.me { align-self:flex-start; align-items:flex-start; }
.side { border-right:1px solid var(--line); display:flex; flex-direction:column; }
.brand { height:64px; display:flex; align-items:center; gap:10px; padding:0 20px; border-bottom:1px solid var(--line); font-size:15px; letter-spacing:-0.02em; }
.list { padding:20px; display:flex; flex-direction:column; gap:2px; }