128 lines
2.5 KiB
CSS
128 lines
2.5 KiB
CSS
.Message {
|
|
max-width: 90%;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.Message_role_assistant {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.Message_role_user {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.Message__content {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 1.25rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.Message_role_assistant .Message__content {
|
|
background: var(--ifm-color-emphasis-100);
|
|
color: var(--ifm-font-color-base);
|
|
border-top-left-radius: 0.25rem;
|
|
}
|
|
|
|
.Message_role_user .Message__content {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
border-bottom-right-radius: 0.25rem;
|
|
}
|
|
|
|
/* Markdown typography */
|
|
|
|
.Message__content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.Message__content p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.Message__content code {
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 4px;
|
|
background: var(--ifm-color-emphasis-200);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.Message__content pre {
|
|
margin: 0.5em 0;
|
|
padding: 0.75em;
|
|
overflow-x: auto;
|
|
border-radius: 6px;
|
|
background: var(--ifm-color-emphasis-100);
|
|
}
|
|
|
|
.Message__content pre code {
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
|
|
.Message__content ul,
|
|
.Message__content ol {
|
|
padding-left: 1.5em;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.Message__content table {
|
|
width: 100%;
|
|
margin: 0.5em 0;
|
|
border-collapse: collapse;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.Message__content th,
|
|
.Message__content td {
|
|
padding: 0.4em 0.75em;
|
|
border: 1px solid var(--ifm-color-emphasis-300);
|
|
text-align: left;
|
|
}
|
|
|
|
.Message__content th {
|
|
background: var(--ifm-color-emphasis-100);
|
|
font-weight: var(--ifm-font-weight-semibold);
|
|
}
|
|
|
|
.Message__content blockquote {
|
|
margin: 0.5em 0;
|
|
padding: 0.25em 1em;
|
|
border-left: 3px solid var(--ifm-color-emphasis-300);
|
|
color: var(--ifm-color-emphasis-700);
|
|
}
|
|
|
|
/* User role overrides for light-on-dark text */
|
|
|
|
.Message_role_user .Message__content code {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.Message_role_user .Message__content pre {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.Message_role_user .Message__content th,
|
|
.Message_role_user .Message__content td {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.Message_role_user .Message__content th {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.Message_role_user .Message__content blockquote {
|
|
border-left-color: rgba(255, 255, 255, 0.4);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.Message {
|
|
max-width: 100%;
|
|
}
|
|
}
|