@aquera/nile-elements 0.1.64-beta-1.0 → 0.1.64-beta-1.2

package/src/nile-lightdomeditor/nile-lightdomeditor.css.ts

@@ -0,0 +1,238 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+
+/**
+ * Lightdomeditor CSS
+ */
+export const styles = css`
+  :host {
+    /* you can add host-level vars or rules here if needed */
+  }
+
+  .editor-container {
+    border: 1px solid #d1d5db;
+	position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #ffffff;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  .toolbar {
+    display: flex;
+    gap: 1px;
+    padding: 8px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e5e7eb;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .toolbar-group {
+    display: flex;
+    gap: 1px;
+    margin-right: 8px;
+    border-right: 1px solid #e5e7eb;
+    padding-right: 8px;
+  }
+
+  .toolbar-group:last-child {
+    border-right: none;
+    margin-right: 0;
+    padding-right: 0;
+  }
+
+  .format-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 4px 6px;
+    border: 1px solid transparent;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: inherit;
+    color: #374151;
+    transition: all 0.1s ease;
+  }
+  .format-btn:hover {
+    background: #e5e7eb;
+    border-color: #d1d5db;
+  }
+  .format-btn:active {
+    background: #d1d5db;
+  }
+
+  .font-select,
+  .fontsize-select,
+  .heading-select {
+    height: 28px;
+    padding: 4px 8px;
+    border: 1px solid #d1d5db;
+    background: #ffffff;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    color: #374151;
+    cursor: pointer;
+  }
+  .font-select { min-width: 100px; }
+  .fontsize-select { min-width: 60px; }
+  .heading-select { min-width: 90px; }
+
+  .color-picker {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.1s ease;
+  }
+  .color-picker:hover {
+    background: #e5e7eb;
+    border-color: #d1d5db;
+  }
+  .text-color {
+    flex-direction: column;
+    font-weight: bold;
+    font-size: 16px;
+    color: #374151;
+  }
+  .color-bar {
+    width: 20px;
+    height: 3px;
+    margin-top: -2px;
+  }
+  .color-picker input[type="color"] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .editor {
+    min-height: 300px;
+    padding: 16px;
+    outline: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #111827;
+    background: #ffffff;
+  }
+  .editor:empty::before {
+    content: 'Start typing here...';
+    color: #9ca3af;
+    pointer-events: none;
+  }
+  .editor img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 8px 0;
+    border-radius: 4px;
+  }
+  .editor blockquote {
+    margin: 16px 0;
+    padding: 8px 16px;
+    border-left: 4px solid #e5e7eb;
+    background: #f9fafb;
+    font-style: italic;
+  }
+  .editor code {
+    background: #f3f4f6;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+  }
+  .editor hr {
+    border: none;
+    border-top: 2px solid #e5e7eb;
+    margin: 16px 0;
+  }
+
+  .status-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: #f8f9fa;
+    border-top: 1px solid #e5e7eb;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  .preview {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    padding: 16px;
+    border-radius: 8px;
+    margin-top: 16px;
+  }
+  .preview h3 {
+    margin: 0 0 12px 0;
+    color: #374151;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .preview .content {
+    color: #111827;
+    line-height: 1.6;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .mention-dropdown {
+    position: absolute;
+  background: #fff;
+  border: 1px solid #ccc;
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+  max-height: 150px;
+  overflow-y: auto;
+  z-index: 100;
+}
+.mention-dropdown li {
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.mention-dropdown li:hover {
+  background: #f0f0f0;
+}
+
+/* styles for the in-editor mentions */
+/* .mention {
+  background-color: #A5D3F3 
+  color: #fff;               
+  padding: 2px 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+} */
+
+/* ensure preview also picks it up */
+/* .preview .mention {
+  background-color: #A5D3F3;
+  color: #fff;
+} */
+
+
+`;
+
+export default [styles];