.editor-toolbar { display: flex; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .save-status { display: inline-flex; align-items: center; font-size: 0.85rem; color: var(--color-text-muted); } .save-status.dirty { color: #b26a00; } .save-status.saving { color: var(--color-primary); } .save-status.saved { color: #2b8a3e; } .editor-textarea { font-family: "Courier New", monospace; min-height: 600px; resize: vertical; } .note-flags { display: flex; gap: 1rem; flex-wrap: wrap; } .flag-check { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); margin: 0; cursor: pointer; } .flag-check-input { margin: 0; width: 1.1rem; height: 1.1rem; cursor: pointer; } .flag-check-label { line-height: 1; user-select: none; } .preview-pane { background-color: var(--color-bg); overflow-y: auto; max-height: 600px; } .danger-zone { padding: 1rem; border: 1px solid #f3b5b5; border-radius: 0.75rem; background: var(--color-surface)5f5; } .danger-zone-title { color: #9f1c1c; font-size: 1rem; font-weight: 700; } .danger-zone-copy { color: #7a2727; font-size: 0.9rem; } .task-mention-panel { margin-top: 0.45rem; border: 1px solid #dbe4f0; border-radius: 10px; background: #fbfdff; padding: 0.5rem; max-height: 220px; overflow-y: auto; } .task-mention-option { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; padding: 0.35rem 0.45rem; border-radius: 6px; text-align: left; } .task-mention-option:hover { background: #eef3ff; } .task-picker { background: var(--color-surface); min-height: 300px; display: flex; flex-direction: column; overflow: hidden; } .task-picker-header { background: var(--color-bg); min-height: 34px; } .task-picker-search { background: var(--color-surface); } .task-picker-list { overflow-y: auto; max-height: 520px; padding: 0.25rem; } .task-picker-item { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; border-radius: 8px; padding: 0.35rem 0.45rem; text-align: left; gap: 0.4rem; color: var(--color-text); } .task-picker-item:hover { background: #eef3ff; } .task-picker-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-picker-empty { padding: 0.7rem; } .task-picker-item small { font-size: 0.7rem; color: #6b7280; } .task-picker .btn-link { text-decoration: none; } .task-picker-item { flex-wrap: wrap; } .markdown-body :deep(.task-inline-link) { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid #c7d8ff; background: #eef4ff; color: #2c4ea3; font-weight: 600; text-decoration: none; } .markdown-body :deep(.task-inline-title) { line-height: 1; } .markdown-body :deep(.task-inline-status) { line-height: 1; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.16rem 0.42rem; border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, var(--color-surface) 40%); background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, var(--color-surface) 82%); color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%); } .markdown-body :deep(.task-inline-link:hover) { background: #dfeaff; border-color: #aac4ff; } .markdown-body :deep(.task-inline-link i) { font-size: 0.9rem; } /* Dark mode overrides */ :root[data-bs-theme="dark"] .editor-toolbar { border-bottom-color: var(--color-border); } :root[data-bs-theme="dark"] .flag-check { background: var(--color-surface-muted); border-color: #4a5568; } :root[data-bs-theme="dark"] .preview-pane { background-color: var(--color-surface); } :root[data-bs-theme="dark"] .danger-zone { background: #2d1a1a; border-color: #7a3030; } :root[data-bs-theme="dark"] .danger-zone-title { color: #fc8181; } :root[data-bs-theme="dark"] .danger-zone-copy { color: #fca5a5; } :root[data-bs-theme="dark"] .task-mention-panel { border-color: #3a4558; background: #1f2733; } :root[data-bs-theme="dark"] .task-mention-option:hover { background: #2b3646; } :root[data-bs-theme="dark"] .task-picker { border-color: var(--color-border) !important; background: var(--color-surface); } :root[data-bs-theme="dark"] .task-picker-header { background: var(--color-surface); border-bottom-color: var(--color-border) !important; } :root[data-bs-theme="dark"] .task-picker-search { background: var(--color-surface); border-bottom-color: var(--color-border) !important; } :root[data-bs-theme="dark"] .task-picker-search .form-control { background: #1f2430; border-color: var(--color-border); color: var(--color-text); } :root[data-bs-theme="dark"] .task-picker-item { color: var(--color-text); } :root[data-bs-theme="dark"] .task-picker-item:hover { background: var(--color-surface-muted); } :root[data-bs-theme="dark"] .task-picker-item small { color: #a8b4c7; } :root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) { border-color: #35508b; background: #1b2a4a; color: #9ec0ff; } :root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) { background: #22345c; border-color: #4566ad; } :root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) { border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%); background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%); color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%); }