Jason Zimdars
103 lines
2.1 KiB
CSS
103 lines
2.1 KiB
CSS
@layer components {
|
|
.conversation {
|
|
font-family: var(--font-sans);
|
|
padding-block-end: 6em;
|
|
}
|
|
|
|
.conversation__composer {
|
|
backdrop-filter: blur(24px);
|
|
display: flex;
|
|
gap: var(--inline-space);
|
|
inset: auto 0 0 0;
|
|
padding: var(--block-space);
|
|
position: absolute;
|
|
|
|
.conversation__submit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.conversation__header {
|
|
align-items: center;
|
|
backdrop-filter: blur(24px);
|
|
display: flex;
|
|
inset: 0 0 auto 0;
|
|
justify-content: space-between;
|
|
padding: var(--block-space);
|
|
position: absolute;
|
|
}
|
|
|
|
.conversation__input {
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
|
|
.input--textarea {
|
|
--input-padding: 0.5em !important;
|
|
}
|
|
|
|
.conversation:has(.conversation__thinking-indicator--thinking) & {
|
|
animation: pulse 1.5s infinite;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.conversation__message {
|
|
display: flex;
|
|
|
|
.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__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-ink-lightest);
|
|
margin-inline-start: 15%;
|
|
padding: var(--block-space-half) var(--inline-space-double);
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.conversation__transcript {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--block-space);
|
|
margin-inline: calc(var(--block-space-half) * -0.5);
|
|
max-block-size: calc(100dvh - 6em - var(--block-space-double) - 2 * var(--footer-height));
|
|
overflow-y: auto;
|
|
padding: var(--block-space-half) var(--block-space);
|
|
}
|
|
}
|