@ixo/editor 1.0.0 → 1.1.0

package/style-core.css

@@ -0,0 +1,243 @@
+/* IXO Editor Custom Styles */
+
+.ixo-editor {
+  /* Container styles */
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Light theme customizations */
+.ixo-editor--theme-light {
+  --bn-colors-editor-background: #ffffff;
+  --bn-colors-editor-text: #1a1a1a;
+  --bn-colors-menu-background: #ffffff;
+  --bn-colors-menu-text: #1a1a1a;
+  --bn-colors-tooltip-background: #1a1a1a;
+  --bn-colors-tooltip-text: #ffffff;
+  --bn-colors-hovered-background: #f5f5f5;
+  --bn-colors-selected-background: #e6f2ff;
+  --bn-colors-border: #e0e0e0;
+  --bn-colors-side-menu: #666666;
+  --bn-colors-highlight-colors-blue: #3b82f6;
+  --bn-colors-highlight-colors-green: #10b981;
+  --bn-colors-highlight-colors-red: #ef4444;
+  --bn-colors-highlight-colors-yellow: #f59e0b;
+  --bn-colors-highlight-colors-purple: #8b5cf6;
+}
+
+/* Dark theme customizations */
+.ixo-editor--theme-dark {
+  --bn-colors-editor-background: #1a1a1a;
+  --bn-colors-editor-text: #f0f0f0;
+  --bn-colors-menu-background: #2a2a2a;
+  --bn-colors-menu-text: #f0f0f0;
+  --bn-colors-tooltip-background: #f0f0f0;
+  --bn-colors-tooltip-text: #1a1a1a;
+  --bn-colors-hovered-background: #2a2a2a;
+  --bn-colors-selected-background: #3a3a3a;
+  --bn-colors-border: #3a3a3a;
+  --bn-colors-side-menu: #999999;
+  --bn-colors-highlight-colors-blue: #60a5fa;
+  --bn-colors-highlight-colors-green: #34d399;
+  --bn-colors-highlight-colors-red: #f87171;
+  --bn-colors-highlight-colors-yellow: #fbbf24;
+  --bn-colors-highlight-colors-purple: #a78bfa;
+}
+
+/* Editor content styles */
+.ixo-editor .bn-container {
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--bn-colors-border);
+  transition: border-color 0.2s ease;
+}
+
+.ixo-editor .bn-container:focus-within {
+  border-color: var(--bn-colors-highlight-colors-blue);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Block styles */
+.ixo-editor .bn-block {
+  margin-bottom: 0.5em;
+}
+
+.ixo-editor .bn-block-content {
+  min-height: 1.5em;
+}
+
+/* Heading styles */
+.ixo-editor h1.bn-inline-content {
+  font-size: 2em;
+  font-weight: 700;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.ixo-editor h2.bn-inline-content {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.ixo-editor h3.bn-inline-content {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* List styles */
+.ixo-editor ul.bn-block-content {
+  padding-left: 1.5em;
+  list-style-type: disc;
+}
+
+.ixo-editor ol.bn-block-content {
+  padding-left: 1.5em;
+  list-style-type: decimal;
+}
+
+/* Code block styles */
+.ixo-editor pre.bn-block-content {
+  background-color: var(--bn-colors-hovered-background);
+  border-radius: 4px;
+  padding: 12px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9em;
+  overflow-x: auto;
+}
+
+.ixo-editor code.bn-inline-content {
+  background-color: var(--bn-colors-hovered-background);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9em;
+}
+
+/* Blockquote styles */
+.ixo-editor blockquote.bn-block-content {
+  border-left: 3px solid var(--bn-colors-border);
+  padding-left: 1em;
+  margin-left: 0;
+  font-style: italic;
+  color: var(--bn-colors-side-menu);
+}
+
+/* Link styles */
+.ixo-editor a.bn-inline-content {
+  color: var(--bn-colors-highlight-colors-blue);
+  text-decoration: none;
+  transition: text-decoration 0.2s ease;
+}
+
+.ixo-editor a.bn-inline-content:hover {
+  text-decoration: underline;
+}
+
+/* Table styles */
+.ixo-editor table.bn-block-content {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+
+.ixo-editor table.bn-block-content th,
+.ixo-editor table.bn-block-content td {
+  border: 1px solid var(--bn-colors-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.ixo-editor table.bn-block-content th {
+  background-color: var(--bn-colors-hovered-background);
+  font-weight: 600;
+}
+
+/* Image styles */
+.ixo-editor .bn-image-block img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* Placeholder styles */
+.ixo-editor .bn-block-content[data-is-empty="true"]:before {
+  color: var(--bn-colors-side-menu);
+  opacity: 0.5;
+}
+
+/* Notion-like list title input placeholder */
+.notion-list-title-input::placeholder {
+  color: #CFCFCF;
+  opacity: 1;
+}
+
+/* Menu and toolbar customizations */
+.ixo-editor .bn-menu {
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.ixo-editor .bn-toolbar {
+  border-radius: 6px;
+  padding: 4px;
+}
+
+/* Animation improvements */
+.ixo-editor .bn-block,
+.ixo-editor .bn-menu,
+.ixo-editor .bn-toolbar {
+  animation-duration: 0.2s;
+}
+
+/* Selection styles */
+.ixo-editor ::selection {
+  background-color: var(--bn-colors-selected-background);
+}
+
+/* Scrollbar styles */
+.ixo-editor .bn-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ixo-editor .bn-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ixo-editor .bn-container::-webkit-scrollbar-thumb {
+  background-color: var(--bn-colors-border);
+  border-radius: 4px;
+}
+
+.ixo-editor .bn-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--bn-colors-side-menu);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .ixo-editor .bn-container {
+    padding: 15px;
+  }
+  
+  .ixo-editor h1.bn-inline-content {
+    font-size: 1.75em;
+  }
+  
+  .ixo-editor h2.bn-inline-content {
+    font-size: 1.35em;
+  }
+  
+  .ixo-editor h3.bn-inline-content {
+    font-size: 1.15em;
+  }
+}