@import "ui-variables";
.chat-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 2%;
background: @base-background-color;
}
.top-display {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
height: 3em;
background-color: @base-background-color;
}
.top-button {
margin: 0 5px;
}
.chat-panel .thinking-indicator {
display: flex;
align-items: center;
}
.chat-panel .thinking-icon {
width: 2.4em;
height: 2.4em;
overflow: hidden;
background-image: url("atom://pulsar-edit-mcp-server/assets/thinking_spritesheet.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 600% 100%;
}
@keyframes thinking-sprite {
0% { background-position: 0% 0; }
100% { background-position: 100% 0; }
}
.chat-panel .thinking-icon.is-animating {
animation: thinking-sprite 0.8s steps(5) infinite;
}
.message { margin-bottom: .4rem; }
.message.user { color: @text-color-info; }
.message.assistant { color: @text-color-success; }
.message code { font-family: var(--editor-font-family); background: fade(@text-color-info, 10%); padding: 1px 4px; border-radius: 3px; }
.message pre code { display: block; padding: 8px; overflow-x: auto; }
.message a
#chat-input {
min-height: 60px;
resize: vertical;
margin: 0;
color: var(--standard-text-color);
border-color: @input-border-color;
background-color: var(--standard-app-background-color);
border-style: solid;
font-size: @input-font-size;
}
#send-button {
margin-top: 5px;
}
.chat-error {
color: #fff;
background-color: #c62828;
padding: 6px 8px;
border-radius: 4px;
margin: 4px 0;
white-space: pre-wrap;
}
.btn-error {
background-color: #c62828;
color: #fff;
}
.btn-error:hover,
.btn-error:focus {
background-color: #b71c1c;
}
#chat-display {
flex-grow: 1;
overflow-y: auto;
padding: 8px;
word-break: break-word;
white-space: normal; // allow Markdown flow
.hljs {
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px
}
/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs {
color: #24292e;
background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #032f62
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #22863a
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #24292e
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #735c0f
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
}
}
