@elixpo/lixeditor 2.1.6

package/src/styles/menus.css

@@ -0,0 +1,518 @@
+/* ===== Slash menu / dropdown ===== */
+
+.blog-editor-wrapper .mantine-Menu-dropdown,
+.blog-editor-wrapper .bn-suggestion-menu {
+  background: var(--bg-surface) !important;
+  border: 1px solid var(--border-default) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-elevated) transparent;
+}
+
+.blog-editor-wrapper .bn-suggestion-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.blog-editor-wrapper .bn-suggestion-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.blog-editor-wrapper .bn-suggestion-menu::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 3px;
+}
+
+.blog-editor-wrapper .bn-suggestion-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* Slash menu group headers */
+.blog-editor-wrapper .bn-suggestion-menu [class*="group"] {
+  color: var(--text-faint) !important;
+  font-size: 11px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+}
+
+.blog-editor-wrapper .mantine-Menu-item {
+  color: var(--text-primary) !important;
+  border-radius: 8px !important;
+}
+
+.blog-editor-wrapper .mantine-Menu-item:hover,
+.blog-editor-wrapper .mantine-Menu-item[data-hovered] {
+  background: var(--bg-active) !important;
+}
+
+.blog-editor-wrapper .mantine-Menu-itemLabel {
+  color: var(--text-primary) !important;
+}
+
+.blog-editor-wrapper .mantine-Menu-itemSection {
+  color: var(--text-muted) !important;
+}
+
+/* Block type selector dropdown */
+.blog-editor-wrapper .bn-toolbar select,
+.blog-editor-wrapper .bn-toolbar [class*="select"],
+.blog-editor-wrapper .bn-toolbar [role="listbox"] {
+  background: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-default) !important;
+}
+
+/* Mantine Select / Combobox dropdowns (block type picker) */
+.blog-editor-wrapper .mantine-Combobox-dropdown,
+.blog-editor-wrapper .mantine-Select-dropdown {
+  background: var(--bg-surface) !important;
+  border: 1px solid var(--border-default) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
+}
+
+.blog-editor-wrapper .mantine-Combobox-option {
+  color: var(--text-primary) !important;
+  border-radius: 6px !important;
+}
+
+.blog-editor-wrapper .mantine-Combobox-option:hover,
+.blog-editor-wrapper .mantine-Combobox-option[data-combobox-selected] {
+  background: var(--bg-active) !important;
+}
+
+.blog-editor-wrapper .mantine-Combobox-option[data-combobox-active] {
+  background: var(--bg-active) !important;
+}
+
+.blog-editor-wrapper .mantine-Input-input {
+  background: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-default) !important;
+}
+
+/* ===== Formatting toolbar ===== */
+
+.blog-editor-wrapper .bn-toolbar {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+}
+
+/* When a link is selected, the link toolbar appears — hide AI + link + color from formatting toolbar */
+.blog-editor-wrapper:has(.bn-link-toolbar) .bn-toolbar:not(.bn-link-toolbar) [data-test="createLink"],
+.blog-editor-wrapper:has(.bn-link-toolbar) .bn-toolbar:not(.bn-link-toolbar) .ai-star-btn,
+.blog-editor-wrapper:has(.bn-link-toolbar) .bn-toolbar:not(.bn-link-toolbar) .ai-toolbar-sep,
+.blog-editor-wrapper:has(.bn-link-toolbar) .bn-toolbar:not(.bn-link-toolbar) .toolbar-color-btn,
+.blog-editor-wrapper:has(.bn-link-toolbar) .bn-toolbar:not(.bn-link-toolbar) .toolbar-color-sep {
+  display: none !important;
+}
+
+.blog-editor-wrapper .bn-toolbar button {
+  color: var(--text-muted);
+}
+
+/* Link create button — highlight it */
+.blog-editor-wrapper .bn-toolbar [data-test="createLink"] {
+  color: var(--text-muted);
+}
+
+.blog-editor-wrapper .bn-toolbar [data-test="createLink"]:hover {
+  color: #7ba8f0;
+  background: rgba(123, 168, 240, 0.1);
+}
+
+.blog-editor-wrapper .bn-toolbar [data-test="createLink"][data-active="true"] {
+  color: #7ba8f0;
+}
+
+.blog-editor-wrapper .bn-toolbar button:hover {
+  color: #7ba8f0;
+  background: var(--border-default);
+}
+
+.blog-editor-wrapper .bn-toolbar button[data-active="true"] {
+  color: #7ba8f0;
+}
+
+/* AI star button inside native toolbar */
+.ai-toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--border-default);
+  margin: 0 4px;
+  align-self: center;
+}
+
+.ai-star-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #9b7bf7;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  position: relative;
+}
+
+.ai-star-btn:hover {
+  background: rgba(155, 123, 247, 0.1);
+  color: #b69aff;
+}
+
+
+/* ===== Toolbar Color/Highlight Buttons ===== */
+
+.toolbar-color-btn,
+.toolbar-highlight-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  position: relative;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.toolbar-color-btn:hover,
+.toolbar-highlight-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.toolbar-color-indicator {
+  display: block;
+  width: 12px;
+  height: 2.5px;
+  border-radius: 1px;
+  margin-top: -2px;
+}
+
+.toolbar-color-popover {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+  animation: aiMenuFadeIn 0.1s ease-out;
+  min-width: 160px;
+}
+
+.toolbar-color-popover-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.toolbar-color-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 5px;
+}
+
+.toolbar-color-swatch {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  border: 1.5px solid rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  transition: transform 0.1s, border-color 0.15s;
+}
+
+.toolbar-color-swatch:hover {
+  transform: scale(1.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* ===== AI Command Menu (space trigger) ===== */
+
+.ai-command-menu {
+  width: 260px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+  padding: 6px;
+  overflow: hidden;
+  animation: aiMenuFadeIn 0.12s ease-out;
+}
+
+@keyframes aiMenuFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ai-command-group {
+  margin-bottom: 2px;
+}
+
+.ai-command-group-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  padding: 8px 10px 4px;
+}
+
+.ai-command-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  text-align: left;
+}
+
+.ai-command-item:hover,
+.ai-command-item-active {
+  background: var(--border-default);
+  color: #fff;
+}
+
+.ai-command-item-active .ai-command-icon {
+  color: #9b7bf7;
+}
+
+.ai-command-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  color: var(--text-muted);
+  flex-shrink: 0;
+  font-size: 16px;
+  transition: color 0.1s;
+}
+
+.ai-command-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== AI slash menu icon sparkle tint ===== */
+
+.ai-slash-icon {
+  color: #9b7bf7;
+}
+
+/* ===== Slash menu group labels for Media / AI ===== */
+
+.blog-editor-wrapper .bn-suggestion-menu [data-group="Media"] .bn-suggestion-menu-group-label,
+.blog-editor-wrapper .bn-suggestion-menu [data-group="AI Generate"] .bn-suggestion-menu-group-label {
+  color: #9b7bf7 !important;
+}
+
+/* Link tooltip — only keep Edit link and Open link */
+.blog-editor-wrapper .bn-link-toolbar {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+}
+
+/* Hide the delete/unlink button (3rd child) */
+.blog-editor-wrapper .bn-link-toolbar > *:nth-child(3) {
+  display: none !important;
+}
+/* Hide any further toolbar buttons that may appear (4th+) */
+.blog-editor-wrapper .bn-link-toolbar > *:nth-child(n+4):not([data-radix-popper-content-wrapper]) {
+  display: none !important;
+}
+
+/* Style the edit link popover form */
+.blog-editor-wrapper .bn-form-popover {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+  min-width: 280px;
+}
+
+[data-theme="dark"] .blog-editor-wrapper .bn-form-popover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.blog-editor-wrapper .bn-form-popover .bn-text-input,
+.blog-editor-wrapper .bn-popover-content input {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 13px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: var(--bg-app);
+  color: var(--text-primary);
+  outline: none;
+  margin-bottom: 6px;
+}
+
+.blog-editor-wrapper .bn-form-popover .bn-text-input:focus,
+.blog-editor-wrapper .bn-popover-content input:focus {
+  border-color: #9b7bf7;
+}
+
+.blog-editor-wrapper .bn-form-popover .bn-text-input::placeholder,
+.blog-editor-wrapper .bn-popover-content input::placeholder {
+  color: var(--text-faint);
+}
+
+/* Style the create link popover */
+.blog-editor-wrapper .bn-popover-content {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+  min-width: 280px;
+}
+
+[data-theme="dark"] .blog-editor-wrapper .bn-popover-content {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+/* ===== Custom Link Editor Popup ===== */
+
+.link-editor-popup {
+  position: fixed;
+  z-index: 99;
+  width: 320px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  animation: confirmDialogIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-theme="dark"] .link-editor-popup {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.link-editor-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.link-editor-fields {
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.link-editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.link-editor-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+}
+
+.link-editor-input {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 13px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: var(--bg-app);
+  color: var(--text-primary);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.link-editor-input:focus {
+  border-color: #9b7bf7;
+}
+
+.link-editor-input::placeholder {
+  color: var(--text-faint);
+}
+
+.link-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 14px;
+  border-top: 1px solid var(--divider);
+}
+
+.link-editor-cancel {
+  padding: 5px 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: color 0.15s;
+}
+
+.link-editor-cancel:hover {
+  color: var(--text-primary);
+}
+
+.link-editor-save {
+  padding: 5px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+  background: #9b7bf7;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.link-editor-save:hover {
+  background: #8b6ae6;
+}
+
+.link-editor-save:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}