formstrap 0.3.5 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,2535 +0,0 @@
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
- }