Place the assistant's mark with a transform, not a background percentage
The image is wider than the transcript is tall, so as a background it overflowed and percentage positioning ran backwards — nudging it down visibly raised it.
This commit is contained in:
@@ -160,9 +160,15 @@ function vv_ai_chat_assets(): void {
|
||||
its padding box and drift as the transcript scrolls, and a child element would scroll away with
|
||||
the messages. inset:0 on the positioned wrapper holds it still behind whatever moves. */
|
||||
.vv-ai-chat-wrap { background:#0b0b0b; border-radius:6px; }
|
||||
/* Positioned box with a transform, not a background-position percentage.
|
||||
The mark is wider than this transcript is tall, so as a background it overflows vertically —
|
||||
and percentage positioning on an overflowing image runs BACKWARDS: raising the number moves it
|
||||
up. Nudging it "down" from 74% to 86% visibly raised it. A sized box centred on a point behaves
|
||||
the way the number reads, and matches how the mesh pane places the same image. */
|
||||
.vv-ai-chat-wrap::before {
|
||||
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
|
||||
background:url('/plugins/varaverk/icons/varaverk.png') center 86%/min(84%,520px) no-repeat;
|
||||
content:''; position:absolute; left:50%; top:74%; transform:translate(-50%,-50%);
|
||||
width:min(84%,520px); aspect-ratio:1; z-index:0; pointer-events:none;
|
||||
background:url('/plugins/varaverk/icons/varaverk.png') center/contain no-repeat;
|
||||
opacity:.032; filter:grayscale(1);
|
||||
}
|
||||
.vv-ai-empty { color:#3a3a3a; font-size:12px; text-align:center; padding:60px 20px; line-height:1.7; }
|
||||
|
||||
Reference in New Issue
Block a user