Stanko Krtalić
112 lines
2.3 KiB
CSS
112 lines
2.3 KiB
CSS
@layer components {
|
|
.conversation__header {
|
|
align-items: center;
|
|
display: flex;
|
|
inset: 0 0 auto 0;
|
|
justify-content: flex-end;
|
|
padding: var(--block-space-half) var(--block-space);
|
|
position: absolute;
|
|
}
|
|
|
|
.conversation__composer-input.input {
|
|
--focus-ring-size: 0;
|
|
--input-border-color: var(--color-ink-light);
|
|
--input-border-radius: 0;
|
|
--input-padding: 0.1em;
|
|
|
|
border-width: 0 0 1px;
|
|
max-inline-size: 50ch;
|
|
}
|
|
|
|
.conversation__message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.action-text-content {
|
|
border-radius: 0.5rem;
|
|
inline-size: fit-content;
|
|
}
|
|
|
|
p {
|
|
&:first-of-type {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation__messages {
|
|
--gap: 4vmin;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
margin-inline: auto;
|
|
max-block-size: 75dvh;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
|
|
}
|
|
|
|
.conversation__message--assistant {
|
|
align-items: flex-start;
|
|
|
|
.action-text-content {
|
|
margin-inline-end: 15%;
|
|
text-align: start;
|
|
}
|
|
}
|
|
|
|
.conversation__message--emoji {
|
|
font-size: var(--text-xx-large);
|
|
}
|
|
|
|
.conversation__message--failed {
|
|
color: var(--color-negative);
|
|
}
|
|
|
|
.conversation__message--failed[data-error]::after {
|
|
color: var(--color-negative);
|
|
content: attr(data-error);
|
|
display: block;
|
|
padding: var(--inline-space);
|
|
}
|
|
|
|
.conversation__message--user {
|
|
align-items: flex-end;
|
|
|
|
.action-text-content {
|
|
background-color: var(--color-selected);
|
|
margin-inline-start: 15%;
|
|
padding: var(--block-space-half) var(--inline-space-double);
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.conversation__thinking-indicator {
|
|
inset: auto auto var(--footer-height) 50%;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
|
|
.spinner {
|
|
display: none;
|
|
|
|
.conversation__thinking-indicator--thinking & {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation__transcript {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--block-space);
|
|
inline-size: 100%;
|
|
margin-inline: auto;
|
|
max-inline-size: 67ch;
|
|
}
|
|
}
|