diff --git a/libs/tiptap-editor/src/style.css b/libs/tiptap-editor/src/style.css index f5951eb..e454c18 100644 --- a/libs/tiptap-editor/src/style.css +++ b/libs/tiptap-editor/src/style.css @@ -372,6 +372,91 @@ border-radius: 6px; } +/* ========== Upload Image Placeholder NodeView ========== */ +.upload-image-container { + position: relative; + display: inline-block; + max-width: 100%; +} +.upload-image-container img { + max-width: 100%; + height: auto; + border-radius: 6px; + margin: 1em 0; + display: block; +} +.upload-image-container.is-error img { + opacity: 0.5; + filter: grayscale(0.5); +} +.upload-image-overlay { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + border-radius: 6px; + pointer-events: none; +} +.upload-image-container.is-error .upload-image-overlay { + background: rgba(0, 0, 0, 0.35); + pointer-events: auto; +} +.upload-spinner { + width: 28px; + height: 28px; + border: 3px solid rgba(255, 255, 255, 0.4); + border-top-color: #fff; + border-radius: 50%; + animation: upload-spin 0.8s linear infinite; +} +@keyframes upload-spin { + to { transform: rotate(360deg); } +} +.upload-overlay-text { + color: #fff; + font-size: 13px; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); +} +.upload-error-icon { + color: #fff; + font-size: 22px; + line-height: 1; +} +.upload-error-msg { + color: #fff; + font-size: 13px; + text-align: center; + padding: 0 12px; + max-width: 90%; + word-break: break-word; +} +.upload-error-actions { + display: flex; + gap: 8px; +} +.upload-btn { + padding: 3px 12px; + font-size: 12px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.15); + color: #fff; + cursor: pointer; +} +.upload-btn:hover { + background: rgba(255, 255, 255, 0.3); +} +.upload-btn-remove { + border-color: rgba(254, 202, 202, 0.7); + color: #fecaca; +} +.upload-btn-remove:hover { + background: rgba(239, 68, 68, 0.3); +} + /* ========== Dark Theme: Table ========== */ .dark .tiptap-editor table { border-color: #333; @@ -420,6 +505,15 @@ .dark .tiptap-editor img.ProseMirror-selectednode { outline-color: #58a6ff; } +.dark .upload-image-container.is-error img { + opacity: 0.45; +} +.dark .upload-btn { + border-color: rgba(200, 200, 200, 0.4); +} +.dark .upload-btn-remove { + border-color: rgba(239, 68, 68, 0.5); +} /* ========== Dark Theme: Task List ========== */ .dark .tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"] {