diff options
Diffstat (limited to 'frontend/src/components/document/DocumentEditor.css')
| -rw-r--r-- | frontend/src/components/document/DocumentEditor.css | 246 |
1 files changed, 246 insertions, 0 deletions
diff --git a/frontend/src/components/document/DocumentEditor.css b/frontend/src/components/document/DocumentEditor.css new file mode 100644 index 0000000..0be1151 --- /dev/null +++ b/frontend/src/components/document/DocumentEditor.css @@ -0,0 +1,246 @@ +/* ============================================ + Document Editor - Clean, modern document UI + ============================================ */ + +.document-editor-container { + max-width: 800px; + margin: 0 auto; + padding: 2rem 1rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + position: relative; +} + +/* ---- Lexical Root ---- */ +.doc-editor-root { + outline: none; + min-height: 400px; + padding: 1rem 0; + color: #1a1a2e; + line-height: 1.7; + font-size: 16px; +} + +/* ---- Headings ---- */ +.doc-editor-h1 { + font-size: 2.25rem; + font-weight: 700; + color: #0f0f23; + margin: 0 0 0.25rem 0; + padding: 0; + line-height: 1.3; + letter-spacing: -0.02em; + border: none; +} + +.doc-editor-h2 { + font-size: 1.5rem; + font-weight: 600; + color: #1a1a2e; + margin: 1.5rem 0 0.5rem 0; + line-height: 1.4; +} + +.doc-editor-h3 { + font-size: 1.2rem; + font-weight: 600; + color: #2a2a4a; + margin: 1.25rem 0 0.4rem 0; + line-height: 1.4; +} + +/* ---- Paragraphs ---- */ +.doc-editor-paragraph { + margin: 0.4rem 0; + padding: 0; + color: #374151; + line-height: 1.7; +} + +/* ---- Text Formatting ---- */ +.doc-editor-text-bold { + font-weight: 700; +} + +.doc-editor-text-italic { + font-style: italic; +} + +.doc-editor-text-underline { + text-decoration: underline; +} + +.doc-editor-text-strikethrough { + text-decoration: line-through; +} + +.doc-editor-text-code { + background: #f3f4f6; + border-radius: 3px; + padding: 0.15em 0.35em; + font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace; + font-size: 0.9em; + color: #e11d48; +} + +/* ---- Lists ---- */ +.doc-editor-list-ul { + padding-left: 1.5rem; + margin: 0.5rem 0; + list-style-type: disc; +} + +.doc-editor-list-ol { + padding-left: 1.5rem; + margin: 0.5rem 0; + list-style-type: decimal; +} + +.doc-editor-listitem { + margin: 0.25rem 0; + color: #374151; +} + +.doc-editor-nested-listitem { + list-style-type: circle; +} + +/* ---- Links ---- */ +.doc-editor-link { + color: #2563eb; + text-decoration: underline; + cursor: pointer; +} + +.doc-editor-link:hover { + color: #1d4ed8; +} + +/* ---- Placeholder ---- */ +.doc-editor-placeholder { + color: #9ca3af; + position: absolute; + top: 1rem; + left: 0; + pointer-events: none; + font-size: 16px; + user-select: none; +} + +/* ---- Content Editable wrapper ---- */ +.doc-editor-input { + position: relative; +} + +.doc-editor-content-editable { + outline: none; + position: relative; +} + +/* ---- Divider between title and body ---- */ +.doc-editor-title-divider { + height: 1px; + background: #e5e7eb; + margin: 0.5rem 0 1rem 0; + border: none; +} + +/* ============================================ + Auto-Save Countdown Bar + ============================================ */ + +.autosave-bar { + position: sticky; + bottom: 0; + left: 0; + right: 0; + z-index: 50; + background: #fefce8; + border-top: 1px solid #fde68a; + padding: 0.5rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + font-size: 0.85rem; + color: #92400e; + transition: opacity 0.2s ease; +} + +.autosave-bar-hidden { + opacity: 0; + pointer-events: none; + height: 0; + padding: 0; + overflow: hidden; +} + +.autosave-bar-text { + display: flex; + align-items: center; + gap: 0.5rem; + white-space: nowrap; +} + +.autosave-bar-text kbd { + background: #fef3c7; + border: 1px solid #fde68a; + border-radius: 3px; + padding: 0.1em 0.4em; + font-size: 0.8em; + font-family: inherit; +} + +.autosave-bar-progress-track { + flex: 1; + height: 4px; + background: #fde68a; + border-radius: 2px; + overflow: hidden; + min-width: 80px; +} + +.autosave-bar-progress-fill { + height: 100%; + background: #f59e0b; + border-radius: 2px; + transition: width 0.1s linear; +} + +.autosave-bar-cancel { + background: none; + border: 1px solid #d97706; + border-radius: 4px; + color: #92400e; + padding: 0.2rem 0.6rem; + cursor: pointer; + font-size: 0.8rem; + white-space: nowrap; + transition: background 0.15s ease; +} + +.autosave-bar-cancel:hover { + background: #fef3c7; +} + +/* ============================================ + Responsive + ============================================ */ + +@media (max-width: 640px) { + .document-editor-container { + padding: 1rem 0.75rem; + } + + .doc-editor-h1 { + font-size: 1.75rem; + } + + .doc-editor-root { + font-size: 15px; + } + + .autosave-bar { + font-size: 0.78rem; + padding: 0.4rem 0.75rem; + } +} |