mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
⏺️ style: Better Markdown Lists (#3777)
* style: markdown lists * style: markdown lists, second pass * style: update nested list styles in style.css
This commit is contained in:
Danny Avila
GitHub
parent
07f520100d
commit
9bfe40bfcd
1 changed files with 99 additions and 230 deletions
|
|
@ -639,12 +639,6 @@ pre {
|
||||||
.prose :where(thead th strong):not(:where([class~='not-prose'] *)) {
|
.prose :where(thead th strong):not(:where([class~='not-prose'] *)) {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
.prose :where(ul):not(:where([class~='not-prose'] *)) {
|
|
||||||
list-style-type: disc;
|
|
||||||
margin-bottom: 0.1em;
|
|
||||||
margin-top: 0.1em;
|
|
||||||
padding-left: 1.625em;
|
|
||||||
}
|
|
||||||
.prose :where(ul > li):not(:where([class~='not-prose'] *))::marker {
|
.prose :where(ul > li):not(:where([class~='not-prose'] *))::marker {
|
||||||
color: var(--tw-prose-bullets);
|
color: var(--tw-prose-bullets);
|
||||||
}
|
}
|
||||||
|
|
@ -1255,20 +1249,6 @@ html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul li {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ul li:before {
|
|
||||||
content: '•';
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
margin-left: -1rem;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown {
|
.markdown {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
font-size: var(--markdown-font-size, var(--font-size-base));
|
font-size: var(--markdown-font-size, var(--font-size-base));
|
||||||
|
|
@ -1318,13 +1298,6 @@ html {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .markdown ol, */
|
|
||||||
.markdown ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown table {
|
.markdown table {
|
||||||
--tw-border-spacing-x: 0px;
|
--tw-border-spacing-x: 0px;
|
||||||
--tw-border-spacing-y: 0px;
|
--tw-border-spacing-y: 0px;
|
||||||
|
|
@ -1539,18 +1512,6 @@ html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul li {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.markdown ul li:before {
|
|
||||||
content: '•';
|
|
||||||
font-size: calc(var(--markdown-font-size) * 0.875);
|
|
||||||
line-height: calc(var(--markdown-font-size) * 1.25);
|
|
||||||
margin-left: -1rem;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.markdown {
|
.markdown {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1815,7 +1776,9 @@ button.scroll-convo {
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-streaming > :not(ol):not(ul):not(pre):last-child:after,
|
.result-streaming > :not(ol):not(ul):not(pre):last-child:after,
|
||||||
.result-streaming > pre:last-child code:after {
|
.result-streaming > pre:last-child code:after,
|
||||||
|
.result-streaming > ol:last-child > li:last-child:after,
|
||||||
|
.result-streaming > ul:last-child > li:last-child:after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: '⬤';
|
content: '⬤';
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
|
@ -1829,103 +1792,9 @@ button.scroll-convo {
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (selector(:has(*))) {
|
@supports (selector(:has(*))) {
|
||||||
.result-streaming > ol:last-child > li:last-child > ol:last-child > li:last-child:after,
|
.result-streaming > :not(ol):not(ul):last-child:after,
|
||||||
.result-streaming
|
.result-streaming > ol:last-child > li:last-child:not(:has(ol)):not(:has(ul)):after,
|
||||||
> ol:last-child
|
.result-streaming > ul:last-child > li:last-child:not(:has(ol)):not(:has(ul)):after {
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming > ol:last-child > li:last-child > ul:last-child > li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming > ul:last-child > li:last-child > ol:last-child > li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming > ul:last-child > li:last-child > ul:last-child > li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ol:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child
|
|
||||||
> ul:last-child
|
|
||||||
> li:last-child:after,
|
|
||||||
.result-streaming > ul:last-child > li:last-child[*|\:not-has\(]:after {
|
|
||||||
content: '⬤';
|
|
||||||
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
|
|
||||||
Noto Sans, sans-serif;
|
|
||||||
line-height: normal;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 0.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.result-streaming > ul:last-child > li:last-child:not(:has(* > li)):after {
|
|
||||||
content: '⬤';
|
|
||||||
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
|
|
||||||
Noto Sans, sans-serif;
|
|
||||||
line-height: normal;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 0.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.result-streaming > ol:last-child > li:last-child[*|\:not-has\(]:after {
|
|
||||||
content: '⬤';
|
|
||||||
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
|
|
||||||
Noto Sans, sans-serif;
|
|
||||||
line-height: normal;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 0.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.result-streaming > ol:last-child > li:last-child:not(:has(* > li)):after {
|
|
||||||
content: '⬤';
|
content: '⬤';
|
||||||
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
|
font-family: system-ui, Inter, Söhne Circle, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
|
||||||
Noto Sans, sans-serif;
|
Noto Sans, sans-serif;
|
||||||
|
|
@ -1939,6 +1808,7 @@ button.scroll-convo {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@supports not (selector(:has(*))) {
|
@supports not (selector(:has(*))) {
|
||||||
|
.result-streaming > :not(ol):not(ul):last-child:after,
|
||||||
.result-streaming > ol:last-child > li:last-child:after,
|
.result-streaming > ol:last-child > li:last-child:after,
|
||||||
.result-streaming > ul:last-child > li:last-child:after {
|
.result-streaming > ul:last-child > li:last-child:after {
|
||||||
content: '⬤';
|
content: '⬤';
|
||||||
|
|
@ -1968,12 +1838,6 @@ button.scroll-convo {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ordered Listing */
|
/* Ordered Listing */
|
||||||
.prose :where(ol):not(:where([class~='not-prose'] *)) {
|
|
||||||
list-style-type: decimal;
|
|
||||||
margin-bottom: 1.25em;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-left: 1.625em;
|
|
||||||
}
|
|
||||||
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
|
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
|
||||||
list-style-type: upper-alpha;
|
list-style-type: upper-alpha;
|
||||||
}
|
}
|
||||||
|
|
@ -2001,13 +1865,6 @@ button.scroll-convo {
|
||||||
.prose :where(ol[type='1']):not(:where([class~='not-prose'] *)) {
|
.prose :where(ol[type='1']):not(:where([class~='not-prose'] *)) {
|
||||||
list-style-type: decimal;
|
list-style-type: decimal;
|
||||||
}
|
}
|
||||||
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
|
|
||||||
color: var(--tw-prose-counters);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.prose :where(ol > li):not(:where([class~='not-prose'] *)) {
|
|
||||||
padding-left: 0.375em;
|
|
||||||
}
|
|
||||||
.prose :where(.prose > ol > li > :first-child):not(:where([class~='not-prose'] *)) {
|
.prose :where(.prose > ol > li > :first-child):not(:where([class~='not-prose'] *)) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -2049,92 +1906,104 @@ button.scroll-convo {
|
||||||
margin-bottom: 1.3333333em;
|
margin-bottom: 1.3333333em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown .prose ol,
|
/* Base styles for lists */
|
||||||
.markdown .prose p,
|
.prose ol, .prose ul,
|
||||||
.markdown .prose ul {
|
.markdown ol, .markdown ul {
|
||||||
margin-bottom: 1rem;
|
list-style-position: outside;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-left: 1.625em;
|
||||||
}
|
}
|
||||||
.markdown .prose ol:last-child,
|
|
||||||
.markdown .prose p:last-child,
|
.prose li,
|
||||||
.markdown .prose ul:last-child {
|
.markdown li {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0.5em;
|
||||||
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
.markdown .prose p {
|
|
||||||
margin-bottom: 1rem;
|
/* Ordered lists */
|
||||||
margin-top: 1rem;
|
.prose ol,
|
||||||
line-height: calc(
|
.markdown ol {
|
||||||
28px * var(--markdown-font-size, var(--font-size-base)) / var(--font-size-base)
|
list-style-type: decimal;
|
||||||
);
|
|
||||||
}
|
|
||||||
.markdown .prose ol,
|
|
||||||
.markdown .prose ul {
|
|
||||||
display: contents;
|
|
||||||
list-style-position: inside;
|
|
||||||
list-style-type: none;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li,
|
|
||||||
.markdown .prose ul > li {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li[\:has\(\.title-citation\)],
|
|
||||||
.markdown .prose ul > li[\:has\(\.title-citation\)] {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li:has(.title-citation),
|
|
||||||
.markdown .prose ul > li:has(.title-citation) {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li[\:has\(\.title-citation\)]:last-child,
|
|
||||||
.markdown .prose ul > li[\:has\(\.title-citation\)]:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li:has(.title-citation):last-child,
|
|
||||||
.markdown .prose ul > li:has(.title-citation):last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li:before,
|
|
||||||
.markdown .prose ul > li:before {
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li button,
|
|
||||||
.markdown .prose ol > li > a,
|
|
||||||
.markdown .prose ul > li button,
|
|
||||||
.markdown .prose ul > li > a {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li p,
|
|
||||||
.markdown .prose ul > li p {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol > li ol,
|
|
||||||
.markdown .prose ol > li ul,
|
|
||||||
.markdown .prose ul > li ol,
|
|
||||||
.markdown .prose ul > li ul {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.markdown .prose ol {
|
|
||||||
counter-reset: list-counter;
|
counter-reset: list-counter;
|
||||||
}
|
}
|
||||||
.markdown .prose ol > li {
|
|
||||||
counter-increment: list-counter;
|
.prose ol > li,
|
||||||
padding-left: 2rem;
|
.markdown ol > li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0.375em;
|
||||||
}
|
}
|
||||||
.markdown .prose ol > li:before {
|
|
||||||
color: var(--text-secondary);
|
.prose ol > li::marker,
|
||||||
content: counter(list-counter) '.';
|
.markdown ol > li::marker {
|
||||||
|
color: var(--tw-prose-counters);
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.markdown .prose ul > li {
|
|
||||||
padding-left: 1.5rem;
|
/* Nested ordered lists */
|
||||||
|
.prose ol ol,
|
||||||
|
.markdown ol ol {
|
||||||
|
list-style-type: lower-alpha;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ol ol ol,
|
||||||
|
.markdown ol ol ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unordered lists */
|
||||||
|
.prose ul,
|
||||||
|
.markdown ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul > li,
|
||||||
|
.markdown ul > li {
|
||||||
|
padding-left: 0.375em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul > li::marker,
|
||||||
|
.markdown ul > li::marker {
|
||||||
|
color: var(--tw-prose-bullets);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nested unordered lists */
|
||||||
|
.prose ul ul,
|
||||||
|
.markdown ul ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul ul ul,
|
||||||
|
.markdown ul ul ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nested lists */
|
||||||
|
.prose ol ol, .prose ul ul, .prose ul ol, .prose ol ul,
|
||||||
|
.markdown ol ol, .markdown ul ul, .markdown ul ol, .markdown ol ul {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove extra spacing */
|
||||||
|
.prose > ul > li > *:first-child,
|
||||||
|
.prose > ol > li > *:first-child,
|
||||||
|
.markdown > ul > li > *:first-child,
|
||||||
|
.markdown > ol > li > *:first-child {
|
||||||
|
margin-top: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose > ul > li > *:last-child,
|
||||||
|
.prose > ol > li > *:last-child,
|
||||||
|
.markdown > ul > li > *:last-child,
|
||||||
|
.markdown > ol > li > *:last-child {
|
||||||
|
margin-bottom: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure proper marker color */
|
||||||
|
.prose li::marker,
|
||||||
|
.markdown li::marker {
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Keyframes */
|
/* Keyframes */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue