@editora/themes 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +102 -380
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.esm.js +13 -11
  4. package/index.d.ts +15 -0
  5. package/package.json +8 -6
  6. package/src/index.css +14 -10
  7. package/src/themes/acme.css +212 -0
  8. package/src/themes/dark.css +327 -89
  9. package/src/themes/default.css +116 -1
package/src/themes/dark.css CHANGED
@@ -1,150 +1,388 @@
1
1
  /* Rich Text Editor - Dark Theme */
2
2
 
3
3
  /* Override CSS Custom Properties for Dark Theme */
4
- [data-theme="dark"],
5
- .dark {
4
+ :is([data-theme="dark"], .dark, .editora-theme-dark) {
6
5
  /* Colors */
7
- --rte-color-primary: #4dabf7;
8
- --rte-color-primary-hover: #339af0;
9
- --rte-color-secondary: #868e96;
10
- --rte-color-success: #40c057;
11
- --rte-color-danger: #fa5252;
12
- --rte-color-warning: #ffd43b;
13
- --rte-color-info: #339af0;
6
+ --rte-color-primary: #58a6ff;
7
+ --rte-color-primary-hover: #4b9cf8;
8
+ --rte-color-secondary: #9aa4b2;
9
+ --rte-color-success: #4ecb71;
10
+ --rte-color-danger: #ff7b72;
11
+ --rte-color-warning: #f2cc60;
12
+ --rte-color-info: #58a6ff;
14
13
 
15
14
  /* Text Colors */
16
- --rte-color-text-primary: #f8f9fa;
17
- --rte-color-text-secondary: #ced4da;
18
- --rte-color-text-muted: #868e96;
19
- --rte-color-text-inverse: #212529;
15
+ --rte-color-text-primary: #ecf3ff;
16
+ --rte-color-text-secondary: #c5d0df;
17
+ --rte-color-text-muted: #8f9bb0;
18
+ --rte-color-text-inverse: #0f1722;
20
19
 
21
20
  /* Background Colors */
22
- --rte-color-bg-primary: #212529;
23
- --rte-color-bg-secondary: #343a40;
24
- --rte-color-bg-tertiary: #495057;
25
- --rte-color-bg-hover: #495057;
26
- --rte-color-bg-active: #6c757d;
21
+ --rte-color-bg-primary: #1d242d;
22
+ --rte-color-bg-secondary: #2b333d;
23
+ --rte-color-bg-tertiary: #36404c;
24
+ --rte-color-bg-hover: #414c5b;
25
+ --rte-color-bg-active: #556277;
27
26
 
28
27
  /* Border Colors */
29
- --rte-color-border: #495057;
30
- --rte-color-border-light: #343a40;
31
- --rte-color-border-focus: #4dabf7;
28
+ --rte-color-border: #475263;
29
+ --rte-color-border-light: #3c4656;
30
+ --rte-color-border-focus: #58a6ff;
32
31
 
33
32
  /* Shadows */
34
33
  --rte-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
35
- --rte-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
36
- --rte-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
34
+ --rte-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
35
+ --rte-shadow-lg: 0 14px 24px rgba(0, 0, 0, 0.45);
37
36
  }
38
37
 
39
- /* Dark theme specific overrides */
40
- [data-theme="dark"] .rte-editor,
41
- .dark .rte-editor {
42
- background-color: var(--rte-color-bg-primary);
38
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-editor {
39
+ background: linear-gradient(180deg, #1b2330 0%, #1c2430 100%);
43
40
  border-color: var(--rte-color-border);
44
41
  color: var(--rte-color-text-primary);
45
42
  }
46
43
 
47
- [data-theme="dark"] .rte-toolbar,
48
- .dark .rte-toolbar {
49
- background-color: var(--rte-color-bg-secondary);
44
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar {
45
+ background: linear-gradient(180deg, #353d48 0%, #2d3540 100%);
50
46
  border-color: var(--rte-color-border);
47
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
51
48
  }
52
49
 
53
- [data-theme="dark"] .rte-toolbar-button,
54
- .dark .rte-toolbar-button {
55
- color: var(--rte-color-text-secondary);
50
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-button {
51
+ background: linear-gradient(180deg, #46505f 0%, #3b4553 100%);
52
+ border-color: #566275;
53
+ color: #d0dae8;
54
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.35);
55
+ }
56
+
57
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
58
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
59
+ svg {
60
+ color: currentColor;
61
+ fill: currentColor;
62
+ }
63
+
64
+ /* Normalize plugin-provided inline SVGs with hardcoded black stroke values only */
65
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
66
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
67
+ svg
68
+ [stroke="#000" i],
69
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
70
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
71
+ svg
72
+ [stroke="#000000" i],
73
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
74
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
75
+ svg
76
+ [stroke="black" i],
77
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
78
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
79
+ svg
80
+ [stroke="#0f0f0f" i],
81
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
82
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
83
+ svg
84
+ [stroke="#111111" i],
85
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
86
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
87
+ svg
88
+ [style*="stroke:#000" i],
89
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
90
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
91
+ svg
92
+ [style*="stroke: #000" i],
93
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
94
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
95
+ svg
96
+ [style*="stroke:black" i],
97
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
98
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
99
+ svg
100
+ [style*="stroke: black" i],
101
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
102
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
103
+ svg
104
+ [style*="stroke:#0f0f0f" i],
105
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
106
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
107
+ svg
108
+ [style*="stroke: #0f0f0f" i] {
109
+ stroke: currentColor !important;
110
+ }
111
+
112
+ /* Normalize plugin-provided inline SVGs with hardcoded black fill values only */
113
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
114
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
115
+ svg
116
+ [fill="#000" i],
117
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
118
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
119
+ svg
120
+ [fill="#000000" i],
121
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
122
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
123
+ svg
124
+ [fill="black" i],
125
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
126
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
127
+ svg
128
+ [fill="#0f0f0f" i],
129
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
130
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
131
+ svg
132
+ [fill="#111111" i],
133
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
134
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
135
+ svg
136
+ [style*="fill:#000" i],
137
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
138
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
139
+ svg
140
+ [style*="fill: #000" i],
141
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
142
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
143
+ svg
144
+ [style*="fill:black" i],
145
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
146
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
147
+ svg
148
+ [style*="fill: black" i],
149
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
150
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
151
+ svg
152
+ [style*="fill:#0f0f0f" i],
153
+ :is([data-theme="dark"], .dark, .editora-theme-dark)
154
+ :is(.rte-toolbar-button, .editora-toolbar-button, .editora-toolbar-icon)
155
+ svg
156
+ [style*="fill: #0f0f0f" i] {
157
+ fill: currentColor !important;
56
158
  }
57
159
 
58
- [data-theme="dark"] .rte-toolbar-button:hover,
59
- .dark .rte-toolbar-button:hover {
60
- background-color: var(--rte-color-bg-hover);
160
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-button:hover {
161
+ background: linear-gradient(180deg, #525d6d 0%, #465262 100%);
162
+ color: #f4f8ff;
163
+ }
164
+
165
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-button:active,
166
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-button[data-active="true"] {
167
+ background: linear-gradient(180deg, #5eaaf6 0%, #4a95de 100%);
168
+ border-color: #67adf4;
169
+ color: #0f1b2a;
170
+ }
171
+
172
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-button:disabled {
173
+ background: #313946;
174
+ border-color: #424d5e;
175
+ color: #7f8ca1;
176
+ }
177
+
178
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-input,
179
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-group-items.font-size,
180
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-group-items.font-size .rte-toolbar-input.font-size {
181
+ background-color: #2e3642;
61
182
  color: var(--rte-color-text-primary);
183
+ border-color: #566275;
184
+ caret-color: var(--rte-color-text-primary);
62
185
  }
63
186
 
64
- [data-theme="dark"] .rte-toolbar-button:active,
65
- .dark .rte-toolbar-button:active,
66
- [data-theme="dark"] .rte-toolbar-button[data-active="true"],
67
- .dark .rte-toolbar-button[data-active="true"] {
68
- background-color: var(--rte-color-primary);
69
- color: var(--rte-color-text-inverse);
187
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-input::placeholder,
188
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-group-items.font-size .rte-toolbar-input.font-size::placeholder {
189
+ color: var(--rte-color-text-primary);
190
+ opacity: 1;
70
191
  }
192
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-group-items.font-size {
193
+ & .rte-toolbar-item {
194
+ &:first-child {
195
+ border-top-left-radius: 4px;
196
+ border-bottom-left-radius: 4px;
197
+ border-right: 1px solid #566275;
198
+ }
199
+ &:last-child {
200
+ border-top-right-radius: 4px;
201
+ border-left: 1px solid #566275;
202
+ }
203
+ }
204
+ }
71
205
 
72
- /* Dark theme - More Button */
73
- [data-theme="dark"] .rte-toolbar-more-button,
74
- .dark .rte-toolbar-more-button {
75
- background-color: var(--rte-color-bg-secondary);
76
- border-color: var(--rte-color-border);
206
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-input.font-size {
207
+ text-align: center;
208
+ border: none !important;
209
+ }
210
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-dropdown-menu {
211
+ background: #29323d;
212
+ border-color: #4d596b;
213
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
214
+ }
215
+
216
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-dropdown-item {
77
217
  color: var(--rte-color-text-secondary);
78
218
  }
79
219
 
80
- [data-theme="dark"] .rte-toolbar-more-button:hover,
81
- .dark .rte-toolbar-more-button:hover {
82
- background-color: var(--rte-color-bg-hover);
220
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-dropdown-item:hover {
221
+ background: #3a4554;
83
222
  color: var(--rte-color-text-primary);
84
223
  }
85
224
 
86
- [data-theme="dark"] .rte-toolbar-more-button.active,
87
- .dark .rte-toolbar-more-button.active {
88
- background-color: var(--rte-color-bg-tertiary);
89
- border-color: var(--rte-color-border);
225
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-more-button {
226
+ background: linear-gradient(180deg, #46505f 0%, #3b4553 100%);
227
+ border-color: #566275;
228
+ color: var(--rte-color-text-secondary);
229
+ }
230
+
231
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-more-button:hover {
232
+ background: linear-gradient(180deg, #525d6d 0%, #465262 100%);
233
+ color: var(--rte-color-text-primary);
90
234
  }
91
235
 
92
- /* Dark theme - Expanded row */
93
- [data-theme="dark"] .rte-toolbar-expanded-row,
94
- .dark .rte-toolbar-expanded-row {
95
- background-color: var(--rte-color-bg-secondary);
236
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-more-button.active {
237
+ background: linear-gradient(180deg, #5eaaf6 0%, #4a95de 100%);
238
+ border-color: #67adf4;
239
+ color: #0f1b2a;
240
+ }
241
+
242
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-toolbar-expanded-row {
243
+ background: #2a323c;
96
244
  border-color: var(--rte-color-border);
97
245
  }
98
246
 
99
- [data-theme="dark"] .rte-content,
100
- .dark .rte-content {
247
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content {
101
248
  color: var(--rte-color-text-primary);
249
+ background: linear-gradient(180deg, #1f2732 0%, #1c232e 100%);
250
+ border-color: var(--rte-color-border) !important;
102
251
  }
103
252
 
104
- [data-theme="dark"] .rte-content h1,
105
- [data-theme="dark"] .rte-content h2,
106
- [data-theme="dark"] .rte-content h3,
107
- [data-theme="dark"] .rte-content h4,
108
- [data-theme="dark"] .rte-content h5,
109
- [data-theme="dark"] .rte-content h6,
110
- .dark .rte-content h1,
111
- .dark .rte-content h2,
112
- .dark .rte-content h3,
113
- .dark .rte-content h4,
114
- .dark .rte-content h5,
115
- .dark .rte-content h6 {
253
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h1,
254
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h2,
255
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h3,
256
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h4,
257
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h5,
258
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content h6 {
116
259
  color: var(--rte-color-text-primary);
117
260
  }
118
261
 
119
- [data-theme="dark"] .rte-content blockquote,
120
- .dark .rte-content blockquote {
121
- background-color: var(--rte-color-bg-tertiary);
122
- color: var(--rte-color-text-secondary);
262
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content blockquote {
263
+ background-color: #2f3946;
264
+ color: #c0cada;
123
265
  border-left-color: var(--rte-color-primary);
124
266
  }
125
267
 
126
- [data-theme="dark"] .rte-link,
127
- .dark .rte-link {
268
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-link {
128
269
  color: var(--rte-color-primary);
129
270
  }
130
271
 
131
- [data-theme="dark"] .rte-link:hover,
132
- .dark .rte-link:hover {
272
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-link:hover {
133
273
  color: var(--rte-color-primary-hover);
134
274
  }
135
275
 
136
- [data-theme="dark"] .rte-content code,
137
- .dark .rte-content code {
138
- background-color: var(--rte-color-bg-tertiary);
276
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content code {
277
+ background-color: #2f3946;
139
278
  color: var(--rte-color-warning);
140
279
  }
141
280
 
142
- [data-theme="dark"] .rte-content::selection,
143
- .dark .rte-content::selection {
144
- background-color: rgba(77, 171, 247, 0.3);
281
+ /* Code Sample plugin uses inline light styles, so dark theme needs explicit overrides. */
282
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block {
283
+ background: linear-gradient(180deg, #212a36 0%, #1b2430 100%) !important;
284
+ border-color: #4f5b70 !important;
285
+ color: #e7effc !important;
286
+ }
287
+
288
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block:hover {
289
+ background: linear-gradient(180deg, #273240 0%, #1f2935 100%) !important;
290
+ border-color: #607088 !important;
291
+ }
292
+
293
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block code {
294
+ color: #e7effc !important;
145
295
  }
146
296
 
147
- [data-theme="dark"] .rte-content:empty:before,
148
- .dark .rte-content:empty:before {
297
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block::before {
298
+ background: #111927 !important;
299
+ color: #dce8ff !important;
300
+ }
301
+
302
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block .rte-code-copy {
303
+ background: #2b3441 !important;
304
+ border-color: #5a667b !important;
305
+ color: #dce8ff !important;
306
+ }
307
+
308
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block .rte-code-copy:hover {
309
+ background: #3a4554 !important;
310
+ border-color: #6e7d95 !important;
311
+ color: #f3f8ff !important;
312
+ }
313
+
314
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-code-block[contenteditable='false']::after {
315
+ background: rgba(255, 255, 255, 0.06) !important;
316
+ border-top-color: #4f5b70 !important;
317
+ color: #9fb0ca !important;
318
+ }
319
+
320
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content::selection {
321
+ background-color: rgba(88, 166, 255, 0.28);
322
+ }
323
+
324
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content:empty:before,
325
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-content.rte-content-empty:before {
149
326
  color: var(--rte-color-text-muted);
150
- }
327
+ }
328
+
329
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .editora-statusbar {
330
+ background: linear-gradient(180deg, #2c3440 0%, #252d37 100%);
331
+ border-top-color: #3f4a5b;
332
+ color: #c5cfdf;
333
+ }
334
+
335
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .editora-statusbar-item {
336
+ color: #d7deea;
337
+ }
338
+
339
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .editora-statusbar-separator {
340
+ color: #607088;
341
+ }
342
+
343
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .editora-statusbar-top {
344
+ border-bottom-color: #3f4a5b;
345
+ }
346
+
347
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .editora-statusbar-bottom {
348
+ border-left-color: #3f4a5b;
349
+ border-right-color: #3f4a5b;
350
+ }
351
+
352
+
353
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-inline-menu {
354
+ position: fixed;
355
+ z-index: 1000;
356
+ background: #1b2430;
357
+ border: 1px solid #4f5b70;
358
+ border-radius: 4px;
359
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
360
+ min-width: 120px;
361
+ max-width: 200px;
362
+ pointer-events: auto;
363
+ }
364
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-inline-menu-item {
365
+ padding: 8px 12px;
366
+ cursor: pointer;
367
+ /* border-bottom: 1px solid #4f5b70; */
368
+ font-size: 14px;
369
+ white-space: nowrap;
370
+ overflow: hidden;
371
+ text-overflow: ellipsis;
372
+ background-color: transparent;
373
+
374
+ }
375
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .rte-inline-menu-item:hover {
376
+ background-color: #2f3946;
377
+ }
378
+
379
+ :is([data-theme="dark"], .dark, .editora-theme-dark) .floating-toolbar {
380
+ --rte-floating-toolbar-bg: #273240;
381
+ --rte-floating-toolbar-border: #4f5f76;
382
+ --rte-floating-toolbar-text: #d8e4f6;
383
+ --rte-floating-toolbar-hover-bg: #354760;
384
+ --rte-floating-toolbar-hover-text: #f4f8ff;
385
+ --rte-floating-toolbar-active-bg: #425a79;
386
+ --rte-floating-toolbar-separator: #5f7493;
387
+ --rte-floating-toolbar-shadow: 0 16px 30px rgba(2, 8, 20, 0.42);
388
+ }
package/src/themes/default.css CHANGED
@@ -80,7 +80,11 @@
80
80
  .rte-toolbar-button:hover {
81
81
  background: #e9e9e9;
82
82
  }
83
-
83
+ .rte-toolbar-button span{
84
+ display: flex;
85
+ justify-content: center;
86
+ align-items: center;
87
+ }
84
88
  .rte-toolbar-input {
85
89
  width: 26px;
86
90
  padding: 6px 8px;
@@ -172,6 +176,13 @@
172
176
  line-height: 1.6;
173
177
  }
174
178
 
179
+ .rte-content.rte-content-empty::before,
180
+ .rte-content:empty::before {
181
+ content: attr(data-placeholder);
182
+ color: var(--rte-color-text-muted, #6b7280);
183
+ pointer-events: none;
184
+ }
185
+
175
186
  .rte-content p {
176
187
  margin: 0 0 1em 0;
177
188
  }
@@ -601,3 +612,107 @@
601
612
  .editora-theme-dark .editora-statusbar-separator {
602
613
  color: #3c3c3c;
603
614
  }
615
+
616
+ /* Dark theme editor content readability */
617
+ .editora-theme-dark .rte-content,
618
+ .editora-theme-dark .rte-content h1,
619
+ .editora-theme-dark .rte-content h2,
620
+ .editora-theme-dark .rte-content h3,
621
+ .editora-theme-dark .rte-content h4,
622
+ .editora-theme-dark .rte-content h5,
623
+ .editora-theme-dark .rte-content h6 {
624
+ color: #fff;
625
+ }
626
+
627
+ .rte-inline-menu {
628
+ position: fixed;
629
+ z-index: 1000;
630
+ background: white;
631
+ border: 1px solid #ccc;
632
+ border-radius: 4px;
633
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
634
+ min-width: 120px;
635
+ max-width: 200px;
636
+ pointer-events: auto;
637
+ }
638
+ .rte-inline-menu-item {
639
+ padding: 8px 12px;
640
+ cursor: pointer;
641
+ font-size: 14px;
642
+ white-space: nowrap;
643
+ overflow: hidden;
644
+ text-overflow: ellipsis;
645
+ background-color: transparent;
646
+
647
+ }
648
+ .rte-inline-menu-item:hover {
649
+ background-color: #f5f5f5;
650
+ }
651
+
652
+ /* Floating toolbar (React wrapper) */
653
+ .floating-toolbar {
654
+ --rte-floating-toolbar-bg: #ffffff;
655
+ --rte-floating-toolbar-border: #d7dee8;
656
+ --rte-floating-toolbar-text: #364152;
657
+ --rte-floating-toolbar-hover-bg: #f2f6fb;
658
+ --rte-floating-toolbar-hover-text: #101828;
659
+ --rte-floating-toolbar-active-bg: #e7eef7;
660
+ --rte-floating-toolbar-separator: #d8e1ec;
661
+ --rte-floating-toolbar-shadow: 0 10px 28px rgba(15, 23, 36, 0.16);
662
+ user-select: none;
663
+ -webkit-user-select: none;
664
+ align-items: center;
665
+ gap: 4px;
666
+ padding: 6px;
667
+ border-radius: 8px;
668
+ border: 1px solid var(--rte-floating-toolbar-border);
669
+ background: var(--rte-floating-toolbar-bg);
670
+ color: var(--rte-floating-toolbar-text);
671
+ box-shadow: var(--rte-floating-toolbar-shadow);
672
+ pointer-events: auto;
673
+ animation: rteFloatingToolbarIn 0.15s ease-out;
674
+ }
675
+
676
+ .floating-toolbar-btn {
677
+ display: inline-flex;
678
+ align-items: center;
679
+ justify-content: center;
680
+ min-width: 32px;
681
+ height: 32px;
682
+ border: none;
683
+ border-radius: 6px;
684
+ background: transparent;
685
+ color: inherit;
686
+ cursor: pointer;
687
+ font-size: 14px;
688
+ font-weight: 600;
689
+ transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
690
+ }
691
+
692
+ .floating-toolbar-btn:hover {
693
+ background: var(--rte-floating-toolbar-hover-bg);
694
+ color: var(--rte-floating-toolbar-hover-text);
695
+ }
696
+
697
+ .floating-toolbar-btn:active {
698
+ background: var(--rte-floating-toolbar-active-bg);
699
+ transform: scale(0.96);
700
+ }
701
+
702
+ .floating-toolbar-separator {
703
+ width: 1px;
704
+ height: 20px;
705
+ margin: 0 2px;
706
+ background: var(--rte-floating-toolbar-separator);
707
+ }
708
+
709
+ @keyframes rteFloatingToolbarIn {
710
+ from {
711
+ opacity: 0;
712
+ transform: translateX(-50%) translateY(8px);
713
+ }
714
+ to {
715
+ opacity: 1;
716
+ transform: translateX(-50%) translateY(0);
717
+ }
718
+ }