/ easyshell-web / src / components / MarkdownContent.css
MarkdownContent.css
  1  
  2  .markdown-container {
  3    --mc-border: var(--border-color);
  4    --mc-bg-card-hover: var(--bg-card-hover);
  5  }
  6  
  7  .code-block-wrapper {
  8    margin: 16px 0;
  9    border-radius: 8px;
 10    border: 1px solid var(--border-color);
 11    background: var(--bg-card);
 12    overflow: hidden;
 13  }
 14  
 15  .code-block-header {
 16    display: flex;
 17    justify-content: space-between;
 18    align-items: center;
 19    padding: 6px 12px;
 20    background: var(--bg-card-hover);
 21    border-bottom: 1px solid var(--border-color);
 22  }
 23  
 24  .code-block-lang {
 25    font-size: 12px;
 26    color: var(--text-secondary);
 27    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 28    text-transform: lowercase;
 29  }
 30  
 31  .code-block-copy {
 32    background: transparent;
 33    border: none;
 34    color: var(--text-secondary);
 35    cursor: pointer;
 36    padding: 4px;
 37    border-radius: 4px;
 38    display: flex;
 39    align-items: center;
 40    justify-content: center;
 41    transition: all 0.2s;
 42  }
 43  
 44  .code-block-copy:hover {
 45    background: var(--bg-card);
 46    color: var(--text-primary);
 47  }
 48  
 49  .code-block-pre {
 50    margin: 0;
 51    padding: 12px;
 52    overflow-x: auto;
 53    font-size: 13px;
 54    line-height: 1.5;
 55    background: transparent;
 56  }
 57  
 58  code.inline-code {
 59    background: var(--bg-card-hover);
 60    padding: 2px 6px;
 61    border-radius: 4px;
 62    font-size: 13px;
 63    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 64    color: var(--text-primary);
 65  }
 66  
 67  .markdown-table-wrapper {
 68    overflow-x: auto;
 69    margin: 16px 0;
 70  }
 71  
 72  .markdown-table {
 73    border-collapse: collapse;
 74    width: 100%;
 75    font-size: 13px;
 76  }
 77  
 78  .markdown-table th {
 79    border: 1px solid var(--border-color);
 80    padding: 8px 12px;
 81    background: var(--bg-card-hover);
 82    text-align: left;
 83    font-weight: 600;
 84    color: var(--text-primary);
 85  }
 86  
 87  .markdown-table td {
 88    border: 1px solid var(--border-color);
 89    padding: 8px 12px;
 90    color: var(--text-primary);
 91  }
 92  
 93  [data-theme='light'] .hljs {
 94    color: #24292e;
 95    background: transparent;
 96  }
 97  [data-theme='light'] .hljs-doctag,
 98  [data-theme='light'] .hljs-keyword,
 99  [data-theme='light'] .hljs-meta .hljs-keyword,
100  [data-theme='light'] .hljs-template-tag,
101  [data-theme='light'] .hljs-template-variable,
102  [data-theme='light'] .hljs-type,
103  [data-theme='light'] .hljs-variable.language_ {
104    color: #d73a49;
105  }
106  [data-theme='light'] .hljs-title,
107  [data-theme='light'] .hljs-title.class_,
108  [data-theme='light'] .hljs-title.class_.inherited__,
109  [data-theme='light'] .hljs-title.function_ {
110    color: #6f42c1;
111  }
112  [data-theme='light'] .hljs-attr,
113  [data-theme='light'] .hljs-attribute,
114  [data-theme='light'] .hljs-literal,
115  [data-theme='light'] .hljs-meta,
116  [data-theme='light'] .hljs-number,
117  [data-theme='light'] .hljs-operator,
118  [data-theme='light'] .hljs-variable,
119  [data-theme='light'] .hljs-selector-attr,
120  [data-theme='light'] .hljs-selector-class,
121  [data-theme='light'] .hljs-selector-id {
122    color: #005cc5;
123  }
124  [data-theme='light'] .hljs-regexp,
125  [data-theme='light'] .hljs-string,
126  [data-theme='light'] .hljs-meta .hljs-string {
127    color: #032f62;
128  }
129  [data-theme='light'] .hljs-built_in,
130  [data-theme='light'] .hljs-symbol {
131    color: #e36209;
132  }
133  [data-theme='light'] .hljs-comment,
134  [data-theme='light'] .hljs-code,
135  [data-theme='light'] .hljs-formula {
136    color: #6a737d;
137  }
138  [data-theme='light'] .hljs-name,
139  [data-theme='light'] .hljs-quote,
140  [data-theme='light'] .hljs-selector-tag,
141  [data-theme='light'] .hljs-selector-pseudo {
142    color: #22863a;
143  }
144  [data-theme='light'] .hljs-subst {
145    color: #24292e;
146  }
147  [data-theme='light'] .hljs-section {
148    color: #005cc5;
149    font-weight: bold;
150  }
151  [data-theme='light'] .hljs-bullet {
152    color: #735c0f;
153  }
154  [data-theme='light'] .hljs-emphasis {
155    color: #24292e;
156    font-style: italic;
157  }
158  [data-theme='light'] .hljs-strong {
159    color: #24292e;
160    font-weight: bold;
161  }
162  [data-theme='light'] .hljs-addition {
163    color: #22863a;
164    background-color: #f0fff4;
165  }
166  [data-theme='light'] .hljs-deletion {
167    color: #b31d28;
168    background-color: #ffeef0;
169  }
170  
171  [data-theme='dark'] .hljs {
172    color: #c9d1d9;
173    background: transparent;
174  }
175  [data-theme='dark'] .hljs-doctag,
176  [data-theme='dark'] .hljs-keyword,
177  [data-theme='dark'] .hljs-meta .hljs-keyword,
178  [data-theme='dark'] .hljs-template-tag,
179  [data-theme='dark'] .hljs-template-variable,
180  [data-theme='dark'] .hljs-type,
181  [data-theme='dark'] .hljs-variable.language_ {
182    color: #ff7b72;
183  }
184  [data-theme='dark'] .hljs-title,
185  [data-theme='dark'] .hljs-title.class_,
186  [data-theme='dark'] .hljs-title.class_.inherited__,
187  [data-theme='dark'] .hljs-title.function_ {
188    color: #d2a8ff;
189  }
190  [data-theme='dark'] .hljs-attr,
191  [data-theme='dark'] .hljs-attribute,
192  [data-theme='dark'] .hljs-literal,
193  [data-theme='dark'] .hljs-meta,
194  [data-theme='dark'] .hljs-number,
195  [data-theme='dark'] .hljs-operator,
196  [data-theme='dark'] .hljs-variable,
197  [data-theme='dark'] .hljs-selector-attr,
198  [data-theme='dark'] .hljs-selector-class,
199  [data-theme='dark'] .hljs-selector-id {
200    color: #79c0ff;
201  }
202  [data-theme='dark'] .hljs-regexp,
203  [data-theme='dark'] .hljs-string,
204  [data-theme='dark'] .hljs-meta .hljs-string {
205    color: #a5d6ff;
206  }
207  [data-theme='dark'] .hljs-built_in,
208  [data-theme='dark'] .hljs-symbol {
209    color: #ffa657;
210  }
211  [data-theme='dark'] .hljs-comment,
212  [data-theme='dark'] .hljs-code,
213  [data-theme='dark'] .hljs-formula {
214    color: #8b949e;
215  }
216  [data-theme='dark'] .hljs-name,
217  [data-theme='dark'] .hljs-quote,
218  [data-theme='dark'] .hljs-selector-tag,
219  [data-theme='dark'] .hljs-selector-pseudo {
220    color: #7ee787;
221  }
222  [data-theme='dark'] .hljs-subst {
223    color: #c9d1d9;
224  }
225  [data-theme='dark'] .hljs-section {
226    color: #1f6feb;
227    font-weight: bold;
228  }
229  [data-theme='dark'] .hljs-bullet {
230    color: #f2cc60;
231  }
232  [data-theme='dark'] .hljs-emphasis {
233    color: #c9d1d9;
234    font-style: italic;
235  }
236  [data-theme='dark'] .hljs-strong {
237    color: #c9d1d9;
238    font-weight: bold;
239  }
240  [data-theme='dark'] .hljs-addition {
241    color: #aff5b4;
242    background-color: #033a16;
243  }
244  [data-theme='dark'] .hljs-deletion {
245    color: #ffdcd7;
246    background-color: #67060c;
247  }
248  
249  code.hljs {
250    padding: 0;
251  }