formstrap 0.3.3 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/app/assets/javascripts/formstrap/controllers/redactor_controller.js +18 -0
  4. data/app/assets/javascripts/formstrap/controllers/select_controller.js +22 -18
  5. data/app/assets/javascripts/formstrap/index.js +5 -2
  6. data/app/assets/javascripts/formstrap/vendor/redactor/i18n/de.js +214 -0
  7. data/app/assets/javascripts/formstrap/vendor/redactor/i18n/en.js +214 -0
  8. data/app/assets/javascripts/formstrap/vendor/redactor/i18n/fr.js +214 -0
  9. data/app/assets/javascripts/formstrap/vendor/redactor/i18n/nl.js +214 -0
  10. data/app/assets/javascripts/formstrap/vendor/redactor/index.js +5 -0
  11. data/app/assets/javascripts/formstrap/vendor/redactor/plugins/emoji.js +332 -0
  12. data/app/assets/javascripts/formstrap/vendor/redactor/plugins/linkstyles.js +124 -0
  13. data/app/assets/javascripts/formstrap.js +1295 -148
  14. data/app/assets/stylesheets/formstrap/general.scss +0 -6
  15. data/app/assets/stylesheets/formstrap/vendor/overrides/redactor.scss +151 -0
  16. data/app/assets/stylesheets/formstrap/vendor/redactor.css +2535 -0
  17. data/app/assets/stylesheets/formstrap.css +2650 -5
  18. data/app/assets/stylesheets/formstrap.scss +4 -0
  19. data/app/models/formstrap/redactor_view.rb +57 -0
  20. data/app/models/formstrap/wysiwyg_view.rb +9 -1
  21. data/app/views/formstrap/{_redactorx.html.erb → _redactor.html.erb} +4 -7
  22. data/app/views/formstrap/_wysiwyg.html.erb +3 -5
  23. data/lib/formstrap/form_builder.rb +12 -4
  24. data/lib/formstrap/version.rb +1 -1
  25. data/package.json +2 -2
  26. data/yarn.lock +4 -4
  27. metadata +14 -5
  28. data/app/assets/javascripts/formstrap/controllers/redactorx_controller.js +0 -40
  29. data/app/models/formstrap/redactorx_view.rb +0 -57
@@ -0,0 +1,2535 @@
1
+ :root {
2
+ --rx-font-ui: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
3
+ --rx-font-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
4
+ --rx-rounded-sm: 3px;
5
+ --rx-rounded-md: 6px;
6
+ --rx-rounded-lg: 9px;
7
+ --rx-rounded-xl: 12px;
8
+ --rx-rounded-circle: 99px;
9
+ --rx-level-control: 3;
10
+ --rx-level-toolbar: 4;
11
+ --rx-level-tooltip: 99;
12
+ --rx-level-popup: 100;
13
+ --rx-outset-md: 28px;
14
+ --rx-toolbar-height: 38px;
15
+ --rx-toolbar-padding: 2px;
16
+ --rx-toolbar-button-width: 34px;
17
+ --rx-toolbar-button-height: 34px;
18
+ --rx-toolbar-icon-size: 20px;
19
+ --rx-fg-heading: #000000;
20
+ --rx-fg-text: rgba(0, 0, 0, 0.8);
21
+ --rx-fg-subtle: rgba(0, 0, 0, 0.6);
22
+ --rx-fg-placeholder: rgba(0, 0, 0, 0.5);
23
+ --rx-bg-body: #ffffff;
24
+ --rx-bg-source: #262626;
25
+ --rx-bg-input: #ffffff;
26
+ --rx-bg-input-shaded: rgba(0, 0, 0, 0.03);
27
+ --rx-bg-input-disabled: rgba(0, 0, 0, 0.03);
28
+ --rx-bg-base: #ffffff;
29
+ --rx-bg-toolbar: rgba(255, 255, 255, 0.97);
30
+ --rx-bg-toolbar-raised: rgba(255, 255, 255, 0.97);
31
+ --rx-bg-raised: #ffffff;
32
+ --rx-bg-overlay: #ffffff;
33
+ --rx-bg-control: #ffffff;
34
+ --rx-bg-control-inverted: #1f1f1f;
35
+ --rx-bg-aluminum: #f8f8f8;
36
+ --rx-bg-silver: #f0f0f0;
37
+ --rx-bg-platinum: #e5e5e5;
38
+ --rx-border-input: rgba(0, 0, 0, 0.15);
39
+ --rx-border-focus: #73AEFF;
40
+ --rx-fg-dark-accent: #000000;
41
+ --rx-fg-dark-text: rgba(0, 0, 0, 0.8);
42
+ --rx-fg-dark-subtle: rgba(0, 0, 0, 0.6);
43
+ --rx-fg-dark-minimal: rgba(0, 0, 0, 0.5);
44
+ --rx-fg-dark-dimmed: rgba(0, 0, 0, 0.4);
45
+ --rx-bg-dark-dimmed: rgba(0, 0, 0, 0.03);
46
+ --rx-bg-dark-minimal: rgba(0, 0, 0, 0.05);
47
+ --rx-bg-dark-subtle: rgba(0, 0, 0, 0.07);
48
+ --rx-bg-dark-medium: rgba(0, 0, 0, 0.1);
49
+ --rx-bg-dark-strong: rgba(0, 0, 0, 0.2);
50
+ --rx-bg-dark-emphasis: rgba(0, 0, 0, 0.25);
51
+ --rx-bg-dark-accent: #000000;
52
+ --rx-bg-dark-accent-hover: rgba(0, 0, 0, 0.8);
53
+ --rx-border-dark-dimmed: rgba(0, 0, 0, 0.05);
54
+ --rx-border-dark-minimal: rgba(0, 0, 0, 0.07);
55
+ --rx-border-dark-subtle: rgba(0, 0, 0, 0.1);
56
+ --rx-border-dark-medium: rgba(0, 0, 0, 0.15);
57
+ --rx-border-dark-strong: rgba(0, 0, 0, 0.2);
58
+ --rx-border-dark-emphasis: rgba(0, 0, 0, 0.3);
59
+ --rx-border-dark-accent: #000000;
60
+ --rx-fg-light-accent: #ffffff;
61
+ --rx-fg-light-text: rgba(255, 255, 255, 0.8);
62
+ --rx-fg-light-subtle: rgba(255, 255, 255, 0.6);
63
+ --rx-fg-light-minimal: rgba(255, 255, 255, 0.5);
64
+ --rx-fg-light-dimmed: rgba(255, 255, 255, 0.4);
65
+ --rx-bg-light-dimmed: rgba(255, 255, 255, 0.03);
66
+ --rx-bg-light-minimal: rgba(255, 255, 255, 0.05);
67
+ --rx-bg-light-subtle: rgba(255, 255, 255, 0.07);
68
+ --rx-bg-light-medium: rgba(255, 255, 255, 0.1);
69
+ --rx-bg-light-strong: rgba(255, 255, 255, 0.2);
70
+ --rx-bg-light-emphasis: rgba(255, 255, 255, 0.25);
71
+ --rx-bg-light-accent: #ffffff;
72
+ --rx-bg-light-accent-hover: rgba(255, 255, 255, 0.8);
73
+ --rx-border-light-dimmed: rgba(255, 255, 255, 0.05);
74
+ --rx-border-light-minimal: rgba(255, 255, 255, 0.07);
75
+ --rx-border-light-subtle: rgba(255, 255, 255, 0.1);
76
+ --rx-border-light-medium: rgba(255, 255, 255, 0.15);
77
+ --rx-border-light-strong: rgba(255, 255, 255, 0.2);
78
+ --rx-border-light-emphasis: rgba(255, 255, 255, 0.3);
79
+ --rx-border-light-accent: #ffffff;
80
+ --rx-fg-black-accent: #000000;
81
+ --rx-fg-black-text: rgba(0, 0, 0, 0.8);
82
+ --rx-fg-black-subtle: rgba(0, 0, 0, 0.6);
83
+ --rx-fg-black-minimal: rgba(0, 0, 0, 0.5);
84
+ --rx-fg-black-dimmed: rgba(0, 0, 0, 0.4);
85
+ --rx-bg-black-dimmed: rgba(0, 0, 0, 0.03);
86
+ --rx-bg-black-minimal: rgba(0, 0, 0, 0.05);
87
+ --rx-bg-black-subtle: rgba(0, 0, 0, 0.07);
88
+ --rx-bg-black-medium: rgba(0, 0, 0, 0.1);
89
+ --rx-bg-black-strong: rgba(0, 0, 0, 0.2);
90
+ --rx-bg-black-emphasis: rgba(0, 0, 0, 0.25);
91
+ --rx-bg-black-accent: #000000;
92
+ --rx-bg-black-accent-hover: rgba(0, 0, 0, 0.8);
93
+ --rx-border-black-dimmed: rgba(0, 0, 0, 0.05);
94
+ --rx-border-black-minimal: rgba(0, 0, 0, 0.07);
95
+ --rx-border-black-subtle: rgba(0, 0, 0, 0.1);
96
+ --rx-border-black-medium: rgba(0, 0, 0, 0.15);
97
+ --rx-border-black-strong: rgba(0, 0, 0, 0.2);
98
+ --rx-border-black-emphasis: rgba(0, 0, 0, 0.3);
99
+ --rx-border-black-accent: #000000;
100
+ --rx-fg-white-accent: #ffffff;
101
+ --rx-fg-white-text: rgba(255, 255, 255, 0.8);
102
+ --rx-fg-white-subtle: rgba(255, 255, 255, 0.6);
103
+ --rx-fg-white-minimal: rgba(255, 255, 255, 0.5);
104
+ --rx-fg-white-dimmed: rgba(255, 255, 255, 0.4);
105
+ --rx-bg-white-dimmed: rgba(255, 255, 255, 0.03);
106
+ --rx-bg-white-minimal: rgba(255, 255, 255, 0.05);
107
+ --rx-bg-white-subtle: rgba(255, 255, 255, 0.07);
108
+ --rx-bg-white-medium: rgba(255, 255, 255, 0.1);
109
+ --rx-bg-white-strong: rgba(255, 255, 255, 0.2);
110
+ --rx-bg-white-emphasis: rgba(255, 255, 255, 0.25);
111
+ --rx-bg-white-accent: #ffffff;
112
+ --rx-bg-white-accent-hover: rgba(255, 255, 255, 0.8);
113
+ --rx-border-white-dimmed: rgba(255, 255, 255, 0.05);
114
+ --rx-border-white-minimal: rgba(255, 255, 255, 0.07);
115
+ --rx-border-white-subtle: rgba(255, 255, 255, 0.1);
116
+ --rx-border-white-medium: rgba(255, 255, 255, 0.15);
117
+ --rx-border-white-strong: rgba(255, 255, 255, 0.2);
118
+ --rx-border-white-emphasis: rgba(255, 255, 255, 0.3);
119
+ --rx-border-white-accent: #ffffff;
120
+ --rx-fg-primary-accent: #046BFB;
121
+ --rx-fg-primary-static: #046BFB;
122
+ --rx-bg-primary-dimmed: rgba(115, 174, 255, 0.05);
123
+ --rx-bg-primary-minimal: rgba(115, 174, 255, 0.1);
124
+ --rx-bg-primary-subtle: rgba(115, 174, 255, 0.15);
125
+ --rx-bg-primary-medium: rgba(115, 174, 255, 0.25);
126
+ --rx-bg-primary-strong: rgba(115, 174, 255, 0.35);
127
+ --rx-bg-primary-emphasis: rgba(115, 174, 255, 0.45);
128
+ --rx-bg-primary-accent: #046BFB;
129
+ --rx-bg-primary-accent-hover: rgba(4, 107, 251, 0.8);
130
+ --rx-bg-primary-static: #046BFB;
131
+ --rx-border-primary-dimmed: rgba(115, 174, 255, 0.1);
132
+ --rx-border-primary-minimal: rgba(115, 174, 255, 0.15);
133
+ --rx-border-primary-subtle: rgba(115, 174, 255, 0.25);
134
+ --rx-border-primary-medium: rgba(115, 174, 255, 0.35);
135
+ --rx-border-primary-strong: rgba(115, 174, 255, 0.6);
136
+ --rx-border-primary-emphasis: rgba(115, 174, 255, 0.8);
137
+ --rx-border-primary-accent: #046BFB;
138
+ --rx-border-primary-static: #046BFB;
139
+ --rx-fg-negative-accent: #DD0548;
140
+ --rx-fg-negative-static: #DD0548;
141
+ --rx-fg-negative-light: #FF6393;
142
+ --rx-bg-negative-dimmed: rgba(255, 99, 147, 0.05);
143
+ --rx-bg-negative-minimal: rgba(255, 99, 147, 0.1);
144
+ --rx-bg-negative-subtle: rgba(255, 99, 147, 0.15);
145
+ --rx-bg-negative-medium: rgba(255, 99, 147, 0.25);
146
+ --rx-bg-negative-strong: rgba(255, 99, 147, 0.35);
147
+ --rx-bg-negative-emphasis: rgba(255, 99, 147, 0.45);
148
+ --rx-bg-negative-accent: #DD0548;
149
+ --rx-bg-negative-accent-hover: rgba(221, 5, 72, 0.8);
150
+ --rx-bg-negative-static: #DD0548;
151
+ --rx-border-negative-dimmed: rgba(255, 99, 147, 0.1);
152
+ --rx-border-negative-minimal: rgba(255, 99, 147, 0.15);
153
+ --rx-border-negative-subtle: rgba(255, 99, 147, 0.25);
154
+ --rx-border-negative-medium: rgba(255, 99, 147, 0.35);
155
+ --rx-border-negative-strong: rgba(255, 99, 147, 0.6);
156
+ --rx-border-negative-emphasis: rgba(255, 99, 147, 0.8);
157
+ --rx-border-negative-accent: #DD0548;
158
+ --rx-border-negative-static: #DD0548;
159
+ --rx-link-color: #046BFB;
160
+ --rx-link-hover-color: #000000;
161
+ --rx-link-dark-color: #000000;
162
+ --rx-link-dark-hover-color: rgba(0, 0, 0, 0.6);
163
+ --rx-link-dark-subtle-color: rgba(0, 0, 0, 0.6);
164
+ --rx-link-dark-subtle-hover-color: #000000;
165
+ --rx-shadow-modal: 0 0 1px rgba(0, 0, 0, 0.25), 0 20px 60px rgba(0, 0, 0, 0.15);
166
+ --rx-shadow-dropdown: 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 16px -8px rgba(0, 0, 0, 0.07);
167
+ --rx-shadow-context: 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.2);
168
+ --rx-shadow-control: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06);
169
+ --rx-shadow-toolbar-raised: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
170
+ --rx-shadow-reorder: 0 15px 30px rgba(0, 0, 0, 0.3);
171
+ --rx-shadow-tab: 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.12);
172
+ --rx-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, 0.15);
173
+ --rx-shadow-handle: 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.12), 0 6px 6px -3px rgba(0, 0, 0, 0.12);
174
+ --rx-shadow-action: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
175
+ }
176
+
177
+ [rx-data-theme=dark] {
178
+ --rx-fg-heading: rgba(255, 255, 255, 0.85);
179
+ --rx-fg-text: rgba(255, 255, 255, 0.8);
180
+ --rx-fg-subtle: rgba(255, 255, 255, 0.6);
181
+ --rx-fg-placeholder: rgba(255, 255, 255, 0.5);
182
+ --rx-bg-body: #141414;
183
+ --rx-bg-input: #1f1f1f;
184
+ --rx-bg-input-shaded: rgba(255, 255, 255, 0.05);
185
+ --rx-bg-input-disabled: rgba(255, 255, 255, 0.05);
186
+ --rx-bg-base: #141414;
187
+ --rx-bg-raised: #1f1f1f;
188
+ --rx-bg-toolbar: rgba(26, 26, 26, 0.97);
189
+ --rx-bg-toolbar-raised: rgba(26, 26, 26, 0.97);
190
+ --rx-bg-overlay: #1f1f1f;
191
+ --rx-bg-control: #1f1f1f;
192
+ --rx-bg-aluminum: #1a1a1a;
193
+ --rx-bg-silver: #1f1f1f;
194
+ --rx-bg-platinum: #262626;
195
+ --rx-border-input: rgba(255, 255, 255, 0.15);
196
+ --rx-border-focus: #73AEFF;
197
+ --rx-fg-dark-accent: rgba(255, 255, 255, 0.8);
198
+ --rx-fg-dark-text: rgba(255, 255, 255, 0.8);
199
+ --rx-fg-dark-subtle: rgba(255, 255, 255, 0.6);
200
+ --rx-fg-dark-minimal: rgba(255, 255, 255, 0.5);
201
+ --rx-fg-dark-dimmed: rgba(255, 255, 255, 0.4);
202
+ --rx-bg-dark-dimmed: rgba(255, 255, 255, 0.03);
203
+ --rx-bg-dark-minimal: rgba(255, 255, 255, 0.05);
204
+ --rx-bg-dark-subtle: rgba(255, 255, 255, 0.07);
205
+ --rx-bg-dark-medium: rgba(255, 255, 255, 0.1);
206
+ --rx-bg-dark-strong: rgba(255, 255, 255, 0.2);
207
+ --rx-bg-dark-emphasis: rgba(255, 255, 255, 0.25);
208
+ --rx-bg-dark-accent: rgba(255, 255, 255, 0.8);
209
+ --rx-bg-dark-accent-hover: white;
210
+ --rx-border-dark-dimmed: rgba(255, 255, 255, 0.05);
211
+ --rx-border-dark-minimal: rgba(255, 255, 255, 0.07);
212
+ --rx-border-dark-subtle: rgba(255, 255, 255, 0.1);
213
+ --rx-border-dark-medium: rgba(255, 255, 255, 0.15);
214
+ --rx-border-dark-strong: rgba(255, 255, 255, 0.2);
215
+ --rx-border-dark-emphasis: rgba(255, 255, 255, 0.3);
216
+ --rx-border-dark-accent: #ffffff;
217
+ --rx-fg-light-accent: rgba(0, 0, 0, 0.8);
218
+ --rx-fg-light-text: rgba(0, 0, 0, 0.8);
219
+ --rx-fg-light-subtle: rgba(0, 0, 0, 0.6);
220
+ --rx-fg-light-minimal: rgba(0, 0, 0, 0.5);
221
+ --rx-fg-light-dimmed: rgba(0, 0, 0, 0.4);
222
+ --rx-bg-light-dimmed: rgba(0, 0, 0, 0.03);
223
+ --rx-bg-light-minimal: rgba(0, 0, 0, 0.05);
224
+ --rx-bg-light-subtle: rgba(0, 0, 0, 0.07);
225
+ --rx-bg-light-medium: rgba(0, 0, 0, 0.1);
226
+ --rx-bg-light-strong: rgba(0, 0, 0, 0.2);
227
+ --rx-bg-light-emphasis: rgba(0, 0, 0, 0.25);
228
+ --rx-bg-light-accent: rgba(0, 0, 0, 0.8);
229
+ --rx-bg-light-accent-hover: black;
230
+ --rx-border-light-dimmed: rgba(0, 0, 0, 0.05);
231
+ --rx-border-light-minimal: rgba(0, 0, 0, 0.07);
232
+ --rx-border-light-subtle: rgba(0, 0, 0, 0.1);
233
+ --rx-border-light-medium: rgba(0, 0, 0, 0.15);
234
+ --rx-border-light-strong: rgba(0, 0, 0, 0.2);
235
+ --rx-border-light-emphasis: rgba(0, 0, 0, 0.3);
236
+ --rx-border-light-accent: #000000;
237
+ --rx-fg-primary-accent: #73AEFF;
238
+ --rx-border-primary-accent: #73AEFF;
239
+ --rx-fg-negative-accent: #FF6393;
240
+ --rx-border-negative-accent: #FF6393;
241
+ --rx-link-color: #73AEFF;
242
+ --rx-link-hover-color: #ffffff;
243
+ --rx-link-dark-color: #ffffff;
244
+ --rx-link-dark-hover-color: rgba(255, 255, 255, 0.6);
245
+ --rx-link-dark-subtle-color: rgba(255, 255, 255, 0.6);
246
+ --rx-link-dark-subtle-hover-color: #ffffff;
247
+ --rx-shadow-modal: 0 0 1px rgba(255, 255, 255, 0.5), 0 20px 60px rgba(0, 0, 0, 0.15);
248
+ --rx-shadow-dropdown: 0 0 1px rgba(255, 255, 255, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 16px -8px rgba(0, 0, 0, 0.07);
249
+ --rx-shadow-context: 0 0 1px rgba(255, 255, 255, 0.5), 0 3px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.2);
250
+ }
251
+
252
+ @keyframes slideUp {
253
+ to {
254
+ height: 0;
255
+ padding-top: 0;
256
+ padding-bottom: 0;
257
+ margin-bottom: 0;
258
+ }
259
+ }
260
+ @keyframes slideDown {
261
+ from {
262
+ height: 0;
263
+ padding-top: 0;
264
+ padding-bottom: 0;
265
+ margin-bottom: 0;
266
+ }
267
+ }
268
+ @keyframes fadeIn {
269
+ from {
270
+ opacity: 0;
271
+ }
272
+ to {
273
+ opacity: 1;
274
+ }
275
+ }
276
+ @keyframes fadeOut {
277
+ from {
278
+ opacity: 1;
279
+ }
280
+ to {
281
+ opacity: 0;
282
+ }
283
+ }
284
+ @keyframes progress-bar-stripes {
285
+ from {
286
+ background-position: 40px 0;
287
+ }
288
+ to {
289
+ background-position: 0 0;
290
+ }
291
+ }
292
+ .rx-container {
293
+ position: relative;
294
+ box-sizing: border-box;
295
+ }
296
+
297
+ .rx-container.rx-fullscreen {
298
+ position: fixed;
299
+ top: 0px;
300
+ left: 0px;
301
+ width: 100%;
302
+ height: 100%;
303
+ z-index: 10000;
304
+ overflow-x: auto;
305
+ }
306
+
307
+ .rx-main-container {
308
+ border-radius: var(--rx-rounded-sm);
309
+ background-color: var(--rx-bg-base);
310
+ border: 1px solid var(--rx-border-dark-subtle);
311
+ }
312
+
313
+ .rx-stop-scrolling {
314
+ height: 100%;
315
+ overflow: hidden;
316
+ }
317
+
318
+ .rx-editor-frame {
319
+ width: 100%;
320
+ height: 0;
321
+ border: none;
322
+ background-color: var(--rx-bg-base);
323
+ margin-left: auto;
324
+ margin-right: auto;
325
+ display: block;
326
+ }
327
+
328
+ .rx-editor-container {
329
+ box-sizing: border-box;
330
+ }
331
+
332
+ .rx-editor-disabled {
333
+ opacity: 0.4;
334
+ }
335
+ .rx-editor-disabled img {
336
+ filter: grayscale(1);
337
+ }
338
+
339
+ .rx-editor-overlay {
340
+ width: 100%;
341
+ height: 100%;
342
+ content: "";
343
+ position: absolute;
344
+ z-index: 1;
345
+ background: transparent;
346
+ top: 0;
347
+ left: 0;
348
+ }
349
+
350
+ .rx-toolbox-container {
351
+ background: var(--rx-bg-toolbar);
352
+ z-index: var(--rx-level-toolbar);
353
+ }
354
+
355
+ .rx-editor-breakline table + *, .rx-editor-breakline blockquote + *, .rx-editor-breakline figure + *, .rx-editor-breakline > div + *,
356
+ .rx-editor-breakline p + *, .rx-editor-breakline ul + *, .rx-editor-breakline ol + *, .rx-editor-breakline pre + *, .rx-editor-breakline dl + *, .rx-editor-breakline address + * {
357
+ margin-top: 0 !important;
358
+ }
359
+ .rx-editor-breakline h1 + h2,
360
+ .rx-editor-breakline h2 + h3,
361
+ .rx-editor-breakline h3 + h4,
362
+ .rx-editor-breakline h4 + h5,
363
+ .rx-editor-breakline h5 + h6 {
364
+ margin-top: 0 !important;
365
+ }
366
+
367
+ .rx-editor *, .rx-editor *::before, .rx-editor *::after {
368
+ box-sizing: inherit;
369
+ }
370
+
371
+ .rx-editor {
372
+ margin-left: auto;
373
+ margin-right: auto;
374
+ box-sizing: border-box;
375
+ }
376
+ .rx-editor *[dir=rtl] {
377
+ text-align: right;
378
+ }
379
+ .rx-editor *[dir=ltr] {
380
+ text-align: left;
381
+ }
382
+ .rx-editor, .rx-editor [data-rx-type], .rx-editor a, .rx-editor p, .rx-editor figcaption, .rx-editor td, .rx-editor th {
383
+ outline: none;
384
+ }
385
+ .rx-editor [data-rx-tag=tbr], .rx-editor [data-rx-tag=br] {
386
+ margin-top: 0;
387
+ }
388
+ .rx-editor [data-rx-tag=tbr]:empty, .rx-editor [data-rx-tag=br]:empty, .rx-editor [data-rx-type=text]:empty, .rx-editor [data-rx-type=todoitem] div:empty {
389
+ min-width: 1em;
390
+ min-height: 1.5em;
391
+ }
392
+ .rx-editor::after {
393
+ content: "";
394
+ clear: both;
395
+ display: table;
396
+ }
397
+ .rx-editor [data-rx-type=embed],
398
+ .rx-editor [data-rx-type=image] {
399
+ position: relative;
400
+ }
401
+ .rx-editor [data-rx-type=embed] img,
402
+ .rx-editor [data-rx-type=image] img {
403
+ vertical-align: middle;
404
+ }
405
+ .rx-editor figure > img, .rx-editor figure > a img, .rx-editor figure > iframe, .rx-editor figure > pre, .rx-editor figure > div {
406
+ vertical-align: middle;
407
+ }
408
+ .rx-editor [data-rx-focusable].rx-block-focus {
409
+ outline: 2px solid var(--rx-border-focus) !important;
410
+ }
411
+ .rx-editor .rx-block-control-focus {
412
+ outline: 1px solid var(--rx-border-focus) !important;
413
+ outline-offset: 1px;
414
+ }
415
+ .rx-editor [data-rx-type=wrapper]:empty {
416
+ outline: 1px dashed var(--rx-border-dark-medium);
417
+ outline-offset: 1px;
418
+ }
419
+ .rx-editor [data-rx-type=heading] a {
420
+ text-decoration: underline;
421
+ }
422
+ .rx-editor .rx-layout-grid {
423
+ display: flex;
424
+ flex-direction: row;
425
+ gap: 24px;
426
+ }
427
+ .rx-editor [data-rx-type=column] {
428
+ outline: 1px dashed var(--rx-border-dark-strong);
429
+ }
430
+ .rx-editor.rx-editor-email [data-rx-type=column] {
431
+ outline: none;
432
+ }
433
+ .rx-editor.rx-editor-email [data-rx-type=column]:hover, .rx-editor.rx-editor-email [data-rx-type=column]:has(p:empty) {
434
+ outline: 1px dashed var(--rx-border-dark-strong);
435
+ }
436
+ .rx-editor [data-rx-type=embed] {
437
+ position: relative;
438
+ }
439
+ .rx-editor [data-rx-type=embed]:before {
440
+ width: 100%;
441
+ height: 100%;
442
+ content: "";
443
+ position: absolute;
444
+ z-index: 1;
445
+ }
446
+ .rx-editor [data-rx-type=embed] iframe {
447
+ display: inline-block;
448
+ }
449
+ .rx-editor [data-rx-type=embed] figcaption {
450
+ position: relative;
451
+ top: 0;
452
+ z-index: 2;
453
+ }
454
+ .rx-editor .rx-embed-placeholder {
455
+ text-align: center;
456
+ border: 1px dashed var(--rx-border-dark-medium);
457
+ border-radius: var(--rx-rounded-md);
458
+ padding: 40px 20px;
459
+ font-size: 14px;
460
+ color: var(--rx-fg-placeholder);
461
+ }
462
+ .rx-editor [data-rx-type=todo] {
463
+ --rx-todo-size: 20px;
464
+ --rx-todo-mark-color: var(--rx-fg-light-accent);
465
+ --rx-todo-border-color: var(--rx-border-input);
466
+ --rx-todo-bg: var(--rx-bg-input);
467
+ --rx-todo-checked-border-color: var(--rx-border-dark-accent);
468
+ --rx-todo-checked-bg: var(--rx-bg-dark-accent);
469
+ margin-left: 0;
470
+ list-style: none;
471
+ display: flex;
472
+ flex-direction: column;
473
+ gap: 8px;
474
+ }
475
+ .rx-editor [data-rx-type=todoitem] {
476
+ display: flex;
477
+ gap: 6px;
478
+ cursor: text;
479
+ }
480
+ .rx-editor [data-rx-type=todoitem] input {
481
+ position: relative;
482
+ top: 1px;
483
+ appearance: none;
484
+ display: inline-block;
485
+ padding: 0;
486
+ box-shadow: none;
487
+ width: var(--rx-todo-size);
488
+ height: var(--rx-todo-size);
489
+ cursor: pointer;
490
+ }
491
+ .rx-editor [data-rx-type=todoitem] input:before {
492
+ content: "";
493
+ display: block;
494
+ width: var(--rx-todo-size);
495
+ height: var(--rx-todo-size);
496
+ border: 1px solid var(--rx-todo-border-color);
497
+ border-radius: 6px;
498
+ background: var(--rx-todo-bg);
499
+ }
500
+ .rx-editor [data-rx-type=todoitem] input:after {
501
+ content: "";
502
+ position: absolute;
503
+ top: 50%;
504
+ left: 50%;
505
+ width: calc(var(--rx-todo-size) / 3.5);
506
+ height: calc(var(--rx-todo-size) / 1.8);
507
+ background-color: transparent;
508
+ transform: translate(-50%, -85%) scale(0) rotate(45deg);
509
+ }
510
+ .rx-editor [data-rx-type=todoitem] input:checked:before {
511
+ border-color: var(--rx-todo-checked-border-color);
512
+ background-color: var(--rx-todo-checked-bg);
513
+ box-shadow: var(--rx-todo-checked-shadow);
514
+ }
515
+ .rx-editor [data-rx-type=todoitem] input:checked:after {
516
+ transform: translate(-50%, -85%) scale(1) rotate(45deg);
517
+ box-shadow: 2px 2px 0px 0px var(--rx-todo-mark-color);
518
+ }
519
+ .rx-editor [data-rx-type=todoitem] div {
520
+ outline: none;
521
+ line-height: 1.4;
522
+ }
523
+ .rx-editor [data-rx-type=mergetag] {
524
+ font-family: var(--rx-font-ui-mono);
525
+ font-size: 85%;
526
+ line-height: 1;
527
+ display: inline-block;
528
+ cursor: pointer;
529
+ padding: 4px 8px;
530
+ color: var(--rx-fg-dark-accent);
531
+ background: var(--rx-bg-primary-medium);
532
+ border-radius: 8px;
533
+ }
534
+ .rx-editor [data-rx-type=mergetag]:hover {
535
+ color: var(--rx-fg-dark-accent);
536
+ background: var(--rx-bg-primary-strong);
537
+ }
538
+ .rx-editor [data-rx-type=mergetag].rx-block-focus {
539
+ color: var(--rx-fg-dark-accent);
540
+ background: var(--rx-bg-primary-emphasis);
541
+ }
542
+ .rx-editor .rx-block-placeholder {
543
+ position: relative;
544
+ }
545
+ .rx-editor .rx-block-placeholder:before {
546
+ position: absolute;
547
+ }
548
+ .rx-editor .rx-block-placeholder:before,
549
+ .rx-editor [data-placeholder]:empty:before {
550
+ content: attr(data-placeholder);
551
+ display: inline-block;
552
+ color: var(--rx-fg-placeholder);
553
+ font-weight: normal;
554
+ font-style: italic;
555
+ font-size: inherit;
556
+ cursor: text;
557
+ max-height: 20px;
558
+ }
559
+ .rx-editor [data-placeholder]:empty:focus:before {
560
+ content: "";
561
+ }
562
+
563
+ .rx-editor.rx-placeholder:before {
564
+ position: absolute;
565
+ z-index: 0;
566
+ content: attr(placeholder);
567
+ color: var(--rx-fg-placeholder);
568
+ font-weight: normal;
569
+ cursor: text;
570
+ }
571
+
572
+ .rx-in-blur .rx-editor [data-rx-focusable].rx-block-focus {
573
+ outline-color: var(--rx-border-dark-medium) !important;
574
+ }
575
+
576
+ .rx-draggable-placeholder {
577
+ height: 20px;
578
+ min-width: 80px;
579
+ outline: 3px dashed gold !important;
580
+ background: rgba(255, 215, 0, 0.2) !important;
581
+ margin-bottom: 20px;
582
+ }
583
+
584
+ .rx-toolbar-container {
585
+ display: flex;
586
+ white-space: nowrap;
587
+ overflow-x: scroll;
588
+ overflow-y: hidden;
589
+ scrollbar-width: none;
590
+ -ms-overflow-style: none;
591
+ }
592
+ .rx-toolbar-container::-webkit-scrollbar {
593
+ width: 0;
594
+ height: 0;
595
+ }
596
+ .rx-toolbar-container:empty {
597
+ display: none;
598
+ }
599
+
600
+ .rx-sticky {
601
+ position: -webkit-sticky;
602
+ position: sticky;
603
+ top: 0;
604
+ }
605
+
606
+ .rx-sticky-on {
607
+ border-bottom: 1px solid var(--rx-border-dark-minimal);
608
+ }
609
+
610
+ .rx-raised {
611
+ margin-left: -1px;
612
+ margin-right: -1px;
613
+ margin-top: -1px;
614
+ margin-bottom: -1px;
615
+ background: var(--rx-bg-toolbar-raised);
616
+ box-shadow: var(--rx-shadow-toolbar-raised);
617
+ border-top-left-radius: 3px;
618
+ border-top-right-radius: 3px;
619
+ }
620
+
621
+ .rx-toolbox-external.rx-raised {
622
+ margin: 0;
623
+ }
624
+
625
+ .rx-raised.rx-sticky-on {
626
+ border-bottom: none;
627
+ }
628
+
629
+ .rx-toolbar-buttons,
630
+ .rx-extrabar-buttons {
631
+ display: flex;
632
+ white-space: nowrap;
633
+ align-items: center;
634
+ gap: 1px;
635
+ }
636
+
637
+ .rx-toolbar,
638
+ .rx-extrabar {
639
+ padding: var(--rx-toolbar-padding);
640
+ height: var(--rx-toolbar-height);
641
+ }
642
+
643
+ .rx-toolbar {
644
+ order: 1;
645
+ flex: 1;
646
+ }
647
+
648
+ .rx-extrabar {
649
+ order: 2;
650
+ }
651
+
652
+ .rx-toolbar .rx-button,
653
+ .rx-extrabar .rx-button {
654
+ width: var(--rx-toolbar-button-width);
655
+ height: var(--rx-toolbar-button-height);
656
+ }
657
+ .rx-toolbar .rx-button:hover .rx-button-icon,
658
+ .rx-extrabar .rx-button:hover .rx-button-icon {
659
+ background: var(--rx-bg-dark-subtle);
660
+ }
661
+ .rx-toolbar .rx-button.active .rx-button-icon,
662
+ .rx-extrabar .rx-button.active .rx-button-icon {
663
+ background: var(--rx-bg-primary-subtle);
664
+ }
665
+ .rx-toolbar .rx-button.toggled .rx-button-icon,
666
+ .rx-extrabar .rx-button.toggled .rx-button-icon {
667
+ background: var(--rx-bg-dark-subtle);
668
+ }
669
+ .rx-toolbar .rx-button.toggled .rx-button-icon svg,
670
+ .rx-extrabar .rx-button.toggled .rx-button-icon svg {
671
+ fill: var(--rx-fg-dark-accent);
672
+ }
673
+ .rx-toolbar .rx-button.disable,
674
+ .rx-extrabar .rx-button.disable {
675
+ cursor: default;
676
+ }
677
+ .rx-toolbar .rx-button.disable .rx-button-icon,
678
+ .rx-extrabar .rx-button.disable .rx-button-icon {
679
+ background-color: transparent !important;
680
+ }
681
+ .rx-toolbar .rx-button.disable .rx-button-icon svg,
682
+ .rx-extrabar .rx-button.disable .rx-button-icon svg {
683
+ fill: var(--rx-fg-dark-dimmed);
684
+ }
685
+ .rx-toolbar .rx-button-icon,
686
+ .rx-extrabar .rx-button-icon {
687
+ width: var(--rx-toolbar-button-width);
688
+ min-width: var(--rx-toolbar-button-width);
689
+ height: var(--rx-toolbar-button-height);
690
+ border-radius: var(--rx-rounded-md);
691
+ }
692
+ .rx-toolbar .rx-button-icon svg,
693
+ .rx-extrabar .rx-button-icon svg {
694
+ fill: var(--rx-fg-dark-text);
695
+ width: var(--rx-toolbar-icon-size);
696
+ height: var(--rx-toolbar-icon-size);
697
+ }
698
+ .rx-toolbar .rx-button-title,
699
+ .rx-extrabar .rx-button-title {
700
+ display: none;
701
+ }
702
+
703
+ .rx-pathbar {
704
+ font-family: var(--rx-font-ui-text);
705
+ margin: 0;
706
+ padding: 0 8px;
707
+ position: relative;
708
+ overflow: hidden;
709
+ background: var(--rx-bg-toolbar);
710
+ box-sizing: border-box;
711
+ border: none;
712
+ display: flex;
713
+ gap: 12px;
714
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
715
+ }
716
+ .rx-pathbar:empty {
717
+ display: none;
718
+ }
719
+
720
+ .rx-pathbar.disable .rx-pathbar-item {
721
+ opacity: 0.5;
722
+ }
723
+
724
+ .rx-pathbar-item {
725
+ position: relative;
726
+ font-size: 12px;
727
+ padding: 6px 0;
728
+ margin: 0;
729
+ line-height: 16px;
730
+ color: var(--rx-fg-dark-minimal);
731
+ cursor: pointer;
732
+ }
733
+
734
+ .rx-pathbar-item:hover {
735
+ color: var(--rx-fg-dark-accent);
736
+ text-decoration: underline;
737
+ }
738
+
739
+ .rx-pathbar-item.active,
740
+ .rx-pathbar-item.active:hover {
741
+ color: var(--rx-fg-dark-accent);
742
+ text-decoration: none;
743
+ cursor: text;
744
+ }
745
+
746
+ .rx-pathbar-item:after {
747
+ position: absolute;
748
+ content: "-";
749
+ width: 8px;
750
+ padding-left: 3px;
751
+ font-size: 12px;
752
+ line-height: 16px;
753
+ color: var(--rx-fg-dark-minimal);
754
+ }
755
+
756
+ .rx-pathbar-item:last-child:after {
757
+ display: none;
758
+ }
759
+
760
+ .rx-statusbar {
761
+ font-family: var(--rx-font-ui-mono);
762
+ margin: 0;
763
+ padding: 8px 10px;
764
+ position: relative;
765
+ overflow: hidden;
766
+ background: var(--rx-bg-base);
767
+ box-sizing: border-box;
768
+ border: none;
769
+ display: flex;
770
+ align-items: center;
771
+ gap: 10px;
772
+ }
773
+ .rx-statusbar:empty {
774
+ display: none;
775
+ }
776
+
777
+ .rx-statusbar.disable .rx-statusbar-item {
778
+ opacity: 0.5;
779
+ }
780
+
781
+ .rx-statusbar-item {
782
+ font-size: 12px;
783
+ padding: 0;
784
+ margin: 0;
785
+ line-height: 16px;
786
+ color: var(--rx-fg-text);
787
+ }
788
+
789
+ .rx-statusbar-item:after {
790
+ content: "";
791
+ display: inline-block;
792
+ position: relative;
793
+ top: 2px;
794
+ width: 1px;
795
+ height: 12px;
796
+ margin-left: 10px;
797
+ background: var(--rx-border-dark-medium);
798
+ }
799
+
800
+ .rx-statusbar-item:last-child:after {
801
+ display: none;
802
+ }
803
+
804
+ .rx-statusbar-item a {
805
+ color: var(--rx-fg-dark-accent);
806
+ text-decoration: underline;
807
+ }
808
+
809
+ .rx-statusbar-item a:hover {
810
+ color: var(--rx-fg-dark-minimal);
811
+ text-decoration: underline;
812
+ }
813
+
814
+ .rx-fullscreen .rx-statusbar {
815
+ position: fixed;
816
+ bottom: 0;
817
+ width: 100%;
818
+ }
819
+
820
+ .rx-control {
821
+ position: absolute;
822
+ top: 0;
823
+ left: 0;
824
+ font-family: var(--rx-font-text);
825
+ z-index: var(--rx-level-control);
826
+ padding: 0;
827
+ margin: 0;
828
+ box-sizing: border-box;
829
+ width: 28px;
830
+ line-height: 0;
831
+ }
832
+
833
+ .rx-control-buttons {
834
+ display: flex;
835
+ gap: 0;
836
+ flex-direction: column;
837
+ flex-wrap: wrap;
838
+ }
839
+
840
+ .rx-control .rx-button {
841
+ background: var(--rx-bg-control);
842
+ }
843
+ .rx-control .rx-button:hover {
844
+ background: var(--rx-bg-platinum);
845
+ }
846
+ .rx-control .rx-button-title {
847
+ display: none;
848
+ }
849
+ .rx-control .rx-button-icon {
850
+ width: 28px;
851
+ height: 28px;
852
+ }
853
+ .rx-control .rx-button-icon svg {
854
+ fill: var(--rx-fg-dark-accent);
855
+ width: 14px;
856
+ height: 14px;
857
+ }
858
+
859
+ .rx-context {
860
+ font-family: var(--rx-font-text);
861
+ position: absolute;
862
+ top: 0;
863
+ left: 0;
864
+ z-index: var(--rx-level-toolbar);
865
+ border-radius: var(--rx-rounded-sm);
866
+ padding: 2px;
867
+ margin: 0;
868
+ line-height: 1;
869
+ background: var(--rx-bg-control);
870
+ background: var(--rx-bg-control-inverted);
871
+ box-shadow: var(--rx-shadow-context);
872
+ max-width: 380px;
873
+ }
874
+
875
+ .rx-context-buttons {
876
+ display: flex;
877
+ align-items: center;
878
+ gap: 1px;
879
+ flex-wrap: wrap;
880
+ }
881
+
882
+ .rx-context .rx-button {
883
+ width: 28px;
884
+ height: 28px;
885
+ }
886
+ .rx-context .rx-button:hover .rx-button-icon {
887
+ background: var(--rx-bg-white-medium);
888
+ }
889
+ .rx-context .rx-button:hover .rx-button-icon svg {
890
+ fill: var(--rx-fg-white-accent);
891
+ }
892
+ .rx-context .rx-button.active .rx-button-icon {
893
+ background: var(--rx-bg-primary-medium);
894
+ }
895
+ .rx-context .rx-button.toggled .rx-button-icon {
896
+ background: var(--rx-bg-dark-strong);
897
+ }
898
+ .rx-context .rx-button.toggled .rx-button-icon svg {
899
+ fill: var(--rx-fg-white-accent);
900
+ }
901
+ .rx-context .rx-button.disable {
902
+ cursor: default;
903
+ }
904
+ .rx-context .rx-button.disable .rx-button-icon {
905
+ background-color: transparent !important;
906
+ }
907
+ .rx-context .rx-button.disable .rx-button-icon svg {
908
+ fill: var(--rx-fg-dark-dimmed);
909
+ }
910
+ .rx-context .rx-button-icon {
911
+ width: 28px;
912
+ min-width: 28px;
913
+ height: 28px;
914
+ border-radius: var(--rx-rounded-sm);
915
+ }
916
+ .rx-context .rx-button-icon svg {
917
+ fill: var(--rx-fg-white-text);
918
+ width: 18px;
919
+ height: 18px;
920
+ }
921
+ .rx-context .rx-button-title {
922
+ display: none;
923
+ }
924
+ .rx-context .rx-button-text {
925
+ width: auto;
926
+ }
927
+ .rx-context .rx-button-text .rx-button-icon {
928
+ display: none;
929
+ }
930
+ .rx-context .rx-button-text .rx-button-title {
931
+ font-size: 13px;
932
+ font-weight: 400;
933
+ line-height: 1;
934
+ height: 28px;
935
+ padding: 0 6px;
936
+ color: var(--rx-fg-white-text);
937
+ border-radius: var(--rx-rounded-sm);
938
+ display: flex;
939
+ align-items: center;
940
+ vertical-align: baseline;
941
+ }
942
+ .rx-context .rx-button-text:hover .rx-button-title {
943
+ background-color: var(--rx-bg-white-medium);
944
+ }
945
+
946
+ .rx-button {
947
+ font-family: var(--rx-font-text);
948
+ display: flex;
949
+ align-items: center;
950
+ vertical-align: middle;
951
+ text-decoration: none;
952
+ background: none;
953
+ outline: none;
954
+ margin: 0;
955
+ padding: 0;
956
+ box-sizing: border-box;
957
+ font-size: 0px;
958
+ line-height: 1;
959
+ cursor: pointer;
960
+ gap: 6px;
961
+ border-radius: var(--rx-rounded-md);
962
+ }
963
+ .rx-button:hover {
964
+ text-decoration: none;
965
+ }
966
+
967
+ .rx-button-icon {
968
+ display: flex;
969
+ justify-content: center;
970
+ align-items: center;
971
+ vertical-align: middle;
972
+ }
973
+ .rx-button-icon:empty {
974
+ display: none;
975
+ }
976
+
977
+ .rx-button-title {
978
+ font-size: 14px;
979
+ font-weight: normal;
980
+ line-height: 1.4;
981
+ color: var(--rx-fg-dark-text);
982
+ }
983
+
984
+ .rx-tooltip {
985
+ position: absolute;
986
+ z-index: 99;
987
+ margin: 0;
988
+ padding: 4px 7px;
989
+ border-radius: var(--rx-rounded-sm);
990
+ line-height: 1;
991
+ font-family: var(--rx-font-ui-mono);
992
+ font-size: 12px;
993
+ color: var(--rx-fg-light-text);
994
+ background: var(--rx-bg-dark-accent);
995
+ }
996
+
997
+ .rx-source-container {
998
+ display: none;
999
+ }
1000
+
1001
+ .rx-source,
1002
+ .rx-source:hover,
1003
+ .rx-source:focus {
1004
+ text-align: left;
1005
+ box-sizing: border-box;
1006
+ font-family: var(--rx-font-ui-mono);
1007
+ width: 100%;
1008
+ display: block;
1009
+ margin: 0;
1010
+ border: none;
1011
+ box-shadow: none;
1012
+ border-radius: 0;
1013
+ background-color: var(--rx-bg-source);
1014
+ color: var(--rx-fg-white-text);
1015
+ font-size: 14px;
1016
+ line-height: 1.7;
1017
+ outline: none;
1018
+ padding: 10px 18px 20px 18px;
1019
+ min-height: 60px;
1020
+ resize: vertical;
1021
+ }
1022
+
1023
+ .rx-drag-active {
1024
+ outline: 3px dashed gold !important;
1025
+ outline-offset: 0 !important;
1026
+ position: relative;
1027
+ max-height: 40px;
1028
+ overflow: hidden;
1029
+ padding: 0;
1030
+ }
1031
+ .rx-drag-active:before {
1032
+ width: 100%;
1033
+ height: 100%;
1034
+ content: "";
1035
+ top: 0;
1036
+ left: 0;
1037
+ background: rgba(255, 215, 0, 0.4);
1038
+ position: absolute;
1039
+ z-index: 1;
1040
+ }
1041
+
1042
+ .rx-dragging {
1043
+ opacity: 0.95;
1044
+ padding: 8px;
1045
+ background: var(--rx-bg-body);
1046
+ box-shadow: var(--rx-shadow-reorder);
1047
+ }
1048
+ .rx-dragging img {
1049
+ max-width: 100%;
1050
+ }
1051
+
1052
+ .rx-dropdown,
1053
+ .rx-colorpicker {
1054
+ position: absolute;
1055
+ font-family: var(--rx-font-ui);
1056
+ border-radius: var(--rx-rounded-sm);
1057
+ background: var(--rx-bg-overlay);
1058
+ box-shadow: var(--rx-shadow-dropdown);
1059
+ position: absolute;
1060
+ top: 0;
1061
+ left: 0;
1062
+ font-size: 14px;
1063
+ line-height: 1.4;
1064
+ z-index: var(--rx-level-popup);
1065
+ margin-bottom: 16px;
1066
+ overflow-x: auto;
1067
+ min-width: 200px;
1068
+ padding: 4px;
1069
+ }
1070
+
1071
+ .rx-dropdown[data-rx-pos=top] {
1072
+ box-shadow: none;
1073
+ }
1074
+
1075
+ .rx-dropdown-swatches {
1076
+ display: flex;
1077
+ flex-wrap: nowrap;
1078
+ }
1079
+
1080
+ .rx-dropdown-swatches-wrap {
1081
+ flex-wrap: wrap;
1082
+ }
1083
+
1084
+ .rx-dropdown-swatches-colors {
1085
+ display: flex;
1086
+ flex-direction: column;
1087
+ }
1088
+
1089
+ .rx-dropdown-swatches-colors-row {
1090
+ flex-direction: row;
1091
+ }
1092
+
1093
+ .rx-dropdown-swatch {
1094
+ cursor: pointer;
1095
+ position: relative;
1096
+ font-size: 0;
1097
+ width: 20px;
1098
+ height: 20px;
1099
+ border: 1px solid transparent;
1100
+ }
1101
+ .rx-dropdown-swatch.active {
1102
+ border: 2px solid var(--rx-border-dark-accent);
1103
+ box-shadow: 0 0 0 2px var(--rx-border-light-accent);
1104
+ z-index: 2;
1105
+ }
1106
+
1107
+ .rx-dropdown-swatch-size-large {
1108
+ width: 32px;
1109
+ height: 32px;
1110
+ }
1111
+
1112
+ .rx-dropdown-color-contrast {
1113
+ border-color: var(--rx-border-dark-subtle);
1114
+ }
1115
+
1116
+ .rx-dropdown-tabs {
1117
+ font-size: 13px;
1118
+ line-height: 1;
1119
+ font-weight: 500;
1120
+ display: flex;
1121
+ border-radius: var(--rx-rounded-md);
1122
+ background: var(--rx-bg-dark-minimal);
1123
+ padding: 2px;
1124
+ margin-bottom: 4px;
1125
+ }
1126
+
1127
+ .rx-dropdown-tab {
1128
+ flex-grow: 1;
1129
+ border-radius: var(--rx-rounded-sm);
1130
+ padding: 6px 8px;
1131
+ cursor: pointer;
1132
+ text-decoration: none;
1133
+ text-align: center;
1134
+ color: var(--rx-fg-dark-text);
1135
+ }
1136
+
1137
+ .rx-dropdown-tab:hover {
1138
+ text-decoration: none;
1139
+ }
1140
+
1141
+ .rx-dropdown-tab.active {
1142
+ background: var(--rx-bg-base);
1143
+ box-shadow: var(--rx-shadow-tab);
1144
+ }
1145
+
1146
+ .rx-dropdown-item {
1147
+ font-size: 14px;
1148
+ line-height: 1.4;
1149
+ padding: 6px 8px;
1150
+ display: flex;
1151
+ color: var(--rx-fg-dark-text);
1152
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
1153
+ }
1154
+ .rx-dropdown-item .rx-button-title {
1155
+ display: none;
1156
+ }
1157
+
1158
+ .rx-dropdown-item:last-child {
1159
+ border-bottom-width: 0;
1160
+ }
1161
+
1162
+ .rx-dropdown-item-hotkey {
1163
+ margin-left: auto;
1164
+ font-weight: normal;
1165
+ display: flex;
1166
+ gap: 1px;
1167
+ align-items: center;
1168
+ color: var(--rx-fg-dark-minimal);
1169
+ font-family: var(--rx-font-ui);
1170
+ font-size: 12px;
1171
+ line-height: 16px;
1172
+ }
1173
+ .rx-dropdown-item-hotkey span {
1174
+ padding: 0 2px;
1175
+ height: 16px;
1176
+ }
1177
+
1178
+ .rx-dropdown .rx-button {
1179
+ position: relative;
1180
+ padding: 8px;
1181
+ gap: 8px;
1182
+ width: 100%;
1183
+ border-radius: var(--rx-rounded-sm);
1184
+ }
1185
+ .rx-dropdown .rx-button:after {
1186
+ content: "";
1187
+ position: absolute;
1188
+ width: 100%;
1189
+ height: 1px;
1190
+ bottom: -1px;
1191
+ left: 0;
1192
+ background: var(--rx-border-dark-dimmed);
1193
+ }
1194
+ .rx-dropdown .rx-button:last-child:after {
1195
+ display: none;
1196
+ }
1197
+ .rx-dropdown .rx-button.rx-button-swatch {
1198
+ width: 20px;
1199
+ height: 20px;
1200
+ border-radius: 0;
1201
+ }
1202
+ .rx-dropdown .rx-button.rx-button-swatch .rx-button-icon,
1203
+ .rx-dropdown .rx-button.rx-button-swatch .rx-button-title {
1204
+ display: none;
1205
+ }
1206
+ .rx-dropdown .rx-button-title {
1207
+ color: var(--rx-fg-dark-accent);
1208
+ }
1209
+ .rx-dropdown .rx-button:hover {
1210
+ background: var(--rx-bg-dark-subtle);
1211
+ }
1212
+ .rx-dropdown .rx-button.active {
1213
+ background: var(--rx-bg-primary-subtle);
1214
+ }
1215
+ .rx-dropdown .rx-button-icon svg {
1216
+ fill: var(--rx-fg-dark-accent);
1217
+ width: 16px;
1218
+ height: 16px;
1219
+ }
1220
+ .rx-dropdown .rx-button-danger .rx-button-title {
1221
+ color: var(--rx-fg-negative-accent);
1222
+ }
1223
+ .rx-dropdown .rx-button-danger svg {
1224
+ fill: var(--rx-fg-negative-accent);
1225
+ }
1226
+
1227
+ .rx-dropdown-type-grid .rx-dropdown-items {
1228
+ display: flex;
1229
+ flex-wrap: wrap;
1230
+ padding: 0;
1231
+ box-sizing: border-box;
1232
+ }
1233
+ .rx-dropdown-type-grid .rx-button {
1234
+ box-sizing: border-box;
1235
+ border-radius: 0;
1236
+ margin-bottom: -1px;
1237
+ width: 32px;
1238
+ height: 32px;
1239
+ line-height: 32px;
1240
+ padding: 0;
1241
+ text-align: center;
1242
+ justify-content: center;
1243
+ align-items: center;
1244
+ border: 1px solid var(--rx-border-dark-dimmed);
1245
+ color: var(--rx-fg-dark-text);
1246
+ border-left-color: transparent;
1247
+ border-top-color: transparent;
1248
+ }
1249
+ .rx-dropdown-type-grid .rx-button:after {
1250
+ display: none;
1251
+ }
1252
+ .rx-dropdown-type-grid .rx-button-title:empty {
1253
+ display: none;
1254
+ }
1255
+ .rx-dropdown-type-grid .rx-dropdown-item svg {
1256
+ width: 16px;
1257
+ height: 16px;
1258
+ }
1259
+
1260
+ .rx-dropdown-stack {
1261
+ padding: 16px;
1262
+ padding-top: 0;
1263
+ }
1264
+
1265
+ .rx-dropdown-stack-item {
1266
+ cursor: pointer;
1267
+ display: flex;
1268
+ align-items: center;
1269
+ border-radius: 4px;
1270
+ line-height: 1;
1271
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
1272
+ }
1273
+
1274
+ .rx-dropdown-stack-item:last-child {
1275
+ border-bottom-color: transparent;
1276
+ }
1277
+
1278
+ .rx-dropdown-stack-item:hover {
1279
+ background-color: var(--rx-bg-dark-minimal);
1280
+ }
1281
+
1282
+ .rx-dropdown-stack-title {
1283
+ text-decoration: none;
1284
+ flex: 1;
1285
+ padding: 7px 8px;
1286
+ font-size: 14px;
1287
+ color: var(--rx-fg-dark-text);
1288
+ }
1289
+
1290
+ .rx-dropdown-stack-aside {
1291
+ font-family: var(--rx-font-ui-mono);
1292
+ font-size: 11px;
1293
+ color: var(--rx-fg-dark-subtle);
1294
+ margin-left: auto;
1295
+ padding-left: 4px;
1296
+ }
1297
+
1298
+ .rx-modal {
1299
+ position: absolute;
1300
+ overflow-x: hidden;
1301
+ overflow-y: auto;
1302
+ margin-bottom: 16px;
1303
+ min-width: 200px;
1304
+ font-family: var(--rx-font-ui);
1305
+ border-radius: var(--rx-rounded-md);
1306
+ background-color: var(--rx-bg-overlay);
1307
+ box-shadow: var(--rx-shadow-modal);
1308
+ z-index: var(--rx-level-popup);
1309
+ }
1310
+
1311
+ .rx-modal-body .rx-form {
1312
+ padding-bottom: 0;
1313
+ }
1314
+
1315
+ .rx-modal-header {
1316
+ font-size: 16px;
1317
+ font-weight: bold;
1318
+ color: var(--rx-bg-dark-accent);
1319
+ padding: 16px;
1320
+ position: relative;
1321
+ }
1322
+ .rx-modal-header:empty {
1323
+ display: none;
1324
+ }
1325
+
1326
+ .rx-modal-footer {
1327
+ overflow: hidden;
1328
+ box-sizing: border-box;
1329
+ margin-top: 8px;
1330
+ padding: 16px;
1331
+ padding-bottom: 20px;
1332
+ display: flex;
1333
+ gap: 4px;
1334
+ }
1335
+ .rx-modal-footer:empty {
1336
+ display: none;
1337
+ }
1338
+
1339
+ .rx-modal-close {
1340
+ position: absolute !important;
1341
+ right: 16px;
1342
+ top: 14px;
1343
+ cursor: pointer;
1344
+ display: inline-block;
1345
+ vertical-align: middle;
1346
+ width: 20px;
1347
+ height: 20px;
1348
+ opacity: 0.5;
1349
+ }
1350
+ .rx-modal-close::before, .rx-modal-close::after {
1351
+ content: "";
1352
+ display: block;
1353
+ left: 50%;
1354
+ position: absolute;
1355
+ top: 50%;
1356
+ transform: translate(-50%, -50%) rotate(45deg);
1357
+ background: var(--rx-bg-dark-accent);
1358
+ }
1359
+ .rx-modal-close::before {
1360
+ height: 1px;
1361
+ width: 75%;
1362
+ }
1363
+ .rx-modal-close::after {
1364
+ height: 75%;
1365
+ width: 1px;
1366
+ }
1367
+ .rx-modal-close:hover {
1368
+ opacity: 1;
1369
+ }
1370
+
1371
+ .rx-form {
1372
+ padding-bottom: 16px;
1373
+ }
1374
+
1375
+ .rx-form-item {
1376
+ padding: 16px 16px 0 16px;
1377
+ }
1378
+ .rx-form-item:empty {
1379
+ display: none;
1380
+ }
1381
+
1382
+ .rx-form-box {
1383
+ padding: 16px;
1384
+ }
1385
+
1386
+ .rx-form-flex {
1387
+ display: flex;
1388
+ gap: 4px;
1389
+ }
1390
+
1391
+ .rx-form-image img, .rx-form-image svg {
1392
+ max-width: 100%;
1393
+ }
1394
+
1395
+ .rx-form-title,
1396
+ .rx-form-section-title {
1397
+ font-size: 14px;
1398
+ font-weight: 600;
1399
+ color: var(--rx-bg-dark-accent);
1400
+ padding: 16px;
1401
+ padding-bottom: 0;
1402
+ position: relative;
1403
+ }
1404
+ .rx-form-title:empty,
1405
+ .rx-form-section-title:empty {
1406
+ display: none;
1407
+ }
1408
+
1409
+ .rx-form-item + .rx-form-section-title {
1410
+ margin-top: 8px;
1411
+ }
1412
+
1413
+ .rx-form-footer {
1414
+ overflow: hidden;
1415
+ box-sizing: border-box;
1416
+ margin-top: 8px;
1417
+ padding: 16px;
1418
+ padding-bottom: 0;
1419
+ display: flex;
1420
+ gap: 4px;
1421
+ }
1422
+ .rx-form-footer:empty {
1423
+ display: none;
1424
+ }
1425
+
1426
+ .rx-form-label {
1427
+ box-sizing: border-box;
1428
+ font-family: var(--rx-font-ui);
1429
+ font-size: 14px;
1430
+ line-height: 1.4;
1431
+ font-weight: 500;
1432
+ display: block;
1433
+ padding: 0;
1434
+ margin: 0;
1435
+ padding-bottom: 6px;
1436
+ color: var(--rx-fg-dark-text);
1437
+ }
1438
+
1439
+ .rx-form-hint {
1440
+ font-size: 13px;
1441
+ font-weight: normal;
1442
+ color: var(--rx-fg-dark-subtle);
1443
+ margin-left: 2px;
1444
+ }
1445
+
1446
+ .rx-form-container-flex {
1447
+ display: flex;
1448
+ gap: 8px;
1449
+ }
1450
+ .rx-form-container-flex .rx-form-item {
1451
+ padding-left: 0;
1452
+ padding-right: 0;
1453
+ }
1454
+ .rx-form-container-flex .rx-form-item:first-child {
1455
+ padding-left: 16px;
1456
+ }
1457
+ .rx-form-container-flex .rx-form-item:last-child {
1458
+ padding-right: 16px;
1459
+ }
1460
+ .rx-form-container-flex .rx-form-input,
1461
+ .rx-form-container-flex .rx-form-select {
1462
+ flex: auto;
1463
+ }
1464
+ .rx-form-container-flex .rx-form-button {
1465
+ margin-left: 4px;
1466
+ }
1467
+
1468
+ .rx-form-button-push-right {
1469
+ margin-left: auto;
1470
+ }
1471
+
1472
+ .rx-form-color-container {
1473
+ position: relative;
1474
+ }
1475
+
1476
+ .rx-form-color-container .rx-form-input {
1477
+ padding-left: 40px;
1478
+ }
1479
+
1480
+ .rx-form-color-toggle {
1481
+ position: absolute;
1482
+ top: 4px;
1483
+ left: 6px;
1484
+ height: 28px;
1485
+ width: 28px;
1486
+ border-radius: 8px;
1487
+ box-shadow: var(--rx-shadow-inner);
1488
+ cursor: pointer;
1489
+ background: var(--rx-bg-white-accent);
1490
+ }
1491
+
1492
+ .rx-form-button {
1493
+ box-sizing: border-box;
1494
+ font-family: var(--rx-font-ui);
1495
+ font-size: 14px;
1496
+ font-weight: 500;
1497
+ outline: none;
1498
+ border-radius: 8px;
1499
+ padding: 8px 20px;
1500
+ min-height: 40px;
1501
+ display: inline-flex;
1502
+ align-items: center;
1503
+ cursor: pointer;
1504
+ line-height: 1.25;
1505
+ height: auto;
1506
+ background: transparent;
1507
+ color: var(--rx-fg-dark-accent);
1508
+ border: 1px solid var(--rx-border-dark-medium);
1509
+ }
1510
+ .rx-form-button:hover {
1511
+ background: var(--rx-bg-dark-subtle);
1512
+ }
1513
+
1514
+ .rx-form-button-primary {
1515
+ background: var(--rx-bg-dark-accent);
1516
+ color: var(--rx-fg-light-accent);
1517
+ border-color: transparent;
1518
+ }
1519
+ .rx-form-button-primary:hover {
1520
+ color: var(--rx-fg-light-accent);
1521
+ background: var(--rx-bg-dark-accent-hover);
1522
+ }
1523
+
1524
+ .rx-form-button-danger {
1525
+ border: 1px solid var(--rx-border-negative-medium);
1526
+ color: var(--rx-fg-negative-accent);
1527
+ }
1528
+ .rx-form-button-danger:hover {
1529
+ color: var(--rx-fg-negative-accent);
1530
+ background: var(--rx-bg-negative-subtle);
1531
+ }
1532
+
1533
+ .rx-form-button-fullwidth {
1534
+ display: block;
1535
+ width: 100%;
1536
+ }
1537
+
1538
+ .rx-form-input,
1539
+ .rx-form-select,
1540
+ .rx-form-textarea {
1541
+ box-sizing: border-box;
1542
+ display: block;
1543
+ width: 100%;
1544
+ vertical-align: middle;
1545
+ font-weight: normal;
1546
+ padding: 8px;
1547
+ font-family: var(--rx-font-ui);
1548
+ font-size: 15px;
1549
+ outline: none;
1550
+ border-radius: 4px;
1551
+ box-shadow: none;
1552
+ line-height: 1.3;
1553
+ color: var(--rx-fg-dark-text);
1554
+ background: var(--rx-bg-input);
1555
+ border: 1px solid var(--rx-border-input);
1556
+ }
1557
+ .rx-form-input:focus,
1558
+ .rx-form-select:focus,
1559
+ .rx-form-textarea:focus {
1560
+ border-color: var(--rx-border-focus);
1561
+ box-shadow: none;
1562
+ }
1563
+
1564
+ .rx-form-textarea {
1565
+ resize: vertical;
1566
+ line-height: 1.5;
1567
+ }
1568
+
1569
+ .rx-form-select {
1570
+ font-size: 15px;
1571
+ cursor: pointer;
1572
+ -webkit-appearance: none;
1573
+ background-image: url('data:image/svg+xml;utf8,<svg height="6" viewBox="0 0 10 6" width="10" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(0,0,0)" opacity=".6" d="m6.6168815 3-4.44908109-4.09883609c-.22373388-.20615371-.22373388-.54039492 0-.74654863s.58647818-.20615371.81021206 0l4.85418712 4.47211041c.22373388.20615371.22373388.54039491 0 .74654862l-4.85418712 4.47211041c-.22373388.20615371-.58647818.20615371-.81021206 0s-.22373388-.54039492 0-.74654863z" fill-rule="evenodd" transform="matrix(0 1 -1 0 8 -2)"/></svg>');
1574
+ background-repeat: no-repeat;
1575
+ background-position: right 0.65em center;
1576
+ padding-right: 28px;
1577
+ min-height: 35px;
1578
+ }
1579
+
1580
+ [rx-data-theme=dark] .rx-form-select {
1581
+ background-image: url('data:image/svg+xml;utf8,<svg height="6" viewBox="0 0 10 6" width="10" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(255,255,255)" opacity="0.6" d="m6.6168815 3-4.44908109-4.09883609c-.22373388-.20615371-.22373388-.54039492 0-.74654863s.58647818-.20615371.81021206 0l4.85418712 4.47211041c.22373388.20615371.22373388.54039491 0 .74654862l-4.85418712 4.47211041c-.22373388.20615371-.58647818.20615371-.81021206 0s-.22373388-.54039492 0-.74654863z" fill-rule="evenodd" transform="matrix(0 1 -1 0 8 -2)"/></svg>');
1582
+ }
1583
+
1584
+ .rx-form-checkbox {
1585
+ box-sizing: border-box;
1586
+ vertical-align: middle;
1587
+ position: relative;
1588
+ top: -0.05em;
1589
+ font-size: 16px;
1590
+ margin-top: 0 !important;
1591
+ margin-right: 4px !important;
1592
+ margin-left: 0 !important;
1593
+ }
1594
+
1595
+ .rx-form-checkbox-item {
1596
+ color: var(--rx-fg-dark-text);
1597
+ font-family: var(--rx-font-ui);
1598
+ font-size: 15px;
1599
+ line-height: 1.4;
1600
+ }
1601
+
1602
+ .rx-form-segment {
1603
+ display: flex;
1604
+ flex-wrap: wrap;
1605
+ background: var(--rx-bg-dark-minimal);
1606
+ border-radius: var(--rx-rounded-md);
1607
+ padding: 2px;
1608
+ gap: 4px;
1609
+ }
1610
+
1611
+ .rx-form-segment-item {
1612
+ border: 1px solid transparent;
1613
+ font-size: 14px;
1614
+ padding: 6px 8px;
1615
+ margin: 0;
1616
+ cursor: pointer;
1617
+ text-align: center;
1618
+ border-radius: var(--rx-rounded-sm);
1619
+ min-width: 32px;
1620
+ color: var(--rx-fg-dark-subtle);
1621
+ }
1622
+ .rx-form-segment-item:hover {
1623
+ background: var(--rx-bg-light-accent);
1624
+ color: var(--rx-fg-dark-accent);
1625
+ }
1626
+ .rx-form-segment-item.active {
1627
+ cursor: default;
1628
+ background: var(--rx-bg-light-accent);
1629
+ box-shadow: var(--rx-shadow-tab);
1630
+ color: var(--rx-fg-dark-accent);
1631
+ }
1632
+
1633
+ .rx-form-upload-box {
1634
+ flex: 1;
1635
+ display: flex;
1636
+ flex-direction: column;
1637
+ align-items: center;
1638
+ justify-content: center;
1639
+ margin: 0;
1640
+ margin-bottom: 10px;
1641
+ border: 1px dashed var(--rx-border-dark-medium);
1642
+ background: var(--rx-bg-dark-dimmed);
1643
+ border-radius: var(--rx-rounded-md);
1644
+ min-width: 160px;
1645
+ height: 160px;
1646
+ cursor: pointer;
1647
+ position: relative;
1648
+ }
1649
+ .rx-form-upload-box input[type=file] {
1650
+ font-size: 13px;
1651
+ }
1652
+ .rx-form-upload-box img {
1653
+ position: relative;
1654
+ z-index: 2;
1655
+ object-fit: cover;
1656
+ height: 100%;
1657
+ width: 100%;
1658
+ }
1659
+ .rx-form-upload-box:after {
1660
+ content: "";
1661
+ position: absolute;
1662
+ top: 0;
1663
+ bottom: 0;
1664
+ left: 0;
1665
+ right: 0;
1666
+ width: 100%;
1667
+ height: 100%;
1668
+ }
1669
+ .rx-form-upload-box.rx-form-upload-hover {
1670
+ border-color: var(--rx-border-dark-medium);
1671
+ background-color: var(--rx-bg-dark-subtle);
1672
+ }
1673
+ .rx-form-upload-box.rx-form-upload-error {
1674
+ border-color: var(--rx-border-negative-medium);
1675
+ background-color: var(--rx-bg-negative-minimal);
1676
+ }
1677
+
1678
+ .rx-upload-remove {
1679
+ position: absolute;
1680
+ z-index: 3;
1681
+ top: -6px;
1682
+ right: -10px;
1683
+ background-color: var(--rx-bg-black-accent);
1684
+ color: var(--rx-fg-white-accent);
1685
+ opacity: 1;
1686
+ width: 20px;
1687
+ height: 20px;
1688
+ text-align: center;
1689
+ border-radius: 10px;
1690
+ font-size: 14px;
1691
+ line-height: 20px;
1692
+ }
1693
+ .rx-upload-remove:after {
1694
+ content: "×";
1695
+ }
1696
+ .rx-upload-remove:hover {
1697
+ background-color: var(--rx-bg-black-accent-hover);
1698
+ }
1699
+
1700
+ .rx-form-upload-cover-off img {
1701
+ object-fit: initial;
1702
+ height: auto;
1703
+ width: auto;
1704
+ }
1705
+
1706
+ .rx-form-upload-placeholder {
1707
+ font-family: var(--rx-font-ui);
1708
+ color: var(--rx-fg-dark-minimal);
1709
+ font-size: 12px;
1710
+ line-height: 1.35;
1711
+ padding: 0 8px;
1712
+ text-align: center;
1713
+ }
1714
+ .rx-form-upload-placeholder svg {
1715
+ fill: var(--rx-fg-dark-minimal);
1716
+ }
1717
+
1718
+ @keyframes progress-bar-stripes {
1719
+ from {
1720
+ background-position: 40px 0;
1721
+ }
1722
+ to {
1723
+ background-position: 0 0;
1724
+ }
1725
+ }
1726
+ .rx-editor-progress {
1727
+ position: fixed;
1728
+ top: 0;
1729
+ left: 0;
1730
+ z-index: 11000;
1731
+ width: 100%;
1732
+ background-color: var(--rx-bg-dark-subtle);
1733
+ }
1734
+ .rx-editor-progress span {
1735
+ animation: progress-bar-stripes 2s linear infinite;
1736
+ content: "";
1737
+ display: block;
1738
+ min-height: 8px;
1739
+ width: 100%;
1740
+ height: 100%;
1741
+ background-color: var(--rx-bg-primary-accent);
1742
+ background-image: -webkit-linear-gradient(45deg, var(--rx-bg-light-strong) 25%, transparent 25%, transparent 50%, var(--rx-bg-light-strong) 50%, var(--rx-bg-light-strong) 75%, transparent 75%, transparent);
1743
+ background-image: linear-gradient(45deg, var(--rx-bg-light-strong) 25%, transparent 25%, transparent 50%, var(--rx-bg-light-strong) 50%, var(--rx-bg-light-strong) 75%, transparent 75%, transparent);
1744
+ background-size: 40px 40px;
1745
+ }
1746
+
1747
+ .rx-panel {
1748
+ position: absolute;
1749
+ min-width: 240px;
1750
+ max-height: 300px;
1751
+ margin: 0;
1752
+ padding: 0;
1753
+ z-index: 99;
1754
+ font-family: var(--rx-font-ui);
1755
+ font-size: 14px;
1756
+ overflow: auto;
1757
+ border-radius: 4px;
1758
+ padding: 4px;
1759
+ background: var(--rx-bg-overlay);
1760
+ box-shadow: var(--rx-shadow-dropdown);
1761
+ }
1762
+
1763
+ .rx-panel-box {
1764
+ display: flex;
1765
+ flex-wrap: wrap;
1766
+ gap: 2px;
1767
+ }
1768
+
1769
+ .rx-pabel-title {
1770
+ font-family: var(--rx-font-ui);
1771
+ font-size: 13px;
1772
+ font-weight: 500;
1773
+ color: var(--rx-fg-dark-subtle);
1774
+ }
1775
+
1776
+ .rx-panel-box {
1777
+ display: flex;
1778
+ flex-wrap: wrap;
1779
+ gap: 2px;
1780
+ }
1781
+
1782
+ .rx-panel-item {
1783
+ box-sizing: border-box;
1784
+ padding: 4px;
1785
+ border-bottom: 1px solid transparent;
1786
+ }
1787
+
1788
+ .rx-panel-item {
1789
+ display: block;
1790
+ border-radius: 8px;
1791
+ cursor: pointer;
1792
+ padding: 8px;
1793
+ line-height: 1;
1794
+ text-decoration: none;
1795
+ color: var(--rx-fg-dark-accent);
1796
+ }
1797
+
1798
+ .rx-panel-item.active,
1799
+ .rx-panel-item:hover {
1800
+ color: var(--rx-fg-dark-accent);
1801
+ background: var(--rx-bg-dark-subtle);
1802
+ }
1803
+
1804
+ .rx-ai-main {
1805
+ padding: 12px;
1806
+ border-radius: 8px;
1807
+ background: var(--rx-bg-raised);
1808
+ border: 1px solid var(--rx-border-dark-subtle);
1809
+ }
1810
+
1811
+ .rx-ai-footer {
1812
+ margin-top: 16px !important;
1813
+ display: flex;
1814
+ gap: 8px;
1815
+ }
1816
+
1817
+ .rx-ai-buttons {
1818
+ margin-left: auto !important;
1819
+ display: flex;
1820
+ gap: 8px;
1821
+ }
1822
+
1823
+ .rx-ai-preview-label,
1824
+ .rx-ai-label {
1825
+ box-sizing: border-box;
1826
+ font-family: var(--rx-font-ui);
1827
+ font-size: 13px;
1828
+ line-height: 1.4;
1829
+ font-weight: 500;
1830
+ display: block;
1831
+ padding: 0;
1832
+ margin: 0;
1833
+ padding-bottom: 6px;
1834
+ color: var(--rx-fg-dark-subtle);
1835
+ }
1836
+
1837
+ .rx-ai-select,
1838
+ .rx-ai-size {
1839
+ width: auto;
1840
+ max-width: 320px;
1841
+ }
1842
+
1843
+ .rx-ai-progress {
1844
+ margin-bottom: 12px !important;
1845
+ }
1846
+ .rx-ai-progress:empty {
1847
+ display: none;
1848
+ }
1849
+ .rx-ai-progress svg {
1850
+ fill: var(--rx-fg-dark-accent);
1851
+ }
1852
+
1853
+ .rx-ai-preview {
1854
+ font-family: var(--rx-font-ui);
1855
+ font-weight: normal;
1856
+ letter-spacing: normal;
1857
+ text-transform: none;
1858
+ font-size: 16px;
1859
+ line-height: 1.618;
1860
+ color: var(--rx-fg-dark-text);
1861
+ margin-bottom: 12px !important;
1862
+ }
1863
+ .rx-ai-preview:empty {
1864
+ display: none;
1865
+ }
1866
+
1867
+ @media only screen and (max-width: 767px) {
1868
+ .rx-ai-footer,
1869
+ .rx-ai-buttons {
1870
+ flex-direction: column;
1871
+ width: 100%;
1872
+ }
1873
+ .rx-ai-select,
1874
+ .rx-ai-size {
1875
+ max-width: 100%;
1876
+ }
1877
+ .rx-ai-button {
1878
+ justify-content: center;
1879
+ }
1880
+ }
1881
+ .rx-voice-label {
1882
+ display: none;
1883
+ }
1884
+
1885
+ [rx-modal-name=image] .rx-modal-body {
1886
+ padding: 16px;
1887
+ padding-top: 0;
1888
+ }
1889
+
1890
+ .rx-modal-image-section-or {
1891
+ margin: 16px 0;
1892
+ font-family: var(--rx-font-ui);
1893
+ text-transform: uppercase;
1894
+ font-weight: bold;
1895
+ text-align: center;
1896
+ font-size: 11px;
1897
+ color: var(--rx-fg-dark-subtle);
1898
+ }
1899
+
1900
+ .rx-modal-images-box {
1901
+ margin-top: 12px;
1902
+ display: flex;
1903
+ gap: 8px;
1904
+ flex-wrap: wrap;
1905
+ }
1906
+ .rx-modal-images-box img {
1907
+ vertical-align: top;
1908
+ max-width: 100px;
1909
+ max-height: 66px;
1910
+ height: 100%;
1911
+ width: min-content;
1912
+ cursor: pointer;
1913
+ }
1914
+ .rx-modal-images-box img:hover {
1915
+ outline: 3px solid var(--rx-border-focus);
1916
+ }
1917
+
1918
+ .rx-form-item-edit-image-box {
1919
+ padding: 20px;
1920
+ padding-bottom: 0;
1921
+ }
1922
+
1923
+ .rx-form-item-image {
1924
+ margin-right: 8px;
1925
+ }
1926
+ .rx-form-item-image img {
1927
+ max-height: 160px;
1928
+ width: auto;
1929
+ }
1930
+
1931
+ [rx-modal-name=emoji] .rx-modal-body {
1932
+ padding: 16px;
1933
+ display: flex;
1934
+ flex-direction: column;
1935
+ gap: 12px;
1936
+ }
1937
+
1938
+ .rx-emoji-title {
1939
+ font-family: var(--rx-font-ui);
1940
+ font-size: 13px;
1941
+ font-weight: 500;
1942
+ color: var(--rx-fg-dark-subtle);
1943
+ }
1944
+
1945
+ .rx-emoji-box {
1946
+ display: flex;
1947
+ flex-wrap: wrap;
1948
+ gap: 2px;
1949
+ }
1950
+
1951
+ .rx-emoji-item {
1952
+ border-radius: 4px;
1953
+ padding: 4px;
1954
+ cursor: pointer;
1955
+ font-size: 24px;
1956
+ line-height: 1;
1957
+ }
1958
+
1959
+ .rx-emoji-item:hover {
1960
+ background: var(--rx-bg-dark-subtle);
1961
+ }
1962
+
1963
+ .rx-panel-emoji {
1964
+ padding: 12px;
1965
+ display: flex;
1966
+ flex-direction: column;
1967
+ gap: 12px;
1968
+ }
1969
+
1970
+ .rx-panel-emoji .rx-panel-item {
1971
+ font-size: 24px;
1972
+ }
1973
+
1974
+ [rx-modal-name=snippets] .rx-modal-body,
1975
+ [rx-modal-name=templates] .rx-modal-body {
1976
+ padding: 20px;
1977
+ padding-bottom: 0;
1978
+ display: flex;
1979
+ flex-wrap: wrap;
1980
+ }
1981
+
1982
+ .rx-snippet-container {
1983
+ box-sizing: border-box;
1984
+ margin-right: 10px;
1985
+ margin-bottom: 20px;
1986
+ }
1987
+
1988
+ .rx-snippet-name {
1989
+ box-sizing: border-box;
1990
+ font-size: 14px;
1991
+ font-weight: 600;
1992
+ font-family: var(--rx-font-ui);
1993
+ color: var(--rx-fg-dark-text);
1994
+ margin-top: 8px;
1995
+ padding-right: 10px;
1996
+ text-align: left;
1997
+ max-width: 100px;
1998
+ }
1999
+
2000
+ .rx-snippet-box {
2001
+ box-sizing: border-box;
2002
+ border-radius: 6px;
2003
+ box-shadow: var(--shadow-md-border);
2004
+ cursor: pointer;
2005
+ border: 1px solid transparent;
2006
+ overflow: hidden;
2007
+ }
2008
+ .rx-snippet-box:hover {
2009
+ border: 1px solid var(--rx-border-primary-accent);
2010
+ }
2011
+
2012
+ .rx-snippet-image,
2013
+ .rx-template-image {
2014
+ min-height: 80px;
2015
+ max-height: 80px;
2016
+ box-sizing: border-box;
2017
+ }
2018
+ .rx-snippet-image img,
2019
+ .rx-template-image img {
2020
+ max-width: 160px;
2021
+ }
2022
+
2023
+ .rx-template-image {
2024
+ min-height: 130px;
2025
+ max-height: initial;
2026
+ }
2027
+ .rx-template-image img {
2028
+ max-width: 100px;
2029
+ }
2030
+
2031
+ .rx-snippet-preview,
2032
+ .rx-template-preview {
2033
+ box-sizing: border-box;
2034
+ overflow: hidden;
2035
+ transform-origin: top left;
2036
+ transform: scale(0.25);
2037
+ margin-right: -480px;
2038
+ margin-bottom: -240px;
2039
+ padding: 40px;
2040
+ width: 640px;
2041
+ height: 320px;
2042
+ position: relative;
2043
+ }
2044
+ .rx-snippet-preview:before,
2045
+ .rx-template-preview:before {
2046
+ left: 0;
2047
+ top: 0;
2048
+ width: 100%;
2049
+ height: 100%;
2050
+ content: "";
2051
+ position: absolute;
2052
+ z-index: 1;
2053
+ }
2054
+ .rx-snippet-preview:hover,
2055
+ .rx-template-preview:hover {
2056
+ border-color: var(--rx-border-primary-accent);
2057
+ }
2058
+ .rx-snippet-preview fieldset, .rx-snippet-preview iframe, .rx-snippet-preview img,
2059
+ .rx-template-preview fieldset,
2060
+ .rx-template-preview iframe,
2061
+ .rx-template-preview img {
2062
+ border: 0;
2063
+ }
2064
+ .rx-snippet-preview embed, .rx-snippet-preview object, .rx-snippet-preview audio, .rx-snippet-preview img, .rx-snippet-preview video,
2065
+ .rx-template-preview embed,
2066
+ .rx-template-preview object,
2067
+ .rx-template-preview audio,
2068
+ .rx-template-preview img,
2069
+ .rx-template-preview video {
2070
+ max-width: 100%;
2071
+ height: auto;
2072
+ }
2073
+ .rx-snippet-preview h1:empty,
2074
+ .rx-snippet-preview h2:empty,
2075
+ .rx-snippet-preview h3:empty,
2076
+ .rx-snippet-preview h4:empty,
2077
+ .rx-snippet-preview h5:empty,
2078
+ .rx-snippet-preview h6:empty,
2079
+ .rx-snippet-preview p:empty,
2080
+ .rx-snippet-preview div:empty,
2081
+ .rx-template-preview h1:empty,
2082
+ .rx-template-preview h2:empty,
2083
+ .rx-template-preview h3:empty,
2084
+ .rx-template-preview h4:empty,
2085
+ .rx-template-preview h5:empty,
2086
+ .rx-template-preview h6:empty,
2087
+ .rx-template-preview p:empty,
2088
+ .rx-template-preview div:empty {
2089
+ background-color: var(--rx-border-primary-subtle);
2090
+ min-height: 1.5em;
2091
+ }
2092
+
2093
+ .rx-template-preview {
2094
+ transform: scale(0.25);
2095
+ margin-right: -300px;
2096
+ margin-bottom: -390px;
2097
+ padding: 40px;
2098
+ width: 400px;
2099
+ height: 520px;
2100
+ }
2101
+
2102
+ .rx-empty h1:empty,
2103
+ .rx-empty h2:empty,
2104
+ .rx-empty h3:empty,
2105
+ .rx-empty h4:empty,
2106
+ .rx-empty h5:empty,
2107
+ .rx-empty h6:empty,
2108
+ .rx-empty p:empty,
2109
+ .rx-empty li:empty,
2110
+ .rx-empty dt:empty,
2111
+ .rx-empty dd:empty,
2112
+ .rx-empty address:empty,
2113
+ .rx-empty figcaption:empty,
2114
+ .rx-empty blockquote:empty {
2115
+ min-height: 1.5em;
2116
+ }
2117
+ .rx-empty pre:empty {
2118
+ min-height: 3.5em;
2119
+ }
2120
+ .rx-empty strong:empty, .rx-empty b:empty, .rx-empty em:empty, .rx-empty i:empty, .rx-empty span:empty, .rx-empty sup:empty, .rx-empty sub:empty, .rx-empty u:empty, .rx-empty ins:empty, .rx-empty code:empty, .rx-empty del:empty, .rx-empty cite:empty {
2121
+ display: inline-block;
2122
+ min-width: 1px;
2123
+ min-height: 1em;
2124
+ }
2125
+ .rx-empty th:empty:after, .rx-empty td:empty:after {
2126
+ content: "​";
2127
+ }
2128
+ .rx-empty code:after, .rx-empty kbd:after, .rx-empty mark:after {
2129
+ content: "​";
2130
+ }
2131
+ .rx-empty pre code:after {
2132
+ display: none;
2133
+ }
2134
+ .rx-empty code + code {
2135
+ margin-left: 2px;
2136
+ }
2137
+ .rx-empty table {
2138
+ empty-cells: show;
2139
+ }
2140
+ .rx-empty embed, .rx-empty img, .rx-empty object {
2141
+ max-width: 100%;
2142
+ height: auto;
2143
+ }
2144
+
2145
+ .rx-content {
2146
+ text-align: left;
2147
+ --rx-font-text: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
2148
+ --rx-font-heading: inherit;
2149
+ --rx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2150
+ --rx-body-color: var(--rx-bg-body);
2151
+ --rx-heading-color: var(--rx-fg-heading);
2152
+ --rx-text-color: var(--rx-fg-text);
2153
+ --rx-table-border: var(--rx-border-dark-minimal);
2154
+ --rx-line-color: var(--rx-border-dark-minimal);
2155
+ --rx-pre-color: var(--rx-fg-text);
2156
+ --rx-pre-bg: var(--rx-bg-dark-minimal);
2157
+ --rx-var-color: var(--rx-fg-text);
2158
+ --rx-kbd-color: var(--rx-fg-text);
2159
+ --rx-kbd-border: var(--rx-border-dark-subtle);
2160
+ --rx-kbd-bg: var(--rx-bg-light-accent);
2161
+ --rx-code-color: var(--rx-fg-text);
2162
+ --rx-code-bg: var(--rx-bg-dark-medium);
2163
+ --rx-abbr-border: var(--rx-border-dark-emphasis);
2164
+ --rx-quote-border-color: var(--rx-border-dark-medium);
2165
+ background: var(--rx-body-color);
2166
+ font-family: var(--rx-font-text);
2167
+ color: var(--rx-text-color);
2168
+ font-size: 16px;
2169
+ line-height: 1.5;
2170
+ }
2171
+ .rx-content[dir=rtl] {
2172
+ text-align: right;
2173
+ }
2174
+ .rx-content * {
2175
+ margin: 0;
2176
+ }
2177
+ .rx-content p, .rx-content li, .rx-content dt, .rx-content dd, .rx-content address {
2178
+ font-size: 16px;
2179
+ line-height: 1.5;
2180
+ }
2181
+ .rx-content h1 + *, .rx-content h2 + *, .rx-content h3 + *, .rx-content h4 + *, .rx-content h5 + *, .rx-content h6 + * {
2182
+ margin-top: 12px;
2183
+ }
2184
+ .rx-content p + h2, .rx-content p + h3, .rx-content p + h4, .rx-content p + h5, .rx-content p + h6, .rx-content ul + h2, .rx-content ul + h3, .rx-content ul + h4, .rx-content ul + h5, .rx-content ul + h6, .rx-content ol + h2, .rx-content ol + h3, .rx-content ol + h4, .rx-content ol + h5, .rx-content ol + h6, .rx-content pre + h2, .rx-content pre + h3, .rx-content pre + h4, .rx-content pre + h5, .rx-content pre + h6, .rx-content dl + h2, .rx-content dl + h3, .rx-content dl + h4, .rx-content dl + h5, .rx-content dl + h6, .rx-content address + h2, .rx-content address + h3, .rx-content address + h4, .rx-content address + h5, .rx-content address + h6 {
2185
+ margin-top: 24px;
2186
+ }
2187
+ .rx-content p + *, .rx-content ul + *, .rx-content ol + *, .rx-content pre + *, .rx-content dl + *, .rx-content address + * {
2188
+ margin-top: 24px;
2189
+ }
2190
+ .rx-content table + *,
2191
+ .rx-content blockquote + *,
2192
+ .rx-content figure + *, .rx-content > div + * {
2193
+ margin-top: 24px;
2194
+ }
2195
+ .rx-content h1 + h2,
2196
+ .rx-content h2 + h3,
2197
+ .rx-content h3 + h4,
2198
+ .rx-content h4 + h5,
2199
+ .rx-content h5 + h6 {
2200
+ margin-top: 12px;
2201
+ }
2202
+ .rx-content a,
2203
+ .rx-content a:hover,
2204
+ .rx-content a:focus,
2205
+ .rx-content a:visited {
2206
+ color: var(--rx-link-color);
2207
+ }
2208
+ .rx-content h1,
2209
+ .rx-content h2,
2210
+ .rx-content h3,
2211
+ .rx-content h4,
2212
+ .rx-content h5,
2213
+ .rx-content h6 {
2214
+ font-family: var(--rx-font-heading);
2215
+ font-weight: bold;
2216
+ font-style: normal;
2217
+ color: var(--rx-heading-color);
2218
+ text-rendering: optimizeLegibility;
2219
+ letter-spacing: 0;
2220
+ }
2221
+ .rx-content h1 a,
2222
+ .rx-content h2 a,
2223
+ .rx-content h3 a,
2224
+ .rx-content h4 a,
2225
+ .rx-content h5 a,
2226
+ .rx-content h6 a {
2227
+ text-decoration: underline;
2228
+ }
2229
+ .rx-content h1 {
2230
+ font-weight: 800;
2231
+ }
2232
+ .rx-content h2 {
2233
+ font-weight: 700;
2234
+ }
2235
+ .rx-content h3,
2236
+ .rx-content h4,
2237
+ .rx-content h5,
2238
+ .rx-content h6 {
2239
+ font-weight: 600;
2240
+ }
2241
+ .rx-content h1 {
2242
+ font-size: 36px;
2243
+ line-height: 1.2;
2244
+ }
2245
+ .rx-content h2 {
2246
+ font-size: 24px;
2247
+ line-height: 1.3;
2248
+ }
2249
+ .rx-content h3 {
2250
+ font-size: 20px;
2251
+ line-height: 1.4;
2252
+ }
2253
+ .rx-content h4 {
2254
+ font-size: 16px;
2255
+ line-height: 1.5;
2256
+ }
2257
+ .rx-content h5 {
2258
+ font-size: 16px;
2259
+ line-height: 1.5;
2260
+ }
2261
+ .rx-content h6 {
2262
+ font-size: 16px;
2263
+ line-height: 1.5;
2264
+ }
2265
+ .rx-content dfn,
2266
+ .rx-content abbr {
2267
+ font-size: 95%;
2268
+ }
2269
+ .rx-content cite,
2270
+ .rx-content small,
2271
+ .rx-content var,
2272
+ .rx-content kbd,
2273
+ .rx-content code {
2274
+ font-size: 85%;
2275
+ }
2276
+ .rx-content sup,
2277
+ .rx-content sub {
2278
+ font-size: 65%;
2279
+ }
2280
+ .rx-content var,
2281
+ .rx-content code,
2282
+ .rx-content kbd {
2283
+ display: inline-block;
2284
+ font-family: var(--rx-font-mono);
2285
+ font-style: normal;
2286
+ line-height: 1;
2287
+ vertical-align: baseline;
2288
+ }
2289
+ .rx-content kbd,
2290
+ .rx-content code {
2291
+ border-radius: 4px;
2292
+ }
2293
+ .rx-content kbd {
2294
+ color: var(--rx-kbd-color);
2295
+ background: var(--rx-kbd-bg);
2296
+ border: 1px solid var(--rx-kbd-border);
2297
+ padding: 0.2em 0.4em;
2298
+ }
2299
+ .rx-content var {
2300
+ color: var(--rx-var-color);
2301
+ }
2302
+ .rx-content code {
2303
+ position: relative;
2304
+ top: -1px;
2305
+ padding: 0.2em 0.4em 0.2em;
2306
+ color: var(--rx-code-color);
2307
+ background: var(--rx-code-bg);
2308
+ border: 1px solid var(--rx-code-border);
2309
+ }
2310
+ .rx-content mark {
2311
+ background-color: yellow;
2312
+ color: black;
2313
+ }
2314
+ .rx-content b,
2315
+ .rx-content strong {
2316
+ font-weight: bold;
2317
+ }
2318
+ .rx-content dfn,
2319
+ .rx-content abbr[title] {
2320
+ letter-spacing: 0.01em;
2321
+ text-transform: uppercase;
2322
+ text-decoration: none;
2323
+ border-bottom: 1px dotted var(--rx-abbr-border);
2324
+ cursor: help;
2325
+ }
2326
+ .rx-content cite {
2327
+ color: var(--rx-cite-color, var(--rx-text-color));
2328
+ font-style: italic;
2329
+ }
2330
+ .rx-content sub,
2331
+ .rx-content sup {
2332
+ line-height: 1;
2333
+ margin-left: 2px;
2334
+ }
2335
+ .rx-content sub {
2336
+ vertical-align: sub;
2337
+ }
2338
+ .rx-content sup {
2339
+ vertical-align: super;
2340
+ }
2341
+ .rx-content ul,
2342
+ .rx-content ol {
2343
+ padding-left: 0;
2344
+ margin-left: 20px;
2345
+ }
2346
+ .rx-content li li {
2347
+ font-size: 1em;
2348
+ }
2349
+ .rx-content dt {
2350
+ font-weight: bold;
2351
+ }
2352
+ .rx-content dd + dt {
2353
+ margin-top: 0.25em;
2354
+ }
2355
+ .rx-content pre {
2356
+ overflow: auto;
2357
+ white-space: pre;
2358
+ font-family: var(--rx-font-mono);
2359
+ font-size: 14px;
2360
+ line-height: 1.6;
2361
+ padding: 1em;
2362
+ border-radius: 3px;
2363
+ border: 1px solid var(--rx-pre-border, transparent);
2364
+ background: var(--rx-pre-bg, transparent);
2365
+ color: var(--rx-pre-color, var(--rx-text-color));
2366
+ }
2367
+ .rx-content pre code {
2368
+ position: initial;
2369
+ color: inherit;
2370
+ padding: 0;
2371
+ border: 0;
2372
+ font-size: 100%;
2373
+ display: block;
2374
+ line-height: inherit;
2375
+ background: none;
2376
+ }
2377
+ .rx-content blockquote,
2378
+ .rx-content figure:has(blockquote) {
2379
+ padding: 0;
2380
+ background: var(--rx-quote-bg, transparent);
2381
+ padding-left: 24px;
2382
+ border-left: var(--rx-quote-border-width, 2px) solid var(--rx-quote-border-color);
2383
+ }
2384
+ .rx-content blockquote p,
2385
+ .rx-content figure:has(blockquote) p {
2386
+ font-style: italic;
2387
+ font-weight: 500;
2388
+ font-size: 16px;
2389
+ line-height: 1.4;
2390
+ color: var(--rx-quote-color, var(--rx-text-color));
2391
+ }
2392
+ .rx-content blockquote p + p,
2393
+ .rx-content figure:has(blockquote) p + p {
2394
+ margin-top: 0.5em;
2395
+ }
2396
+ .rx-content figure:has(blockquote) blockquote {
2397
+ padding: 0;
2398
+ border: none;
2399
+ box-shadow: none;
2400
+ background: transparent;
2401
+ border-radius: 0;
2402
+ }
2403
+ .rx-content blockquote cite,
2404
+ .rx-content figcaption cite {
2405
+ font-style: italic;
2406
+ font-weight: normal;
2407
+ color: var(--rx-quote-caption-color, var(--rx-text-color));
2408
+ font-size: 14px;
2409
+ line-height: 1.3;
2410
+ }
2411
+ .rx-content caption {
2412
+ text-align: left;
2413
+ font-style: normal;
2414
+ }
2415
+ .rx-content table {
2416
+ border-collapse: collapse;
2417
+ border-spacing: 0;
2418
+ width: 100%;
2419
+ empty-cells: show;
2420
+ font-size: 15px;
2421
+ line-height: 1.5;
2422
+ color: var(--rx-table-color, var(--rx-text-color));
2423
+ }
2424
+ .rx-content td,
2425
+ .rx-content th {
2426
+ text-align: left;
2427
+ vertical-align: top;
2428
+ padding: 0.75em;
2429
+ border: 1px solid var(--rx-table-border);
2430
+ }
2431
+ .rx-content th {
2432
+ font-weight: normal;
2433
+ }
2434
+ .rx-content thead th {
2435
+ font-weight: bold;
2436
+ }
2437
+ .rx-content address {
2438
+ font-style: italic;
2439
+ }
2440
+ .rx-content figcaption {
2441
+ display: block;
2442
+ margin-top: 4px;
2443
+ font-size: 14px;
2444
+ line-height: 1.3;
2445
+ background: var(--rx-caption-bg, transparent);
2446
+ color: var(--rx-caption-color, var(--rx-text-color));
2447
+ }
2448
+ .rx-content figure > img, .rx-content figure > img a, .rx-content figure > iframe, .rx-content figure > pre, .rx-content figure > div {
2449
+ vertical-align: middle;
2450
+ }
2451
+ .rx-content .embed-responsive:has(iframe) {
2452
+ position: relative;
2453
+ padding: 0;
2454
+ padding-bottom: 56.25%;
2455
+ height: 0;
2456
+ }
2457
+ .rx-content .embed-responsive:has(iframe) iframe {
2458
+ position: absolute;
2459
+ top: 0;
2460
+ left: 0;
2461
+ width: 100%;
2462
+ height: 100%;
2463
+ }
2464
+ .rx-content div.embed-responsive {
2465
+ margin: 0;
2466
+ }
2467
+ .rx-content hr {
2468
+ --rx-line-size: 1px;
2469
+ --rx-line-width: 100%;
2470
+ --rx-line-style: solid;
2471
+ position: relative;
2472
+ line-height: 1;
2473
+ background: none;
2474
+ border: none !important;
2475
+ text-align: left;
2476
+ padding-top: 1.5em;
2477
+ padding-bottom: 1.5em;
2478
+ margin: 0 !important;
2479
+ opacity: 1;
2480
+ width: auto;
2481
+ }
2482
+ .rx-content hr:after {
2483
+ content: "";
2484
+ position: absolute;
2485
+ top: 50%;
2486
+ width: var(--rx-line-width);
2487
+ max-width: var(--rx-line-width);
2488
+ margin-top: -calc(var(--rx-line-size)/2);
2489
+ border-top-width: var(--rx-line-size);
2490
+ border-top-style: var(--rx-line-style);
2491
+ border-top-color: var(--rx-line-color);
2492
+ }
2493
+ .rx-content .wrap-center {
2494
+ text-align: center;
2495
+ }
2496
+ .rx-content .wrap-center img {
2497
+ margin-left: auto;
2498
+ margin-right: auto;
2499
+ }
2500
+ .rx-content .wrap-center figcaption {
2501
+ text-align: center;
2502
+ margin-left: auto;
2503
+ margin-right: auto;
2504
+ }
2505
+ .rx-content .float-left {
2506
+ float: left;
2507
+ margin-right: 1em;
2508
+ margin-bottom: 1em;
2509
+ max-width: 200px;
2510
+ }
2511
+ .rx-content .float-right {
2512
+ float: right;
2513
+ margin-left: 1em;
2514
+ margin-bottom: 1em;
2515
+ max-width: 200px;
2516
+ }
2517
+ .rx-content .outset-right {
2518
+ position: relative;
2519
+ width: calc(100% + var(--rx-outset-md));
2520
+ max-width: calc(100% + var(--rx-outset-md));
2521
+ transform: translateX(var(--rx-outset-md)) translate3d(0, 0, 0);
2522
+ left: calc(var(--rx-outset-md) * -1);
2523
+ }
2524
+ .rx-content .outset-left {
2525
+ width: calc(100% + var(--rx-outset-md));
2526
+ max-width: calc(100% + var(--rx-outset-md));
2527
+ transform: translateX(calc(var(--rx-outset-md) * -1)) translate3d(0, 0, 0);
2528
+ }
2529
+ .rx-content .outset-both {
2530
+ position: relative;
2531
+ width: calc(100% + var(--rx-outset-md) + var(--rx-outset-md));
2532
+ max-width: calc(100% + var(--rx-outset-md) + var(--rx-outset-md));
2533
+ transform: translateX(-50%) translate3d(0, 0, 0);
2534
+ left: 50%;
2535
+ }