@aquera/nile-elements 0.1.67-beta-1.8 → 0.1.67-beta-2.0

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -0,0 +1,127 @@
+// rte-styles.ts
+import { css } from 'lit';
+
+export const styles = css`
+   
+
+  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
+
+       
+nile-rte-toolbar-item > nile-button::part(base) {
+ 
+  width:32px; height:32px; padding:0px 6px;
+  border: none;
+}
+ 
+nile-rte-preview {
+  white-space: normal;
+  word-break: break-word;
+}
+
+
+
+      .toolbar, nile-rte-toolbar {
+        display:flex; align-items:center; gap:6px; padding:8px; 
+        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
+      }
+
+      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {
+        border:1px solid #e5e7eb; background:#fff; border-radius:6px;
+        cursor:pointer;
+      }
+
+  
+      /* Ensure clicks hit the button (not nested icon internals) */
+      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }
+
+      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }
+      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
+      nile-rte-color input[type="color"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }
+      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
+
+       .editor p { margin:1em 0; }
+      .editor h1, .preview h1 { font-size:2em, all: revert; display: block;
+font-size: 2em;
+margin-top: 0.67em;
+margin-bottom: 0.67em;
+margin-left: 0;
+margin-right: 0;
+font-weight: bold;  }
+      .editor h2, .preview h2 { all: revert;	display: block;
+font-size: 1.5em;
+margin-top: 0.83em;
+margin-bottom: 0.83em;
+margin-left: 0;
+margin-right: 0;
+font-weight: bold;}
+      .editor h3 { font-size:1.17em  }
+      .editor h4 { font-size:1em  }
+      .editor h5 { font-size:0.83em  }
+      .editor h6 { font-size:0.67em  }
+
+      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;   white-space: pre-wrap;
+  tab-size: 4;           
+  -moz-tab-size: 4;       }
+      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+
+      .rte-color-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid var(--nile-color-border, #d9d9d9); */
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  border:none;
+ 
+
+}
+nile-button.rte-color-trigger::part(base){
+  width:32px; height:32px; padding:0px 6px;
+}
+.rte-color-trigger .glyph-stack {
+  display: grid;               /* stack vertically */
+  grid-auto-rows: max-content; 
+  align-items: center;
+  justify-items: center;
+  line-height: 1;
+}
+
+.rte-color-trigger .glyph {
+  font-size: 14px;
+  line-height: 1;
+  margin-bottom: 2px;          
+}
+
+.rte-color-trigger .underline {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;    
+}
+
+ 
+.rte-color-trigger .swatch-box {
+  width: 18px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.35);
+  background: currentColor;    /* overridden via JS */
+}
+
+ 
+
+ 
+nile-rte-toolbar-item > nile-button[data-active]::part(base) {
+  background-color: var(--nile-colors-primary-400);
+}
+
+nile-rte-toolbar-item > nile-button[data-active]::part(base):hover {
+  background-color: var(--nile-colors-primary-500);  
+}
+
+
+
+`;
+
+export default [styles];