Jason Zimdars
101 lines
2.0 KiB
CSS
101 lines
2.0 KiB
CSS
@layer components {
|
|
.conversation {
|
|
padding-block-end: 6em;
|
|
}
|
|
|
|
.conversation__composer {
|
|
background-color: var(--color-white);
|
|
border-block-start: 1px solid var(--color-ink-lighter);
|
|
border-radius: 0 0 0.5em 0.5em;
|
|
display: flex;
|
|
gap: var(--inline-space);
|
|
inset: auto 0 0 0;
|
|
padding: var(--block-space-half) var(--block-space);
|
|
position: absolute;
|
|
|
|
.conversation__submit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.conversation__input {
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
|
|
.input--textarea {
|
|
--input-padding: 0.5em !important;
|
|
}
|
|
}
|
|
|
|
.conversation__message {
|
|
display: flex;
|
|
|
|
.action-text-content {
|
|
background-color: var(--color-ink-lightest);
|
|
border-radius: 0.5rem;
|
|
font-size: var(--text-x-small);
|
|
inline-size: fit-content;
|
|
padding: var(--block-space);
|
|
}
|
|
|
|
p {
|
|
&:first-of-type {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation__message--assistant {
|
|
justify-content: 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--user {
|
|
justify-content: flex-end;
|
|
|
|
.action-text-content {
|
|
background-color: var(--color-selected);
|
|
margin-inline-start: 15%;
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.conversation__thinking-indicator {
|
|
padding: var(--block-space);
|
|
}
|
|
|
|
.conversation__thinking-indicator--ready {
|
|
display: none;
|
|
}
|
|
|
|
.conversation__thinking-indicator--thinking {
|
|
display: block;
|
|
}
|
|
|
|
.conversation__transcript {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--block-space);
|
|
max-block-size: calc(100dvh - 6em - var(--block-space) - 2 * var(--footer-height));
|
|
overflow-y: auto;
|
|
padding: var(--block-space-half) var(--block-space-half);
|
|
}
|
|
}
|