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,5 +1,3 @@
1
- @charset "UTF-8";
2
-
3
1
  /* src/scss/formstrap.scss */
4
2
  .ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
5
3
  visibility: visible !important;
@@ -1285,2529 +1283,6 @@ span.flatpickr-weekday {
1285
1283
  transform: translate3d(0, 0, 0);
1286
1284
  }
1287
1285
  }
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
1286
  :root {
3812
1287
  --rx-rounded-sm: var(--bs-border-radius);
3813
1288
  --rx-rounded-md: var(--bs-border-radius);
@@ -3892,13 +1367,15 @@ span.flatpickr-weekday {
3892
1367
  display: none;
3893
1368
  }
3894
1369
  .rx-form-input,
3895
- .rx-form-textarea {
1370
+ .rx-form-textarea,
1371
+ .rx-form-select {
3896
1372
  border-radius: var(--bs-border-radius);
3897
1373
  background: var(--bs-body-bg);
3898
1374
  border: var(--bs-border-width) solid var(--bs-border-color);
3899
1375
  }
3900
1376
  .rx-form-input:focus,
3901
- .rx-form-textarea:focus {
1377
+ .rx-form-textarea:focus,
1378
+ .rx-form-select:focus {
3902
1379
  border-color: rgba(var(--bs-primary-rgb), 0.5);
3903
1380
  outline: 0;
3904
1381
  box-shadow: 0 0 0 var(--bs-input-btn-focus-width) rgba(var(--bs-primary-rgb), 0.25);