diff --git a/src/app.css b/src/app.css index c82edbb468..f442bbbf5a 100644 --- a/src/app.css +++ b/src/app.css @@ -65,7 +65,7 @@ textarea::placeholder { } .input-prose { - @apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line; + @apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line; } .input-prose-sm { @@ -337,7 +337,6 @@ input[type='number'] { li { align-items: start; - display: flex; > label { @@ -371,6 +370,96 @@ input[type='number'] { ul[data-type='taskList'] { margin: 0; } + + /* Reset nested regular ul elements to default styling */ + ul:not([data-type='taskList']) { + list-style: disc; + padding-left: 1rem; + + li { + align-items: initial; + display: list-item; + + label { + flex: initial; + margin-right: initial; + margin-top: initial; + user-select: initial; + display: initial; + } + + div { + flex: initial; + align-items: initial; + } + } + } +} + +.input-prose .tiptap ul[data-type='taskList'] { + list-style: none; + margin-left: 0; + padding: 0; + + li { + align-items: start; + display: flex; + + > label { + flex: 0 0 auto; + margin-right: 0.5rem; + margin-top: 0.4rem; + user-select: none; + display: flex; + } + + > div { + flex: 1 1 auto; + + align-items: center; + } + } + + /* checked data-checked="true" */ + + li[data-checked='true'] { + > div { + opacity: 0.5; + text-decoration: line-through; + } + } + + input[type='checkbox'] { + cursor: pointer; + } + + ul[data-type='taskList'] { + margin: 0; + } + + /* Reset nested regular ul elements to default styling */ + ul:not([data-type='taskList']) { + list-style: disc; + padding-left: 1rem; + + li { + align-items: initial; + display: list-item; + + label { + flex: initial; + margin-right: initial; + margin-top: initial; + user-select: initial; + display: initial; + } + + div { + flex: initial; + align-items: initial; + } + } + } } @media (prefers-color-scheme: dark) { diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte index 3fec5e2e6a..cc44ae80ea 100644 --- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte +++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte @@ -222,7 +222,7 @@ {:else}