@eworkbase/plugin-git-diff 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/ui/style.css CHANGED
@@ -7,6 +7,7 @@
7
7
  font-size: 13px;
8
8
  line-height: 1.5;
9
9
  display: flex;
10
+ overflow-y: auto;
10
11
  }
11
12
 
12
13
  .azYpCW_app ::selection {
@@ -170,31 +171,23 @@
170
171
  min-height: 32px;
171
172
  color: var(--color-brand);
172
173
  cursor: pointer;
173
- align-items: center;
174
- gap: 6px;
175
174
  padding: 5px 10px;
176
- list-style: none;
177
- display: flex;
178
- }
179
-
180
- .azYpCW_repositoryHeading::-webkit-details-marker {
181
- display: none;
182
175
  }
183
176
 
184
177
  .azYpCW_repositoryHeading:hover {
185
178
  background: var(--color-surface-muted);
186
179
  }
187
180
 
188
- .azYpCW_repositoryHeading > svg {
189
- flex-shrink: 0;
190
- }
191
-
192
- .azYpCW_disclosureIcon {
193
- transition: transform .14s ease-out;
181
+ .azYpCW_repositoryHeadingContent {
182
+ vertical-align: middle;
183
+ align-items: center;
184
+ gap: 6px;
185
+ width: calc(100% - 1.25em);
186
+ display: inline-flex;
194
187
  }
195
188
 
196
- .azYpCW_repository[open] > summary .azYpCW_disclosureIcon {
197
- transform: rotate(90deg);
189
+ .azYpCW_repositoryHeadingContent > svg {
190
+ flex-shrink: 0;
198
191
  }
199
192
 
200
193
  .azYpCW_repositoryCount {
@@ -220,7 +213,7 @@
220
213
  font-weight: 600;
221
214
  }
222
215
 
223
- .azYpCW_repositoryHeading > span {
216
+ .azYpCW_repositoryHeadingContent > span {
224
217
  font-variant-numeric: tabular-nums;
225
218
  font-size: 11px;
226
219
  }
@@ -581,27 +574,6 @@
581
574
  display: grid;
582
575
  }
583
576
 
584
- .azYpCW_error {
585
- background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
586
- color: var(--color-danger);
587
- overflow-wrap: anywhere;
588
- justify-content: space-between;
589
- align-items: center;
590
- gap: 12px;
591
- padding: 10px 18px;
592
- font-size: 12px;
593
- display: flex;
594
- }
595
-
596
- .azYpCW_error button {
597
- color: inherit;
598
- text-underline-offset: 3px;
599
- background: none;
600
- border: 0;
601
- flex-shrink: 0;
602
- text-decoration: underline;
603
- }
604
-
605
577
  .azYpCW_result {
606
578
  background: var(--color-surface-muted);
607
579
  border-bottom: 1px solid var(--color-border);
@@ -617,6 +589,18 @@
617
589
  margin: 3px 0;
618
590
  }
619
591
 
592
+ .azYpCW_commitMessage {
593
+ white-space: pre-wrap;
594
+ max-height: 100px;
595
+ overflow: auto;
596
+ }
597
+
598
+ .azYpCW_commitError {
599
+ color: var(--color-danger);
600
+ overflow-wrap: anywhere;
601
+ margin-top: 12px !important;
602
+ }
603
+
620
604
  .azYpCW_contentNote {
621
605
  background: var(--color-brand-weak);
622
606
  color: var(--color-brand);
@@ -821,6 +805,15 @@
821
805
  gap: 8px;
822
806
  }
823
807
 
808
+ .azYpCW_header {
809
+ flex-wrap: wrap;
810
+ gap: 6px;
811
+ }
812
+
813
+ .azYpCW_headerActions {
814
+ margin-left: auto;
815
+ }
816
+
824
817
  .azYpCW_workspace {
825
818
  display: flex;
826
819
  }
@@ -867,6 +860,8 @@
867
860
  }
868
861
 
869
862
  .azYpCW_selectionActions {
863
+ flex-wrap: wrap;
864
+ justify-content: flex-end;
870
865
  margin-left: auto;
871
866
  }
872
867
 
@@ -879,12 +874,6 @@
879
874
  width: 100%;
880
875
  }
881
876
  }
882
-
883
- @media (prefers-reduced-motion: reduce) {
884
- .azYpCW_disclosureIcon {
885
- transition: none;
886
- }
887
- }
888
877
  @layer base {
889
878
  :root {
890
879
  --color-foreground: #342f28;
@@ -1381,6 +1370,104 @@
1381
1370
  line-height: 1.5;
1382
1371
  }
1383
1372
 
1373
+ .workbase-plugin-error {
1374
+ border: 1px solid color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
1375
+ min-width: 0;
1376
+ max-height: 100%;
1377
+ color: var(--color-foreground);
1378
+ background: color-mix(in srgb, var(--color-danger) 5%, var(--color-surface));
1379
+ text-align: left;
1380
+ overflow-wrap: anywhere;
1381
+ scrollbar-color: var(--color-border-strong) transparent;
1382
+ scrollbar-width: thin;
1383
+ border-radius: 8px;
1384
+ flex-shrink: 0;
1385
+ padding: 16px 20px;
1386
+ overflow-y: auto;
1387
+ }
1388
+
1389
+ .workbase-plugin-error:focus-visible {
1390
+ outline: 2px solid var(--color-accent);
1391
+ outline-offset: -2px;
1392
+ }
1393
+
1394
+ .workbase-plugin-error .workbase-error-title {
1395
+ color: var(--color-danger);
1396
+ margin: 0 0 8px;
1397
+ font-size: 14px;
1398
+ font-weight: 600;
1399
+ line-height: 1.5;
1400
+ }
1401
+
1402
+ .workbase-plugin-error .workbase-error-cause {
1403
+ color: var(--color-foreground);
1404
+ white-space: pre-wrap;
1405
+ margin: 0;
1406
+ font-size: 14px;
1407
+ font-weight: 500;
1408
+ line-height: 1.65;
1409
+ }
1410
+
1411
+ .workbase-plugin-error .workbase-error-context {
1412
+ color: var(--color-foreground);
1413
+ margin: 8px 0 0;
1414
+ font-size: 12px;
1415
+ font-weight: 400;
1416
+ line-height: 1.65;
1417
+ }
1418
+
1419
+ .workbase-error-context strong {
1420
+ margin-right: 8px;
1421
+ font-weight: 600;
1422
+ }
1423
+
1424
+ .workbase-error-actions {
1425
+ flex-wrap: wrap;
1426
+ gap: 8px;
1427
+ margin-top: 12px;
1428
+ display: flex;
1429
+ }
1430
+
1431
+ .workbase-error-details {
1432
+ color: var(--color-foreground);
1433
+ margin-top: 12px;
1434
+ font-size: 12px;
1435
+ font-weight: 400;
1436
+ }
1437
+
1438
+ .workbase-error-details summary {
1439
+ cursor: pointer;
1440
+ text-underline-offset: 3px;
1441
+ width: fit-content;
1442
+ }
1443
+
1444
+ .workbase-error-details summary:hover {
1445
+ text-decoration: underline;
1446
+ }
1447
+
1448
+ .workbase-error-details summary:focus-visible {
1449
+ outline: 2px solid var(--color-accent);
1450
+ outline-offset: 3px;
1451
+ border-radius: 4px;
1452
+ }
1453
+
1454
+ .workbase-error-details pre {
1455
+ max-width: 100%;
1456
+ max-height: 240px;
1457
+ color: var(--color-foreground);
1458
+ background: var(--color-surface);
1459
+ white-space: pre-wrap;
1460
+ overflow-wrap: anywhere;
1461
+ scrollbar-color: var(--color-border-strong) transparent;
1462
+ scrollbar-width: thin;
1463
+ border-radius: 4px;
1464
+ margin: 8px 0 0;
1465
+ padding: 12px;
1466
+ font-size: 12px;
1467
+ line-height: 1.65;
1468
+ overflow: auto;
1469
+ }
1470
+
1384
1471
  .mantine-Notification-root {
1385
1472
  border: 1px solid var(--color-border);
1386
1473
  }
@@ -1403,6 +1490,440 @@
1403
1490
  outline-offset: 2px;
1404
1491
  }
1405
1492
 
1493
+ .workbase-execution-log {
1494
+ min-width: 0;
1495
+ font-size: 14px;
1496
+ line-height: 1.7;
1497
+ }
1498
+
1499
+ .workbase-execution-log[data-display="full"] {
1500
+ max-width: calc(75ch + 100px);
1501
+ }
1502
+
1503
+ .workbase-log-entries {
1504
+ margin: 0;
1505
+ padding: 0;
1506
+ list-style: none;
1507
+ }
1508
+
1509
+ .workbase-log-entry {
1510
+ grid-template-columns: 72px minmax(0, 1fr);
1511
+ gap: 28px;
1512
+ min-width: 0;
1513
+ padding: 0 0 20px;
1514
+ scroll-margin-top: 24px;
1515
+ display: grid;
1516
+ position: relative;
1517
+ }
1518
+
1519
+ .workbase-log-entry:last-child {
1520
+ padding-bottom: 0;
1521
+ }
1522
+
1523
+ .workbase-log-entry:before {
1524
+ content: "";
1525
+ border: 1px solid var(--color-border-strong);
1526
+ background: var(--color-surface);
1527
+ border-radius: 50%;
1528
+ width: 7px;
1529
+ height: 7px;
1530
+ position: absolute;
1531
+ top: 9px;
1532
+ left: 84px;
1533
+ }
1534
+
1535
+ .workbase-log-entry:not(:last-child):after {
1536
+ content: "";
1537
+ background: var(--color-border);
1538
+ width: 1px;
1539
+ position: absolute;
1540
+ top: 20px;
1541
+ bottom: 2px;
1542
+ left: 87px;
1543
+ }
1544
+
1545
+ .workbase-log-entry[data-status="failed"]:before {
1546
+ border-color: var(--color-danger);
1547
+ background: var(--color-danger);
1548
+ }
1549
+
1550
+ .workbase-log-entry[data-status="pending"]:before {
1551
+ border-color: var(--color-warning);
1552
+ background: var(--color-brand-weak);
1553
+ }
1554
+
1555
+ .workbase-log-entry:focus-visible {
1556
+ outline: 2px solid var(--color-accent);
1557
+ outline-offset: 4px;
1558
+ }
1559
+
1560
+ .workbase-log-time {
1561
+ color: var(--color-muted);
1562
+ font-variant-numeric: tabular-nums;
1563
+ text-align: right;
1564
+ white-space: nowrap;
1565
+ grid-area: 1 / 1;
1566
+ padding-top: 2px;
1567
+ font-size: 12px;
1568
+ }
1569
+
1570
+ .workbase-log-body {
1571
+ grid-area: 1 / 2;
1572
+ min-width: 0;
1573
+ position: relative;
1574
+ }
1575
+
1576
+ .workbase-log-heading {
1577
+ flex-wrap: wrap;
1578
+ align-items: baseline;
1579
+ gap: 4px 12px;
1580
+ min-height: 24px;
1581
+ margin-bottom: 8px;
1582
+ display: flex;
1583
+ }
1584
+
1585
+ .workbase-log-heading strong {
1586
+ overflow-wrap: anywhere;
1587
+ flex: 1;
1588
+ min-width: 0;
1589
+ font-size: 14px;
1590
+ font-weight: 600;
1591
+ }
1592
+
1593
+ .workbase-log-kind, .workbase-log-status, .workbase-log-note {
1594
+ color: var(--color-muted);
1595
+ font-size: 12px;
1596
+ }
1597
+
1598
+ .workbase-log-status {
1599
+ white-space: nowrap;
1600
+ margin-left: auto;
1601
+ }
1602
+
1603
+ .workbase-execution-log[data-display="full"] .workbase-log-heading strong {
1604
+ flex: 0 auto;
1605
+ }
1606
+
1607
+ .workbase-execution-log[data-display="full"] .workbase-log-status {
1608
+ margin-left: 0;
1609
+ }
1610
+
1611
+ .workbase-log-status[data-status="failed"], .workbase-log-error {
1612
+ color: var(--color-danger);
1613
+ }
1614
+
1615
+ .workbase-log-status[data-status="completed"] {
1616
+ color: var(--color-success);
1617
+ }
1618
+
1619
+ .workbase-log-status:is([data-status="needs_action"], [data-status="warning"]), .workbase-log-status:is([data-status="pending"], [data-status="invalid"]) {
1620
+ color: var(--color-warning);
1621
+ }
1622
+
1623
+ .workbase-log-content {
1624
+ overflow-wrap: anywhere;
1625
+ max-width: 75ch;
1626
+ }
1627
+
1628
+ .workbase-log-content > :first-child {
1629
+ margin-top: 0;
1630
+ }
1631
+
1632
+ .workbase-log-content > :last-child {
1633
+ margin-bottom: 0;
1634
+ }
1635
+
1636
+ .workbase-log-content :is(h1, h2, h3, h4) {
1637
+ margin-block: 20px 8px;
1638
+ font-size: 1em;
1639
+ line-height: 1.5;
1640
+ }
1641
+
1642
+ .workbase-log-content :is(p, ul, ol, pre, blockquote, table) {
1643
+ margin-block: 8px 12px;
1644
+ }
1645
+
1646
+ .workbase-log-content :is(ul, ol) {
1647
+ padding-left: 22px;
1648
+ }
1649
+
1650
+ .workbase-log-content ul {
1651
+ list-style: outside;
1652
+ }
1653
+
1654
+ .workbase-log-content ol {
1655
+ list-style: decimal;
1656
+ }
1657
+
1658
+ .workbase-log-content a {
1659
+ color: var(--color-brand);
1660
+ text-underline-offset: 3px;
1661
+ text-decoration: underline;
1662
+ }
1663
+
1664
+ .workbase-log-content pre, .workbase-log-details pre, .workbase-log-raw {
1665
+ background: var(--color-surface-muted);
1666
+ white-space: pre-wrap;
1667
+ overflow-wrap: anywhere;
1668
+ scrollbar-color: var(--color-border-strong) transparent;
1669
+ scrollbar-width: thin;
1670
+ max-width: 100%;
1671
+ max-height: 360px;
1672
+ padding: 12px;
1673
+ font-size: 12px;
1674
+ overflow: auto;
1675
+ }
1676
+
1677
+ .workbase-log-content table {
1678
+ display: block;
1679
+ overflow-x: auto;
1680
+ }
1681
+
1682
+ .workbase-log-content :is(th, td) {
1683
+ border-bottom: 1px solid var(--color-border);
1684
+ text-align: left;
1685
+ padding: 6px 10px;
1686
+ }
1687
+
1688
+ .workbase-log-details {
1689
+ margin-top: 10px;
1690
+ }
1691
+
1692
+ .workbase-log-details summary {
1693
+ cursor: pointer;
1694
+ width: fit-content;
1695
+ color: var(--color-muted);
1696
+ font-size: 12px;
1697
+ }
1698
+
1699
+ .workbase-log-operation > summary {
1700
+ cursor: pointer;
1701
+ border-radius: 4px;
1702
+ min-height: 28px;
1703
+ }
1704
+
1705
+ .workbase-log-operation .workbase-log-heading {
1706
+ vertical-align: middle;
1707
+ width: calc(100% - 1.25em);
1708
+ margin: 0;
1709
+ display: inline-flex;
1710
+ }
1711
+
1712
+ .workbase-log-operation[open] > summary {
1713
+ margin-bottom: 12px;
1714
+ }
1715
+
1716
+ .workbase-log-operation summary:hover {
1717
+ color: var(--color-brand);
1718
+ }
1719
+
1720
+ .workbase-execution-log summary:focus-visible {
1721
+ outline: 2px solid var(--color-accent);
1722
+ outline-offset: 4px;
1723
+ }
1724
+
1725
+ .workbase-execution-log ::selection {
1726
+ background: var(--color-brand-weak);
1727
+ color: var(--color-foreground);
1728
+ }
1729
+
1730
+ .workbase-log-anchor {
1731
+ position: absolute;
1732
+ top: 0;
1733
+ }
1734
+
1735
+ .workbase-log-calls {
1736
+ margin: 12px 0;
1737
+ padding: 0;
1738
+ list-style: none;
1739
+ }
1740
+
1741
+ .workbase-log-calls > li {
1742
+ grid-template-columns: minmax(0, 1fr) max-content max-content;
1743
+ align-items: center;
1744
+ gap: 4px 16px;
1745
+ padding-block: 8px;
1746
+ font-size: 13px;
1747
+ display: grid;
1748
+ }
1749
+
1750
+ .workbase-log-calls > li + li {
1751
+ border-top: 1px solid var(--color-border);
1752
+ }
1753
+
1754
+ .workbase-log-calls > li > span:first-child {
1755
+ overflow-wrap: anywhere;
1756
+ min-width: 0;
1757
+ }
1758
+
1759
+ .workbase-log-calls .workbase-log-note {
1760
+ white-space: nowrap;
1761
+ }
1762
+
1763
+ .workbase-log-link, .workbase-log-copy button {
1764
+ min-height: 32px;
1765
+ color: var(--color-brand);
1766
+ font: inherit;
1767
+ cursor: pointer;
1768
+ text-underline-offset: 3px;
1769
+ background: none;
1770
+ border: 0;
1771
+ padding: 4px 0;
1772
+ text-decoration: underline;
1773
+ }
1774
+
1775
+ .workbase-log-calls .workbase-log-link {
1776
+ white-space: nowrap;
1777
+ justify-self: end;
1778
+ }
1779
+
1780
+ .workbase-log-copy {
1781
+ color: var(--color-muted);
1782
+ align-items: center;
1783
+ gap: 12px;
1784
+ font-size: 12px;
1785
+ display: flex;
1786
+ }
1787
+
1788
+ .workbase-log-follow {
1789
+ justify-content: center;
1790
+ padding-top: 8px;
1791
+ display: flex;
1792
+ }
1793
+
1794
+ .workbase-log-latest {
1795
+ border: 1px solid var(--color-border-strong);
1796
+ background: var(--color-surface);
1797
+ min-height: 28px;
1798
+ color: var(--color-foreground);
1799
+ font: inherit;
1800
+ cursor: pointer;
1801
+ border-radius: 6px;
1802
+ padding: 3px 10px;
1803
+ font-size: 12px;
1804
+ }
1805
+
1806
+ .workbase-log-latest[data-following="true"] {
1807
+ visibility: hidden;
1808
+ }
1809
+
1810
+ .workbase-execution-log button:focus-visible, .workbase-log-viewport:focus-visible {
1811
+ outline: 2px solid var(--color-accent);
1812
+ outline-offset: 3px;
1813
+ }
1814
+
1815
+ .workbase-execution-log[data-display="compact"] .workbase-log-viewport {
1816
+ overscroll-behavior: contain;
1817
+ scrollbar-width: thin;
1818
+ scrollbar-color: var(--color-border-strong) transparent;
1819
+ max-height: 280px;
1820
+ padding: 2px 10px 2px 2px;
1821
+ overflow: auto;
1822
+ }
1823
+
1824
+ .workbase-execution-log[data-display="compact"] .workbase-log-entry {
1825
+ grid-template-columns: minmax(0, 1fr) auto;
1826
+ gap: 12px;
1827
+ padding: 0 0 18px 22px;
1828
+ }
1829
+
1830
+ .workbase-execution-log[data-display="compact"] .workbase-log-entry:before {
1831
+ top: 7px;
1832
+ left: 2px;
1833
+ }
1834
+
1835
+ .workbase-execution-log[data-display="compact"] .workbase-log-entry:after {
1836
+ top: 18px;
1837
+ left: 5px;
1838
+ }
1839
+
1840
+ .workbase-execution-log[data-display="compact"] .workbase-log-entry[data-status="completed"]:before {
1841
+ background: var(--color-success);
1842
+ border-color: var(--color-success);
1843
+ }
1844
+
1845
+ .workbase-execution-log[data-display="compact"] .workbase-log-time {
1846
+ grid-area: 1 / 2;
1847
+ padding: 0;
1848
+ line-height: 20px;
1849
+ }
1850
+
1851
+ .workbase-execution-log[data-display="compact"] .workbase-log-body {
1852
+ grid-area: 1 / 1;
1853
+ padding: 0;
1854
+ }
1855
+
1856
+ .workbase-execution-log[data-display="compact"] .workbase-log-heading {
1857
+ min-height: 20px;
1858
+ margin: 0;
1859
+ }
1860
+
1861
+ .workbase-execution-log[data-display="compact"] .workbase-log-heading strong {
1862
+ -webkit-line-clamp: 2;
1863
+ -webkit-box-orient: vertical;
1864
+ font-size: 13px;
1865
+ font-weight: 500;
1866
+ line-height: 20px;
1867
+ display: -webkit-box;
1868
+ overflow: hidden;
1869
+ }
1870
+
1871
+ .workbase-execution-log[data-display="compact"] .workbase-log-status {
1872
+ white-space: nowrap;
1873
+ flex-shrink: 0;
1874
+ font-size: 12px;
1875
+ }
1876
+
1877
+ .workbase-execution-log[data-display="compact"] .workbase-log-status:not([data-status="failed"], [data-status="needs_action"], [data-status="warning"], [data-status="interrupted"]) {
1878
+ clip-path: inset(50%);
1879
+ width: 1px;
1880
+ height: 1px;
1881
+ position: absolute;
1882
+ overflow: hidden;
1883
+ }
1884
+
1885
+ @media (width <= 600px) {
1886
+ .workbase-execution-log[data-display="full"] .workbase-log-entry {
1887
+ grid-template-columns: minmax(0, 1fr);
1888
+ gap: 4px;
1889
+ padding-left: 20px;
1890
+ }
1891
+
1892
+ .workbase-execution-log[data-display="full"] .workbase-log-time {
1893
+ text-align: left;
1894
+ grid-area: 1 / 1;
1895
+ }
1896
+
1897
+ .workbase-execution-log[data-display="full"] .workbase-log-body {
1898
+ grid-area: 2 / 1;
1899
+ }
1900
+
1901
+ .workbase-execution-log[data-display="full"] .workbase-log-entry:before {
1902
+ top: 9px;
1903
+ left: 0;
1904
+ }
1905
+
1906
+ .workbase-execution-log[data-display="full"] .workbase-log-entry:not(:last-child):after {
1907
+ left: 3px;
1908
+ }
1909
+
1910
+ .workbase-log-calls > li {
1911
+ grid-template-columns: minmax(0, 1fr) auto;
1912
+ }
1913
+
1914
+ .workbase-log-calls > li > span:first-child {
1915
+ grid-column: 1 / -1;
1916
+ }
1917
+
1918
+ .workbase-log-calls .workbase-log-link {
1919
+ grid-column: 2;
1920
+ }
1921
+
1922
+ .workbase-log-kind {
1923
+ margin-left: 0;
1924
+ }
1925
+ }
1926
+
1406
1927
  .maintenance-panel .mantine-Accordion-control {
1407
1928
  padding: 11px 14px;
1408
1929
  font-size: 13px;
@@ -1518,7 +2039,7 @@
1518
2039
  border-bottom-color: var(--color-brand-gold);
1519
2040
  }
1520
2041
 
1521
- .configuration-tabs button:hover {
2042
+ .configuration-tabs button:hover:not(:disabled) {
1522
2043
  color: var(--color-foreground);
1523
2044
  }
1524
2045
 
@@ -1529,7 +2050,8 @@
1529
2050
  }
1530
2051
 
1531
2052
  .configuration-tabs button:disabled {
1532
- cursor: default;
2053
+ cursor: not-allowed;
2054
+ opacity: .5;
1533
2055
  }
1534
2056
 
1535
2057
  .configuration-manager :is(button, input, select, textarea, summary, pre):focus-visible {
@@ -1587,6 +2109,12 @@
1587
2109
  opacity: 1;
1588
2110
  }
1589
2111
 
2112
+ .configuration-search:disabled {
2113
+ cursor: not-allowed;
2114
+ opacity: .5;
2115
+ background: var(--color-surface-muted);
2116
+ }
2117
+
1590
2118
  .configuration-items {
1591
2119
  align-content: start;
1592
2120
  gap: 4px;
@@ -1596,7 +2124,13 @@
1596
2124
  overflow: auto;
1597
2125
  }
1598
2126
 
2127
+ .configuration-item {
2128
+ min-width: 0;
2129
+ position: relative;
2130
+ }
2131
+
1599
2132
  .configuration-row {
2133
+ padding: 12px;
1600
2134
  text-align: left;
1601
2135
  width: 100%;
1602
2136
  color: inherit;
@@ -1607,7 +2141,7 @@
1607
2141
  border: 1px solid #0000;
1608
2142
  border-radius: 6px;
1609
2143
  gap: 5px;
1610
- padding: 12px;
2144
+ padding-inline-end: 44px;
1611
2145
  display: grid;
1612
2146
  }
1613
2147
 
@@ -1623,7 +2157,7 @@
1623
2157
  line-height: 1.5;
1624
2158
  }
1625
2159
 
1626
- .configuration-row:hover {
2160
+ .configuration-row:hover:not(:disabled) {
1627
2161
  background: var(--color-surface-muted);
1628
2162
  }
1629
2163
 
@@ -1637,7 +2171,13 @@
1637
2171
  }
1638
2172
 
1639
2173
  .configuration-row:disabled {
1640
- cursor: default;
2174
+ cursor: not-allowed;
2175
+ }
2176
+
2177
+ .configuration-editing-notice {
2178
+ color: var(--color-muted);
2179
+ margin: 0 0 12px;
2180
+ font-size: 12px;
1641
2181
  }
1642
2182
 
1643
2183
  .configuration-row:disabled:not([aria-current="true"]) {
@@ -1684,7 +2224,7 @@
1684
2224
  display: grid;
1685
2225
  }
1686
2226
 
1687
- .configuration-manager .configuration-header-feedback p {
2227
+ .configuration-manager .configuration-header-feedback > p {
1688
2228
  margin: 0;
1689
2229
  font-size: 12px;
1690
2230
  }
@@ -1697,6 +2237,34 @@
1697
2237
  min-width: 0;
1698
2238
  }
1699
2239
 
2240
+ .configuration-delete {
2241
+ opacity: 0;
2242
+ pointer-events: none;
2243
+ width: 28px;
2244
+ height: 28px;
2245
+ padding: 4px;
2246
+ position: absolute;
2247
+ inset-block-start: 8px;
2248
+ inset-inline-end: 8px;
2249
+ }
2250
+
2251
+ .configuration-delete svg {
2252
+ width: 16px;
2253
+ height: 16px;
2254
+ }
2255
+
2256
+ .configuration-item:hover .configuration-delete, .configuration-item:focus-within .configuration-delete {
2257
+ opacity: 1;
2258
+ pointer-events: auto;
2259
+ }
2260
+
2261
+ @media (hover: none), (pointer: coarse) {
2262
+ .configuration-delete {
2263
+ opacity: 1;
2264
+ pointer-events: auto;
2265
+ }
2266
+ }
2267
+
1700
2268
  .configuration-manager .configuration-detail-header h2 {
1701
2269
  letter-spacing: -.02em;
1702
2270
  overflow-wrap: anywhere;