bvandeusen
efb3534f3a
Per the surface-phase spec for the Notes/Tasks viewers and editors:
Long-form line-height
- prose.css: bumped global .prose from 1.6 to 1.7. Applies to Note
viewer body, Task viewer body, anywhere markdown renders into a
reading surface. Chat assistant bubble already had the explicit
override; now consistent with the rest.
Button reclassification per Hybrid rule
- Shared editor-shared.css:
- btn-save: accent gradient → Moss (action-primary). Saving is
"operating the software", not a brand moment.
- btn-delete: --color-danger (Error terracotta) → Oxblood
(action-destructive). Layout updated for inline-flex so the
Trash2 icon at call sites lines up alongside the label.
- NoteEditorView, TaskEditorView: Delete buttons now contain a
Trash2 icon per Hybrid's "destructive paired with icon" rule.
- NoteViewerView, TaskViewerView:
- btn-edit (and TaskViewer's btn-advance): accent gradient → Moss.
Switching to edit / advancing status are workflow actions.
- btn-convert, btn-share: ghost-on-hover-to-accent → Bronze
action-secondary (alternate paths).
Two-weights-only
- Snapped every font-weight: 600/700 to 500 across editor-shared.css
and the five Knowledge-cluster views.
Out of scope for this PR (deliberate punt)
- Smaller utility buttons (.btn-suggest-tags, .btn-link-all,
.btn-add-subtask, the AI-assist generate/proofread/accept/reject
set, etc.) — currently ghost-styled, generally compliant. Will
revisit only if they read off in practice.
- Filter chip / sub-task list-row border audit — deferred since
current styles already lean on background tint for affordance.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
239 lines
4.5 KiB
CSS
239 lines
4.5 KiB
CSS
.prose {
|
|
/* Long-form reading line-height per the design system —
|
|
reading surfaces (notes, tasks, journal, assistant bubbles) want 1.7
|
|
so prose breathes like a book, not a UI snippet. */
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.prose h1 {
|
|
margin: 1.25rem 0 0.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.prose h2 {
|
|
margin: 1rem 0 0.4rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.prose h3 {
|
|
margin: 0.75rem 0 0.3rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.prose h4,
|
|
.prose h5,
|
|
.prose h6 {
|
|
margin: 0.5rem 0 0.25rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0 0 0.6rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose pre {
|
|
background: var(--color-code-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
overflow-x: auto;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose code {
|
|
background: var(--color-code-inline-bg);
|
|
border-radius: 3px;
|
|
padding: 0.15rem 0.35rem;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose th,
|
|
.prose td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.prose thead th {
|
|
background: var(--color-bg-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose tbody tr:nth-child(even) {
|
|
background: var(--color-table-stripe);
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 3px solid var(--color-border);
|
|
margin: 0 0 0.6rem;
|
|
padding: 0.25rem 0 0.25rem 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.prose blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose .inline-tag {
|
|
color: var(--color-tag-text);
|
|
background: var(--color-tag-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose .inline-tag:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose .wikilink {
|
|
color: var(--color-wikilink);
|
|
background: var(--color-wikilink-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prose .wikilink:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Task list */
|
|
.prose ul[data-type="taskList"] {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label {
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
|
|
cursor: pointer;
|
|
accent-color: var(--color-primary);
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li[data-checked="true"] > div {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Interactive checkboxes — marked output in the list-note viewer */
|
|
.prose--checklist ul {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
.prose--checklist li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.prose--checklist li input[type="checkbox"] {
|
|
flex-shrink: 0;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) > p,
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
|
|
text-decoration: none; /* don't strike through the checkbox itself */
|
|
}
|
|
|
|
/* Tiptap editor */
|
|
.tiptap-editor .ProseMirror {
|
|
outline: none;
|
|
min-height: 200px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
|
|
color: var(--color-text-muted, var(--color-text-secondary));
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tiptap-wrapper {
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tiptap-wrapper:focus-within {
|
|
box-shadow: var(--focus-ring, 0 0 0 2px var(--color-primary));
|
|
}
|