Jotzy/frontend/src/pages/tiptap.css

/* @tailwind */
@reference "../main.css";

/* Custom Scrollbar */
*::-webkit-scrollbar {
    @apply w-2;
}

*::-webkit-scrollbar-track {
    @apply bg-surface0 rounded-full;
}

*::-webkit-scrollbar-thumb {
    @apply bg-surface1 rounded-full;
}

*::-webkit-scrollbar-thumb:hover {
    @apply bg-overlay0;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface1) var(--color-surface0);
}

.tiptap-editor {
    @apply flex flex-col h-full bg-base;
}

.ProseMirror {
    @apply text-text;
}

.editor-toolbar {
    @apply flex gap-2 px-4 bg-surface0 border-b border-surface1 flex-wrap items-center;
}

.editor-content {
    @apply h-full;
}

.toolbar-group {
    @apply flex gap-1;
}

.toolbar-divider {
    @apply w-px h-6 bg-surface1;
}

.editor-toolbar button {
    @apply p-2 bg-transparent border-none rounded-sm text-text cursor-pointer transition-all duration-150 text-sm font-semibold min-w-8 flex items-center justify-center;
}

.editor-toolbar button:hover:not(:disabled) {
    @apply bg-surface0;
}

.editor-toolbar button.active {
    @apply bg-accent text-base;
}

.editor-toolbar button:disabled {
    @apply opacity-40 cursor-not-allowed;
}

.ProseMirror:focus {
    @apply outline-none;
}

.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    @apply float-left text-overlay0 pointer-events-none h-0;
}
.ProseMirror ul {
    @apply mb-0!;
}
.ProseMirror h1 {
    @apply text-3xl font-bold mt-6 mb-4 text-accent;
}

.ProseMirror h2 {
    @apply text-2xl font-semibold text-accent mt-4 mb-3;
}

.ProseMirror h3 {
    @apply text-xl font-semibold text-accent mt-5 mb-2;
}

.ProseMirror code {
    @apply bg-surface0 text-accent px-1.5 py-0.5 rounded text-sm;
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

.ProseMirror .code-block {
    @apply bg-surface0 border border-surface1 rounded-sm p-4 my-4 overflow-x-auto;
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

.ProseMirror .code-block code {
    @apply bg-transparent p-0 text-text;
}

.ProseMirror blockquote {
    @apply border-l-4 border-accent pl-4 ml-0 text-subtext italic;
}

.ProseMirror hr {
    @apply border-none border-t-2 border-surface1 my-8;
}

.ProseMirror a {
    @apply text-accent underline;
}

.ProseMirror a:hover {
    @apply text-accent;
}

.ProseMirror strong {
    @apply text-accent font-semibold;
}

.ProseMirror em {
    @apply text-accent;
}

/* Task List (Checkboxes) */
.ProseMirror ul[data-type="taskList"] {
    @apply list-none p-0;
}

.ProseMirror ul[data-type="taskList"] > li {
    @apply flex flex-row items-baseline m-0 p-0;
}

.ProseMirror ul[data-type="taskList"] > li > label {
    @apply flex-none mr-2 select-none flex items-center h-6;
}

.ProseMirror ul[data-type="taskList"] > li > label input[type="checkbox"] {
    @apply cursor-pointer m-0 accent-accent;
}

.ProseMirror ul[data-type="taskList"] > li > div {
    @apply flex-1;
}

.ProseMirror ul[data-type="taskList"] > li > div p {
    @apply m-0 p-0;
}

.ProseMirror li[data-checked="true"] > div > p {
    @apply line-through text-text/40;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
}

.ProseMirror u {
    @apply decoration-accent;
    /*text-decoration-style: wavy;*/
}

.ProseMirror li::marker {
    @apply text-accent;
}

/* tiptap.css */
.ProseMirror ul,
.ProseMirror ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ProseMirror li > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

hr {
    border: none;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--color-accent) 0px,
        var(--color-accent) 8px,
        var(--color-accent) 16px
    );
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0, 6 3 T 12 3 T 18 3 T 24 3' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E")
        repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0, 6 3 T 12 3 T 18 3 T 24 3' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E")
        repeat-x;
    margin: 2em 0;
}