styling update
This commit is contained in:
230
style.css
230
style.css
@@ -177,7 +177,7 @@ kbd {
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
@@ -199,8 +199,9 @@ kbd {
|
||||
/* ==================== MESSAGES ==================== */
|
||||
.message {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
padding: 8px 16px;
|
||||
line-height: 1.9;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 16px;
|
||||
border-left: 3px solid transparent;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.2s ease forwards;
|
||||
@@ -229,6 +230,229 @@ kbd {
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
/* ==================== MARKDOWN ELEMENTS ==================== */
|
||||
/* Styles for markdown-rendered content in assistant messages */
|
||||
|
||||
.message.assistant .message-text p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
.message.assistant .message-text h1,
|
||||
.message.assistant .message-text h2,
|
||||
.message.assistant .message-text h3,
|
||||
.message.assistant .message-text h4,
|
||||
.message.assistant .message-text h5,
|
||||
.message.assistant .message-text h6 {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.message.assistant .message-text h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
margin: 1.5em 0 0.6em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text h2 {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
margin: 1.2em 0 0.5em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text h3 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
margin: 1em 0 0.4em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text h4 {
|
||||
font-size: 1.15em;
|
||||
font-weight: 600;
|
||||
margin: 1em 0 0.4em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text h5 {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
margin: 0.8em 0 0.3em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text h6 {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
margin: 0.8em 0 0.3em 0;
|
||||
}
|
||||
|
||||
/* First header in message should have no top margin */
|
||||
.message.assistant .message-text h1:first-child,
|
||||
.message.assistant .message-text h2:first-child,
|
||||
.message.assistant .message-text h3:first-child,
|
||||
.message.assistant .message-text h4:first-child,
|
||||
.message.assistant .message-text h5:first-child,
|
||||
.message.assistant .message-text h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.message.assistant .message-text code {
|
||||
background: var(--ctp-surface0);
|
||||
color: var(--ctp-pink);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.message.assistant .message-text pre {
|
||||
background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-left: 3px solid var(--ctp-mauve);
|
||||
padding: 16px;
|
||||
margin: 1.2em 0;
|
||||
overflow-x: auto;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.assistant .message-text pre code {
|
||||
background: transparent;
|
||||
color: var(--ctp-text);
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.message.assistant .message-text ul,
|
||||
.message.assistant .message-text ol {
|
||||
margin: 1em 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
.message.assistant .message-text li {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.message.assistant .message-text ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
/* Custom bullet colors */
|
||||
.message.assistant .message-text ul li::marker {
|
||||
color: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.message.assistant .message-text ol li::marker {
|
||||
color: var(--ctp-mauve);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.message.assistant .message-text a {
|
||||
color: var(--ctp-sapphire);
|
||||
text-decoration: underline;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.message.assistant .message-text a:hover {
|
||||
color: var(--ctp-sky);
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.message.assistant .message-text blockquote {
|
||||
border-left: 3px solid var(--ctp-overlay0);
|
||||
padding-left: 12px;
|
||||
margin: 0.8em 0;
|
||||
color: var(--ctp-subtext0);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.message.assistant .message-text hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--ctp-surface1);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.message.assistant .message-text table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.message.assistant .message-text th,
|
||||
.message.assistant .message-text td {
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.message.assistant .message-text th {
|
||||
background: var(--ctp-surface0);
|
||||
color: var(--ctp-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Strong and emphasis */
|
||||
.message.assistant .message-text strong {
|
||||
font-weight: 700;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.message.assistant .message-text em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Copy button for code blocks */
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: var(--ctp-surface1);
|
||||
color: var(--ctp-text);
|
||||
border: 1px solid var(--ctp-surface2);
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.message.assistant .message-text pre:hover .copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--ctp-surface2);
|
||||
border-color: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.copy-button:active {
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.copy-button.copied {
|
||||
background: var(--ctp-green);
|
||||
color: var(--ctp-base);
|
||||
border-color: var(--ctp-green);
|
||||
}
|
||||
|
||||
/* ==================== CHAT INPUT ==================== */
|
||||
.chat-input {
|
||||
padding: 16px;
|
||||
|
||||
Reference in New Issue
Block a user