Skip to content

Commit 82b2597

Browse files
author
ci-bot
committed
update md rendering
1 parent 866d03b commit 82b2597

File tree

4 files changed

+1043
-10
lines changed

4 files changed

+1043
-10
lines changed

‎apps/learneth/src/pages/StepDetail/index.scss‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,370 @@ markdown {
7272
filter: brightness(90%);
7373
transition: filter 0.2s ease-in-out;
7474
}
75+
76+
77+
/* ========================================================
78+
MODERN AI CHAT STYLING - VS Code / Cursor Style
79+
======================================================== */
80+
81+
/* Paragraphs */
82+
.ai-paragraph {
83+
margin: 0.5em 0;
84+
line-height: 1.6;
85+
font-size: 1rem;
86+
}
87+
88+
.ai-paragraph:first-child {
89+
margin-top: 0;
90+
}
91+
92+
.ai-paragraph:last-child {
93+
margin-bottom: 0;
94+
}
95+
96+
/* Headings */
97+
.ai-heading {
98+
margin: 0;
99+
font-weight: 600;
100+
line-height: 1.3;
101+
}
102+
103+
.ai-heading:first-child {
104+
margin-top: 0.5em;
105+
}
106+
107+
.ai-h1 {
108+
font-size: 1.85rem;
109+
border-bottom: 1px solid var(--bs-border-color);
110+
padding-bottom: 0.3em;
111+
}
112+
113+
.ai-h2 {
114+
font-size: 1.6rem;
115+
border-bottom: 1px solid var(--bs-border-color);
116+
padding-bottom: 0.3em;
117+
}
118+
119+
.ai-h3 {
120+
font-size: 1.35rem;
121+
}
122+
123+
.ai-h4 {
124+
font-size: 1.15rem;
125+
}
126+
127+
.ai-h5 {
128+
font-size: 1.05rem;
129+
}
130+
131+
.ai-h6 {
132+
font-size: 0.95rem;
133+
color: var(--bs-secondary);
134+
}
135+
136+
/* Inline Code */
137+
.ai-inline-code {
138+
background: rgba(110, 118, 129, 0.4);
139+
color: var(--bs-body-color);
140+
padding: 0.2em 0.4em;
141+
border-radius: 3px;
142+
font-size: 0.75em;
143+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
144+
white-space: pre-wrap;
145+
word-break: break-word;
146+
}
147+
148+
/* Code Block Wrapper */
149+
.ai-code-block-wrapper {
150+
position: relative;
151+
margin: 1em 0;
152+
background: rgba(110, 118, 129, 0.15);
153+
border: 1px solid var(--bs-border-color);
154+
border-radius: 6px;
155+
overflow: hidden;
156+
font-size: 0.75em;
157+
}
158+
159+
/* Code Header with Language Tag */
160+
.ai-code-header {
161+
display: flex;
162+
justify-content: space-between;
163+
align-items: center;
164+
padding: 0.5rem 0.75rem;
165+
background: rgba(112, 149, 200, 0.2);
166+
border-bottom: 1px solid var(--bs-border-color);
167+
}
168+
169+
.ai-code-language {
170+
font-size: 0.75rem;
171+
font-weight: 600;
172+
text-transform: uppercase;
173+
letter-spacing: 0.5px;
174+
}
175+
176+
/* Copy Button Styles */
177+
.ai-copy-btn {
178+
background: transparent;
179+
border: none;
180+
color: var(--bs-secondary);
181+
padding: 0.25rem 0.5rem;
182+
border-radius: 4px;
183+
cursor: pointer;
184+
transition: all 0.2s ease;
185+
font-size: 0.85rem;
186+
}
187+
188+
.ai-copy-btn:hover {
189+
background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.1));
190+
color: var(--bs-emphasis-color);
191+
}
192+
193+
.ai-copy-btn:active {
194+
transform: scale(0.95);
195+
}
196+
197+
.ai-copy-btn-absolute {
198+
position: absolute;
199+
top: 0.5rem;
200+
right: 0.5rem;
201+
z-index: 10;
202+
}
203+
204+
/* Code Pre */
205+
.ai-code-pre {
206+
margin: 0;
207+
padding: 0.75rem;
208+
overflow-x: auto;
209+
background: transparent;
210+
line-height: 1.5;
211+
font-size: 0.6rem;
212+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
213+
}
214+
215+
.ai-code-pre code {
216+
background: transparent;
217+
padding: 0;
218+
border: none;
219+
font-size: inherit;
220+
color: inherit;
221+
white-space: pre;
222+
word-break: normal;
223+
}
224+
225+
/* Lists */
226+
.ai-list {
227+
margin: 0;
228+
padding-left: 1.5rem;
229+
line-height: 1.6;
230+
font-size: 1rem;
231+
}
232+
233+
.ai-list-unordered {
234+
list-style-type: disc;
235+
}
236+
237+
.ai-list-ordered {
238+
list-style-type: decimal;
239+
}
240+
241+
.ai-list-item {
242+
margin: 0.25em 0;
243+
padding-left: 0.25rem;
244+
}
245+
246+
.ai-list-item > .ai-list {
247+
margin: 0.25em 0;
248+
}
249+
250+
.ai-list-item > p {
251+
margin: 0.25em 0;
252+
}
253+
254+
/* Links */
255+
.ai-link {
256+
color: var(--bs-link-color);
257+
text-decoration: underline;
258+
text-decoration-color: var(--bs-link-color);
259+
text-decoration-thickness: 1px;
260+
text-underline-offset: 2px;
261+
transition: all 0.2s ease;
262+
}
263+
264+
.ai-link:hover {
265+
color: var(--bs-link-hover-color);
266+
text-decoration-color: var(--bs-link-hover-color);
267+
text-decoration-thickness: 2px;
268+
}
269+
270+
/* Blockquotes */
271+
.ai-blockquote {
272+
margin: 1em 0;
273+
padding: 0.5em 1em;
274+
border-left: 4px solid var(--bs-primary, #0d6efd);
275+
background: rgba(110, 118, 129, 0.15);
276+
border-radius: 0 4px 4px 0;
277+
color: var(--bs-body-color);
278+
font-style: italic;
279+
}
280+
281+
.ai-blockquote > p:first-child {
282+
margin-top: 0;
283+
}
284+
285+
.ai-blockquote > p:last-child {
286+
margin-bottom: 0;
287+
}
288+
289+
/* Highlighted text / mark elements */
290+
mark,
291+
.ai-paragraph mark,
292+
.ai-list-item mark {
293+
background: rgba(255, 212, 59, 0.4);
294+
color: var(--bs-body-color);
295+
padding: 0.1em 0.2em;
296+
border-radius: 2px;
297+
}
298+
299+
/* Tables */
300+
.ai-table-wrapper {
301+
margin: 1em 0;
302+
overflow-x: auto;
303+
border-radius: 6px;
304+
border: 1px solid var(--bs-border-color);
305+
}
306+
307+
.ai-table {
308+
width: 100%;
309+
border-collapse: collapse;
310+
font-size: 0.95rem;
311+
background: transparent;
312+
}
313+
314+
.ai-table-head {
315+
background: rgba(110, 118, 129, 0.2);
316+
border-bottom: 2px solid var(--bs-border-color);
317+
}
318+
319+
.ai-table-header-cell {
320+
padding: 0.75rem 1rem;
321+
text-align: left;
322+
font-weight: 600;
323+
color: var(--bs-body-color);
324+
border-bottom: 2px solid var(--bs-border-color);
325+
}
326+
327+
.ai-table-body .ai-table-row:nth-child(even) {
328+
background: rgba(110, 118, 129, 0.1);
329+
}
330+
331+
.ai-table-body .ai-table-row:hover {
332+
background: rgba(110, 118, 129, 0.2);
333+
}
334+
335+
.ai-table-cell {
336+
padding: 0.75rem 1rem;
337+
border-bottom: 1px solid var(--bs-border-color);
338+
}
339+
340+
.ai-table-body .ai-table-row:last-child .ai-table-cell {
341+
border-bottom: none;
342+
}
343+
344+
/* Horizontal Rule */
345+
.ai-divider {
346+
margin: 1.5em 0;
347+
border: none;
348+
border-top: 1px solid var(--bs-border-color);
349+
opacity: 0.5;
350+
}
351+
352+
/* Strong and Emphasis */
353+
.ai-strong {
354+
font-weight: 600;
355+
color: var(--bs-emphasis-color);
356+
}
357+
358+
.ai-emphasis {
359+
font-style: italic;
360+
}
361+
362+
/* Improve chat bubble styling for better contrast */
363+
.chat-bubble {
364+
background: var(--bs-body-bg) !important;
365+
border: 1px solid var(--bs-border-color);
366+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
367+
}
368+
369+
/* Better scrollbar for code blocks */
370+
.ai-code-pre::-webkit-scrollbar {
371+
height: 8px;
372+
}
373+
374+
.ai-code-pre::-webkit-scrollbar-track {
375+
background: transparent;
376+
}
377+
378+
.ai-code-pre::-webkit-scrollbar-thumb {
379+
background: var(--bs-secondary);
380+
border-radius: 4px;
381+
}
382+
383+
.ai-code-pre::-webkit-scrollbar-thumb:hover {
384+
background: var(--bs-secondary-color);
385+
}
386+
387+
/* Responsive adjustments */
388+
@media (max-width: 768px) {
389+
.ai-paragraph {
390+
font-size: 0.9rem;
391+
}
392+
393+
.ai-h1 {
394+
font-size: 1.5rem;
395+
}
396+
397+
.ai-h2 {
398+
font-size: 1.25rem;
399+
}
400+
401+
.ai-h3 {
402+
font-size: 1.1rem;
403+
}
404+
405+
.ai-code-pre {
406+
font-size: 0.8rem;
407+
}
408+
409+
.ai-table {
410+
font-size: 0.85rem;
411+
}
412+
}
413+
414+
415+
416+
.aiMarkup {
417+
display: block;
418+
white-space: normal;
419+
line-height: var(--bs-body-line-height, 1.5);
420+
}
421+
422+
/* remove default margins inside elements. Bootstrap is just too generous here.*/
423+
.aiMarkup :where(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, hr) {
424+
margin: 0 !important;
425+
}
426+
427+
/* Add clean vertical spacing between elements.*/
428+
.aiMarkup > :where(* + *) {
429+
margin-top: .95rem;
430+
}
431+
432+
433+
.aiMarkup :where(li + li) { margin-top: .45rem; }
434+
.aiMarkup pre { margin-top: .45rem; }
435+
436+
.aiMarkup :where(h1) { margin-top: 1rem; }
437+
.aiMarkup :where(h2) { margin-top: .95rem; }
438+
.aiMarkup :where(h3) { margin-top: .85rem; }
439+
440+
.aiMarkup hr { margin: .95rem 0; }
441+

0 commit comments

Comments
 (0)