@elixpo/lixeditor 2.1.6

package/src/styles/blog-image.css

@@ -0,0 +1,468 @@
+/* Kill BlockNote's default file panel (Embed popup) — we have our own UI */
+.bn-file-panel,
+[class*="mantine-Popover-dropdown"]:has([data-test="embed-input"]),
+[class*="mantine-Popover-dropdown"]:has([data-test="upload-input"]),
+.blog-editor-wrapper [class*="mantine-Popover-dropdown"] {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ===== Custom Blog Image Block ===== */
+
+/* Empty state container */
+.blog-img-empty {
+  position: relative;
+  width: 100%;
+  min-height: 140px;
+  border: 1.5px dashed var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 24px 16px;
+  margin: 4px 0;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.blog-img-empty:focus-visible,
+.blog-img-empty:hover {
+  border-color: rgba(155, 123, 247, 0.4);
+  background: rgba(155, 123, 247, 0.04);
+}
+
+.blog-img-empty--generating {
+  border: none;
+  background: transparent;
+  padding: 0;
+  min-height: 200px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.blog-img-empty[data-drag-over="true"] {
+  border-color: #9b7bf7;
+  background: rgba(155, 123, 247, 0.08);
+  box-shadow: 0 0 24px rgba(155, 123, 247, 0.1);
+}
+
+/* 3 action buttons row */
+.blog-img-actions-row {
+  display: flex;
+  gap: 8px;
+}
+
+.blog-img-action {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.blog-img-action:hover {
+  background: rgba(155, 123, 247, 0.1);
+  border-color: rgba(155, 123, 247, 0.35);
+  color: #9b7bf7;
+}
+
+.blog-img-action-ai {
+  border-color: rgba(155, 123, 247, 0.25);
+  color: #9b7bf7;
+}
+
+.blog-img-action-ai:hover {
+  border-color: rgba(155, 123, 247, 0.5);
+  background: rgba(155, 123, 247, 0.12);
+  color: #b69aff;
+}
+
+/* Hint text */
+.blog-img-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin: 0;
+}
+
+/* Dismiss / delete button on empty placeholder */
+.blog-img-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-faint);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+
+.blog-img-empty:hover .blog-img-dismiss {
+  opacity: 1;
+}
+
+.blog-img-dismiss:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.3);
+}
+
+/* Inline input row (embed URL / AI prompt) */
+.blog-img-input-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  max-width: 480px;
+  position: relative;
+}
+
+.blog-img-url-input {
+  flex: 1;
+  background: rgba(196, 181, 253, 0.04);
+  border: 1.5px dashed rgba(196, 181, 253, 0.25);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 9px 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.blog-img-url-input:focus {
+  border-color: rgba(196, 181, 253, 0.4);
+  border-style: solid;
+}
+
+.blog-img-url-input::placeholder {
+  color: rgba(196, 181, 253, 0.3);
+}
+
+.blog-img-ai-input {
+  border-color: rgba(155, 123, 247, 0.25);
+}
+
+.blog-img-ai-input:focus {
+  border-color: rgba(155, 123, 247, 0.45);
+}
+
+.blog-img-submit-btn {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(196, 181, 253, 0.1);
+  border: 1px solid rgba(196, 181, 253, 0.2);
+  border-radius: 8px;
+  color: #c4b5fd;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.blog-img-submit-btn:hover:not(:disabled) {
+  background: rgba(196, 181, 253, 0.2);
+  border-color: rgba(196, 181, 253, 0.4);
+}
+
+.blog-img-submit-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.blog-img-ai-submit {
+  background: rgba(155, 123, 247, 0.1);
+  border-color: rgba(155, 123, 247, 0.25);
+  color: #b69aff;
+}
+
+.blog-img-cancel-btn {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid rgba(196, 181, 253, 0.1);
+  border-radius: 8px;
+  color: rgba(196, 181, 253, 0.35);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.blog-img-cancel-btn:hover {
+  color: #f87171;
+  border-color: rgba(248, 113, 113, 0.25);
+  background: rgba(248, 113, 113, 0.06);
+}
+
+.blog-img-error {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  font-size: 11px;
+  color: #f87171;
+}
+
+/* Upload spinner */
+.blog-img-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: rgba(196, 181, 253, 0.5);
+  font-size: 13px;
+}
+
+.blog-img-spinner {
+  width: 26px;
+  height: 26px;
+  border: 2.5px solid rgba(196, 181, 253, 0.12);
+  border-top-color: #c4b5fd;
+  border-radius: 50%;
+  animation: blogImgSpin 0.8s linear infinite;
+}
+
+@keyframes blogImgSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* AI generating — skeleton with RGB shimmer */
+.blog-img-generating {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(14, 18, 27, 0.6);
+}
+
+.blog-img-gen-shimmer {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    -45deg,
+    rgba(196, 181, 253, 0.06) 0%,
+    rgba(155, 123, 247, 0.12) 25%,
+    rgba(96, 165, 250, 0.08) 50%,
+    rgba(196, 181, 253, 0.12) 75%,
+    rgba(244, 114, 182, 0.06) 100%
+  );
+  background-size: 400% 400%;
+  animation: blogImgRGBShimmer 3s ease-in-out infinite;
+}
+
+@keyframes blogImgRGBShimmer {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.blog-img-gen-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(196, 181, 253, 0.5);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.blog-img-gen-label svg {
+  animation: blogImgStarSpin 3s linear infinite;
+}
+
+@keyframes blogImgStarSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ===== Image loaded state ===== */
+
+.blog-img-loaded {
+  width: 100%;
+  margin: 4px 0;
+  outline: none;
+}
+
+.blog-img-wrapper {
+  position: relative;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.blog-img-main {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 600px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+/* Hover overlay */
+.blog-img-hover-overlay {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 8px;
+  opacity: 0;
+  transition: all 0.2s ease;
+  border-radius: 10px;
+}
+
+.blog-img-loaded:hover .blog-img-hover-overlay,
+.blog-img-loaded:focus-within .blog-img-hover-overlay {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.blog-img-hover-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.blog-img-hover-btn {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(14, 18, 27, 0.8);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(196, 181, 253, 0.2);
+  border-radius: 7px;
+  color: #c4b5fd;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.blog-img-hover-btn:hover {
+  background: rgba(196, 181, 253, 0.15);
+  border-color: rgba(196, 181, 253, 0.4);
+}
+
+.blog-img-hover-delete {
+  color: #f87171;
+  border-color: rgba(248, 113, 113, 0.2);
+}
+
+.blog-img-hover-delete:hover {
+  background: rgba(248, 113, 113, 0.15);
+  border-color: rgba(248, 113, 113, 0.4);
+}
+
+/* Caption */
+.blog-img-caption {
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-faint);
+  margin: 6px 0 0;
+  padding: 2px 8px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.blog-img-caption:hover {
+  color: #c4b5fd;
+}
+
+.blog-img-caption--empty {
+  color: rgba(107, 122, 141, 0.45);
+  font-style: italic;
+}
+
+.blog-img-caption--empty:hover {
+  color: rgba(196, 181, 253, 0.5);
+}
+
+.blog-img-caption-input {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: rgba(196, 181, 253, 0.04);
+  border: 1px solid rgba(196, 181, 253, 0.15);
+  border-radius: 6px;
+  padding: 5px 12px;
+  margin-top: 6px;
+  outline: none;
+}
+
+.blog-img-caption-input:focus {
+  border-color: rgba(196, 181, 253, 0.3);
+}
+
+.blog-img-caption-input::placeholder {
+  color: var(--text-faint);
+}
+
+/* ===== Fail Toast ===== */
+
+.blog-img-fail-toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(14, 18, 27, 0.9);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(248, 113, 113, 0.25);
+  border-radius: 10px;
+  padding: 10px 18px;
+  color: #f87171;
+  font-size: 13px;
+  z-index: 9999;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  animation: blogImgToastIn 0.25s ease;
+  white-space: nowrap;
+}
+
+.blog-img-fail-toast--out {
+  animation: blogImgToastOut 0.35s ease forwards;
+}
+
+@keyframes blogImgToastIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+@keyframes blogImgToastOut {
+  from { opacity: 1; transform: translateX(-50%) translateY(0); }
+  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+}