redtea/lpra
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: the clip and the send button keep to the last line of the message, as in Telegram

Browse Source
This commit is contained in:
redtea committed 2026-10-16 18:04:14 +03:00
1 parent 70729ef63f
commit 46f7f743b3
1 file changed
+7 -5
Download Patch File Download Diff File Expand all files Collapse all files
internal/server/web/static/app.css
+7 -5
View File
@@ -897,21 +897,23 @@ body.touch.term-active .ai-fab { bottom:104px; }
.ai-form-in { display:flex; padding:8px 10px 10px; } .ai-form-in { display:flex; padding:8px 10px 10px; }
.ai-inputbox { position:relative; min-width:0; flex:1; padding:5px; background:#0c0f13; border:1px solid var(--border); border-radius:13px; transition:border-color .15s, box-shadow .15s, background-color .15s; } .ai-inputbox { position:relative; min-width:0; flex:1; padding:5px; background:#0c0f13; border:1px solid var(--border); border-radius:13px; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.ai-inputbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(91,140,255,.12); } .ai-inputbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(91,140,255,.12); }
.ai-entry { display:flex; align-items:center; gap:5px; min-width:0; } /* The clip and send keep to the last line of the text, as in Telegram:
at the bottom, centred on that line (2px up from the field's bottom). */
.ai-entry { display:flex; align-items:flex-end; gap:5px; min-width:0; }
.ai-form-in textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:24px; padding:8px 6px; height:40px; max-height:140px; overflow-y:auto; color:var(--text); background:transparent; border:0; border-radius:8px; } .ai-form-in textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:24px; padding:8px 6px; height:40px; max-height:140px; overflow-y:auto; color:var(--text); background:transparent; border:0; border-radius:8px; }
.ai-form-in textarea:focus { outline:none; border-color:transparent; } .ai-form-in textarea:focus { outline:none; border-color:transparent; }
.ai-attach { flex:none; width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; } .ai-attach { flex:none; width:36px; height:36px; padding:0; margin-bottom:2px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
.ai-attach:hover { color:var(--text); background:#1b222c; } .ai-attach:hover { color:var(--text); background:#1b222c; }
/* Send, as in Telegram: no plate, a blue plane that comes in when there is /* Send, as in Telegram: no plate, a blue plane that comes in when there is
something to send (and stays as "stop" while the answer runs), and goes something to send (and stays as "stop" while the answer runs), and goes
away when the field is empty. A round shade under the pointer, like the away when the field is empty. A round shade under the pointer, like the
clip's. As far from the right edge as from the top and bottom. */ clip's. As far from the right edge as from the top and bottom. */
.ai-send { flex:none; box-sizing:border-box; width:0; height:36px; min-width:0; padding:0; margin:0 0 0 -5px; overflow:hidden; .ai-send { flex:none; box-sizing:border-box; width:0; height:36px; min-width:0; padding:0; margin:0 0 2px -5px; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; align-self:center; line-height:1; display:inline-flex; align-items:center; justify-content:center; align-self:flex-end; line-height:1;
color:var(--accent); background:transparent; border:0; border-radius:50%; color:var(--accent); background:transparent; border:0; border-radius:50%;
opacity:0; transform:scale(.4); pointer-events:none; opacity:0; transform:scale(.4); pointer-events:none;
transition:width .2s ease, margin .2s ease, opacity .16s ease, transform .24s cubic-bezier(.3,1.45,.55,1), background-color .15s, color .15s; } transition:width .2s ease, margin .2s ease, opacity .16s ease, transform .24s cubic-bezier(.3,1.45,.55,1), background-color .15s, color .15s; }
.ai-send.show { width:36px; margin:0 3px 0 0; opacity:1; transform:none; pointer-events:auto; } .ai-send.show { width:36px; margin:0 3px 2px 0; opacity:1; transform:none; pointer-events:auto; }
.ai-send:hover { color:#7ab6ff; background:#1b222c; } .ai-send:hover { color:#7ab6ff; background:#1b222c; }
.ai-send:active { transform:scale(.9); } .ai-send:active { transform:scale(.9); }
.ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); } .ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); }