plutonium 0.22.0 → 0.23.1

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 (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/plutonium.css +2 -2
  3. data/app/views/resource/interactive_resource_action.html.erb +1 -5
  4. data/app/views/rodauth/create_account.html.erb +1 -2
  5. data/config/initializers/sqlite_json_alias.rb +8 -0
  6. data/lib/active_model/validations/attached_validator.rb +1 -1
  7. data/lib/active_model/validations/url_validator.rb +1 -1
  8. data/lib/plutonium/resource/controllers/crud_actions/index_action.rb +1 -1
  9. data/lib/plutonium/ui/component/behaviour.rb +2 -0
  10. data/lib/plutonium/ui/component/tokens.rb +58 -0
  11. data/lib/plutonium/ui/dyna_frame/content.rb +1 -1
  12. data/lib/plutonium/ui/form/base.rb +1 -0
  13. data/lib/plutonium/ui/form/theme.rb +2 -1
  14. data/lib/plutonium/ui/layout/base.rb +1 -1
  15. data/lib/plutonium/ui/layout/resource_layout.rb +2 -2
  16. data/lib/plutonium/ui/page/edit.rb +1 -1
  17. data/lib/plutonium/ui/page/index.rb +1 -1
  18. data/lib/plutonium/ui/page/interactive_action.rb +1 -1
  19. data/lib/plutonium/ui/page/new.rb +1 -1
  20. data/lib/plutonium/ui/page/show.rb +1 -1
  21. data/lib/plutonium/ui/panel.rb +2 -6
  22. data/lib/plutonium/version.rb +1 -1
  23. data/src/css/core.css +13 -10
  24. data/src/css/easymde.css +1048 -572
  25. data/src/css/plutonium.entry.css +6 -15
  26. data/src/css/slim_select.css +227 -247
  27. data/tailwind.options.js +0 -1
  28. metadata +30 -45
  29. data/config/initializers/simple_form.rb +0 -74
  30. data/lib/plutonium/simple_form/attachment_component.rb +0 -85
  31. data/lib/plutonium/simple_form/input_group_component.rb +0 -17
data/src/css/easymde.css CHANGED
@@ -4,719 +4,1195 @@
4
4
  * Adapted for Flowbite with dark mode support
5
5
  */
6
6
 
7
- @layer components {
7
+ .CodeMirror {
8
+ font-family: monospace;
9
+ height: 300px;
10
+ color: #000;
11
+ direction: ltr;
12
+ background: #fff;
13
+ position: relative;
14
+ overflow: hidden;
15
+ }
8
16
 
9
- /* CodeMirror Core */
10
- .CodeMirror {
11
- @apply font-mono relative overflow-hidden bg-white dark:bg-gray-800 text-black dark:text-white;
12
- direction: ltr;
13
- }
17
+ .dark .CodeMirror {
18
+ color: #E0E7FF;
19
+ background: #101828;
20
+ }
14
21
 
15
- .CodeMirror-lines {
16
- padding: 4px 0;
17
- }
22
+ .CodeMirror-lines {
23
+ padding: 4px 0;
24
+ cursor: text;
25
+ min-height: 1px;
26
+ }
18
27
 
19
- .CodeMirror-scroll {
20
- overflow: scroll;
21
- margin-bottom: -50px;
22
- margin-right: -50px;
23
- padding-bottom: 50px;
24
- height: 100%;
25
- outline: none;
26
- position: relative;
27
- z-index: 0;
28
- -webkit-overflow-scrolling: touch;
29
- }
28
+ .CodeMirror pre.CodeMirror-line,
29
+ .CodeMirror pre.CodeMirror-line-like {
30
+ padding: 0 4px;
31
+ }
30
32
 
31
- .CodeMirror-sizer {
32
- position: relative;
33
- border-right: 50px solid transparent;
34
- box-sizing: content-box;
35
- }
33
+ .CodeMirror-gutter-filler,
34
+ .CodeMirror-scrollbar-filler {
35
+ background-color: #fff;
36
+ position: absolute;
37
+ z-index: 6;
38
+ display: none;
39
+ outline: none;
40
+ }
36
41
 
37
- .CodeMirror-vscrollbar,
38
- .CodeMirror-hscrollbar,
39
- .CodeMirror-scrollbar-filler,
40
- .CodeMirror-gutter-filler {
41
- position: absolute;
42
- z-index: 6;
43
- display: none;
44
- outline: none;
45
- }
42
+ .dark .CodeMirror-gutter-filler,
43
+ .dark .CodeMirror-scrollbar-filler {
44
+ background-color: #101828;
45
+ }
46
46
 
47
- .CodeMirror-vscrollbar {
48
- right: 0;
49
- top: 0;
50
- overflow-x: hidden;
51
- overflow-y: scroll;
52
- }
47
+ .CodeMirror-gutters {
48
+ border-right: 1px solid #ddd;
49
+ background-color: #f7f7f7;
50
+ white-space: nowrap;
51
+ }
53
52
 
54
- .CodeMirror-hscrollbar {
55
- bottom: 0;
56
- left: 0;
57
- overflow-y: hidden;
58
- overflow-x: scroll;
59
- }
53
+ .dark .CodeMirror-gutters {
54
+ border-right: 1px solid #25304A;
55
+ background-color: #172033;
56
+ }
60
57
 
61
- .CodeMirror-scrollbar-filler {
62
- right: 0;
63
- bottom: 0;
64
- }
58
+ .CodeMirror-linenumber {
59
+ padding: 0 3px 0 5px;
60
+ min-width: 20px;
61
+ text-align: right;
62
+ color: #999;
63
+ white-space: nowrap;
64
+ }
65
65
 
66
- .CodeMirror-gutter-filler {
67
- left: 0;
68
- bottom: 0;
69
- }
66
+ .dark .CodeMirror-linenumber {
67
+ color: #A0AEC0;
68
+ }
70
69
 
71
- .CodeMirror-gutters {
72
- @apply absolute left-0 top-0 min-h-full z-[3] border-r border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700;
73
- white-space: nowrap;
74
- box-sizing: content-box;
75
- }
70
+ .CodeMirror-guttermarker {
71
+ color: #000;
72
+ }
76
73
 
77
- .CodeMirror-linenumber {
78
- @apply text-gray-500 dark:text-gray-400;
79
- padding: 0 3px 0 5px;
80
- min-width: 20px;
81
- text-align: right;
82
- white-space: nowrap;
83
- }
74
+ .dark .CodeMirror-guttermarker {
75
+ color: #E0E7FF;
76
+ }
84
77
 
85
- /* Cursor and Selection */
86
- .CodeMirror-cursor {
87
- @apply border-l border-black dark:border-white border-r-0;
88
- width: 0;
89
- position: absolute;
90
- pointer-events: none;
91
- }
78
+ .CodeMirror-guttermarker-subtle {
79
+ color: #999;
80
+ }
92
81
 
93
- .cm-fat-cursor .CodeMirror-cursor {
94
- width: auto;
95
- border: 0;
96
- background: #77ee77;
97
- }
82
+ .dark .CodeMirror-guttermarker-subtle {
83
+ color: #A0AEC0;
84
+ }
98
85
 
99
- .cm-fat-cursor div.CodeMirror-cursors {
100
- z-index: 1;
101
- }
86
+ .CodeMirror-cursor {
87
+ border-left: 1px solid #000;
88
+ border-right: none;
89
+ width: 0;
90
+ position: absolute;
91
+ pointer-events: none;
92
+ }
102
93
 
103
- .CodeMirror-selected {
104
- @apply bg-gray-200 dark:bg-gray-600;
105
- }
94
+ .dark .CodeMirror-cursor {
95
+ border-left: 1px solid #E0E7FF;
96
+ }
106
97
 
107
- .CodeMirror-focused .CodeMirror-selected {
108
- @apply bg-blue-100 dark:bg-blue-900/30;
109
- }
98
+ .CodeMirror div.CodeMirror-secondarycursor {
99
+ border-left: 1px solid silver;
100
+ }
110
101
 
111
- /* Line Styles */
112
- .CodeMirror pre.CodeMirror-line,
113
- .CodeMirror pre.CodeMirror-line-like {
114
- padding: 0 4px;
115
- margin: 0;
116
- border-radius: 0;
117
- border-width: 0;
118
- background: transparent;
119
- font-family: inherit;
120
- font-size: inherit;
121
- white-space: pre;
122
- word-wrap: normal;
123
- line-height: inherit;
124
- color: inherit;
125
- z-index: 2;
126
- position: relative;
127
- overflow: visible;
128
- -webkit-tap-highlight-color: transparent;
129
- font-variant-ligatures: contextual;
130
- }
102
+ .dark .CodeMirror div.CodeMirror-secondarycursor {
103
+ border-left: 1px solid #A0AEC0;
104
+ }
131
105
 
132
- .CodeMirror-wrap pre.CodeMirror-line,
133
- .CodeMirror-wrap pre.CodeMirror-line-like {
134
- word-wrap: break-word;
135
- white-space: pre-wrap;
136
- word-break: normal;
137
- }
106
+ .cm-fat-cursor .CodeMirror-cursor {
107
+ width: auto;
108
+ border: 0 !important;
109
+ background: #7e7;
110
+ }
138
111
 
139
- /* Gutter */
140
- .CodeMirror-gutter {
141
- white-space: normal;
142
- height: 100%;
143
- display: inline-block;
144
- vertical-align: top;
145
- margin-bottom: -50px;
146
- box-sizing: content-box;
147
- }
112
+ .dark .cm-fat-cursor .CodeMirror-cursor {
113
+ background: #4ade80;
114
+ }
148
115
 
149
- .CodeMirror-gutter-wrapper {
150
- position: absolute;
151
- z-index: 4;
152
- background: none;
153
- border: none;
154
- }
116
+ .cm-s-default .cm-header {
117
+ color: #00f;
118
+ }
155
119
 
156
- /* EasyMDE Container */
157
- .EasyMDEContainer {
158
- @apply block;
159
- }
120
+ .dark .cm-s-default .cm-header {
121
+ color: #90cdf4;
122
+ }
160
123
 
161
- .EasyMDEContainer.sided--no-fullscreen {
162
- @apply flex flex-row flex-wrap;
163
- }
124
+ .cm-s-default .cm-quote {
125
+ color: #090;
126
+ }
164
127
 
165
- .EasyMDEContainer .CodeMirror {
166
- @apply box-border border h-auto border-gray-300 dark:border-gray-600 rounded-b-lg p-2.5 z-0 break-words;
167
- }
128
+ .dark .cm-s-default .cm-quote {
129
+ color: #81e6d9;
130
+ }
168
131
 
169
- .EasyMDEContainer .CodeMirror-fullscreen {
170
- @apply fixed inset-x-0 top-[50px] bottom-0 h-auto z-40 border-r-0 rounded-br-none bg-white dark:bg-gray-800;
171
- }
132
+ .cm-negative {
133
+ color: #d44;
134
+ }
172
135
 
173
- .EasyMDEContainer .CodeMirror-sided {
174
- width: 50% !important;
175
- }
136
+ .dark .cm-negative {
137
+ color: #f56565;
138
+ }
176
139
 
177
- .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
178
- @apply border-r-0 rounded-br-none relative flex-1;
179
- }
140
+ .cm-positive {
141
+ color: #292;
142
+ }
180
143
 
181
- .EasyMDEContainer .CodeMirror-placeholder {
182
- @apply opacity-50;
183
- }
144
+ .dark .cm-positive {
145
+ color: #68d391;
146
+ }
184
147
 
185
- /* Editor Toolbar */
186
- .editor-toolbar {
187
- @apply relative select-none p-2.5 border-t border-l border-r border-gray-300 dark:border-gray-600 rounded-t-lg bg-white dark:bg-gray-800 space-x-1;
188
- }
148
+ .cm-header,
149
+ .cm-strong {
150
+ font-weight: 700;
151
+ }
189
152
 
190
- .editor-toolbar.fullscreen {
191
- @apply w-full h-[50px] py-2.5 px-0 box-border fixed top-0 left-0 opacity-100 z-50 border-0;
192
- }
153
+ .cm-em {
154
+ font-style: italic;
155
+ }
193
156
 
194
- .editor-toolbar button {
195
- @apply bg-transparent inline-block text-center no-underline h-[30px] m-0 p-0 border border-transparent rounded cursor-pointer min-w-[30px] px-1.5 whitespace-nowrap text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-bold;
196
- }
157
+ .cm-link {
158
+ text-decoration: underline;
159
+ }
197
160
 
198
- .editor-toolbar button.active {
199
- @apply bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600;
200
- }
161
+ .cm-strikethrough {
162
+ text-decoration: line-through;
163
+ }
201
164
 
202
- .editor-toolbar i.separator {
203
- @apply inline-block w-0 border-l border-r border-l-gray-300 border-r-white dark:border-l-gray-600 dark:border-r-gray-800 text-transparent -indent-[10px] mx-1.5;
204
- }
165
+ .cm-s-default .cm-keyword {
166
+ color: #708;
167
+ }
205
168
 
206
- .editor-toolbar button:after {
207
- font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
208
- font-size: 65%;
209
- vertical-align: text-bottom;
210
- position: relative;
211
- top: 2px;
212
- }
169
+ .dark .cm-s-default .cm-keyword {
170
+ color: #d6bcfa;
171
+ }
213
172
 
214
- .editor-toolbar button.heading-1:after {
215
- content: "1";
216
- }
173
+ .cm-s-default .cm-atom {
174
+ color: #219;
175
+ }
217
176
 
218
- .editor-toolbar button.heading-2:after {
219
- content: "2";
220
- }
177
+ .dark .cm-s-default .cm-atom {
178
+ color: #90cdf4;
179
+ }
221
180
 
222
- .editor-toolbar button.heading-3:after {
223
- content: "3";
224
- }
181
+ .cm-s-default .cm-number {
182
+ color: #164;
183
+ }
225
184
 
226
- .editor-toolbar button.heading-bigger:after {
227
- content: "▲";
228
- }
185
+ .dark .cm-s-default .cm-number {
186
+ color: #a3bffa;
187
+ }
229
188
 
230
- .editor-toolbar button.heading-smaller:after {
231
- content: "▼";
232
- }
189
+ .cm-s-default .cm-def {
190
+ color: #00f;
191
+ }
233
192
 
234
- /* Preview */
235
- .editor-preview {
236
- @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
237
- }
193
+ .dark .cm-s-default .cm-def {
194
+ color: #90cdf4;
195
+ }
238
196
 
239
- .editor-preview-side {
240
- @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words format dark:format-invert format-primary max-w-none;
241
- }
197
+ .cm-s-default .cm-variable-2 {
198
+ color: #05a;
199
+ }
242
200
 
243
- .editor-preview-active-side {
244
- @apply block;
245
- }
201
+ .dark .cm-s-default .cm-variable-2 {
202
+ color: #9f7aea;
203
+ }
246
204
 
247
- .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
248
- @apply flex-1 h-auto static;
249
- }
205
+ .cm-s-default .cm-type,
206
+ .cm-s-default .cm-variable-3 {
207
+ color: #085;
208
+ }
250
209
 
251
- .editor-preview>p {
252
- @apply mt-0;
253
- }
210
+ .dark .cm-s-default .cm-type,
211
+ .dark .cm-s-default .cm-variable-3 {
212
+ color: #81e6d9;
213
+ }
254
214
 
255
- .editor-preview pre {
256
- @apply bg-gray-100 dark:bg-gray-800 mb-2.5;
257
- }
215
+ .cm-s-default .cm-comment {
216
+ color: #a50;
217
+ }
258
218
 
259
- .editor-preview table td,
260
- .editor-preview table th {
261
- @apply border border-gray-300 dark:border-gray-600 p-1.5;
262
- }
219
+ .dark .cm-s-default .cm-comment {
220
+ color: #feb2b2;
221
+ }
263
222
 
264
- /* Status Bar */
265
- .editor-statusbar {
266
- @apply p-2 text-sm text-gray-500 dark:text-gray-400 text-right;
267
- }
223
+ .cm-s-default .cm-string {
224
+ color: #a11;
225
+ }
268
226
 
269
- .EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
270
- @apply w-full;
271
- }
227
+ .dark .cm-s-default .cm-string {
228
+ color: #f56565;
229
+ }
272
230
 
273
- .editor-statusbar span {
274
- @apply inline-block min-w-[4em] ml-4;
275
- }
231
+ .cm-s-default .cm-string-2 {
232
+ color: #f50;
233
+ }
276
234
 
277
- .editor-statusbar .lines:before {
278
- content: 'lines: ';
279
- }
235
+ .dark .cm-s-default .cm-string-2 {
236
+ color: #fdba74;
237
+ }
280
238
 
281
- .editor-statusbar .words:before {
282
- content: 'words: ';
283
- }
239
+ .cm-s-default .cm-meta {
240
+ color: #555;
241
+ }
284
242
 
285
- .editor-statusbar .characters:before {
286
- content: 'characters: ';
287
- }
243
+ .dark .cm-s-default .cm-meta {
244
+ color: #b2f5ea;
245
+ }
288
246
 
289
- /* Syntax Highlighting */
290
- .cm-s-easymde .cm-em {
291
- @apply italic text-secondary-600 dark:text-secondary-400;
292
- }
247
+ .cm-s-default .cm-qualifier {
248
+ color: #555;
249
+ }
293
250
 
294
- .cm-s-easymde .cm-strong {
295
- @apply font-bold text-secondary-600 dark:text-secondary-400;
296
- }
251
+ .dark .cm-s-default .cm-qualifier {
252
+ color: #b2f5ea;
253
+ }
297
254
 
298
- .cm-s-easymde .cm-strikethrough {
299
- @apply line-through italic text-secondary-600 dark:text-secondary-400;
300
- }
255
+ .cm-s-default .cm-builtin {
256
+ color: #30a;
257
+ }
301
258
 
302
- .cm-s-easymde .cm-quote {
303
- @apply text-gray-900 dark:text-white;
304
- }
259
+ .dark .cm-s-default .cm-builtin {
260
+ color: #c084fc;
261
+ }
305
262
 
306
- .cm-s-easymde .cm-keyword {
307
- @apply text-gray-900 dark:text-white;
308
- }
263
+ .cm-s-default .cm-bracket {
264
+ color: #997;
265
+ }
309
266
 
310
- .cm-s-easymde .cm-atom {
311
- @apply text-gray-900 dark:text-white;
312
- }
267
+ .dark .cm-s-default .cm-bracket {
268
+ color: #fde047;
269
+ }
313
270
 
314
- .cm-s-easymde .cm-number {
315
- @apply text-gray-900 dark:text-white;
316
- }
271
+ .cm-s-default .cm-tag {
272
+ color: #170;
273
+ }
317
274
 
318
- .cm-s-easymde .cm-def {
319
- @apply text-gray-900 dark:text-white;
320
- }
275
+ .dark .cm-s-default .cm-tag {
276
+ color: #86efac;
277
+ }
321
278
 
322
- .cm-s-easymde .cm-variable {
323
- @apply text-gray-900 dark:text-white;
324
- }
279
+ .cm-s-default .cm-attribute {
280
+ color: #00c;
281
+ }
325
282
 
326
- .cm-s-easymde .cm-variable-2 {
327
- @apply text-gray-900 dark:text-white;
328
- }
283
+ .dark .cm-s-default .cm-attribute {
284
+ color: #93c5fd;
285
+ }
329
286
 
330
- .cm-s-easymde .cm-variable-3 {
331
- @apply text-gray-900 dark:text-white;
332
- }
287
+ .cm-s-default .cm-hr {
288
+ color: #999;
289
+ }
333
290
 
334
- .cm-formatting.cm-formatting-list {
335
- @apply text-gray-900 dark:text-white;
336
- }
291
+ .dark .cm-s-default .cm-hr {
292
+ color: #A0AEC0;
293
+ }
337
294
 
338
- .cm-formatting.cm-formatting-link {
339
- @apply text-secondary-900 dark:text-secondary-400;
340
- }
295
+ .cm-s-default .cm-link {
296
+ color: #00c;
297
+ }
341
298
 
342
- .cm-formatting.cm-formatting-link-string {
343
- @apply text-secondary-900 dark:text-secondary-400;
344
- }
299
+ .dark .cm-s-default .cm-link {
300
+ color: #93c5fd;
301
+ }
345
302
 
346
- .cm-s-easymde .cm-string {
347
- @apply text-accent-600 dark:text-accent-400;
348
- }
303
+ .cm-s-default .cm-error {
304
+ color: red;
305
+ }
349
306
 
350
- .cm-s-easymde .cm-string.cm-url {
351
- @apply text-accent-600 dark:text-accent-400;
352
- }
307
+ .dark .cm-s-default .cm-error {
308
+ color: #f87171;
309
+ }
353
310
 
354
- .cm-s-easymde .cm-url {
355
- @apply text-gray-900 dark:text-white;
356
- }
311
+ .cm-invalidchar {
312
+ color: red;
313
+ }
357
314
 
358
- .cm-s-easymde .cm-string-2 {
359
- @apply text-gray-900 dark:text-white;
360
- }
315
+ .dark .cm-invalidchar {
316
+ color: #f87171;
317
+ }
361
318
 
362
- .cm-s-easymde .cm-comment {
363
- @apply text-gray-600 dark:text-gray-400 font-mono;
364
- }
319
+ .CodeMirror-composing {
320
+ border-bottom: 2px solid;
321
+ }
365
322
 
366
- .cm-s-easymde .cm-tag {
367
- color: #63a35c;
368
- }
323
+ div.CodeMirror span.CodeMirror-matchingbracket {
324
+ color: #0b0;
325
+ }
369
326
 
370
- .cm-s-easymde .cm-meta {
371
- @apply text-gray-600 dark:text-gray-400;
372
- }
327
+ .dark div.CodeMirror span.CodeMirror-matchingbracket {
328
+ color: #6ee7b7;
329
+ }
373
330
 
374
- .cm-s-easymde .cm-attribute {
375
- @apply text-secondary-600 dark:text-secondary-400;
376
- }
331
+ div.CodeMirror span.CodeMirror-nonmatchingbracket {
332
+ color: #a22;
333
+ }
377
334
 
378
- .cm-s-easymde .cm-error {
379
- @apply text-red-600 dark:text-red-400;
380
- }
335
+ .dark div.CodeMirror span.CodeMirror-nonmatchingbracket {
336
+ color: #fca5a5;
337
+ }
381
338
 
382
- .cm-s-easymde .cm-header-1 {
383
- font-size: calc(1.375rem + 1.5vw);
384
- }
339
+ .CodeMirror-matchingtag {
340
+ background: rgba(255, 150, 0, .3);
341
+ }
385
342
 
386
- .cm-s-easymde .cm-header-2 {
387
- font-size: calc(1.325rem + .9vw);
388
- }
343
+ .dark .CodeMirror-matchingtag {
344
+ background: rgba(251, 191, 36, .4);
345
+ }
389
346
 
390
- .cm-s-easymde .cm-header-3 {
391
- font-size: calc(1.3rem + .6vw);
392
- }
347
+ .CodeMirror-activeline-background {
348
+ background: #e8f2ff;
349
+ }
393
350
 
394
- .cm-s-easymde .cm-header-4 {
395
- font-size: calc(1.275rem + .3vw);
396
- }
351
+ .dark .CodeMirror-activeline-background {
352
+ background: #25304A;
353
+ }
397
354
 
398
- .cm-s-easymde .cm-header-5 {
399
- font-size: 1.25rem;
400
- }
355
+ .CodeMirror-scroll {
356
+ overflow: scroll !important;
357
+ margin-bottom: -50px;
358
+ margin-right: -50px;
359
+ padding-bottom: 50px;
360
+ height: 100%;
361
+ outline: 0;
362
+ position: relative;
363
+ z-index: 0;
364
+ }
401
365
 
402
- .cm-s-easymde .cm-header-6 {
403
- font-size: 1rem;
404
- }
366
+ .CodeMirror-sizer {
367
+ position: relative;
368
+ border-right: 50px solid transparent;
369
+ }
405
370
 
406
- .cm-s-easymde .cm-header-1,
407
- .cm-s-easymde .cm-header-2,
408
- .cm-s-easymde .cm-header-3,
409
- .cm-s-easymde .cm-header-4,
410
- .cm-s-easymde .cm-header-5,
411
- .cm-s-easymde .cm-header-6 {
412
- @apply mb-2 leading-tight;
413
- }
371
+ .CodeMirror-vscrollbar,
372
+ .CodeMirror-hscrollbar {
373
+ position: absolute;
374
+ z-index: 6;
375
+ display: none;
376
+ outline: 0;
377
+ }
414
378
 
415
- /* Dropdown */
416
- .editor-toolbar .easymde-dropdown {
417
- @apply relative bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600;
418
- background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
419
- }
379
+ .CodeMirror-vscrollbar {
380
+ right: 0;
381
+ top: 0;
382
+ overflow-x: hidden;
383
+ overflow-y: scroll;
384
+ }
420
385
 
421
- .editor-toolbar .easymde-dropdown:hover {
422
- background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
423
- }
386
+ .CodeMirror-hscrollbar {
387
+ bottom: 0;
388
+ left: 0;
389
+ overflow-y: hidden;
390
+ overflow-x: scroll;
391
+ }
424
392
 
425
- .easymde-dropdown-content {
426
- @apply block invisible absolute bg-gray-50 dark:bg-gray-800 shadow-lg p-2 z-20 top-[30px];
427
- }
393
+ .CodeMirror-gutters {
394
+ position: absolute;
395
+ left: 0;
396
+ top: 0;
397
+ min-height: 100%;
398
+ z-index: 3;
399
+ }
428
400
 
429
- .easymde-dropdown:active .easymde-dropdown-content,
430
- .easymde-dropdown:focus .easymde-dropdown-content,
431
- .easymde-dropdown:focus-within .easymde-dropdown-content {
432
- @apply visible;
433
- }
401
+ .CodeMirror-gutter {
402
+ white-space: normal;
403
+ height: 100%;
404
+ display: inline-block;
405
+ vertical-align: top;
406
+ margin-bottom: -50px;
407
+ }
434
408
 
435
- /* Fullscreen Gradients */
436
- .editor-toolbar.fullscreen::before {
437
- @apply w-5 h-[50px] fixed top-0 left-0 m-0 p-0;
438
- background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
439
- }
409
+ .CodeMirror-gutter-wrapper {
410
+ position: absolute;
411
+ z-index: 4;
412
+ background: 0 0 !important;
413
+ border: none !important;
414
+ }
440
415
 
441
- .editor-toolbar.fullscreen::after {
442
- @apply w-5 h-[50px] fixed top-0 right-0 m-0 p-0;
443
- background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
444
- }
416
+ .CodeMirror-gutter-background {
417
+ position: absolute;
418
+ top: 0;
419
+ bottom: 0;
420
+ z-index: 4;
421
+ }
445
422
 
446
- /* Dark mode fullscreen gradients */
447
- .dark .editor-toolbar.fullscreen::before {
448
- background: linear-gradient(to right, #1f2937 0%, rgba(31, 41, 55, 0) 100%);
449
- }
423
+ .CodeMirror-gutter-elt {
424
+ position: absolute;
425
+ cursor: default;
426
+ z-index: 4;
427
+ }
450
428
 
451
- .dark .editor-toolbar.fullscreen::after {
452
- background: linear-gradient(to right, rgba(31, 41, 55, 0) 0%, #1f2937 100%);
453
- }
429
+ .CodeMirror-gutter-wrapper ::selection {
430
+ background-color: transparent;
431
+ }
454
432
 
455
- /* Mobile Responsiveness */
456
- @media only screen and (max-width: 700px) {
457
- .editor-toolbar i.no-mobile {
458
- @apply hidden;
459
- }
460
- }
433
+ .CodeMirror-gutter-wrapper ::-moz-selection {
434
+ background-color: transparent;
435
+ }
461
436
 
462
- /* Spell Check */
463
- .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
464
- @apply bg-red-100/50 dark:bg-red-900/30;
465
- }
437
+ .CodeMirror pre.CodeMirror-line,
438
+ .CodeMirror pre.CodeMirror-line-like {
439
+ -moz-border-radius: 0;
440
+ -webkit-border-radius: 0;
441
+ border-radius: 0;
442
+ border-width: 0;
443
+ background: 0 0;
444
+ font-family: inherit;
445
+ font-size: inherit;
446
+ margin: 0;
447
+ white-space: pre;
448
+ word-wrap: normal;
449
+ line-height: inherit;
450
+ color: inherit;
451
+ z-index: 2;
452
+ position: relative;
453
+ overflow: visible;
454
+ -webkit-tap-highlight-color: transparent;
455
+ -webkit-font-variant-ligatures: contextual;
456
+ font-variant-ligatures: contextual;
457
+ }
466
458
 
467
- /* Image Handling */
468
- span[data-img-src]::after {
469
- content: '';
470
- background-image: var(--bg-image);
471
- @apply block max-h-full max-w-full bg-contain bg-no-repeat;
472
- height: 0;
473
- padding-top: var(--height);
474
- width: var(--width);
475
- }
459
+ .CodeMirror-wrap pre.CodeMirror-line,
460
+ .CodeMirror-wrap pre.CodeMirror-line-like {
461
+ word-wrap: break-word;
462
+ white-space: pre-wrap;
463
+ word-break: normal;
464
+ }
476
465
 
477
- /* RTL Support */
478
- .CodeMirror-rtl pre {
479
- direction: rtl;
480
- }
466
+ .CodeMirror-linebackground {
467
+ position: absolute;
468
+ left: 0;
469
+ right: 0;
470
+ top: 0;
471
+ bottom: 0;
472
+ z-index: 0;
473
+ }
481
474
 
482
- .CodeMirror-selectedtext {
483
- @apply bg-gray-200/70 dark:bg-gray-600/50;
484
- }
475
+ .CodeMirror-linewidget {
476
+ position: relative;
477
+ z-index: 2;
478
+ padding: .1px;
479
+ }
485
480
 
486
- /* Cursor Animations */
487
- @keyframes blink {
488
- 50% {
489
- background-color: transparent;
490
- }
491
- }
481
+ .CodeMirror-rtl pre {
482
+ direction: rtl;
483
+ }
492
484
 
493
- @-moz-keyframes blink {
494
- 50% {
495
- background-color: transparent;
496
- }
497
- }
485
+ .CodeMirror-code {
486
+ outline: 0;
487
+ }
498
488
 
499
- @-webkit-keyframes blink {
500
- 50% {
501
- background-color: transparent;
502
- }
503
- }
489
+ .CodeMirror-gutter,
490
+ .CodeMirror-gutters,
491
+ .CodeMirror-linenumber,
492
+ .CodeMirror-scroll,
493
+ .CodeMirror-sizer {
494
+ -moz-box-sizing: content-box;
495
+ box-sizing: content-box;
496
+ }
504
497
 
505
- .cm-fat-cursor .CodeMirror-cursor {
506
- @apply bg-[#7e7];
507
- width: auto;
508
- border: 0;
509
- }
498
+ .CodeMirror-measure {
499
+ position: absolute;
500
+ width: 100%;
501
+ height: 0;
502
+ overflow: hidden;
503
+ visibility: hidden;
504
+ }
510
505
 
511
- .cm-fat-cursor div.CodeMirror-cursors {
512
- z-index: 1;
513
- }
506
+ .CodeMirror-measure pre {
507
+ position: static;
508
+ }
514
509
 
515
- .cm-fat-cursor .CodeMirror-line::selection,
516
- .cm-fat-cursor .CodeMirror-line>span::selection,
517
- .cm-fat-cursor .CodeMirror-line>span>span::selection {
518
- background: transparent;
519
- }
510
+ div.CodeMirror-cursors {
511
+ visibility: hidden;
512
+ position: relative;
513
+ z-index: 3;
514
+ }
520
515
 
521
- .cm-fat-cursor .CodeMirror-line::-moz-selection,
522
- .cm-fat-cursor .CodeMirror-line>span::-moz-selection,
523
- .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
524
- background: transparent;
525
- }
516
+ div.CodeMirror-dragcursors {
517
+ visibility: visible;
518
+ }
526
519
 
527
- .cm-fat-cursor {
528
- caret-color: transparent;
529
- }
520
+ .CodeMirror-focused div.CodeMirror-cursors {
521
+ visibility: visible;
522
+ }
530
523
 
531
- /* Print Styles */
532
- @media print {
533
- .CodeMirror div.CodeMirror-cursors {
534
- visibility: hidden;
535
- }
536
- }
524
+ .CodeMirror-selected {
525
+ background: #d9d9d9;
526
+ }
537
527
 
538
- /* Additional Utility Classes */
539
- .CodeMirror-selected {
540
- @apply bg-gray-200 dark:bg-gray-600;
541
- }
528
+ .dark .CodeMirror-selected {
529
+ background: #25304A;
530
+ }
542
531
 
543
- .CodeMirror-focused .CodeMirror-selected {
544
- @apply bg-blue-100 dark:bg-blue-900/30;
545
- }
532
+ .CodeMirror-focused .CodeMirror-selected {
533
+ background: #d7d4f0;
534
+ }
546
535
 
547
- .CodeMirror-crosshair {
548
- @apply cursor-crosshair;
549
- }
536
+ .dark .CodeMirror-focused .CodeMirror-selected {
537
+ background: #36415F;
538
+ }
550
539
 
551
- .CodeMirror-line {
552
- @apply outline-none;
553
- }
540
+ .CodeMirror-crosshair {
541
+ cursor: crosshair;
542
+ }
554
543
 
555
- .cm-tab {
556
- @apply inline-block no-underline;
557
- }
544
+ .CodeMirror-line::selection,
545
+ .CodeMirror-line>span::selection,
546
+ .CodeMirror-line>span>span::selection {
547
+ background: #d7d4f0;
548
+ }
558
549
 
559
- /* Fix for tab character rendering */
560
- .cm-tab-wrap-hack:after {
561
- content: '';
562
- }
550
+ .dark .CodeMirror-line::selection,
551
+ .dark .CodeMirror-line>span::selection,
552
+ .dark .CodeMirror-line>span>span::selection {
553
+ background: #36415F;
554
+ }
563
555
 
564
- /* Cursor visibility states */
565
- div.CodeMirror-cursors {
566
- @apply invisible relative z-[3];
567
- }
556
+ .CodeMirror-line::-moz-selection,
557
+ .CodeMirror-line>span::-moz-selection,
558
+ .CodeMirror-line>span>span::-moz-selection {
559
+ background: #d7d4f0;
560
+ }
568
561
 
569
- div.CodeMirror-dragcursors {
570
- @apply visible;
571
- }
562
+ .dark .CodeMirror-line::-moz-selection,
563
+ .dark .CodeMirror-line>span::-moz-selection,
564
+ .dark .CodeMirror-line>span>span::-moz-selection {
565
+ background: #36415F;
566
+ }
572
567
 
573
- .CodeMirror-focused div.CodeMirror-cursors {
574
- @apply visible;
575
- }
568
+ .cm-searching {
569
+ background-color: #ffa;
570
+ background-color: rgba(255, 255, 0, .4);
571
+ }
576
572
 
577
- /* Measure element used for character width calculations */
578
- .CodeMirror-measure {
579
- @apply absolute w-full h-0 overflow-hidden invisible;
580
- }
573
+ .dark .cm-searching {
574
+ background-color: #facc15;
575
+ background-color: rgba(250, 204, 21, .4);
576
+ }
581
577
 
582
- /* Line background and widgets */
583
- .CodeMirror-linebackground {
584
- @apply absolute inset-0 z-0;
585
- }
578
+ .cm-force-border {
579
+ padding-right: .1px;
580
+ }
586
581
 
587
- .CodeMirror-linewidget {
588
- @apply relative z-[2];
589
- padding: 0.1px;
582
+ @media print {
583
+ .CodeMirror div.CodeMirror-cursors {
584
+ visibility: hidden;
590
585
  }
586
+ }
591
587
 
592
- /* Gutter click prevention */
593
- .CodeMirror-gutter,
594
- .CodeMirror-gutters,
595
- .CodeMirror-linenumber {
596
- -moz-user-select: none;
597
- -webkit-user-select: none;
598
- user-select: none;
599
- }
588
+ .cm-tab-wrap-hack:after {
589
+ content: '';
590
+ }
600
591
 
601
- /* Ensure proper line wrapping in various scenarios */
602
- .CodeMirror-wrap pre.CodeMirror-line,
603
- .CodeMirror-wrap pre.CodeMirror-line-like {
604
- @apply break-words whitespace-pre-wrap break-normal;
605
- }
592
+ span.CodeMirror-selectedtext {
593
+ background: 0 0;
594
+ }
606
595
 
607
- /* Composing indicator for IME */
608
- .CodeMirror-composing {
609
- @apply border-b-2 border-solid;
610
- }
596
+ .EasyMDEContainer {
597
+ display: block;
598
+ }
611
599
 
612
- /* Matching brackets highlighting */
613
- div.CodeMirror span.CodeMirror-matchingbracket {
614
- @apply text-green-700 dark:text-green-400;
615
- }
600
+ .EasyMDEContainer.sided--no-fullscreen {
601
+ display: flex;
602
+ flex-direction: row;
603
+ flex-wrap: wrap;
604
+ }
616
605
 
617
- div.CodeMirror span.CodeMirror-nonmatchingbracket {
618
- @apply text-red-600 dark:text-red-400;
619
- }
606
+ .EasyMDEContainer .CodeMirror {
607
+ box-sizing: border-box;
608
+ height: auto;
609
+ border: 1px solid #ced4da;
610
+ border-bottom-left-radius: 4px;
611
+ border-bottom-right-radius: 4px;
612
+ padding: 10px;
613
+ font: inherit;
614
+ z-index: 0;
615
+ word-wrap: break-word;
616
+ }
620
617
 
621
- /* Active line background */
622
- .CodeMirror-activeline-background {
623
- @apply bg-blue-50 dark:bg-blue-900/10;
624
- }
618
+ .dark .EasyMDEContainer .CodeMirror {
619
+ border: 1px solid #25304A;
620
+ }
625
621
 
626
- /* Ensure proper z-index stacking in fullscreen mode */
627
- .CodeMirror-fullscreen {
628
- @apply z-[9999];
629
- }
622
+ .EasyMDEContainer .CodeMirror-scroll {
623
+ cursor: text;
624
+ }
630
625
 
631
- /* Preview mode button states */
632
- .editor-toolbar.disabled-for-preview button:not(.no-disable) {
633
- @apply opacity-60 pointer-events-none;
634
- }
626
+ .EasyMDEContainer .CodeMirror-fullscreen {
627
+ background: #fff;
628
+ position: fixed !important;
629
+ top: 50px;
630
+ left: 0;
631
+ right: 0;
632
+ bottom: 0;
633
+ height: auto;
634
+ z-index: 8;
635
+ border-right: none !important;
636
+ border-bottom-right-radius: 0 !important;
637
+ }
635
638
 
636
- /* Ensure proper box sizing for measurement */
637
- .CodeMirror-measure pre {
638
- @apply static;
639
- }
639
+ .dark .EasyMDEContainer .CodeMirror-fullscreen {
640
+ background: #0A0F1A;
641
+ }
640
642
 
641
- /* Fix for Safari overflow issues */
642
- .CodeMirror-scroll {
643
- -webkit-overflow-scrolling: touch;
644
- }
643
+ .EasyMDEContainer .CodeMirror-sided {
644
+ width: 50% !important;
645
+ }
645
646
 
646
- /* System-specific font smoothing */
647
- .CodeMirror pre.CodeMirror-line,
648
- .CodeMirror pre.CodeMirror-line-like {
649
- -webkit-font-smoothing: antialiased;
650
- -moz-osx-font-smoothing: grayscale;
651
- }
647
+ .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
648
+ border-right: none !important;
649
+ border-bottom-right-radius: 0;
650
+ position: relative;
651
+ flex: 1 1 auto;
652
+ }
652
653
 
653
- /* Typography Styles */
654
- .cm-s-easymde .cm-header {
655
- @apply text-gray-900 dark:text-white;
656
- }
654
+ .EasyMDEContainer .CodeMirror-placeholder {
655
+ opacity: .5;
656
+ }
657
657
 
658
- /* Focus/Selection Styles */
659
- .CodeMirror-line::selection,
660
- .CodeMirror-line>span::selection,
661
- .CodeMirror-line>span>span::selection {
662
- @apply bg-primary-100 dark:bg-primary-900/30;
663
- }
658
+ .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
659
+ background: #d9d9d9;
660
+ }
664
661
 
665
- .CodeMirror-line::-moz-selection,
666
- .CodeMirror-line>span::-moz-selection,
667
- .CodeMirror-line>span>span::-moz-selection {
668
- @apply bg-primary-100 dark:bg-primary-900/30;
669
- }
662
+ .dark .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
663
+ background: #25304A;
664
+ }
670
665
 
671
- /* Tag Match Styles */
672
- .CodeMirror-matchingtag {
673
- @apply bg-yellow-200/30 dark:bg-yellow-900/30;
674
- }
666
+ .editor-toolbar {
667
+ position: relative;
668
+ -webkit-user-select: none;
669
+ -moz-user-select: none;
670
+ -ms-user-select: none;
671
+ -o-user-select: none;
672
+ user-select: none;
673
+ padding: 9px 10px;
674
+ border-top: 1px solid #ced4da;
675
+ border-left: 1px solid #ced4da;
676
+ border-right: 1px solid #ced4da;
677
+ border-top-left-radius: 4px;
678
+ border-top-right-radius: 4px;
679
+ }
675
680
 
676
- /* Search Highlight Styles */
677
- .cm-searching {
678
- @apply bg-yellow-200/40 dark:bg-yellow-900/40;
679
- }
681
+ .dark .editor-toolbar {
682
+ border-top: 1px solid #25304A;
683
+ border-left: 1px solid #25304A;
684
+ border-right: 1px solid #25304A;
685
+ background: #172033;
686
+ }
680
687
 
681
- /* Ruler Styles */
682
- .CodeMirror-rulers {
683
- @apply absolute inset-x-0 -top-[50px] bottom-0 overflow-hidden;
684
- }
688
+ .editor-toolbar.fullscreen {
689
+ width: 100%;
690
+ height: 50px;
691
+ padding-top: 10px;
692
+ padding-bottom: 10px;
693
+ box-sizing: border-box;
694
+ background: #fff;
695
+ border: 0;
696
+ position: fixed;
697
+ top: 0;
698
+ left: 0;
699
+ opacity: 1;
700
+ z-index: 9;
701
+ }
685
702
 
686
- .CodeMirror-ruler {
687
- @apply border-l border-gray-300 dark:border-gray-600 top-0 bottom-0 absolute;
688
- }
703
+ .dark .editor-toolbar.fullscreen {
704
+ background: #172033;
705
+ }
689
706
 
690
- /* Editor Preview Full */
691
- .editor-preview-full {
692
- @apply absolute w-full h-full top-0 left-0 z-[7] overflow-auto hidden box-border;
693
- }
707
+ .editor-toolbar.fullscreen::before {
708
+ width: 20px;
709
+ height: 50px;
710
+ background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
711
+ position: fixed;
712
+ top: 0;
713
+ left: 0;
714
+ margin: 0;
715
+ padding: 0;
716
+ }
694
717
 
695
- /* Add active state for full preview */
696
- .editor-preview-active {
697
- @apply block;
698
- }
718
+ .dark .editor-toolbar.fullscreen::before {
719
+ background: linear-gradient(to right, #172033 0, rgba(23, 32, 51, 0) 100%);
720
+ }
699
721
 
700
- /* Preview content specific styles */
701
- .editor-preview-full {
702
- @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
703
- }
722
+ .editor-toolbar.fullscreen::after {
723
+ width: 20px;
724
+ height: 50px;
725
+ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
726
+ position: fixed;
727
+ top: 0;
728
+ right: 0;
729
+ margin: 0;
730
+ padding: 0;
731
+ }
704
732
 
705
- .editor-preview-full>p {
706
- @apply mt-0;
707
- }
733
+ .dark .editor-toolbar.fullscreen::after {
734
+ background: linear-gradient(to right, rgba(23, 32, 51, 0) 0, #172033 100%);
735
+ }
708
736
 
709
- .editor-preview-full pre {
710
- @apply bg-gray-100 dark:bg-gray-800 mb-2.5;
711
- }
737
+ .EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
738
+ width: 100%;
739
+ }
712
740
 
713
- .editor-preview-full table td,
714
- .editor-preview-full table th {
715
- @apply border border-gray-300 dark:border-gray-600 p-1.5;
716
- }
741
+ .editor-toolbar .easymde-dropdown,
742
+ .editor-toolbar button {
743
+ background: transparent;
744
+ display: inline-block;
745
+ text-align: center;
746
+ text-decoration: none !important;
747
+ height: 30px;
748
+ margin: 0;
749
+ padding: 0 6px;
750
+ border: 1px solid transparent;
751
+ border-radius: 3px;
752
+ cursor: pointer;
753
+ }
754
+
755
+ .editor-toolbar button {
756
+ font-weight: 700;
757
+ min-width: 30px;
758
+ white-space: nowrap;
759
+ color: #333;
760
+ }
717
761
 
718
- /* Hide elements that need to be hidden without !important */
719
- .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
762
+ .dark .editor-toolbar button {
763
+ color: #E0E7FF;
764
+ }
765
+
766
+ .editor-toolbar button.active,
767
+ .editor-toolbar button:hover {
768
+ background: #fcfcfc;
769
+ border-color: #95a5a6;
770
+ }
771
+
772
+ .dark .editor-toolbar button.active,
773
+ .dark .editor-toolbar button:hover {
774
+ background: #25304A;
775
+ border-color: #36415F;
776
+ }
777
+
778
+ .editor-toolbar i.separator {
779
+ display: inline-block;
780
+ width: 0;
781
+ border-left: 1px solid #d9d9d9;
782
+ border-right: 1px solid #fff;
783
+ color: transparent;
784
+ text-indent: -10px;
785
+ margin: 0 6px;
786
+ }
787
+
788
+ .dark .editor-toolbar i.separator {
789
+ border-left: 1px solid #25304A;
790
+ border-right: 1px solid #172033;
791
+ }
792
+
793
+ .editor-toolbar button:after {
794
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
795
+ font-size: 65%;
796
+ vertical-align: text-bottom;
797
+ position: relative;
798
+ top: 2px;
799
+ }
800
+
801
+ .editor-toolbar button.heading-1:after {
802
+ content: "1";
803
+ }
804
+
805
+ .editor-toolbar button.heading-2:after {
806
+ content: "2";
807
+ }
808
+
809
+ .editor-toolbar button.heading-3:after {
810
+ content: "3";
811
+ }
812
+
813
+ .editor-toolbar button.heading-bigger:after {
814
+ content: "▲";
815
+ }
816
+
817
+ .editor-toolbar button.heading-smaller:after {
818
+ content: "▼";
819
+ }
820
+
821
+ .editor-toolbar.disabled-for-preview button:not(.no-disable) {
822
+ opacity: .6;
823
+ pointer-events: none;
824
+ }
825
+
826
+ @media only screen and (max-width:700px) {
827
+ .editor-toolbar i.no-mobile {
720
828
  display: none;
721
829
  }
722
830
  }
831
+
832
+ .editor-statusbar {
833
+ padding: 8px 10px;
834
+ font-size: 12px;
835
+ color: #959694;
836
+ text-align: right;
837
+ background: #f7f7f7;
838
+ }
839
+
840
+ .dark .editor-statusbar {
841
+ color: #A0AEC0;
842
+ background: #172033;
843
+ }
844
+
845
+ .EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
846
+ width: 100%;
847
+ }
848
+
849
+ .editor-statusbar span {
850
+ display: inline-block;
851
+ min-width: 4em;
852
+ margin-left: 1em;
853
+ }
854
+
855
+ .editor-statusbar .lines:before {
856
+ content: 'lines: ';
857
+ }
858
+
859
+ .editor-statusbar .words:before {
860
+ content: 'words: ';
861
+ }
862
+
863
+ .editor-statusbar .characters:before {
864
+ content: 'characters: ';
865
+ }
866
+
867
+ .editor-preview-full {
868
+ position: absolute;
869
+ width: 100%;
870
+ height: 100%;
871
+ top: 0;
872
+ left: 0;
873
+ z-index: 7;
874
+ overflow: auto;
875
+ display: none;
876
+ box-sizing: border-box;
877
+ padding: 10px;
878
+ background: #fafafa;
879
+ }
880
+
881
+ .dark .editor-preview-full {
882
+ background: #172033;
883
+ color: #E0E7FF;
884
+ }
885
+
886
+ .editor-preview-side {
887
+ position: fixed;
888
+ bottom: 0;
889
+ width: 50%;
890
+ top: 50px;
891
+ right: 0;
892
+ z-index: 9;
893
+ overflow: auto;
894
+ display: none;
895
+ box-sizing: border-box;
896
+ border: 1px solid #ddd;
897
+ word-wrap: break-word;
898
+ background: #fff;
899
+ }
900
+
901
+ .dark .editor-preview-side {
902
+ border: 1px solid #25304A;
903
+ background: #101828;
904
+ }
905
+
906
+ .editor-preview-active-side {
907
+ display: block;
908
+ }
909
+
910
+ .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
911
+ flex: 1 1 auto;
912
+ height: auto;
913
+ position: static;
914
+ }
915
+
916
+ .editor-preview-active {
917
+ display: block;
918
+ }
919
+
920
+ .editor-preview {
921
+ padding: 10px;
922
+ background: #fafafa;
923
+ color: #333;
924
+ }
925
+
926
+ .dark .editor-preview {
927
+ background: #172033;
928
+ color: #E0E7FF;
929
+ }
930
+
931
+ .editor-preview>p {
932
+ margin-top: 0;
933
+ }
934
+
935
+ .editor-preview pre {
936
+ background: #eee;
937
+ margin-bottom: 10px;
938
+ color: #333;
939
+ }
940
+
941
+ .dark .editor-preview pre {
942
+ background: #101828;
943
+ color: #E0E7FF;
944
+ }
945
+
946
+ .editor-preview table td,
947
+ .editor-preview table th {
948
+ border: 1px solid #ddd;
949
+ padding: 5px;
950
+ }
951
+
952
+ .dark .editor-preview table td,
953
+ .dark .editor-preview table th {
954
+ border: 1px solid #36415F;
955
+ }
956
+
957
+ .cm-s-easymde .cm-tag {
958
+ color: #63a35c;
959
+ }
960
+
961
+ .dark .cm-s-easymde .cm-tag {
962
+ color: #8eda7f;
963
+ }
964
+
965
+ .cm-s-easymde .cm-attribute {
966
+ color: #795da3;
967
+ }
968
+
969
+ .dark .cm-s-easymde .cm-attribute {
970
+ color: #b59cd7;
971
+ }
972
+
973
+ .cm-s-easymde .cm-string {
974
+ color: #183691;
975
+ }
976
+
977
+ .dark .cm-s-easymde .cm-string {
978
+ color: #6c8eef;
979
+ }
980
+
981
+ .cm-s-easymde .cm-header-1 {
982
+ font-size: calc(1.375rem + 1.5vw);
983
+ }
984
+
985
+ .cm-s-easymde .cm-header-2 {
986
+ font-size: calc(1.325rem + .9vw);
987
+ }
988
+
989
+ .cm-s-easymde .cm-header-3 {
990
+ font-size: calc(1.3rem + .6vw);
991
+ }
992
+
993
+ .cm-s-easymde .cm-header-4 {
994
+ font-size: calc(1.275rem + .3vw);
995
+ }
996
+
997
+ .cm-s-easymde .cm-header-5 {
998
+ font-size: 1.25rem;
999
+ margin-bottom: .5rem;
1000
+ line-height: 1.2;
1001
+ }
1002
+
1003
+ .cm-s-easymde .cm-header-6 {
1004
+ font-size: 1rem;
1005
+ margin-bottom: .5rem;
1006
+ line-height: 1.2;
1007
+ }
1008
+
1009
+ .cm-s-easymde .cm-header-1,
1010
+ .cm-s-easymde .cm-header-2,
1011
+ .cm-s-easymde .cm-header-3,
1012
+ .cm-s-easymde .cm-header-4 {
1013
+ margin-bottom: .5rem;
1014
+ line-height: 1.2;
1015
+ }
1016
+
1017
+ .cm-s-easymde .cm-comment {
1018
+ background: rgba(0, 0, 0, .05);
1019
+ border-radius: 2px;
1020
+ }
1021
+
1022
+ .dark .cm-s-easymde .cm-comment {
1023
+ background: rgba(224, 231, 255, .08);
1024
+ color: #A0AEC0;
1025
+ }
1026
+
1027
+ .cm-s-easymde .cm-link {
1028
+ color: #7f8c8d;
1029
+ text-decoration: underline;
1030
+ }
1031
+
1032
+ .dark .cm-s-easymde .cm-link {
1033
+ color: #a0aec0;
1034
+ }
1035
+
1036
+ .cm-s-easymde .cm-url {
1037
+ color: #aab2b3;
1038
+ }
1039
+
1040
+ .dark .cm-s-easymde .cm-url {
1041
+ color: #cbd5e0;
1042
+ }
1043
+
1044
+ .cm-s-easymde .cm-quote {
1045
+ color: #7f8c8d;
1046
+ font-style: italic;
1047
+ }
1048
+
1049
+ .dark .cm-s-easymde .cm-quote {
1050
+ color: #a0aec0;
1051
+ }
1052
+
1053
+ .editor-toolbar .easymde-dropdown {
1054
+ position: relative;
1055
+ background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
1056
+ border-radius: 0;
1057
+ border: 1px solid #fff;
1058
+ }
1059
+
1060
+ .dark .editor-toolbar .easymde-dropdown {
1061
+ background: linear-gradient(to bottom right, #25304A 0, #25304A 84%, #A0AEC0 50%, #A0AEC0 100%);
1062
+ border: 1px solid #36415F;
1063
+ }
1064
+
1065
+ .editor-toolbar .easymde-dropdown:hover {
1066
+ background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
1067
+ }
1068
+
1069
+ .dark .editor-toolbar .easymde-dropdown:hover {
1070
+ background: linear-gradient(to bottom right, #36415F 0, #36415F 84%, #b0b9c9 50%, #b0b9c9 100%);
1071
+ }
1072
+
1073
+ .easymde-dropdown-content {
1074
+ display: block;
1075
+ visibility: hidden;
1076
+ position: absolute;
1077
+ background-color: #f9f9f9;
1078
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
1079
+ padding: 8px;
1080
+ z-index: 2;
1081
+ top: 30px;
1082
+ }
1083
+
1084
+ .dark .easymde-dropdown-content {
1085
+ background-color: #172033;
1086
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .5);
1087
+ }
1088
+
1089
+ .easymde-dropdown:active .easymde-dropdown-content,
1090
+ .easymde-dropdown:focus .easymde-dropdown-content,
1091
+ .easymde-dropdown:focus-within .easymde-dropdown-content {
1092
+ visibility: visible;
1093
+ }
1094
+
1095
+ .easymde-dropdown-content button {
1096
+ display: block;
1097
+ }
1098
+
1099
+ span[data-img-src]::after {
1100
+ content: '';
1101
+ background-image: var(--bg-image);
1102
+ display: block;
1103
+ max-height: 100%;
1104
+ max-width: 100%;
1105
+ background-size: contain;
1106
+ height: 0;
1107
+ padding-top: var(--height);
1108
+ width: var(--width);
1109
+ background-repeat: no-repeat;
1110
+ }
1111
+
1112
+ .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
1113
+ background: rgba(255, 0, 0, .15);
1114
+ }
1115
+
1116
+ .dark .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
1117
+ background: rgba(239, 68, 68, .25);
1118
+ }
1119
+
1120
+ .cm-fat-cursor div.CodeMirror-cursors {
1121
+ z-index: 1;
1122
+ }
1123
+
1124
+ .cm-fat-cursor {
1125
+ caret-color: transparent;
1126
+ }
1127
+
1128
+ .cm-tab {
1129
+ display: inline-block;
1130
+ text-decoration: inherit;
1131
+ }
1132
+
1133
+ .CodeMirror-ruler {
1134
+ border-left: 1px solid #ced4da;
1135
+ top: 0;
1136
+ bottom: 0;
1137
+ position: absolute;
1138
+ }
1139
+
1140
+ .dark .CodeMirror-ruler {
1141
+ border-left: 1px solid #25304A;
1142
+ }
1143
+
1144
+ .cm-s-easymde .cm-type {
1145
+ color: #1a202c;
1146
+ }
1147
+
1148
+ .dark .cm-s-easymde .cm-type {
1149
+ color: #fff;
1150
+ }
1151
+
1152
+ .cm-s-easymde .cm-qualifier {
1153
+ color: #4A5568;
1154
+ }
1155
+
1156
+ .dark .cm-s-easymde .cm-qualifier {
1157
+ color: #A0AEC0;
1158
+ }
1159
+
1160
+ .cm-s-easymde .cm-builtin {
1161
+ color: #2b6cb0;
1162
+ }
1163
+
1164
+ .dark .cm-s-easymde .cm-builtin {
1165
+ color: #63b3ed;
1166
+ }
1167
+
1168
+ .cm-s-easymde .cm-bracket {
1169
+ color: #b7791f;
1170
+ }
1171
+
1172
+ .dark .cm-s-easymde .cm-bracket {
1173
+ color: #f6e05e;
1174
+ }
1175
+
1176
+ .cm-s-easymde .cm-hr {
1177
+ color: #718096;
1178
+ }
1179
+
1180
+ .dark .cm-s-easymde .cm-hr {
1181
+ color: #A0AEC0;
1182
+ }
1183
+
1184
+ .cm-s-easymde .cm-meta {
1185
+ color: #4A5568;
1186
+ }
1187
+
1188
+ .dark .cm-s-easymde .cm-meta {
1189
+ color: #A0AEC0;
1190
+ }
1191
+
1192
+ .cm-s-easymde .cm-string.cm-url {
1193
+ color: #c53030;
1194
+ }
1195
+
1196
+ .dark .cm-s-easymde .cm-string.cm-url {
1197
+ color: #fc8181;
1198
+ }