refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-07-09 11:44:51 +04:00
parent 0a3c448a52
commit b615d13e46
2 changed files with 92 additions and 3 deletions

View file

@ -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) {

View file

@ -222,7 +222,7 @@
{:else}
<ul dir="auto" class="">
{#each token.items as item, itemIdx}
<li class="text-start {item?.task ? 'flex -translate-x-7 gap-3.5 ' : ''}">
<li class="text-start {item?.task ? 'flex -translate-x-6.5 gap-3 ' : ''}">
{#if item?.task}
<input
class=""