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
@@ -1,3 +1,5 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* src/scss/formstrap.scss */
2
4
  .ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
3
5
  visibility: visible !important;
@@ -1283,6 +1285,2654 @@ span.flatpickr-weekday {
1283
1285
  transform: translate3d(0, 0, 0);
1284
1286
  }
1285
1287
  }
1288
+ :root {
1289
+ --rx-font-ui:
1290
+ -apple-system,
1291
+ BlinkMacSystemFont,
1292
+ "San Francisco",
1293
+ "Segoe UI",
1294
+ Roboto,
1295
+ "Helvetica Neue",
1296
+ sans-serif;
1297
+ --rx-font-ui-mono:
1298
+ ui-monospace,
1299
+ SFMono-Regular,
1300
+ Menlo,
1301
+ Monaco,
1302
+ Consolas,
1303
+ "Liberation Mono",
1304
+ "Courier New",
1305
+ monospace;
1306
+ --rx-rounded-sm: 3px;
1307
+ --rx-rounded-md: 6px;
1308
+ --rx-rounded-lg: 9px;
1309
+ --rx-rounded-xl: 12px;
1310
+ --rx-rounded-circle: 99px;
1311
+ --rx-level-control: 3;
1312
+ --rx-level-toolbar: 4;
1313
+ --rx-level-tooltip: 99;
1314
+ --rx-level-popup: 100;
1315
+ --rx-outset-md: 28px;
1316
+ --rx-toolbar-height: 38px;
1317
+ --rx-toolbar-padding: 2px;
1318
+ --rx-toolbar-button-width: 34px;
1319
+ --rx-toolbar-button-height: 34px;
1320
+ --rx-toolbar-icon-size: 20px;
1321
+ --rx-fg-heading: #000000;
1322
+ --rx-fg-text: rgba(0, 0, 0, 0.8);
1323
+ --rx-fg-subtle: rgba(0, 0, 0, 0.6);
1324
+ --rx-fg-placeholder: rgba(0, 0, 0, 0.5);
1325
+ --rx-bg-body: #ffffff;
1326
+ --rx-bg-source: #262626;
1327
+ --rx-bg-input: #ffffff;
1328
+ --rx-bg-input-shaded: rgba(0, 0, 0, 0.03);
1329
+ --rx-bg-input-disabled: rgba(0, 0, 0, 0.03);
1330
+ --rx-bg-base: #ffffff;
1331
+ --rx-bg-toolbar: rgba(255, 255, 255, 0.97);
1332
+ --rx-bg-toolbar-raised: rgba(255, 255, 255, 0.97);
1333
+ --rx-bg-raised: #ffffff;
1334
+ --rx-bg-overlay: #ffffff;
1335
+ --rx-bg-control: #ffffff;
1336
+ --rx-bg-control-inverted: #1f1f1f;
1337
+ --rx-bg-aluminum: #f8f8f8;
1338
+ --rx-bg-silver: #f0f0f0;
1339
+ --rx-bg-platinum: #e5e5e5;
1340
+ --rx-border-input: rgba(0, 0, 0, 0.15);
1341
+ --rx-border-focus: #73AEFF;
1342
+ --rx-fg-dark-accent: #000000;
1343
+ --rx-fg-dark-text: rgba(0, 0, 0, 0.8);
1344
+ --rx-fg-dark-subtle: rgba(0, 0, 0, 0.6);
1345
+ --rx-fg-dark-minimal: rgba(0, 0, 0, 0.5);
1346
+ --rx-fg-dark-dimmed: rgba(0, 0, 0, 0.4);
1347
+ --rx-bg-dark-dimmed: rgba(0, 0, 0, 0.03);
1348
+ --rx-bg-dark-minimal: rgba(0, 0, 0, 0.05);
1349
+ --rx-bg-dark-subtle: rgba(0, 0, 0, 0.07);
1350
+ --rx-bg-dark-medium: rgba(0, 0, 0, 0.1);
1351
+ --rx-bg-dark-strong: rgba(0, 0, 0, 0.2);
1352
+ --rx-bg-dark-emphasis: rgba(0, 0, 0, 0.25);
1353
+ --rx-bg-dark-accent: #000000;
1354
+ --rx-bg-dark-accent-hover: rgba(0, 0, 0, 0.8);
1355
+ --rx-border-dark-dimmed: rgba(0, 0, 0, 0.05);
1356
+ --rx-border-dark-minimal: rgba(0, 0, 0, 0.07);
1357
+ --rx-border-dark-subtle: rgba(0, 0, 0, 0.1);
1358
+ --rx-border-dark-medium: rgba(0, 0, 0, 0.15);
1359
+ --rx-border-dark-strong: rgba(0, 0, 0, 0.2);
1360
+ --rx-border-dark-emphasis: rgba(0, 0, 0, 0.3);
1361
+ --rx-border-dark-accent: #000000;
1362
+ --rx-fg-light-accent: #ffffff;
1363
+ --rx-fg-light-text: rgba(255, 255, 255, 0.8);
1364
+ --rx-fg-light-subtle: rgba(255, 255, 255, 0.6);
1365
+ --rx-fg-light-minimal: rgba(255, 255, 255, 0.5);
1366
+ --rx-fg-light-dimmed: rgba(255, 255, 255, 0.4);
1367
+ --rx-bg-light-dimmed: rgba(255, 255, 255, 0.03);
1368
+ --rx-bg-light-minimal: rgba(255, 255, 255, 0.05);
1369
+ --rx-bg-light-subtle: rgba(255, 255, 255, 0.07);
1370
+ --rx-bg-light-medium: rgba(255, 255, 255, 0.1);
1371
+ --rx-bg-light-strong: rgba(255, 255, 255, 0.2);
1372
+ --rx-bg-light-emphasis: rgba(255, 255, 255, 0.25);
1373
+ --rx-bg-light-accent: #ffffff;
1374
+ --rx-bg-light-accent-hover: rgba(255, 255, 255, 0.8);
1375
+ --rx-border-light-dimmed: rgba(255, 255, 255, 0.05);
1376
+ --rx-border-light-minimal: rgba(255, 255, 255, 0.07);
1377
+ --rx-border-light-subtle: rgba(255, 255, 255, 0.1);
1378
+ --rx-border-light-medium: rgba(255, 255, 255, 0.15);
1379
+ --rx-border-light-strong: rgba(255, 255, 255, 0.2);
1380
+ --rx-border-light-emphasis: rgba(255, 255, 255, 0.3);
1381
+ --rx-border-light-accent: #ffffff;
1382
+ --rx-fg-black-accent: #000000;
1383
+ --rx-fg-black-text: rgba(0, 0, 0, 0.8);
1384
+ --rx-fg-black-subtle: rgba(0, 0, 0, 0.6);
1385
+ --rx-fg-black-minimal: rgba(0, 0, 0, 0.5);
1386
+ --rx-fg-black-dimmed: rgba(0, 0, 0, 0.4);
1387
+ --rx-bg-black-dimmed: rgba(0, 0, 0, 0.03);
1388
+ --rx-bg-black-minimal: rgba(0, 0, 0, 0.05);
1389
+ --rx-bg-black-subtle: rgba(0, 0, 0, 0.07);
1390
+ --rx-bg-black-medium: rgba(0, 0, 0, 0.1);
1391
+ --rx-bg-black-strong: rgba(0, 0, 0, 0.2);
1392
+ --rx-bg-black-emphasis: rgba(0, 0, 0, 0.25);
1393
+ --rx-bg-black-accent: #000000;
1394
+ --rx-bg-black-accent-hover: rgba(0, 0, 0, 0.8);
1395
+ --rx-border-black-dimmed: rgba(0, 0, 0, 0.05);
1396
+ --rx-border-black-minimal: rgba(0, 0, 0, 0.07);
1397
+ --rx-border-black-subtle: rgba(0, 0, 0, 0.1);
1398
+ --rx-border-black-medium: rgba(0, 0, 0, 0.15);
1399
+ --rx-border-black-strong: rgba(0, 0, 0, 0.2);
1400
+ --rx-border-black-emphasis: rgba(0, 0, 0, 0.3);
1401
+ --rx-border-black-accent: #000000;
1402
+ --rx-fg-white-accent: #ffffff;
1403
+ --rx-fg-white-text: rgba(255, 255, 255, 0.8);
1404
+ --rx-fg-white-subtle: rgba(255, 255, 255, 0.6);
1405
+ --rx-fg-white-minimal: rgba(255, 255, 255, 0.5);
1406
+ --rx-fg-white-dimmed: rgba(255, 255, 255, 0.4);
1407
+ --rx-bg-white-dimmed: rgba(255, 255, 255, 0.03);
1408
+ --rx-bg-white-minimal: rgba(255, 255, 255, 0.05);
1409
+ --rx-bg-white-subtle: rgba(255, 255, 255, 0.07);
1410
+ --rx-bg-white-medium: rgba(255, 255, 255, 0.1);
1411
+ --rx-bg-white-strong: rgba(255, 255, 255, 0.2);
1412
+ --rx-bg-white-emphasis: rgba(255, 255, 255, 0.25);
1413
+ --rx-bg-white-accent: #ffffff;
1414
+ --rx-bg-white-accent-hover: rgba(255, 255, 255, 0.8);
1415
+ --rx-border-white-dimmed: rgba(255, 255, 255, 0.05);
1416
+ --rx-border-white-minimal: rgba(255, 255, 255, 0.07);
1417
+ --rx-border-white-subtle: rgba(255, 255, 255, 0.1);
1418
+ --rx-border-white-medium: rgba(255, 255, 255, 0.15);
1419
+ --rx-border-white-strong: rgba(255, 255, 255, 0.2);
1420
+ --rx-border-white-emphasis: rgba(255, 255, 255, 0.3);
1421
+ --rx-border-white-accent: #ffffff;
1422
+ --rx-fg-primary-accent: #046BFB;
1423
+ --rx-fg-primary-static: #046BFB;
1424
+ --rx-bg-primary-dimmed: rgba(115, 174, 255, 0.05);
1425
+ --rx-bg-primary-minimal: rgba(115, 174, 255, 0.1);
1426
+ --rx-bg-primary-subtle: rgba(115, 174, 255, 0.15);
1427
+ --rx-bg-primary-medium: rgba(115, 174, 255, 0.25);
1428
+ --rx-bg-primary-strong: rgba(115, 174, 255, 0.35);
1429
+ --rx-bg-primary-emphasis: rgba(115, 174, 255, 0.45);
1430
+ --rx-bg-primary-accent: #046BFB;
1431
+ --rx-bg-primary-accent-hover: rgba(4, 107, 251, 0.8);
1432
+ --rx-bg-primary-static: #046BFB;
1433
+ --rx-border-primary-dimmed: rgba(115, 174, 255, 0.1);
1434
+ --rx-border-primary-minimal: rgba(115, 174, 255, 0.15);
1435
+ --rx-border-primary-subtle: rgba(115, 174, 255, 0.25);
1436
+ --rx-border-primary-medium: rgba(115, 174, 255, 0.35);
1437
+ --rx-border-primary-strong: rgba(115, 174, 255, 0.6);
1438
+ --rx-border-primary-emphasis: rgba(115, 174, 255, 0.8);
1439
+ --rx-border-primary-accent: #046BFB;
1440
+ --rx-border-primary-static: #046BFB;
1441
+ --rx-fg-negative-accent: #DD0548;
1442
+ --rx-fg-negative-static: #DD0548;
1443
+ --rx-fg-negative-light: #FF6393;
1444
+ --rx-bg-negative-dimmed: rgba(255, 99, 147, 0.05);
1445
+ --rx-bg-negative-minimal: rgba(255, 99, 147, 0.1);
1446
+ --rx-bg-negative-subtle: rgba(255, 99, 147, 0.15);
1447
+ --rx-bg-negative-medium: rgba(255, 99, 147, 0.25);
1448
+ --rx-bg-negative-strong: rgba(255, 99, 147, 0.35);
1449
+ --rx-bg-negative-emphasis: rgba(255, 99, 147, 0.45);
1450
+ --rx-bg-negative-accent: #DD0548;
1451
+ --rx-bg-negative-accent-hover: rgba(221, 5, 72, 0.8);
1452
+ --rx-bg-negative-static: #DD0548;
1453
+ --rx-border-negative-dimmed: rgba(255, 99, 147, 0.1);
1454
+ --rx-border-negative-minimal: rgba(255, 99, 147, 0.15);
1455
+ --rx-border-negative-subtle: rgba(255, 99, 147, 0.25);
1456
+ --rx-border-negative-medium: rgba(255, 99, 147, 0.35);
1457
+ --rx-border-negative-strong: rgba(255, 99, 147, 0.6);
1458
+ --rx-border-negative-emphasis: rgba(255, 99, 147, 0.8);
1459
+ --rx-border-negative-accent: #DD0548;
1460
+ --rx-border-negative-static: #DD0548;
1461
+ --rx-link-color: #046BFB;
1462
+ --rx-link-hover-color: #000000;
1463
+ --rx-link-dark-color: #000000;
1464
+ --rx-link-dark-hover-color: rgba(0, 0, 0, 0.6);
1465
+ --rx-link-dark-subtle-color: rgba(0, 0, 0, 0.6);
1466
+ --rx-link-dark-subtle-hover-color: #000000;
1467
+ --rx-shadow-modal: 0 0 1px rgba(0, 0, 0, 0.25), 0 20px 60px rgba(0, 0, 0, 0.15);
1468
+ --rx-shadow-dropdown:
1469
+ 0 0 1px rgba(0, 0, 0, 0.25),
1470
+ 0 10px 25px -5px rgba(0, 0, 0, 0.07),
1471
+ 0 8px 16px -8px rgba(0, 0, 0, 0.07);
1472
+ --rx-shadow-context:
1473
+ 0 0 1px rgba(0, 0, 0, 0.25),
1474
+ 0 3px 6px -1px rgba(0, 0, 0, 0.1),
1475
+ 0 1px 3px -1px rgba(0, 0, 0, 0.2);
1476
+ --rx-shadow-control: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06);
1477
+ --rx-shadow-toolbar-raised: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
1478
+ --rx-shadow-reorder: 0 15px 30px rgba(0, 0, 0, 0.3);
1479
+ --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);
1480
+ --rx-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, 0.15);
1481
+ --rx-shadow-handle:
1482
+ 0 1px 1px -0.5px rgba(0, 0, 0, 0.12),
1483
+ 0 3px 3px -1.5px rgba(0, 0, 0, 0.12),
1484
+ 0 6px 6px -3px rgba(0, 0, 0, 0.12);
1485
+ --rx-shadow-action: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
1486
+ }
1487
+ [rx-data-theme=dark] {
1488
+ --rx-fg-heading: rgba(255, 255, 255, 0.85);
1489
+ --rx-fg-text: rgba(255, 255, 255, 0.8);
1490
+ --rx-fg-subtle: rgba(255, 255, 255, 0.6);
1491
+ --rx-fg-placeholder: rgba(255, 255, 255, 0.5);
1492
+ --rx-bg-body: #141414;
1493
+ --rx-bg-input: #1f1f1f;
1494
+ --rx-bg-input-shaded: rgba(255, 255, 255, 0.05);
1495
+ --rx-bg-input-disabled: rgba(255, 255, 255, 0.05);
1496
+ --rx-bg-base: #141414;
1497
+ --rx-bg-raised: #1f1f1f;
1498
+ --rx-bg-toolbar: rgba(26, 26, 26, 0.97);
1499
+ --rx-bg-toolbar-raised: rgba(26, 26, 26, 0.97);
1500
+ --rx-bg-overlay: #1f1f1f;
1501
+ --rx-bg-control: #1f1f1f;
1502
+ --rx-bg-aluminum: #1a1a1a;
1503
+ --rx-bg-silver: #1f1f1f;
1504
+ --rx-bg-platinum: #262626;
1505
+ --rx-border-input: rgba(255, 255, 255, 0.15);
1506
+ --rx-border-focus: #73AEFF;
1507
+ --rx-fg-dark-accent: rgba(255, 255, 255, 0.8);
1508
+ --rx-fg-dark-text: rgba(255, 255, 255, 0.8);
1509
+ --rx-fg-dark-subtle: rgba(255, 255, 255, 0.6);
1510
+ --rx-fg-dark-minimal: rgba(255, 255, 255, 0.5);
1511
+ --rx-fg-dark-dimmed: rgba(255, 255, 255, 0.4);
1512
+ --rx-bg-dark-dimmed: rgba(255, 255, 255, 0.03);
1513
+ --rx-bg-dark-minimal: rgba(255, 255, 255, 0.05);
1514
+ --rx-bg-dark-subtle: rgba(255, 255, 255, 0.07);
1515
+ --rx-bg-dark-medium: rgba(255, 255, 255, 0.1);
1516
+ --rx-bg-dark-strong: rgba(255, 255, 255, 0.2);
1517
+ --rx-bg-dark-emphasis: rgba(255, 255, 255, 0.25);
1518
+ --rx-bg-dark-accent: rgba(255, 255, 255, 0.8);
1519
+ --rx-bg-dark-accent-hover: white;
1520
+ --rx-border-dark-dimmed: rgba(255, 255, 255, 0.05);
1521
+ --rx-border-dark-minimal: rgba(255, 255, 255, 0.07);
1522
+ --rx-border-dark-subtle: rgba(255, 255, 255, 0.1);
1523
+ --rx-border-dark-medium: rgba(255, 255, 255, 0.15);
1524
+ --rx-border-dark-strong: rgba(255, 255, 255, 0.2);
1525
+ --rx-border-dark-emphasis: rgba(255, 255, 255, 0.3);
1526
+ --rx-border-dark-accent: #ffffff;
1527
+ --rx-fg-light-accent: rgba(0, 0, 0, 0.8);
1528
+ --rx-fg-light-text: rgba(0, 0, 0, 0.8);
1529
+ --rx-fg-light-subtle: rgba(0, 0, 0, 0.6);
1530
+ --rx-fg-light-minimal: rgba(0, 0, 0, 0.5);
1531
+ --rx-fg-light-dimmed: rgba(0, 0, 0, 0.4);
1532
+ --rx-bg-light-dimmed: rgba(0, 0, 0, 0.03);
1533
+ --rx-bg-light-minimal: rgba(0, 0, 0, 0.05);
1534
+ --rx-bg-light-subtle: rgba(0, 0, 0, 0.07);
1535
+ --rx-bg-light-medium: rgba(0, 0, 0, 0.1);
1536
+ --rx-bg-light-strong: rgba(0, 0, 0, 0.2);
1537
+ --rx-bg-light-emphasis: rgba(0, 0, 0, 0.25);
1538
+ --rx-bg-light-accent: rgba(0, 0, 0, 0.8);
1539
+ --rx-bg-light-accent-hover: black;
1540
+ --rx-border-light-dimmed: rgba(0, 0, 0, 0.05);
1541
+ --rx-border-light-minimal: rgba(0, 0, 0, 0.07);
1542
+ --rx-border-light-subtle: rgba(0, 0, 0, 0.1);
1543
+ --rx-border-light-medium: rgba(0, 0, 0, 0.15);
1544
+ --rx-border-light-strong: rgba(0, 0, 0, 0.2);
1545
+ --rx-border-light-emphasis: rgba(0, 0, 0, 0.3);
1546
+ --rx-border-light-accent: #000000;
1547
+ --rx-fg-primary-accent: #73AEFF;
1548
+ --rx-border-primary-accent: #73AEFF;
1549
+ --rx-fg-negative-accent: #FF6393;
1550
+ --rx-border-negative-accent: #FF6393;
1551
+ --rx-link-color: #73AEFF;
1552
+ --rx-link-hover-color: #ffffff;
1553
+ --rx-link-dark-color: #ffffff;
1554
+ --rx-link-dark-hover-color: rgba(255, 255, 255, 0.6);
1555
+ --rx-link-dark-subtle-color: rgba(255, 255, 255, 0.6);
1556
+ --rx-link-dark-subtle-hover-color: #ffffff;
1557
+ --rx-shadow-modal: 0 0 1px rgba(255, 255, 255, 0.5), 0 20px 60px rgba(0, 0, 0, 0.15);
1558
+ --rx-shadow-dropdown:
1559
+ 0 0 1px rgba(255, 255, 255, 0.5),
1560
+ 0 10px 25px -5px rgba(0, 0, 0, 0.07),
1561
+ 0 8px 16px -8px rgba(0, 0, 0, 0.07);
1562
+ --rx-shadow-context:
1563
+ 0 0 1px rgba(255, 255, 255, 0.5),
1564
+ 0 3px 6px -1px rgba(0, 0, 0, 0.1),
1565
+ 0 1px 3px -1px rgba(0, 0, 0, 0.2);
1566
+ }
1567
+ @keyframes slideUp {
1568
+ to {
1569
+ height: 0;
1570
+ padding-top: 0;
1571
+ padding-bottom: 0;
1572
+ margin-bottom: 0;
1573
+ }
1574
+ }
1575
+ @keyframes slideDown {
1576
+ from {
1577
+ height: 0;
1578
+ padding-top: 0;
1579
+ padding-bottom: 0;
1580
+ margin-bottom: 0;
1581
+ }
1582
+ }
1583
+ @keyframes fadeIn {
1584
+ from {
1585
+ opacity: 0;
1586
+ }
1587
+ to {
1588
+ opacity: 1;
1589
+ }
1590
+ }
1591
+ @keyframes fadeOut {
1592
+ from {
1593
+ opacity: 1;
1594
+ }
1595
+ to {
1596
+ opacity: 0;
1597
+ }
1598
+ }
1599
+ @keyframes progress-bar-stripes {
1600
+ from {
1601
+ background-position: 40px 0;
1602
+ }
1603
+ to {
1604
+ background-position: 0 0;
1605
+ }
1606
+ }
1607
+ .rx-container {
1608
+ position: relative;
1609
+ box-sizing: border-box;
1610
+ }
1611
+ .rx-container.rx-fullscreen {
1612
+ position: fixed;
1613
+ top: 0px;
1614
+ left: 0px;
1615
+ width: 100%;
1616
+ height: 100%;
1617
+ z-index: 10000;
1618
+ overflow-x: auto;
1619
+ }
1620
+ .rx-main-container {
1621
+ border-radius: var(--rx-rounded-sm);
1622
+ background-color: var(--rx-bg-base);
1623
+ border: 1px solid var(--rx-border-dark-subtle);
1624
+ }
1625
+ .rx-stop-scrolling {
1626
+ height: 100%;
1627
+ overflow: hidden;
1628
+ }
1629
+ .rx-editor-frame {
1630
+ width: 100%;
1631
+ height: 0;
1632
+ border: none;
1633
+ background-color: var(--rx-bg-base);
1634
+ margin-left: auto;
1635
+ margin-right: auto;
1636
+ display: block;
1637
+ }
1638
+ .rx-editor-container {
1639
+ box-sizing: border-box;
1640
+ }
1641
+ .rx-editor-disabled {
1642
+ opacity: 0.4;
1643
+ }
1644
+ .rx-editor-disabled img {
1645
+ filter: grayscale(1);
1646
+ }
1647
+ .rx-editor-overlay {
1648
+ width: 100%;
1649
+ height: 100%;
1650
+ content: "";
1651
+ position: absolute;
1652
+ z-index: 1;
1653
+ background: transparent;
1654
+ top: 0;
1655
+ left: 0;
1656
+ }
1657
+ .rx-toolbox-container {
1658
+ background: var(--rx-bg-toolbar);
1659
+ z-index: var(--rx-level-toolbar);
1660
+ }
1661
+ .rx-editor-breakline table + *,
1662
+ .rx-editor-breakline blockquote + *,
1663
+ .rx-editor-breakline figure + *,
1664
+ .rx-editor-breakline > div + *,
1665
+ .rx-editor-breakline p + *,
1666
+ .rx-editor-breakline ul + *,
1667
+ .rx-editor-breakline ol + *,
1668
+ .rx-editor-breakline pre + *,
1669
+ .rx-editor-breakline dl + *,
1670
+ .rx-editor-breakline address + * {
1671
+ margin-top: 0 !important;
1672
+ }
1673
+ .rx-editor-breakline h1 + h2,
1674
+ .rx-editor-breakline h2 + h3,
1675
+ .rx-editor-breakline h3 + h4,
1676
+ .rx-editor-breakline h4 + h5,
1677
+ .rx-editor-breakline h5 + h6 {
1678
+ margin-top: 0 !important;
1679
+ }
1680
+ .rx-editor *,
1681
+ .rx-editor *::before,
1682
+ .rx-editor *::after {
1683
+ box-sizing: inherit;
1684
+ }
1685
+ .rx-editor {
1686
+ margin-left: auto;
1687
+ margin-right: auto;
1688
+ box-sizing: border-box;
1689
+ }
1690
+ .rx-editor *[dir=rtl] {
1691
+ text-align: right;
1692
+ }
1693
+ .rx-editor *[dir=ltr] {
1694
+ text-align: left;
1695
+ }
1696
+ .rx-editor,
1697
+ .rx-editor [data-rx-type],
1698
+ .rx-editor a,
1699
+ .rx-editor p,
1700
+ .rx-editor figcaption,
1701
+ .rx-editor td,
1702
+ .rx-editor th {
1703
+ outline: none;
1704
+ }
1705
+ .rx-editor [data-rx-tag=tbr],
1706
+ .rx-editor [data-rx-tag=br] {
1707
+ margin-top: 0;
1708
+ }
1709
+ .rx-editor [data-rx-tag=tbr]:empty,
1710
+ .rx-editor [data-rx-tag=br]:empty,
1711
+ .rx-editor [data-rx-type=text]:empty,
1712
+ .rx-editor [data-rx-type=todoitem] div:empty {
1713
+ min-width: 1em;
1714
+ min-height: 1.5em;
1715
+ }
1716
+ .rx-editor::after {
1717
+ content: "";
1718
+ clear: both;
1719
+ display: table;
1720
+ }
1721
+ .rx-editor [data-rx-type=embed],
1722
+ .rx-editor [data-rx-type=image] {
1723
+ position: relative;
1724
+ }
1725
+ .rx-editor [data-rx-type=embed] img,
1726
+ .rx-editor [data-rx-type=image] img {
1727
+ vertical-align: middle;
1728
+ }
1729
+ .rx-editor figure > img,
1730
+ .rx-editor figure > a img,
1731
+ .rx-editor figure > iframe,
1732
+ .rx-editor figure > pre,
1733
+ .rx-editor figure > div {
1734
+ vertical-align: middle;
1735
+ }
1736
+ .rx-editor [data-rx-focusable].rx-block-focus {
1737
+ outline: 2px solid var(--rx-border-focus) !important;
1738
+ }
1739
+ .rx-editor .rx-block-control-focus {
1740
+ outline: 1px solid var(--rx-border-focus) !important;
1741
+ outline-offset: 1px;
1742
+ }
1743
+ .rx-editor [data-rx-type=wrapper]:empty {
1744
+ outline: 1px dashed var(--rx-border-dark-medium);
1745
+ outline-offset: 1px;
1746
+ }
1747
+ .rx-editor [data-rx-type=heading] a {
1748
+ text-decoration: underline;
1749
+ }
1750
+ .rx-editor .rx-layout-grid {
1751
+ display: flex;
1752
+ flex-direction: row;
1753
+ gap: 24px;
1754
+ }
1755
+ .rx-editor [data-rx-type=column] {
1756
+ outline: 1px dashed var(--rx-border-dark-strong);
1757
+ }
1758
+ .rx-editor.rx-editor-email [data-rx-type=column] {
1759
+ outline: none;
1760
+ }
1761
+ .rx-editor.rx-editor-email [data-rx-type=column]:hover,
1762
+ .rx-editor.rx-editor-email [data-rx-type=column]:has(p:empty) {
1763
+ outline: 1px dashed var(--rx-border-dark-strong);
1764
+ }
1765
+ .rx-editor [data-rx-type=embed] {
1766
+ position: relative;
1767
+ }
1768
+ .rx-editor [data-rx-type=embed]:before {
1769
+ width: 100%;
1770
+ height: 100%;
1771
+ content: "";
1772
+ position: absolute;
1773
+ z-index: 1;
1774
+ }
1775
+ .rx-editor [data-rx-type=embed] iframe {
1776
+ display: inline-block;
1777
+ }
1778
+ .rx-editor [data-rx-type=embed] figcaption {
1779
+ position: relative;
1780
+ top: 0;
1781
+ z-index: 2;
1782
+ }
1783
+ .rx-editor .rx-embed-placeholder {
1784
+ text-align: center;
1785
+ border: 1px dashed var(--rx-border-dark-medium);
1786
+ border-radius: var(--rx-rounded-md);
1787
+ padding: 40px 20px;
1788
+ font-size: 14px;
1789
+ color: var(--rx-fg-placeholder);
1790
+ }
1791
+ .rx-editor [data-rx-type=todo] {
1792
+ --rx-todo-size: 20px;
1793
+ --rx-todo-mark-color: var(--rx-fg-light-accent);
1794
+ --rx-todo-border-color: var(--rx-border-input);
1795
+ --rx-todo-bg: var(--rx-bg-input);
1796
+ --rx-todo-checked-border-color: var(--rx-border-dark-accent);
1797
+ --rx-todo-checked-bg: var(--rx-bg-dark-accent);
1798
+ margin-left: 0;
1799
+ list-style: none;
1800
+ display: flex;
1801
+ flex-direction: column;
1802
+ gap: 8px;
1803
+ }
1804
+ .rx-editor [data-rx-type=todoitem] {
1805
+ display: flex;
1806
+ gap: 6px;
1807
+ cursor: text;
1808
+ }
1809
+ .rx-editor [data-rx-type=todoitem] input {
1810
+ position: relative;
1811
+ top: 1px;
1812
+ appearance: none;
1813
+ display: inline-block;
1814
+ padding: 0;
1815
+ box-shadow: none;
1816
+ width: var(--rx-todo-size);
1817
+ height: var(--rx-todo-size);
1818
+ cursor: pointer;
1819
+ }
1820
+ .rx-editor [data-rx-type=todoitem] input:before {
1821
+ content: "";
1822
+ display: block;
1823
+ width: var(--rx-todo-size);
1824
+ height: var(--rx-todo-size);
1825
+ border: 1px solid var(--rx-todo-border-color);
1826
+ border-radius: 6px;
1827
+ background: var(--rx-todo-bg);
1828
+ }
1829
+ .rx-editor [data-rx-type=todoitem] input:after {
1830
+ content: "";
1831
+ position: absolute;
1832
+ top: 50%;
1833
+ left: 50%;
1834
+ width: calc(var(--rx-todo-size) / 3.5);
1835
+ height: calc(var(--rx-todo-size) / 1.8);
1836
+ background-color: transparent;
1837
+ transform: translate(-50%, -85%) scale(0) rotate(45deg);
1838
+ }
1839
+ .rx-editor [data-rx-type=todoitem] input:checked:before {
1840
+ border-color: var(--rx-todo-checked-border-color);
1841
+ background-color: var(--rx-todo-checked-bg);
1842
+ box-shadow: var(--rx-todo-checked-shadow);
1843
+ }
1844
+ .rx-editor [data-rx-type=todoitem] input:checked:after {
1845
+ transform: translate(-50%, -85%) scale(1) rotate(45deg);
1846
+ box-shadow: 2px 2px 0px 0px var(--rx-todo-mark-color);
1847
+ }
1848
+ .rx-editor [data-rx-type=todoitem] div {
1849
+ outline: none;
1850
+ line-height: 1.4;
1851
+ }
1852
+ .rx-editor [data-rx-type=mergetag] {
1853
+ font-family: var(--rx-font-ui-mono);
1854
+ font-size: 85%;
1855
+ line-height: 1;
1856
+ display: inline-block;
1857
+ cursor: pointer;
1858
+ padding: 4px 8px;
1859
+ color: var(--rx-fg-dark-accent);
1860
+ background: var(--rx-bg-primary-medium);
1861
+ border-radius: 8px;
1862
+ }
1863
+ .rx-editor [data-rx-type=mergetag]:hover {
1864
+ color: var(--rx-fg-dark-accent);
1865
+ background: var(--rx-bg-primary-strong);
1866
+ }
1867
+ .rx-editor [data-rx-type=mergetag].rx-block-focus {
1868
+ color: var(--rx-fg-dark-accent);
1869
+ background: var(--rx-bg-primary-emphasis);
1870
+ }
1871
+ .rx-editor .rx-block-placeholder {
1872
+ position: relative;
1873
+ }
1874
+ .rx-editor .rx-block-placeholder:before {
1875
+ position: absolute;
1876
+ }
1877
+ .rx-editor .rx-block-placeholder:before,
1878
+ .rx-editor [data-placeholder]:empty:before {
1879
+ content: attr(data-placeholder);
1880
+ display: inline-block;
1881
+ color: var(--rx-fg-placeholder);
1882
+ font-weight: normal;
1883
+ font-style: italic;
1884
+ font-size: inherit;
1885
+ cursor: text;
1886
+ max-height: 20px;
1887
+ }
1888
+ .rx-editor [data-placeholder]:empty:focus:before {
1889
+ content: "";
1890
+ }
1891
+ .rx-editor.rx-placeholder:before {
1892
+ position: absolute;
1893
+ z-index: 0;
1894
+ content: attr(placeholder);
1895
+ color: var(--rx-fg-placeholder);
1896
+ font-weight: normal;
1897
+ cursor: text;
1898
+ }
1899
+ .rx-in-blur .rx-editor [data-rx-focusable].rx-block-focus {
1900
+ outline-color: var(--rx-border-dark-medium) !important;
1901
+ }
1902
+ .rx-draggable-placeholder {
1903
+ height: 20px;
1904
+ min-width: 80px;
1905
+ outline: 3px dashed gold !important;
1906
+ background: rgba(255, 215, 0, 0.2) !important;
1907
+ margin-bottom: 20px;
1908
+ }
1909
+ .rx-toolbar-container {
1910
+ display: flex;
1911
+ white-space: nowrap;
1912
+ overflow-x: scroll;
1913
+ overflow-y: hidden;
1914
+ scrollbar-width: none;
1915
+ -ms-overflow-style: none;
1916
+ }
1917
+ .rx-toolbar-container::-webkit-scrollbar {
1918
+ width: 0;
1919
+ height: 0;
1920
+ }
1921
+ .rx-toolbar-container:empty {
1922
+ display: none;
1923
+ }
1924
+ .rx-sticky {
1925
+ position: -webkit-sticky;
1926
+ position: sticky;
1927
+ top: 0;
1928
+ }
1929
+ .rx-sticky-on {
1930
+ border-bottom: 1px solid var(--rx-border-dark-minimal);
1931
+ }
1932
+ .rx-raised {
1933
+ margin-left: -1px;
1934
+ margin-right: -1px;
1935
+ margin-top: -1px;
1936
+ margin-bottom: -1px;
1937
+ background: var(--rx-bg-toolbar-raised);
1938
+ box-shadow: var(--rx-shadow-toolbar-raised);
1939
+ border-top-left-radius: 3px;
1940
+ border-top-right-radius: 3px;
1941
+ }
1942
+ .rx-toolbox-external.rx-raised {
1943
+ margin: 0;
1944
+ }
1945
+ .rx-raised.rx-sticky-on {
1946
+ border-bottom: none;
1947
+ }
1948
+ .rx-toolbar-buttons,
1949
+ .rx-extrabar-buttons {
1950
+ display: flex;
1951
+ white-space: nowrap;
1952
+ align-items: center;
1953
+ gap: 1px;
1954
+ }
1955
+ .rx-toolbar,
1956
+ .rx-extrabar {
1957
+ padding: var(--rx-toolbar-padding);
1958
+ height: var(--rx-toolbar-height);
1959
+ }
1960
+ .rx-toolbar {
1961
+ order: 1;
1962
+ flex: 1;
1963
+ }
1964
+ .rx-extrabar {
1965
+ order: 2;
1966
+ }
1967
+ .rx-toolbar .rx-button,
1968
+ .rx-extrabar .rx-button {
1969
+ width: var(--rx-toolbar-button-width);
1970
+ height: var(--rx-toolbar-button-height);
1971
+ }
1972
+ .rx-toolbar .rx-button:hover .rx-button-icon,
1973
+ .rx-extrabar .rx-button:hover .rx-button-icon {
1974
+ background: var(--rx-bg-dark-subtle);
1975
+ }
1976
+ .rx-toolbar .rx-button.active .rx-button-icon,
1977
+ .rx-extrabar .rx-button.active .rx-button-icon {
1978
+ background: var(--rx-bg-primary-subtle);
1979
+ }
1980
+ .rx-toolbar .rx-button.toggled .rx-button-icon,
1981
+ .rx-extrabar .rx-button.toggled .rx-button-icon {
1982
+ background: var(--rx-bg-dark-subtle);
1983
+ }
1984
+ .rx-toolbar .rx-button.toggled .rx-button-icon svg,
1985
+ .rx-extrabar .rx-button.toggled .rx-button-icon svg {
1986
+ fill: var(--rx-fg-dark-accent);
1987
+ }
1988
+ .rx-toolbar .rx-button.disable,
1989
+ .rx-extrabar .rx-button.disable {
1990
+ cursor: default;
1991
+ }
1992
+ .rx-toolbar .rx-button.disable .rx-button-icon,
1993
+ .rx-extrabar .rx-button.disable .rx-button-icon {
1994
+ background-color: transparent !important;
1995
+ }
1996
+ .rx-toolbar .rx-button.disable .rx-button-icon svg,
1997
+ .rx-extrabar .rx-button.disable .rx-button-icon svg {
1998
+ fill: var(--rx-fg-dark-dimmed);
1999
+ }
2000
+ .rx-toolbar .rx-button-icon,
2001
+ .rx-extrabar .rx-button-icon {
2002
+ width: var(--rx-toolbar-button-width);
2003
+ min-width: var(--rx-toolbar-button-width);
2004
+ height: var(--rx-toolbar-button-height);
2005
+ border-radius: var(--rx-rounded-md);
2006
+ }
2007
+ .rx-toolbar .rx-button-icon svg,
2008
+ .rx-extrabar .rx-button-icon svg {
2009
+ fill: var(--rx-fg-dark-text);
2010
+ width: var(--rx-toolbar-icon-size);
2011
+ height: var(--rx-toolbar-icon-size);
2012
+ }
2013
+ .rx-toolbar .rx-button-title,
2014
+ .rx-extrabar .rx-button-title {
2015
+ display: none;
2016
+ }
2017
+ .rx-pathbar {
2018
+ font-family: var(--rx-font-ui-text);
2019
+ margin: 0;
2020
+ padding: 0 8px;
2021
+ position: relative;
2022
+ overflow: hidden;
2023
+ background: var(--rx-bg-toolbar);
2024
+ box-sizing: border-box;
2025
+ border: none;
2026
+ display: flex;
2027
+ gap: 12px;
2028
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
2029
+ }
2030
+ .rx-pathbar:empty {
2031
+ display: none;
2032
+ }
2033
+ .rx-pathbar.disable .rx-pathbar-item {
2034
+ opacity: 0.5;
2035
+ }
2036
+ .rx-pathbar-item {
2037
+ position: relative;
2038
+ font-size: 12px;
2039
+ padding: 6px 0;
2040
+ margin: 0;
2041
+ line-height: 16px;
2042
+ color: var(--rx-fg-dark-minimal);
2043
+ cursor: pointer;
2044
+ }
2045
+ .rx-pathbar-item:hover {
2046
+ color: var(--rx-fg-dark-accent);
2047
+ text-decoration: underline;
2048
+ }
2049
+ .rx-pathbar-item.active,
2050
+ .rx-pathbar-item.active:hover {
2051
+ color: var(--rx-fg-dark-accent);
2052
+ text-decoration: none;
2053
+ cursor: text;
2054
+ }
2055
+ .rx-pathbar-item:after {
2056
+ position: absolute;
2057
+ content: "-";
2058
+ width: 8px;
2059
+ padding-left: 3px;
2060
+ font-size: 12px;
2061
+ line-height: 16px;
2062
+ color: var(--rx-fg-dark-minimal);
2063
+ }
2064
+ .rx-pathbar-item:last-child:after {
2065
+ display: none;
2066
+ }
2067
+ .rx-statusbar {
2068
+ font-family: var(--rx-font-ui-mono);
2069
+ margin: 0;
2070
+ padding: 8px 10px;
2071
+ position: relative;
2072
+ overflow: hidden;
2073
+ background: var(--rx-bg-base);
2074
+ box-sizing: border-box;
2075
+ border: none;
2076
+ display: flex;
2077
+ align-items: center;
2078
+ gap: 10px;
2079
+ }
2080
+ .rx-statusbar:empty {
2081
+ display: none;
2082
+ }
2083
+ .rx-statusbar.disable .rx-statusbar-item {
2084
+ opacity: 0.5;
2085
+ }
2086
+ .rx-statusbar-item {
2087
+ font-size: 12px;
2088
+ padding: 0;
2089
+ margin: 0;
2090
+ line-height: 16px;
2091
+ color: var(--rx-fg-text);
2092
+ }
2093
+ .rx-statusbar-item:after {
2094
+ content: "";
2095
+ display: inline-block;
2096
+ position: relative;
2097
+ top: 2px;
2098
+ width: 1px;
2099
+ height: 12px;
2100
+ margin-left: 10px;
2101
+ background: var(--rx-border-dark-medium);
2102
+ }
2103
+ .rx-statusbar-item:last-child:after {
2104
+ display: none;
2105
+ }
2106
+ .rx-statusbar-item a {
2107
+ color: var(--rx-fg-dark-accent);
2108
+ text-decoration: underline;
2109
+ }
2110
+ .rx-statusbar-item a:hover {
2111
+ color: var(--rx-fg-dark-minimal);
2112
+ text-decoration: underline;
2113
+ }
2114
+ .rx-fullscreen .rx-statusbar {
2115
+ position: fixed;
2116
+ bottom: 0;
2117
+ width: 100%;
2118
+ }
2119
+ .rx-control {
2120
+ position: absolute;
2121
+ top: 0;
2122
+ left: 0;
2123
+ font-family: var(--rx-font-text);
2124
+ z-index: var(--rx-level-control);
2125
+ padding: 0;
2126
+ margin: 0;
2127
+ box-sizing: border-box;
2128
+ width: 28px;
2129
+ line-height: 0;
2130
+ }
2131
+ .rx-control-buttons {
2132
+ display: flex;
2133
+ gap: 0;
2134
+ flex-direction: column;
2135
+ flex-wrap: wrap;
2136
+ }
2137
+ .rx-control .rx-button {
2138
+ background: var(--rx-bg-control);
2139
+ }
2140
+ .rx-control .rx-button:hover {
2141
+ background: var(--rx-bg-platinum);
2142
+ }
2143
+ .rx-control .rx-button-title {
2144
+ display: none;
2145
+ }
2146
+ .rx-control .rx-button-icon {
2147
+ width: 28px;
2148
+ height: 28px;
2149
+ }
2150
+ .rx-control .rx-button-icon svg {
2151
+ fill: var(--rx-fg-dark-accent);
2152
+ width: 14px;
2153
+ height: 14px;
2154
+ }
2155
+ .rx-context {
2156
+ font-family: var(--rx-font-text);
2157
+ position: absolute;
2158
+ top: 0;
2159
+ left: 0;
2160
+ z-index: var(--rx-level-toolbar);
2161
+ border-radius: var(--rx-rounded-sm);
2162
+ padding: 2px;
2163
+ margin: 0;
2164
+ line-height: 1;
2165
+ background: var(--rx-bg-control);
2166
+ background: var(--rx-bg-control-inverted);
2167
+ box-shadow: var(--rx-shadow-context);
2168
+ max-width: 380px;
2169
+ }
2170
+ .rx-context-buttons {
2171
+ display: flex;
2172
+ align-items: center;
2173
+ gap: 1px;
2174
+ flex-wrap: wrap;
2175
+ }
2176
+ .rx-context .rx-button {
2177
+ width: 28px;
2178
+ height: 28px;
2179
+ }
2180
+ .rx-context .rx-button:hover .rx-button-icon {
2181
+ background: var(--rx-bg-white-medium);
2182
+ }
2183
+ .rx-context .rx-button:hover .rx-button-icon svg {
2184
+ fill: var(--rx-fg-white-accent);
2185
+ }
2186
+ .rx-context .rx-button.active .rx-button-icon {
2187
+ background: var(--rx-bg-primary-medium);
2188
+ }
2189
+ .rx-context .rx-button.toggled .rx-button-icon {
2190
+ background: var(--rx-bg-dark-strong);
2191
+ }
2192
+ .rx-context .rx-button.toggled .rx-button-icon svg {
2193
+ fill: var(--rx-fg-white-accent);
2194
+ }
2195
+ .rx-context .rx-button.disable {
2196
+ cursor: default;
2197
+ }
2198
+ .rx-context .rx-button.disable .rx-button-icon {
2199
+ background-color: transparent !important;
2200
+ }
2201
+ .rx-context .rx-button.disable .rx-button-icon svg {
2202
+ fill: var(--rx-fg-dark-dimmed);
2203
+ }
2204
+ .rx-context .rx-button-icon {
2205
+ width: 28px;
2206
+ min-width: 28px;
2207
+ height: 28px;
2208
+ border-radius: var(--rx-rounded-sm);
2209
+ }
2210
+ .rx-context .rx-button-icon svg {
2211
+ fill: var(--rx-fg-white-text);
2212
+ width: 18px;
2213
+ height: 18px;
2214
+ }
2215
+ .rx-context .rx-button-title {
2216
+ display: none;
2217
+ }
2218
+ .rx-context .rx-button-text {
2219
+ width: auto;
2220
+ }
2221
+ .rx-context .rx-button-text .rx-button-icon {
2222
+ display: none;
2223
+ }
2224
+ .rx-context .rx-button-text .rx-button-title {
2225
+ font-size: 13px;
2226
+ font-weight: 400;
2227
+ line-height: 1;
2228
+ height: 28px;
2229
+ padding: 0 6px;
2230
+ color: var(--rx-fg-white-text);
2231
+ border-radius: var(--rx-rounded-sm);
2232
+ display: flex;
2233
+ align-items: center;
2234
+ vertical-align: baseline;
2235
+ }
2236
+ .rx-context .rx-button-text:hover .rx-button-title {
2237
+ background-color: var(--rx-bg-white-medium);
2238
+ }
2239
+ .rx-button {
2240
+ font-family: var(--rx-font-text);
2241
+ display: flex;
2242
+ align-items: center;
2243
+ vertical-align: middle;
2244
+ text-decoration: none;
2245
+ background: none;
2246
+ outline: none;
2247
+ margin: 0;
2248
+ padding: 0;
2249
+ box-sizing: border-box;
2250
+ font-size: 0px;
2251
+ line-height: 1;
2252
+ cursor: pointer;
2253
+ gap: 6px;
2254
+ border-radius: var(--rx-rounded-md);
2255
+ }
2256
+ .rx-button:hover {
2257
+ text-decoration: none;
2258
+ }
2259
+ .rx-button-icon {
2260
+ display: flex;
2261
+ justify-content: center;
2262
+ align-items: center;
2263
+ vertical-align: middle;
2264
+ }
2265
+ .rx-button-icon:empty {
2266
+ display: none;
2267
+ }
2268
+ .rx-button-title {
2269
+ font-size: 14px;
2270
+ font-weight: normal;
2271
+ line-height: 1.4;
2272
+ color: var(--rx-fg-dark-text);
2273
+ }
2274
+ .rx-tooltip {
2275
+ position: absolute;
2276
+ z-index: 99;
2277
+ margin: 0;
2278
+ padding: 4px 7px;
2279
+ border-radius: var(--rx-rounded-sm);
2280
+ line-height: 1;
2281
+ font-family: var(--rx-font-ui-mono);
2282
+ font-size: 12px;
2283
+ color: var(--rx-fg-light-text);
2284
+ background: var(--rx-bg-dark-accent);
2285
+ }
2286
+ .rx-source-container {
2287
+ display: none;
2288
+ }
2289
+ .rx-source,
2290
+ .rx-source:hover,
2291
+ .rx-source:focus {
2292
+ text-align: left;
2293
+ box-sizing: border-box;
2294
+ font-family: var(--rx-font-ui-mono);
2295
+ width: 100%;
2296
+ display: block;
2297
+ margin: 0;
2298
+ border: none;
2299
+ box-shadow: none;
2300
+ border-radius: 0;
2301
+ background-color: var(--rx-bg-source);
2302
+ color: var(--rx-fg-white-text);
2303
+ font-size: 14px;
2304
+ line-height: 1.7;
2305
+ outline: none;
2306
+ padding: 10px 18px 20px 18px;
2307
+ min-height: 60px;
2308
+ resize: vertical;
2309
+ }
2310
+ .rx-drag-active {
2311
+ outline: 3px dashed gold !important;
2312
+ outline-offset: 0 !important;
2313
+ position: relative;
2314
+ max-height: 40px;
2315
+ overflow: hidden;
2316
+ padding: 0;
2317
+ }
2318
+ .rx-drag-active:before {
2319
+ width: 100%;
2320
+ height: 100%;
2321
+ content: "";
2322
+ top: 0;
2323
+ left: 0;
2324
+ background: rgba(255, 215, 0, 0.4);
2325
+ position: absolute;
2326
+ z-index: 1;
2327
+ }
2328
+ .rx-dragging {
2329
+ opacity: 0.95;
2330
+ padding: 8px;
2331
+ background: var(--rx-bg-body);
2332
+ box-shadow: var(--rx-shadow-reorder);
2333
+ }
2334
+ .rx-dragging img {
2335
+ max-width: 100%;
2336
+ }
2337
+ .rx-dropdown,
2338
+ .rx-colorpicker {
2339
+ position: absolute;
2340
+ font-family: var(--rx-font-ui);
2341
+ border-radius: var(--rx-rounded-sm);
2342
+ background: var(--rx-bg-overlay);
2343
+ box-shadow: var(--rx-shadow-dropdown);
2344
+ position: absolute;
2345
+ top: 0;
2346
+ left: 0;
2347
+ font-size: 14px;
2348
+ line-height: 1.4;
2349
+ z-index: var(--rx-level-popup);
2350
+ margin-bottom: 16px;
2351
+ overflow-x: auto;
2352
+ min-width: 200px;
2353
+ padding: 4px;
2354
+ }
2355
+ .rx-dropdown[data-rx-pos=top] {
2356
+ box-shadow: none;
2357
+ }
2358
+ .rx-dropdown-swatches {
2359
+ display: flex;
2360
+ flex-wrap: nowrap;
2361
+ }
2362
+ .rx-dropdown-swatches-wrap {
2363
+ flex-wrap: wrap;
2364
+ }
2365
+ .rx-dropdown-swatches-colors {
2366
+ display: flex;
2367
+ flex-direction: column;
2368
+ }
2369
+ .rx-dropdown-swatches-colors-row {
2370
+ flex-direction: row;
2371
+ }
2372
+ .rx-dropdown-swatch {
2373
+ cursor: pointer;
2374
+ position: relative;
2375
+ font-size: 0;
2376
+ width: 20px;
2377
+ height: 20px;
2378
+ border: 1px solid transparent;
2379
+ }
2380
+ .rx-dropdown-swatch.active {
2381
+ border: 2px solid var(--rx-border-dark-accent);
2382
+ box-shadow: 0 0 0 2px var(--rx-border-light-accent);
2383
+ z-index: 2;
2384
+ }
2385
+ .rx-dropdown-swatch-size-large {
2386
+ width: 32px;
2387
+ height: 32px;
2388
+ }
2389
+ .rx-dropdown-color-contrast {
2390
+ border-color: var(--rx-border-dark-subtle);
2391
+ }
2392
+ .rx-dropdown-tabs {
2393
+ font-size: 13px;
2394
+ line-height: 1;
2395
+ font-weight: 500;
2396
+ display: flex;
2397
+ border-radius: var(--rx-rounded-md);
2398
+ background: var(--rx-bg-dark-minimal);
2399
+ padding: 2px;
2400
+ margin-bottom: 4px;
2401
+ }
2402
+ .rx-dropdown-tab {
2403
+ flex-grow: 1;
2404
+ border-radius: var(--rx-rounded-sm);
2405
+ padding: 6px 8px;
2406
+ cursor: pointer;
2407
+ text-decoration: none;
2408
+ text-align: center;
2409
+ color: var(--rx-fg-dark-text);
2410
+ }
2411
+ .rx-dropdown-tab:hover {
2412
+ text-decoration: none;
2413
+ }
2414
+ .rx-dropdown-tab.active {
2415
+ background: var(--rx-bg-base);
2416
+ box-shadow: var(--rx-shadow-tab);
2417
+ }
2418
+ .rx-dropdown-item {
2419
+ font-size: 14px;
2420
+ line-height: 1.4;
2421
+ padding: 6px 8px;
2422
+ display: flex;
2423
+ color: var(--rx-fg-dark-text);
2424
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
2425
+ }
2426
+ .rx-dropdown-item .rx-button-title {
2427
+ display: none;
2428
+ }
2429
+ .rx-dropdown-item:last-child {
2430
+ border-bottom-width: 0;
2431
+ }
2432
+ .rx-dropdown-item-hotkey {
2433
+ margin-left: auto;
2434
+ font-weight: normal;
2435
+ display: flex;
2436
+ gap: 1px;
2437
+ align-items: center;
2438
+ color: var(--rx-fg-dark-minimal);
2439
+ font-family: var(--rx-font-ui);
2440
+ font-size: 12px;
2441
+ line-height: 16px;
2442
+ }
2443
+ .rx-dropdown-item-hotkey span {
2444
+ padding: 0 2px;
2445
+ height: 16px;
2446
+ }
2447
+ .rx-dropdown .rx-button {
2448
+ position: relative;
2449
+ padding: 8px;
2450
+ gap: 8px;
2451
+ width: 100%;
2452
+ border-radius: var(--rx-rounded-sm);
2453
+ }
2454
+ .rx-dropdown .rx-button:after {
2455
+ content: "";
2456
+ position: absolute;
2457
+ width: 100%;
2458
+ height: 1px;
2459
+ bottom: -1px;
2460
+ left: 0;
2461
+ background: var(--rx-border-dark-dimmed);
2462
+ }
2463
+ .rx-dropdown .rx-button:last-child:after {
2464
+ display: none;
2465
+ }
2466
+ .rx-dropdown .rx-button.rx-button-swatch {
2467
+ width: 20px;
2468
+ height: 20px;
2469
+ border-radius: 0;
2470
+ }
2471
+ .rx-dropdown .rx-button.rx-button-swatch .rx-button-icon,
2472
+ .rx-dropdown .rx-button.rx-button-swatch .rx-button-title {
2473
+ display: none;
2474
+ }
2475
+ .rx-dropdown .rx-button-title {
2476
+ color: var(--rx-fg-dark-accent);
2477
+ }
2478
+ .rx-dropdown .rx-button:hover {
2479
+ background: var(--rx-bg-dark-subtle);
2480
+ }
2481
+ .rx-dropdown .rx-button.active {
2482
+ background: var(--rx-bg-primary-subtle);
2483
+ }
2484
+ .rx-dropdown .rx-button-icon svg {
2485
+ fill: var(--rx-fg-dark-accent);
2486
+ width: 16px;
2487
+ height: 16px;
2488
+ }
2489
+ .rx-dropdown .rx-button-danger .rx-button-title {
2490
+ color: var(--rx-fg-negative-accent);
2491
+ }
2492
+ .rx-dropdown .rx-button-danger svg {
2493
+ fill: var(--rx-fg-negative-accent);
2494
+ }
2495
+ .rx-dropdown-type-grid .rx-dropdown-items {
2496
+ display: flex;
2497
+ flex-wrap: wrap;
2498
+ padding: 0;
2499
+ box-sizing: border-box;
2500
+ }
2501
+ .rx-dropdown-type-grid .rx-button {
2502
+ box-sizing: border-box;
2503
+ border-radius: 0;
2504
+ margin-bottom: -1px;
2505
+ width: 32px;
2506
+ height: 32px;
2507
+ line-height: 32px;
2508
+ padding: 0;
2509
+ text-align: center;
2510
+ justify-content: center;
2511
+ align-items: center;
2512
+ border: 1px solid var(--rx-border-dark-dimmed);
2513
+ color: var(--rx-fg-dark-text);
2514
+ border-left-color: transparent;
2515
+ border-top-color: transparent;
2516
+ }
2517
+ .rx-dropdown-type-grid .rx-button:after {
2518
+ display: none;
2519
+ }
2520
+ .rx-dropdown-type-grid .rx-button-title:empty {
2521
+ display: none;
2522
+ }
2523
+ .rx-dropdown-type-grid .rx-dropdown-item svg {
2524
+ width: 16px;
2525
+ height: 16px;
2526
+ }
2527
+ .rx-dropdown-stack {
2528
+ padding: 16px;
2529
+ padding-top: 0;
2530
+ }
2531
+ .rx-dropdown-stack-item {
2532
+ cursor: pointer;
2533
+ display: flex;
2534
+ align-items: center;
2535
+ border-radius: 4px;
2536
+ line-height: 1;
2537
+ border-bottom: 1px solid var(--rx-border-dark-dimmed);
2538
+ }
2539
+ .rx-dropdown-stack-item:last-child {
2540
+ border-bottom-color: transparent;
2541
+ }
2542
+ .rx-dropdown-stack-item:hover {
2543
+ background-color: var(--rx-bg-dark-minimal);
2544
+ }
2545
+ .rx-dropdown-stack-title {
2546
+ text-decoration: none;
2547
+ flex: 1;
2548
+ padding: 7px 8px;
2549
+ font-size: 14px;
2550
+ color: var(--rx-fg-dark-text);
2551
+ }
2552
+ .rx-dropdown-stack-aside {
2553
+ font-family: var(--rx-font-ui-mono);
2554
+ font-size: 11px;
2555
+ color: var(--rx-fg-dark-subtle);
2556
+ margin-left: auto;
2557
+ padding-left: 4px;
2558
+ }
2559
+ .rx-modal {
2560
+ position: absolute;
2561
+ overflow-x: hidden;
2562
+ overflow-y: auto;
2563
+ margin-bottom: 16px;
2564
+ min-width: 200px;
2565
+ font-family: var(--rx-font-ui);
2566
+ border-radius: var(--rx-rounded-md);
2567
+ background-color: var(--rx-bg-overlay);
2568
+ box-shadow: var(--rx-shadow-modal);
2569
+ z-index: var(--rx-level-popup);
2570
+ }
2571
+ .rx-modal-body .rx-form {
2572
+ padding-bottom: 0;
2573
+ }
2574
+ .rx-modal-header {
2575
+ font-size: 16px;
2576
+ font-weight: bold;
2577
+ color: var(--rx-bg-dark-accent);
2578
+ padding: 16px;
2579
+ position: relative;
2580
+ }
2581
+ .rx-modal-header:empty {
2582
+ display: none;
2583
+ }
2584
+ .rx-modal-footer {
2585
+ overflow: hidden;
2586
+ box-sizing: border-box;
2587
+ margin-top: 8px;
2588
+ padding: 16px;
2589
+ padding-bottom: 20px;
2590
+ display: flex;
2591
+ gap: 4px;
2592
+ }
2593
+ .rx-modal-footer:empty {
2594
+ display: none;
2595
+ }
2596
+ .rx-modal-close {
2597
+ position: absolute !important;
2598
+ right: 16px;
2599
+ top: 14px;
2600
+ cursor: pointer;
2601
+ display: inline-block;
2602
+ vertical-align: middle;
2603
+ width: 20px;
2604
+ height: 20px;
2605
+ opacity: 0.5;
2606
+ }
2607
+ .rx-modal-close::before,
2608
+ .rx-modal-close::after {
2609
+ content: "";
2610
+ display: block;
2611
+ left: 50%;
2612
+ position: absolute;
2613
+ top: 50%;
2614
+ transform: translate(-50%, -50%) rotate(45deg);
2615
+ background: var(--rx-bg-dark-accent);
2616
+ }
2617
+ .rx-modal-close::before {
2618
+ height: 1px;
2619
+ width: 75%;
2620
+ }
2621
+ .rx-modal-close::after {
2622
+ height: 75%;
2623
+ width: 1px;
2624
+ }
2625
+ .rx-modal-close:hover {
2626
+ opacity: 1;
2627
+ }
2628
+ .rx-form {
2629
+ padding-bottom: 16px;
2630
+ }
2631
+ .rx-form-item {
2632
+ padding: 16px 16px 0 16px;
2633
+ }
2634
+ .rx-form-item:empty {
2635
+ display: none;
2636
+ }
2637
+ .rx-form-box {
2638
+ padding: 16px;
2639
+ }
2640
+ .rx-form-flex {
2641
+ display: flex;
2642
+ gap: 4px;
2643
+ }
2644
+ .rx-form-image img,
2645
+ .rx-form-image svg {
2646
+ max-width: 100%;
2647
+ }
2648
+ .rx-form-title,
2649
+ .rx-form-section-title {
2650
+ font-size: 14px;
2651
+ font-weight: 600;
2652
+ color: var(--rx-bg-dark-accent);
2653
+ padding: 16px;
2654
+ padding-bottom: 0;
2655
+ position: relative;
2656
+ }
2657
+ .rx-form-title:empty,
2658
+ .rx-form-section-title:empty {
2659
+ display: none;
2660
+ }
2661
+ .rx-form-item + .rx-form-section-title {
2662
+ margin-top: 8px;
2663
+ }
2664
+ .rx-form-footer {
2665
+ overflow: hidden;
2666
+ box-sizing: border-box;
2667
+ margin-top: 8px;
2668
+ padding: 16px;
2669
+ padding-bottom: 0;
2670
+ display: flex;
2671
+ gap: 4px;
2672
+ }
2673
+ .rx-form-footer:empty {
2674
+ display: none;
2675
+ }
2676
+ .rx-form-label {
2677
+ box-sizing: border-box;
2678
+ font-family: var(--rx-font-ui);
2679
+ font-size: 14px;
2680
+ line-height: 1.4;
2681
+ font-weight: 500;
2682
+ display: block;
2683
+ padding: 0;
2684
+ margin: 0;
2685
+ padding-bottom: 6px;
2686
+ color: var(--rx-fg-dark-text);
2687
+ }
2688
+ .rx-form-hint {
2689
+ font-size: 13px;
2690
+ font-weight: normal;
2691
+ color: var(--rx-fg-dark-subtle);
2692
+ margin-left: 2px;
2693
+ }
2694
+ .rx-form-container-flex {
2695
+ display: flex;
2696
+ gap: 8px;
2697
+ }
2698
+ .rx-form-container-flex .rx-form-item {
2699
+ padding-left: 0;
2700
+ padding-right: 0;
2701
+ }
2702
+ .rx-form-container-flex .rx-form-item:first-child {
2703
+ padding-left: 16px;
2704
+ }
2705
+ .rx-form-container-flex .rx-form-item:last-child {
2706
+ padding-right: 16px;
2707
+ }
2708
+ .rx-form-container-flex .rx-form-input,
2709
+ .rx-form-container-flex .rx-form-select {
2710
+ flex: auto;
2711
+ }
2712
+ .rx-form-container-flex .rx-form-button {
2713
+ margin-left: 4px;
2714
+ }
2715
+ .rx-form-button-push-right {
2716
+ margin-left: auto;
2717
+ }
2718
+ .rx-form-color-container {
2719
+ position: relative;
2720
+ }
2721
+ .rx-form-color-container .rx-form-input {
2722
+ padding-left: 40px;
2723
+ }
2724
+ .rx-form-color-toggle {
2725
+ position: absolute;
2726
+ top: 4px;
2727
+ left: 6px;
2728
+ height: 28px;
2729
+ width: 28px;
2730
+ border-radius: 8px;
2731
+ box-shadow: var(--rx-shadow-inner);
2732
+ cursor: pointer;
2733
+ background: var(--rx-bg-white-accent);
2734
+ }
2735
+ .rx-form-button {
2736
+ box-sizing: border-box;
2737
+ font-family: var(--rx-font-ui);
2738
+ font-size: 14px;
2739
+ font-weight: 500;
2740
+ outline: none;
2741
+ border-radius: 8px;
2742
+ padding: 8px 20px;
2743
+ min-height: 40px;
2744
+ display: inline-flex;
2745
+ align-items: center;
2746
+ cursor: pointer;
2747
+ line-height: 1.25;
2748
+ height: auto;
2749
+ background: transparent;
2750
+ color: var(--rx-fg-dark-accent);
2751
+ border: 1px solid var(--rx-border-dark-medium);
2752
+ }
2753
+ .rx-form-button:hover {
2754
+ background: var(--rx-bg-dark-subtle);
2755
+ }
2756
+ .rx-form-button-primary {
2757
+ background: var(--rx-bg-dark-accent);
2758
+ color: var(--rx-fg-light-accent);
2759
+ border-color: transparent;
2760
+ }
2761
+ .rx-form-button-primary:hover {
2762
+ color: var(--rx-fg-light-accent);
2763
+ background: var(--rx-bg-dark-accent-hover);
2764
+ }
2765
+ .rx-form-button-danger {
2766
+ border: 1px solid var(--rx-border-negative-medium);
2767
+ color: var(--rx-fg-negative-accent);
2768
+ }
2769
+ .rx-form-button-danger:hover {
2770
+ color: var(--rx-fg-negative-accent);
2771
+ background: var(--rx-bg-negative-subtle);
2772
+ }
2773
+ .rx-form-button-fullwidth {
2774
+ display: block;
2775
+ width: 100%;
2776
+ }
2777
+ .rx-form-input,
2778
+ .rx-form-select,
2779
+ .rx-form-textarea {
2780
+ box-sizing: border-box;
2781
+ display: block;
2782
+ width: 100%;
2783
+ vertical-align: middle;
2784
+ font-weight: normal;
2785
+ padding: 8px;
2786
+ font-family: var(--rx-font-ui);
2787
+ font-size: 15px;
2788
+ outline: none;
2789
+ border-radius: 4px;
2790
+ box-shadow: none;
2791
+ line-height: 1.3;
2792
+ color: var(--rx-fg-dark-text);
2793
+ background: var(--rx-bg-input);
2794
+ border: 1px solid var(--rx-border-input);
2795
+ }
2796
+ .rx-form-input:focus,
2797
+ .rx-form-select:focus,
2798
+ .rx-form-textarea:focus {
2799
+ border-color: var(--rx-border-focus);
2800
+ box-shadow: none;
2801
+ }
2802
+ .rx-form-textarea {
2803
+ resize: vertical;
2804
+ line-height: 1.5;
2805
+ }
2806
+ .rx-form-select {
2807
+ font-size: 15px;
2808
+ cursor: pointer;
2809
+ -webkit-appearance: none;
2810
+ 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>');
2811
+ background-repeat: no-repeat;
2812
+ background-position: right 0.65em center;
2813
+ padding-right: 28px;
2814
+ min-height: 35px;
2815
+ }
2816
+ [rx-data-theme=dark] .rx-form-select {
2817
+ 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>');
2818
+ }
2819
+ .rx-form-checkbox {
2820
+ box-sizing: border-box;
2821
+ vertical-align: middle;
2822
+ position: relative;
2823
+ top: -0.05em;
2824
+ font-size: 16px;
2825
+ margin-top: 0 !important;
2826
+ margin-right: 4px !important;
2827
+ margin-left: 0 !important;
2828
+ }
2829
+ .rx-form-checkbox-item {
2830
+ color: var(--rx-fg-dark-text);
2831
+ font-family: var(--rx-font-ui);
2832
+ font-size: 15px;
2833
+ line-height: 1.4;
2834
+ }
2835
+ .rx-form-segment {
2836
+ display: flex;
2837
+ flex-wrap: wrap;
2838
+ background: var(--rx-bg-dark-minimal);
2839
+ border-radius: var(--rx-rounded-md);
2840
+ padding: 2px;
2841
+ gap: 4px;
2842
+ }
2843
+ .rx-form-segment-item {
2844
+ border: 1px solid transparent;
2845
+ font-size: 14px;
2846
+ padding: 6px 8px;
2847
+ margin: 0;
2848
+ cursor: pointer;
2849
+ text-align: center;
2850
+ border-radius: var(--rx-rounded-sm);
2851
+ min-width: 32px;
2852
+ color: var(--rx-fg-dark-subtle);
2853
+ }
2854
+ .rx-form-segment-item:hover {
2855
+ background: var(--rx-bg-light-accent);
2856
+ color: var(--rx-fg-dark-accent);
2857
+ }
2858
+ .rx-form-segment-item.active {
2859
+ cursor: default;
2860
+ background: var(--rx-bg-light-accent);
2861
+ box-shadow: var(--rx-shadow-tab);
2862
+ color: var(--rx-fg-dark-accent);
2863
+ }
2864
+ .rx-form-upload-box {
2865
+ flex: 1;
2866
+ display: flex;
2867
+ flex-direction: column;
2868
+ align-items: center;
2869
+ justify-content: center;
2870
+ margin: 0;
2871
+ margin-bottom: 10px;
2872
+ border: 1px dashed var(--rx-border-dark-medium);
2873
+ background: var(--rx-bg-dark-dimmed);
2874
+ border-radius: var(--rx-rounded-md);
2875
+ min-width: 160px;
2876
+ height: 160px;
2877
+ cursor: pointer;
2878
+ position: relative;
2879
+ }
2880
+ .rx-form-upload-box input[type=file] {
2881
+ font-size: 13px;
2882
+ }
2883
+ .rx-form-upload-box img {
2884
+ position: relative;
2885
+ z-index: 2;
2886
+ object-fit: cover;
2887
+ height: 100%;
2888
+ width: 100%;
2889
+ }
2890
+ .rx-form-upload-box:after {
2891
+ content: "";
2892
+ position: absolute;
2893
+ top: 0;
2894
+ bottom: 0;
2895
+ left: 0;
2896
+ right: 0;
2897
+ width: 100%;
2898
+ height: 100%;
2899
+ }
2900
+ .rx-form-upload-box.rx-form-upload-hover {
2901
+ border-color: var(--rx-border-dark-medium);
2902
+ background-color: var(--rx-bg-dark-subtle);
2903
+ }
2904
+ .rx-form-upload-box.rx-form-upload-error {
2905
+ border-color: var(--rx-border-negative-medium);
2906
+ background-color: var(--rx-bg-negative-minimal);
2907
+ }
2908
+ .rx-upload-remove {
2909
+ position: absolute;
2910
+ z-index: 3;
2911
+ top: -6px;
2912
+ right: -10px;
2913
+ background-color: var(--rx-bg-black-accent);
2914
+ color: var(--rx-fg-white-accent);
2915
+ opacity: 1;
2916
+ width: 20px;
2917
+ height: 20px;
2918
+ text-align: center;
2919
+ border-radius: 10px;
2920
+ font-size: 14px;
2921
+ line-height: 20px;
2922
+ }
2923
+ .rx-upload-remove:after {
2924
+ content: "\d7";
2925
+ }
2926
+ .rx-upload-remove:hover {
2927
+ background-color: var(--rx-bg-black-accent-hover);
2928
+ }
2929
+ .rx-form-upload-cover-off img {
2930
+ object-fit: initial;
2931
+ height: auto;
2932
+ width: auto;
2933
+ }
2934
+ .rx-form-upload-placeholder {
2935
+ font-family: var(--rx-font-ui);
2936
+ color: var(--rx-fg-dark-minimal);
2937
+ font-size: 12px;
2938
+ line-height: 1.35;
2939
+ padding: 0 8px;
2940
+ text-align: center;
2941
+ }
2942
+ .rx-form-upload-placeholder svg {
2943
+ fill: var(--rx-fg-dark-minimal);
2944
+ }
2945
+ @keyframes progress-bar-stripes {
2946
+ from {
2947
+ background-position: 40px 0;
2948
+ }
2949
+ to {
2950
+ background-position: 0 0;
2951
+ }
2952
+ }
2953
+ .rx-editor-progress {
2954
+ position: fixed;
2955
+ top: 0;
2956
+ left: 0;
2957
+ z-index: 11000;
2958
+ width: 100%;
2959
+ background-color: var(--rx-bg-dark-subtle);
2960
+ }
2961
+ .rx-editor-progress span {
2962
+ animation: progress-bar-stripes 2s linear infinite;
2963
+ content: "";
2964
+ display: block;
2965
+ min-height: 8px;
2966
+ width: 100%;
2967
+ height: 100%;
2968
+ background-color: var(--rx-bg-primary-accent);
2969
+ 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);
2970
+ 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);
2971
+ background-size: 40px 40px;
2972
+ }
2973
+ .rx-panel {
2974
+ position: absolute;
2975
+ min-width: 240px;
2976
+ max-height: 300px;
2977
+ margin: 0;
2978
+ padding: 0;
2979
+ z-index: 99;
2980
+ font-family: var(--rx-font-ui);
2981
+ font-size: 14px;
2982
+ overflow: auto;
2983
+ border-radius: 4px;
2984
+ padding: 4px;
2985
+ background: var(--rx-bg-overlay);
2986
+ box-shadow: var(--rx-shadow-dropdown);
2987
+ }
2988
+ .rx-panel-box {
2989
+ display: flex;
2990
+ flex-wrap: wrap;
2991
+ gap: 2px;
2992
+ }
2993
+ .rx-pabel-title {
2994
+ font-family: var(--rx-font-ui);
2995
+ font-size: 13px;
2996
+ font-weight: 500;
2997
+ color: var(--rx-fg-dark-subtle);
2998
+ }
2999
+ .rx-panel-box {
3000
+ display: flex;
3001
+ flex-wrap: wrap;
3002
+ gap: 2px;
3003
+ }
3004
+ .rx-panel-item {
3005
+ box-sizing: border-box;
3006
+ padding: 4px;
3007
+ border-bottom: 1px solid transparent;
3008
+ }
3009
+ .rx-panel-item {
3010
+ display: block;
3011
+ border-radius: 8px;
3012
+ cursor: pointer;
3013
+ padding: 8px;
3014
+ line-height: 1;
3015
+ text-decoration: none;
3016
+ color: var(--rx-fg-dark-accent);
3017
+ }
3018
+ .rx-panel-item.active,
3019
+ .rx-panel-item:hover {
3020
+ color: var(--rx-fg-dark-accent);
3021
+ background: var(--rx-bg-dark-subtle);
3022
+ }
3023
+ .rx-ai-main {
3024
+ padding: 12px;
3025
+ border-radius: 8px;
3026
+ background: var(--rx-bg-raised);
3027
+ border: 1px solid var(--rx-border-dark-subtle);
3028
+ }
3029
+ .rx-ai-footer {
3030
+ margin-top: 16px !important;
3031
+ display: flex;
3032
+ gap: 8px;
3033
+ }
3034
+ .rx-ai-buttons {
3035
+ margin-left: auto !important;
3036
+ display: flex;
3037
+ gap: 8px;
3038
+ }
3039
+ .rx-ai-preview-label,
3040
+ .rx-ai-label {
3041
+ box-sizing: border-box;
3042
+ font-family: var(--rx-font-ui);
3043
+ font-size: 13px;
3044
+ line-height: 1.4;
3045
+ font-weight: 500;
3046
+ display: block;
3047
+ padding: 0;
3048
+ margin: 0;
3049
+ padding-bottom: 6px;
3050
+ color: var(--rx-fg-dark-subtle);
3051
+ }
3052
+ .rx-ai-select,
3053
+ .rx-ai-size {
3054
+ width: auto;
3055
+ max-width: 320px;
3056
+ }
3057
+ .rx-ai-progress {
3058
+ margin-bottom: 12px !important;
3059
+ }
3060
+ .rx-ai-progress:empty {
3061
+ display: none;
3062
+ }
3063
+ .rx-ai-progress svg {
3064
+ fill: var(--rx-fg-dark-accent);
3065
+ }
3066
+ .rx-ai-preview {
3067
+ font-family: var(--rx-font-ui);
3068
+ font-weight: normal;
3069
+ letter-spacing: normal;
3070
+ text-transform: none;
3071
+ font-size: 16px;
3072
+ line-height: 1.618;
3073
+ color: var(--rx-fg-dark-text);
3074
+ margin-bottom: 12px !important;
3075
+ }
3076
+ .rx-ai-preview:empty {
3077
+ display: none;
3078
+ }
3079
+ @media only screen and (max-width: 767px) {
3080
+ .rx-ai-footer,
3081
+ .rx-ai-buttons {
3082
+ flex-direction: column;
3083
+ width: 100%;
3084
+ }
3085
+ .rx-ai-select,
3086
+ .rx-ai-size {
3087
+ max-width: 100%;
3088
+ }
3089
+ .rx-ai-button {
3090
+ justify-content: center;
3091
+ }
3092
+ }
3093
+ .rx-voice-label {
3094
+ display: none;
3095
+ }
3096
+ [rx-modal-name=image] .rx-modal-body {
3097
+ padding: 16px;
3098
+ padding-top: 0;
3099
+ }
3100
+ .rx-modal-image-section-or {
3101
+ margin: 16px 0;
3102
+ font-family: var(--rx-font-ui);
3103
+ text-transform: uppercase;
3104
+ font-weight: bold;
3105
+ text-align: center;
3106
+ font-size: 11px;
3107
+ color: var(--rx-fg-dark-subtle);
3108
+ }
3109
+ .rx-modal-images-box {
3110
+ margin-top: 12px;
3111
+ display: flex;
3112
+ gap: 8px;
3113
+ flex-wrap: wrap;
3114
+ }
3115
+ .rx-modal-images-box img {
3116
+ vertical-align: top;
3117
+ max-width: 100px;
3118
+ max-height: 66px;
3119
+ height: 100%;
3120
+ width: min-content;
3121
+ cursor: pointer;
3122
+ }
3123
+ .rx-modal-images-box img:hover {
3124
+ outline: 3px solid var(--rx-border-focus);
3125
+ }
3126
+ .rx-form-item-edit-image-box {
3127
+ padding: 20px;
3128
+ padding-bottom: 0;
3129
+ }
3130
+ .rx-form-item-image {
3131
+ margin-right: 8px;
3132
+ }
3133
+ .rx-form-item-image img {
3134
+ max-height: 160px;
3135
+ width: auto;
3136
+ }
3137
+ [rx-modal-name=emoji] .rx-modal-body {
3138
+ padding: 16px;
3139
+ display: flex;
3140
+ flex-direction: column;
3141
+ gap: 12px;
3142
+ }
3143
+ .rx-emoji-title {
3144
+ font-family: var(--rx-font-ui);
3145
+ font-size: 13px;
3146
+ font-weight: 500;
3147
+ color: var(--rx-fg-dark-subtle);
3148
+ }
3149
+ .rx-emoji-box {
3150
+ display: flex;
3151
+ flex-wrap: wrap;
3152
+ gap: 2px;
3153
+ }
3154
+ .rx-emoji-item {
3155
+ border-radius: 4px;
3156
+ padding: 4px;
3157
+ cursor: pointer;
3158
+ font-size: 24px;
3159
+ line-height: 1;
3160
+ }
3161
+ .rx-emoji-item:hover {
3162
+ background: var(--rx-bg-dark-subtle);
3163
+ }
3164
+ .rx-panel-emoji {
3165
+ padding: 12px;
3166
+ display: flex;
3167
+ flex-direction: column;
3168
+ gap: 12px;
3169
+ }
3170
+ .rx-panel-emoji .rx-panel-item {
3171
+ font-size: 24px;
3172
+ }
3173
+ [rx-modal-name=snippets] .rx-modal-body,
3174
+ [rx-modal-name=templates] .rx-modal-body {
3175
+ padding: 20px;
3176
+ padding-bottom: 0;
3177
+ display: flex;
3178
+ flex-wrap: wrap;
3179
+ }
3180
+ .rx-snippet-container {
3181
+ box-sizing: border-box;
3182
+ margin-right: 10px;
3183
+ margin-bottom: 20px;
3184
+ }
3185
+ .rx-snippet-name {
3186
+ box-sizing: border-box;
3187
+ font-size: 14px;
3188
+ font-weight: 600;
3189
+ font-family: var(--rx-font-ui);
3190
+ color: var(--rx-fg-dark-text);
3191
+ margin-top: 8px;
3192
+ padding-right: 10px;
3193
+ text-align: left;
3194
+ max-width: 100px;
3195
+ }
3196
+ .rx-snippet-box {
3197
+ box-sizing: border-box;
3198
+ border-radius: 6px;
3199
+ box-shadow: var(--shadow-md-border);
3200
+ cursor: pointer;
3201
+ border: 1px solid transparent;
3202
+ overflow: hidden;
3203
+ }
3204
+ .rx-snippet-box:hover {
3205
+ border: 1px solid var(--rx-border-primary-accent);
3206
+ }
3207
+ .rx-snippet-image,
3208
+ .rx-template-image {
3209
+ min-height: 80px;
3210
+ max-height: 80px;
3211
+ box-sizing: border-box;
3212
+ }
3213
+ .rx-snippet-image img,
3214
+ .rx-template-image img {
3215
+ max-width: 160px;
3216
+ }
3217
+ .rx-template-image {
3218
+ min-height: 130px;
3219
+ max-height: initial;
3220
+ }
3221
+ .rx-template-image img {
3222
+ max-width: 100px;
3223
+ }
3224
+ .rx-snippet-preview,
3225
+ .rx-template-preview {
3226
+ box-sizing: border-box;
3227
+ overflow: hidden;
3228
+ transform-origin: top left;
3229
+ transform: scale(0.25);
3230
+ margin-right: -480px;
3231
+ margin-bottom: -240px;
3232
+ padding: 40px;
3233
+ width: 640px;
3234
+ height: 320px;
3235
+ position: relative;
3236
+ }
3237
+ .rx-snippet-preview:before,
3238
+ .rx-template-preview:before {
3239
+ left: 0;
3240
+ top: 0;
3241
+ width: 100%;
3242
+ height: 100%;
3243
+ content: "";
3244
+ position: absolute;
3245
+ z-index: 1;
3246
+ }
3247
+ .rx-snippet-preview:hover,
3248
+ .rx-template-preview:hover {
3249
+ border-color: var(--rx-border-primary-accent);
3250
+ }
3251
+ .rx-snippet-preview fieldset,
3252
+ .rx-snippet-preview iframe,
3253
+ .rx-snippet-preview img,
3254
+ .rx-template-preview fieldset,
3255
+ .rx-template-preview iframe,
3256
+ .rx-template-preview img {
3257
+ border: 0;
3258
+ }
3259
+ .rx-snippet-preview embed,
3260
+ .rx-snippet-preview object,
3261
+ .rx-snippet-preview audio,
3262
+ .rx-snippet-preview img,
3263
+ .rx-snippet-preview video,
3264
+ .rx-template-preview embed,
3265
+ .rx-template-preview object,
3266
+ .rx-template-preview audio,
3267
+ .rx-template-preview img,
3268
+ .rx-template-preview video {
3269
+ max-width: 100%;
3270
+ height: auto;
3271
+ }
3272
+ .rx-snippet-preview h1:empty,
3273
+ .rx-snippet-preview h2:empty,
3274
+ .rx-snippet-preview h3:empty,
3275
+ .rx-snippet-preview h4:empty,
3276
+ .rx-snippet-preview h5:empty,
3277
+ .rx-snippet-preview h6:empty,
3278
+ .rx-snippet-preview p:empty,
3279
+ .rx-snippet-preview div:empty,
3280
+ .rx-template-preview h1:empty,
3281
+ .rx-template-preview h2:empty,
3282
+ .rx-template-preview h3:empty,
3283
+ .rx-template-preview h4:empty,
3284
+ .rx-template-preview h5:empty,
3285
+ .rx-template-preview h6:empty,
3286
+ .rx-template-preview p:empty,
3287
+ .rx-template-preview div:empty {
3288
+ background-color: var(--rx-border-primary-subtle);
3289
+ min-height: 1.5em;
3290
+ }
3291
+ .rx-template-preview {
3292
+ transform: scale(0.25);
3293
+ margin-right: -300px;
3294
+ margin-bottom: -390px;
3295
+ padding: 40px;
3296
+ width: 400px;
3297
+ height: 520px;
3298
+ }
3299
+ .rx-empty h1:empty,
3300
+ .rx-empty h2:empty,
3301
+ .rx-empty h3:empty,
3302
+ .rx-empty h4:empty,
3303
+ .rx-empty h5:empty,
3304
+ .rx-empty h6:empty,
3305
+ .rx-empty p:empty,
3306
+ .rx-empty li:empty,
3307
+ .rx-empty dt:empty,
3308
+ .rx-empty dd:empty,
3309
+ .rx-empty address:empty,
3310
+ .rx-empty figcaption:empty,
3311
+ .rx-empty blockquote:empty {
3312
+ min-height: 1.5em;
3313
+ }
3314
+ .rx-empty pre:empty {
3315
+ min-height: 3.5em;
3316
+ }
3317
+ .rx-empty strong:empty,
3318
+ .rx-empty b:empty,
3319
+ .rx-empty em:empty,
3320
+ .rx-empty i:empty,
3321
+ .rx-empty span:empty,
3322
+ .rx-empty sup:empty,
3323
+ .rx-empty sub:empty,
3324
+ .rx-empty u:empty,
3325
+ .rx-empty ins:empty,
3326
+ .rx-empty code:empty,
3327
+ .rx-empty del:empty,
3328
+ .rx-empty cite:empty {
3329
+ display: inline-block;
3330
+ min-width: 1px;
3331
+ min-height: 1em;
3332
+ }
3333
+ .rx-empty th:empty:after,
3334
+ .rx-empty td:empty:after {
3335
+ content: "\200b";
3336
+ }
3337
+ .rx-empty code:after,
3338
+ .rx-empty kbd:after,
3339
+ .rx-empty mark:after {
3340
+ content: "\200b";
3341
+ }
3342
+ .rx-empty pre code:after {
3343
+ display: none;
3344
+ }
3345
+ .rx-empty code + code {
3346
+ margin-left: 2px;
3347
+ }
3348
+ .rx-empty table {
3349
+ empty-cells: show;
3350
+ }
3351
+ .rx-empty embed,
3352
+ .rx-empty img,
3353
+ .rx-empty object {
3354
+ max-width: 100%;
3355
+ height: auto;
3356
+ }
3357
+ .rx-content {
3358
+ text-align: left;
3359
+ --rx-font-text:
3360
+ -apple-system,
3361
+ BlinkMacSystemFont,
3362
+ "San Francisco",
3363
+ "Segoe UI",
3364
+ Roboto,
3365
+ "Helvetica Neue",
3366
+ sans-serif;
3367
+ --rx-font-heading: inherit;
3368
+ --rx-font-mono:
3369
+ ui-monospace,
3370
+ SFMono-Regular,
3371
+ Menlo,
3372
+ Monaco,
3373
+ Consolas,
3374
+ "Liberation Mono",
3375
+ "Courier New",
3376
+ monospace;
3377
+ --rx-body-color: var(--rx-bg-body);
3378
+ --rx-heading-color: var(--rx-fg-heading);
3379
+ --rx-text-color: var(--rx-fg-text);
3380
+ --rx-table-border: var(--rx-border-dark-minimal);
3381
+ --rx-line-color: var(--rx-border-dark-minimal);
3382
+ --rx-pre-color: var(--rx-fg-text);
3383
+ --rx-pre-bg: var(--rx-bg-dark-minimal);
3384
+ --rx-var-color: var(--rx-fg-text);
3385
+ --rx-kbd-color: var(--rx-fg-text);
3386
+ --rx-kbd-border: var(--rx-border-dark-subtle);
3387
+ --rx-kbd-bg: var(--rx-bg-light-accent);
3388
+ --rx-code-color: var(--rx-fg-text);
3389
+ --rx-code-bg: var(--rx-bg-dark-medium);
3390
+ --rx-abbr-border: var(--rx-border-dark-emphasis);
3391
+ --rx-quote-border-color: var(--rx-border-dark-medium);
3392
+ background: var(--rx-body-color);
3393
+ font-family: var(--rx-font-text);
3394
+ color: var(--rx-text-color);
3395
+ font-size: 16px;
3396
+ line-height: 1.5;
3397
+ }
3398
+ .rx-content[dir=rtl] {
3399
+ text-align: right;
3400
+ }
3401
+ .rx-content * {
3402
+ margin: 0;
3403
+ }
3404
+ .rx-content p,
3405
+ .rx-content li,
3406
+ .rx-content dt,
3407
+ .rx-content dd,
3408
+ .rx-content address {
3409
+ font-size: 16px;
3410
+ line-height: 1.5;
3411
+ }
3412
+ .rx-content h1 + *,
3413
+ .rx-content h2 + *,
3414
+ .rx-content h3 + *,
3415
+ .rx-content h4 + *,
3416
+ .rx-content h5 + *,
3417
+ .rx-content h6 + * {
3418
+ margin-top: 12px;
3419
+ }
3420
+ .rx-content p + h2,
3421
+ .rx-content p + h3,
3422
+ .rx-content p + h4,
3423
+ .rx-content p + h5,
3424
+ .rx-content p + h6,
3425
+ .rx-content ul + h2,
3426
+ .rx-content ul + h3,
3427
+ .rx-content ul + h4,
3428
+ .rx-content ul + h5,
3429
+ .rx-content ul + h6,
3430
+ .rx-content ol + h2,
3431
+ .rx-content ol + h3,
3432
+ .rx-content ol + h4,
3433
+ .rx-content ol + h5,
3434
+ .rx-content ol + h6,
3435
+ .rx-content pre + h2,
3436
+ .rx-content pre + h3,
3437
+ .rx-content pre + h4,
3438
+ .rx-content pre + h5,
3439
+ .rx-content pre + h6,
3440
+ .rx-content dl + h2,
3441
+ .rx-content dl + h3,
3442
+ .rx-content dl + h4,
3443
+ .rx-content dl + h5,
3444
+ .rx-content dl + h6,
3445
+ .rx-content address + h2,
3446
+ .rx-content address + h3,
3447
+ .rx-content address + h4,
3448
+ .rx-content address + h5,
3449
+ .rx-content address + h6 {
3450
+ margin-top: 24px;
3451
+ }
3452
+ .rx-content p + *,
3453
+ .rx-content ul + *,
3454
+ .rx-content ol + *,
3455
+ .rx-content pre + *,
3456
+ .rx-content dl + *,
3457
+ .rx-content address + * {
3458
+ margin-top: 24px;
3459
+ }
3460
+ .rx-content table + *,
3461
+ .rx-content blockquote + *,
3462
+ .rx-content figure + *,
3463
+ .rx-content > div + * {
3464
+ margin-top: 24px;
3465
+ }
3466
+ .rx-content h1 + h2,
3467
+ .rx-content h2 + h3,
3468
+ .rx-content h3 + h4,
3469
+ .rx-content h4 + h5,
3470
+ .rx-content h5 + h6 {
3471
+ margin-top: 12px;
3472
+ }
3473
+ .rx-content a,
3474
+ .rx-content a:hover,
3475
+ .rx-content a:focus,
3476
+ .rx-content a:visited {
3477
+ color: var(--rx-link-color);
3478
+ }
3479
+ .rx-content h1,
3480
+ .rx-content h2,
3481
+ .rx-content h3,
3482
+ .rx-content h4,
3483
+ .rx-content h5,
3484
+ .rx-content h6 {
3485
+ font-family: var(--rx-font-heading);
3486
+ font-weight: bold;
3487
+ font-style: normal;
3488
+ color: var(--rx-heading-color);
3489
+ text-rendering: optimizeLegibility;
3490
+ letter-spacing: 0;
3491
+ }
3492
+ .rx-content h1 a,
3493
+ .rx-content h2 a,
3494
+ .rx-content h3 a,
3495
+ .rx-content h4 a,
3496
+ .rx-content h5 a,
3497
+ .rx-content h6 a {
3498
+ text-decoration: underline;
3499
+ }
3500
+ .rx-content h1 {
3501
+ font-weight: 800;
3502
+ }
3503
+ .rx-content h2 {
3504
+ font-weight: 700;
3505
+ }
3506
+ .rx-content h3,
3507
+ .rx-content h4,
3508
+ .rx-content h5,
3509
+ .rx-content h6 {
3510
+ font-weight: 600;
3511
+ }
3512
+ .rx-content h1 {
3513
+ font-size: 36px;
3514
+ line-height: 1.2;
3515
+ }
3516
+ .rx-content h2 {
3517
+ font-size: 24px;
3518
+ line-height: 1.3;
3519
+ }
3520
+ .rx-content h3 {
3521
+ font-size: 20px;
3522
+ line-height: 1.4;
3523
+ }
3524
+ .rx-content h4 {
3525
+ font-size: 16px;
3526
+ line-height: 1.5;
3527
+ }
3528
+ .rx-content h5 {
3529
+ font-size: 16px;
3530
+ line-height: 1.5;
3531
+ }
3532
+ .rx-content h6 {
3533
+ font-size: 16px;
3534
+ line-height: 1.5;
3535
+ }
3536
+ .rx-content dfn,
3537
+ .rx-content abbr {
3538
+ font-size: 95%;
3539
+ }
3540
+ .rx-content cite,
3541
+ .rx-content small,
3542
+ .rx-content var,
3543
+ .rx-content kbd,
3544
+ .rx-content code {
3545
+ font-size: 85%;
3546
+ }
3547
+ .rx-content sup,
3548
+ .rx-content sub {
3549
+ font-size: 65%;
3550
+ }
3551
+ .rx-content var,
3552
+ .rx-content code,
3553
+ .rx-content kbd {
3554
+ display: inline-block;
3555
+ font-family: var(--rx-font-mono);
3556
+ font-style: normal;
3557
+ line-height: 1;
3558
+ vertical-align: baseline;
3559
+ }
3560
+ .rx-content kbd,
3561
+ .rx-content code {
3562
+ border-radius: 4px;
3563
+ }
3564
+ .rx-content kbd {
3565
+ color: var(--rx-kbd-color);
3566
+ background: var(--rx-kbd-bg);
3567
+ border: 1px solid var(--rx-kbd-border);
3568
+ padding: 0.2em 0.4em;
3569
+ }
3570
+ .rx-content var {
3571
+ color: var(--rx-var-color);
3572
+ }
3573
+ .rx-content code {
3574
+ position: relative;
3575
+ top: -1px;
3576
+ padding: 0.2em 0.4em 0.2em;
3577
+ color: var(--rx-code-color);
3578
+ background: var(--rx-code-bg);
3579
+ border: 1px solid var(--rx-code-border);
3580
+ }
3581
+ .rx-content mark {
3582
+ background-color: yellow;
3583
+ color: black;
3584
+ }
3585
+ .rx-content b,
3586
+ .rx-content strong {
3587
+ font-weight: bold;
3588
+ }
3589
+ .rx-content dfn,
3590
+ .rx-content abbr[title] {
3591
+ letter-spacing: 0.01em;
3592
+ text-transform: uppercase;
3593
+ text-decoration: none;
3594
+ border-bottom: 1px dotted var(--rx-abbr-border);
3595
+ cursor: help;
3596
+ }
3597
+ .rx-content cite {
3598
+ color: var(--rx-cite-color, var(--rx-text-color));
3599
+ font-style: italic;
3600
+ }
3601
+ .rx-content sub,
3602
+ .rx-content sup {
3603
+ line-height: 1;
3604
+ margin-left: 2px;
3605
+ }
3606
+ .rx-content sub {
3607
+ vertical-align: sub;
3608
+ }
3609
+ .rx-content sup {
3610
+ vertical-align: super;
3611
+ }
3612
+ .rx-content ul,
3613
+ .rx-content ol {
3614
+ padding-left: 0;
3615
+ margin-left: 20px;
3616
+ }
3617
+ .rx-content li li {
3618
+ font-size: 1em;
3619
+ }
3620
+ .rx-content dt {
3621
+ font-weight: bold;
3622
+ }
3623
+ .rx-content dd + dt {
3624
+ margin-top: 0.25em;
3625
+ }
3626
+ .rx-content pre {
3627
+ overflow: auto;
3628
+ white-space: pre;
3629
+ font-family: var(--rx-font-mono);
3630
+ font-size: 14px;
3631
+ line-height: 1.6;
3632
+ padding: 1em;
3633
+ border-radius: 3px;
3634
+ border: 1px solid var(--rx-pre-border, transparent);
3635
+ background: var(--rx-pre-bg, transparent);
3636
+ color: var(--rx-pre-color, var(--rx-text-color));
3637
+ }
3638
+ .rx-content pre code {
3639
+ position: initial;
3640
+ color: inherit;
3641
+ padding: 0;
3642
+ border: 0;
3643
+ font-size: 100%;
3644
+ display: block;
3645
+ line-height: inherit;
3646
+ background: none;
3647
+ }
3648
+ .rx-content blockquote,
3649
+ .rx-content figure:has(blockquote) {
3650
+ padding: 0;
3651
+ background: var(--rx-quote-bg, transparent);
3652
+ padding-left: 24px;
3653
+ border-left: var(--rx-quote-border-width, 2px) solid var(--rx-quote-border-color);
3654
+ }
3655
+ .rx-content blockquote p,
3656
+ .rx-content figure:has(blockquote) p {
3657
+ font-style: italic;
3658
+ font-weight: 500;
3659
+ font-size: 16px;
3660
+ line-height: 1.4;
3661
+ color: var(--rx-quote-color, var(--rx-text-color));
3662
+ }
3663
+ .rx-content blockquote p + p,
3664
+ .rx-content figure:has(blockquote) p + p {
3665
+ margin-top: 0.5em;
3666
+ }
3667
+ .rx-content figure:has(blockquote) blockquote {
3668
+ padding: 0;
3669
+ border: none;
3670
+ box-shadow: none;
3671
+ background: transparent;
3672
+ border-radius: 0;
3673
+ }
3674
+ .rx-content blockquote cite,
3675
+ .rx-content figcaption cite {
3676
+ font-style: italic;
3677
+ font-weight: normal;
3678
+ color: var(--rx-quote-caption-color, var(--rx-text-color));
3679
+ font-size: 14px;
3680
+ line-height: 1.3;
3681
+ }
3682
+ .rx-content caption {
3683
+ text-align: left;
3684
+ font-style: normal;
3685
+ }
3686
+ .rx-content table {
3687
+ border-collapse: collapse;
3688
+ border-spacing: 0;
3689
+ width: 100%;
3690
+ empty-cells: show;
3691
+ font-size: 15px;
3692
+ line-height: 1.5;
3693
+ color: var(--rx-table-color, var(--rx-text-color));
3694
+ }
3695
+ .rx-content td,
3696
+ .rx-content th {
3697
+ text-align: left;
3698
+ vertical-align: top;
3699
+ padding: 0.75em;
3700
+ border: 1px solid var(--rx-table-border);
3701
+ }
3702
+ .rx-content th {
3703
+ font-weight: normal;
3704
+ }
3705
+ .rx-content thead th {
3706
+ font-weight: bold;
3707
+ }
3708
+ .rx-content address {
3709
+ font-style: italic;
3710
+ }
3711
+ .rx-content figcaption {
3712
+ display: block;
3713
+ margin-top: 4px;
3714
+ font-size: 14px;
3715
+ line-height: 1.3;
3716
+ background: var(--rx-caption-bg, transparent);
3717
+ color: var(--rx-caption-color, var(--rx-text-color));
3718
+ }
3719
+ .rx-content figure > img,
3720
+ .rx-content figure > img a,
3721
+ .rx-content figure > iframe,
3722
+ .rx-content figure > pre,
3723
+ .rx-content figure > div {
3724
+ vertical-align: middle;
3725
+ }
3726
+ .rx-content .embed-responsive:has(iframe) {
3727
+ position: relative;
3728
+ padding: 0;
3729
+ padding-bottom: 56.25%;
3730
+ height: 0;
3731
+ }
3732
+ .rx-content .embed-responsive:has(iframe) iframe {
3733
+ position: absolute;
3734
+ top: 0;
3735
+ left: 0;
3736
+ width: 100%;
3737
+ height: 100%;
3738
+ }
3739
+ .rx-content div.embed-responsive {
3740
+ margin: 0;
3741
+ }
3742
+ .rx-content hr {
3743
+ --rx-line-size: 1px;
3744
+ --rx-line-width: 100%;
3745
+ --rx-line-style: solid;
3746
+ position: relative;
3747
+ line-height: 1;
3748
+ background: none;
3749
+ border: none !important;
3750
+ text-align: left;
3751
+ padding-top: 1.5em;
3752
+ padding-bottom: 1.5em;
3753
+ margin: 0 !important;
3754
+ opacity: 1;
3755
+ width: auto;
3756
+ }
3757
+ .rx-content hr:after {
3758
+ content: "";
3759
+ position: absolute;
3760
+ top: 50%;
3761
+ width: var(--rx-line-width);
3762
+ max-width: var(--rx-line-width);
3763
+ margin-top: -calc(var(--rx-line-size)/2);
3764
+ border-top-width: var(--rx-line-size);
3765
+ border-top-style: var(--rx-line-style);
3766
+ border-top-color: var(--rx-line-color);
3767
+ }
3768
+ .rx-content .wrap-center {
3769
+ text-align: center;
3770
+ }
3771
+ .rx-content .wrap-center img {
3772
+ margin-left: auto;
3773
+ margin-right: auto;
3774
+ }
3775
+ .rx-content .wrap-center figcaption {
3776
+ text-align: center;
3777
+ margin-left: auto;
3778
+ margin-right: auto;
3779
+ }
3780
+ .rx-content .float-left {
3781
+ float: left;
3782
+ margin-right: 1em;
3783
+ margin-bottom: 1em;
3784
+ max-width: 200px;
3785
+ }
3786
+ .rx-content .float-right {
3787
+ float: right;
3788
+ margin-left: 1em;
3789
+ margin-bottom: 1em;
3790
+ max-width: 200px;
3791
+ }
3792
+ .rx-content .outset-right {
3793
+ position: relative;
3794
+ width: calc(100% + var(--rx-outset-md));
3795
+ max-width: calc(100% + var(--rx-outset-md));
3796
+ transform: translateX(var(--rx-outset-md)) translate3d(0, 0, 0);
3797
+ left: calc(var(--rx-outset-md) * -1);
3798
+ }
3799
+ .rx-content .outset-left {
3800
+ width: calc(100% + var(--rx-outset-md));
3801
+ max-width: calc(100% + var(--rx-outset-md));
3802
+ transform: translateX(calc(var(--rx-outset-md) * -1)) translate3d(0, 0, 0);
3803
+ }
3804
+ .rx-content .outset-both {
3805
+ position: relative;
3806
+ width: calc(100% + var(--rx-outset-md) + var(--rx-outset-md));
3807
+ max-width: calc(100% + var(--rx-outset-md) + var(--rx-outset-md));
3808
+ transform: translateX(-50%) translate3d(0, 0, 0);
3809
+ left: 50%;
3810
+ }
3811
+ :root {
3812
+ --rx-rounded-sm: var(--bs-border-radius);
3813
+ --rx-rounded-md: var(--bs-border-radius);
3814
+ --rx-rounded-lg: var(--bs-border-radius);
3815
+ --rx-rounded-xl: var(--bs-border-radius);
3816
+ --rx-toolbar-icon-size: 18px;
3817
+ --rx-toolbar-button-width: 34px;
3818
+ --rx-toolbar-button-height: 24px;
3819
+ --rx-toolbar-padding: 8px;
3820
+ --rx-shadow-modal: var(--bs-box-shadow);
3821
+ --rx-shadow-dropdown: var(--bs-box-shadow);
3822
+ --bs-input-btn-focus-width: .25rem;
3823
+ --bs-input-focus-width: var(--bs-input-btn-focus-width);
3824
+ --bs-input-focus-color: var(--bs-body-color);
3825
+ }
3826
+ .rx-container {
3827
+ overflow: hidden;
3828
+ padding: 0 !important;
3829
+ border: var(--bs-border-width) solid var(--bs-border-color);
3830
+ border-radius: var(--bs-border-radius);
3831
+ background-position: bottom 0.225rem right 0.225rem;
3832
+ }
3833
+ .rx-container.rx-in-focus {
3834
+ color: var(--bs-input-focus-color);
3835
+ background-color: var(--bs-body-bg);
3836
+ border-color: rgba(var(--bs-primary-rgb), 0.5);
3837
+ outline: 0;
3838
+ box-shadow: 0 0 0 var(--bs-input-btn-focus-width) rgba(var(--bs-primary-rgb), 0.25);
3839
+ }
3840
+ .rx-container.rx-in-focus.is-valid {
3841
+ border-color: var(--bs-success);
3842
+ box-shadow: 0 0 0 var(--bs-input-focus-width) rgba(var(--bs-success-rgb), 0.25);
3843
+ }
3844
+ .rx-container.rx-in-focus.is-invalid {
3845
+ border-color: var(--bs-danger);
3846
+ box-shadow: 0 0 0 var(--bs-input-focus-width) rgba(var(--bs-danger-rgb), 0.25);
3847
+ }
3848
+ .rx-content {
3849
+ padding: 0.375rem 0.75rem !important;
3850
+ position: relative;
3851
+ }
3852
+ .rx-content p,
3853
+ .rx-content ul li,
3854
+ .rx-content ol li,
3855
+ .rx-content td {
3856
+ font-size: var(--bs-body-font-size);
3857
+ line-height: 1.5;
3858
+ color: var(--bs-body-color);
3859
+ }
3860
+ .rx-content p + * {
3861
+ margin-top: 0.725rem;
3862
+ }
3863
+ .rx-placeholder:before {
3864
+ font-size: var(--bs-body-font-size);
3865
+ color: var(--bs-secondary-color);
3866
+ opacity: 1;
3867
+ }
3868
+ .rx-control {
3869
+ margin-left: -0.75rem;
3870
+ }
3871
+ .rx-toolbar-container {
3872
+ border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent);
3873
+ }
3874
+ .rx-toolbar .rx-button-icon span {
3875
+ color: var(--bs-secondary-color);
3876
+ }
3877
+ .rx-toolbar .rx-button-icon:hover span {
3878
+ color: var(--bs-body-color);
3879
+ }
3880
+ .rx-popup {
3881
+ z-index: 2000;
3882
+ }
3883
+ .rx-dropdown {
3884
+ border: var(--bs-border-width) solid var(--bs-border-color-translucent);
3885
+ }
3886
+ .rx-modal {
3887
+ border: var(--bs-border-width) solid var(--bs-border-color-translucent);
3888
+ }
3889
+ .rx-modal-header {
3890
+ display: none;
3891
+ }
3892
+ .rx-form-input,
3893
+ .rx-form-textarea {
3894
+ border-radius: var(--bs-border-radius);
3895
+ background: var(--bs-body-bg);
3896
+ border: var(--bs-border-width) solid var(--bs-border-color);
3897
+ }
3898
+ .rx-form-input:focus,
3899
+ .rx-form-textarea:focus {
3900
+ border-color: rgba(var(--bs-primary-rgb), 0.5);
3901
+ outline: 0;
3902
+ box-shadow: 0 0 0 var(--bs-input-btn-focus-width) rgba(var(--bs-primary-rgb), 0.25);
3903
+ }
3904
+ .rx-form-button {
3905
+ font-size: var(--bs-btn-font-size);
3906
+ font-weight: var(--bs-btn-font-weight);
3907
+ border-radius: var(--bs-border-radius);
3908
+ }
3909
+ .rx-form-button-primary {
3910
+ --bs-btn-bg: #0d6efd;
3911
+ --bs-btn-hover-bg: #0b5ed7;
3912
+ background-color: var(--bs-btn-bg);
3913
+ }
3914
+ .rx-form-button-primary:hover {
3915
+ background-color: var(--bs-btn-hover-bg);
3916
+ }
3917
+ .rx-content a.button {
3918
+ display: inline-block;
3919
+ padding: 0.25em 0.5em;
3920
+ margin: 0.25em 0;
3921
+ border-radius: 4px;
3922
+ text-align: center;
3923
+ text-decoration: none;
3924
+ cursor: pointer;
3925
+ }
3926
+ .rx-content a.button-primary {
3927
+ color: var(--bs-white);
3928
+ background: var(--bs-primary);
3929
+ border: 1px solid var(--bs-primary);
3930
+ }
3931
+ .rx-content a.button-secondary {
3932
+ color: var(--bs-primary);
3933
+ background: var(--bs-white);
3934
+ border: 1px solid var(--bs-primary);
3935
+ }
1286
3936
  html {
1287
3937
  height: 100%;
1288
3938
  }
@@ -1292,11 +3942,6 @@ html {
1292
3942
  .list-group-item.active .text-muted {
1293
3943
  color: var(--fs-list-group-active-color) !important;
1294
3944
  }
1295
- mark {
1296
- --fs-mark-padding: .1875em;
1297
- padding: 0;
1298
- box-shadow: 0 var(--fs-mark-padding) 0 var(--bs-yellow), 0 calc(-1 * var(--fs-mark-padding)) 0 var(--bs-yellow);
1299
- }
1300
3945
  .form-label[required=required]:after,
1301
3946
  .form-check-label[required=required]:after {
1302
3947
  content: " *";