@wordpress/edit-site 6.30.0 → 6.30.1-next.836ecdcae.0

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.
@@ -238,7 +238,8 @@
238
238
  }
239
239
  }
240
240
 
241
- .dataviews-wrapper {
241
+ .dataviews-wrapper,
242
+ .dataviews-picker-wrapper {
242
243
  height: 100%;
243
244
  overflow: auto;
244
245
  box-sizing: border-box;
@@ -351,7 +352,8 @@
351
352
  /**
352
353
  * Applying a consistent 24px padding when DataViews are placed within cards.
353
354
  */
354
- .components-card__body:has(> .dataviews-wrapper) {
355
+ .components-card__body:has(> .dataviews-wrapper),
356
+ .components-card__body:has(> .dataviews-picker-wrapper) {
355
357
  padding: 8px 0 0;
356
358
  overflow: hidden;
357
359
  }
@@ -360,15 +362,25 @@
360
362
  .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
361
363
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
362
364
  .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
363
- .components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
365
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
366
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
367
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
368
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
369
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
370
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
371
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
364
372
  padding-inline: 24px;
365
373
  }
366
374
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
367
- .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
375
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
376
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
377
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
368
378
  padding-inline-start: 24px;
369
379
  }
370
380
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
371
- .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
381
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
382
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
383
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
372
384
  padding-inline-end: 24px;
373
385
  }
374
386
 
@@ -941,6 +953,15 @@
941
953
  z-index: 1000001;
942
954
  }
943
955
 
956
+ .dataviews-picker-footer__bulk-selection {
957
+ align-self: flex-start;
958
+ height: 32px;
959
+ }
960
+
961
+ .dataviews-picker-footer__actions {
962
+ align-self: flex-end;
963
+ }
964
+
944
965
  .dataviews-selection-checkbox {
945
966
  --checkbox-input-size: 24px;
946
967
  line-height: 0;
@@ -1052,7 +1073,7 @@
1052
1073
  color: #757575;
1053
1074
  }
1054
1075
 
1055
- .dataviews-view-grid {
1076
+ .dataviews-view-grid-items {
1056
1077
  margin-bottom: auto;
1057
1078
  display: grid;
1058
1079
  gap: 32px;
@@ -1061,21 +1082,22 @@
1061
1082
  padding: 0 48px 24px;
1062
1083
  container-type: inline-size;
1063
1084
  /**
1064
- * Match the padding applied to other DataViews components at the same
1065
- * max-width.
1066
- */
1085
+ * Breakpoints were adjusted from media queries breakpoints to account for
1086
+ * the sidebar width. This was done to match the existing styles we had.
1087
+ */
1067
1088
  }
1068
1089
  @container (max-width: 430px) {
1069
- .dataviews-view-grid {
1090
+ .dataviews-view-grid-items {
1070
1091
  padding-right: 24px;
1071
1092
  padding-left: 24px;
1072
1093
  }
1073
1094
  }
1074
1095
  @media not (prefers-reduced-motion) {
1075
- .dataviews-view-grid {
1096
+ .dataviews-view-grid-items {
1076
1097
  transition: padding ease-out 0.1s;
1077
1098
  }
1078
1099
  }
1100
+
1079
1101
  .dataviews-view-grid .dataviews-view-grid__card {
1080
1102
  height: 100%;
1081
1103
  justify-content: flex-start;
@@ -1674,6 +1696,167 @@ div.dataviews-view-list {
1674
1696
  color: #1e1e1e;
1675
1697
  }
1676
1698
 
1699
+ .dataviews-view-grid-items {
1700
+ margin-bottom: auto;
1701
+ display: grid;
1702
+ gap: 32px;
1703
+ grid-template-rows: max-content;
1704
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1705
+ padding: 0 48px 24px;
1706
+ container-type: inline-size;
1707
+ /**
1708
+ * Breakpoints were adjusted from media queries breakpoints to account for
1709
+ * the sidebar width. This was done to match the existing styles we had.
1710
+ */
1711
+ }
1712
+ @container (max-width: 430px) {
1713
+ .dataviews-view-grid-items {
1714
+ padding-right: 24px;
1715
+ padding-left: 24px;
1716
+ }
1717
+ }
1718
+ @media not (prefers-reduced-motion) {
1719
+ .dataviews-view-grid-items {
1720
+ transition: padding ease-out 0.1s;
1721
+ }
1722
+ }
1723
+
1724
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
1725
+ height: 100%;
1726
+ justify-content: flex-start;
1727
+ position: relative;
1728
+ }
1729
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
1730
+ padding: 8px 0 4px;
1731
+ }
1732
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
1733
+ min-height: 24px;
1734
+ display: flex;
1735
+ align-items: center;
1736
+ }
1737
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
1738
+ width: fit-content;
1739
+ }
1740
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
1741
+ color: #1e1e1e;
1742
+ }
1743
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
1744
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
1745
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1746
+ }
1747
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
1748
+ box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1749
+ }
1750
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
1751
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1752
+ }
1753
+ .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
1754
+ outline: none;
1755
+ }
1756
+ .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
1757
+ outline: 2px solid var(--wp-admin-theme-color);
1758
+ }
1759
+ .dataviews-view-picker-grid .dataviews-selection-checkbox {
1760
+ top: 8px !important;
1761
+ }
1762
+ .dataviews-view-picker-grid .dataviews-selection-checkbox input {
1763
+ pointer-events: none;
1764
+ }
1765
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
1766
+ width: 100%;
1767
+ aspect-ratio: 1/1;
1768
+ background-color: #fff;
1769
+ border-radius: 4px;
1770
+ position: relative;
1771
+ }
1772
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
1773
+ object-fit: cover;
1774
+ width: 100%;
1775
+ height: 100%;
1776
+ }
1777
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
1778
+ content: "";
1779
+ position: absolute;
1780
+ top: 0;
1781
+ right: 0;
1782
+ width: 100%;
1783
+ height: 100%;
1784
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1785
+ border-radius: 4px;
1786
+ pointer-events: none;
1787
+ }
1788
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
1789
+ position: relative;
1790
+ font-size: 12px;
1791
+ line-height: 16px;
1792
+ }
1793
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
1794
+ padding: 0 0 12px;
1795
+ }
1796
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
1797
+ min-height: 24px;
1798
+ line-height: 20px;
1799
+ padding-top: 2px;
1800
+ }
1801
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
1802
+ min-height: 24px;
1803
+ align-items: center;
1804
+ }
1805
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
1806
+ width: 35%;
1807
+ color: #757575;
1808
+ overflow: hidden;
1809
+ text-overflow: ellipsis;
1810
+ white-space: nowrap;
1811
+ }
1812
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
1813
+ width: 65%;
1814
+ overflow: hidden;
1815
+ text-overflow: ellipsis;
1816
+ white-space: nowrap;
1817
+ }
1818
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
1819
+ display: none;
1820
+ }
1821
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
1822
+ padding-bottom: 12px;
1823
+ }
1824
+
1825
+ .dataviews-view-picker-grid__field-value:empty,
1826
+ .dataviews-view-picker-grid__field:empty {
1827
+ display: none;
1828
+ }
1829
+
1830
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
1831
+ position: absolute;
1832
+ top: -9999em;
1833
+ right: 8px;
1834
+ z-index: 1;
1835
+ }
1836
+ @media (hover: none) {
1837
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
1838
+ top: 8px;
1839
+ }
1840
+ }
1841
+
1842
+ .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
1843
+ .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
1844
+ .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
1845
+ top: 8px;
1846
+ }
1847
+
1848
+ .dataviews-view-picker-grid__media--clickable {
1849
+ cursor: pointer;
1850
+ }
1851
+
1852
+ .dataviews-view-picker-grid-group__header {
1853
+ font-size: 15px;
1854
+ font-weight: 500;
1855
+ color: #1e1e1e;
1856
+ margin: 0 0 8px 0;
1857
+ padding: 0 48px;
1858
+ }
1859
+
1677
1860
  .dataviews-controls__datetime {
1678
1861
  border: none;
1679
1862
  padding: 0;
@@ -2145,7 +2328,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2145
2328
  contain: content;
2146
2329
  }
2147
2330
 
2148
- @keyframes _3br4l_slide-from-right {
2331
+ @keyframes _pg5yl_slide-from-right {
2149
2332
  from {
2150
2333
  transform: translateX(-50px);
2151
2334
  opacity: 0;
@@ -2155,7 +2338,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2155
2338
  opacity: 1;
2156
2339
  }
2157
2340
  }
2158
- @keyframes _3br4l_slide-from-left {
2341
+ @keyframes _pg5yl_slide-from-left {
2159
2342
  from {
2160
2343
  transform: translateX(50px);
2161
2344
  opacity: 0;
@@ -2211,10 +2394,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2211
2394
  }
2212
2395
  }
2213
2396
  .edit-site-sidebar__screen-wrapper.slide-from-left {
2214
- animation-name: _3br4l_slide-from-left;
2397
+ animation-name: _pg5yl_slide-from-left;
2215
2398
  }
2216
2399
  .edit-site-sidebar__screen-wrapper.slide-from-right {
2217
- animation-name: _3br4l_slide-from-right;
2400
+ animation-name: _pg5yl_slide-from-right;
2218
2401
  }
2219
2402
 
2220
2403
  .edit-site-site-hub {
@@ -238,7 +238,8 @@
238
238
  }
239
239
  }
240
240
 
241
- .dataviews-wrapper {
241
+ .dataviews-wrapper,
242
+ .dataviews-picker-wrapper {
242
243
  height: 100%;
243
244
  overflow: auto;
244
245
  box-sizing: border-box;
@@ -351,7 +352,8 @@
351
352
  /**
352
353
  * Applying a consistent 24px padding when DataViews are placed within cards.
353
354
  */
354
- .components-card__body:has(> .dataviews-wrapper) {
355
+ .components-card__body:has(> .dataviews-wrapper),
356
+ .components-card__body:has(> .dataviews-picker-wrapper) {
355
357
  padding: 8px 0 0;
356
358
  overflow: hidden;
357
359
  }
@@ -360,15 +362,25 @@
360
362
  .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
361
363
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
362
364
  .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
363
- .components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
365
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
366
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
367
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
368
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
369
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
370
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
371
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
364
372
  padding-inline: 24px;
365
373
  }
366
374
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
367
- .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
375
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
376
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
377
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
368
378
  padding-inline-start: 24px;
369
379
  }
370
380
  .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
371
- .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
381
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
382
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
383
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
372
384
  padding-inline-end: 24px;
373
385
  }
374
386
 
@@ -941,6 +953,15 @@
941
953
  z-index: 1000001;
942
954
  }
943
955
 
956
+ .dataviews-picker-footer__bulk-selection {
957
+ align-self: flex-start;
958
+ height: 32px;
959
+ }
960
+
961
+ .dataviews-picker-footer__actions {
962
+ align-self: flex-end;
963
+ }
964
+
944
965
  .dataviews-selection-checkbox {
945
966
  --checkbox-input-size: 24px;
946
967
  line-height: 0;
@@ -1052,7 +1073,7 @@
1052
1073
  color: #757575;
1053
1074
  }
1054
1075
 
1055
- .dataviews-view-grid {
1076
+ .dataviews-view-grid-items {
1056
1077
  margin-bottom: auto;
1057
1078
  display: grid;
1058
1079
  gap: 32px;
@@ -1061,21 +1082,22 @@
1061
1082
  padding: 0 48px 24px;
1062
1083
  container-type: inline-size;
1063
1084
  /**
1064
- * Match the padding applied to other DataViews components at the same
1065
- * max-width.
1066
- */
1085
+ * Breakpoints were adjusted from media queries breakpoints to account for
1086
+ * the sidebar width. This was done to match the existing styles we had.
1087
+ */
1067
1088
  }
1068
1089
  @container (max-width: 430px) {
1069
- .dataviews-view-grid {
1090
+ .dataviews-view-grid-items {
1070
1091
  padding-left: 24px;
1071
1092
  padding-right: 24px;
1072
1093
  }
1073
1094
  }
1074
1095
  @media not (prefers-reduced-motion) {
1075
- .dataviews-view-grid {
1096
+ .dataviews-view-grid-items {
1076
1097
  transition: padding ease-out 0.1s;
1077
1098
  }
1078
1099
  }
1100
+
1079
1101
  .dataviews-view-grid .dataviews-view-grid__card {
1080
1102
  height: 100%;
1081
1103
  justify-content: flex-start;
@@ -1674,6 +1696,167 @@ div.dataviews-view-list {
1674
1696
  color: #1e1e1e;
1675
1697
  }
1676
1698
 
1699
+ .dataviews-view-grid-items {
1700
+ margin-bottom: auto;
1701
+ display: grid;
1702
+ gap: 32px;
1703
+ grid-template-rows: max-content;
1704
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1705
+ padding: 0 48px 24px;
1706
+ container-type: inline-size;
1707
+ /**
1708
+ * Breakpoints were adjusted from media queries breakpoints to account for
1709
+ * the sidebar width. This was done to match the existing styles we had.
1710
+ */
1711
+ }
1712
+ @container (max-width: 430px) {
1713
+ .dataviews-view-grid-items {
1714
+ padding-left: 24px;
1715
+ padding-right: 24px;
1716
+ }
1717
+ }
1718
+ @media not (prefers-reduced-motion) {
1719
+ .dataviews-view-grid-items {
1720
+ transition: padding ease-out 0.1s;
1721
+ }
1722
+ }
1723
+
1724
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
1725
+ height: 100%;
1726
+ justify-content: flex-start;
1727
+ position: relative;
1728
+ }
1729
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
1730
+ padding: 8px 0 4px;
1731
+ }
1732
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
1733
+ min-height: 24px;
1734
+ display: flex;
1735
+ align-items: center;
1736
+ }
1737
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
1738
+ width: fit-content;
1739
+ }
1740
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
1741
+ color: #1e1e1e;
1742
+ }
1743
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
1744
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
1745
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1746
+ }
1747
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
1748
+ box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1749
+ }
1750
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
1751
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1752
+ }
1753
+ .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
1754
+ outline: none;
1755
+ }
1756
+ .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
1757
+ outline: 2px solid var(--wp-admin-theme-color);
1758
+ }
1759
+ .dataviews-view-picker-grid .dataviews-selection-checkbox {
1760
+ top: 8px !important;
1761
+ }
1762
+ .dataviews-view-picker-grid .dataviews-selection-checkbox input {
1763
+ pointer-events: none;
1764
+ }
1765
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
1766
+ width: 100%;
1767
+ aspect-ratio: 1/1;
1768
+ background-color: #fff;
1769
+ border-radius: 4px;
1770
+ position: relative;
1771
+ }
1772
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
1773
+ object-fit: cover;
1774
+ width: 100%;
1775
+ height: 100%;
1776
+ }
1777
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
1778
+ content: "";
1779
+ position: absolute;
1780
+ top: 0;
1781
+ left: 0;
1782
+ width: 100%;
1783
+ height: 100%;
1784
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1785
+ border-radius: 4px;
1786
+ pointer-events: none;
1787
+ }
1788
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
1789
+ position: relative;
1790
+ font-size: 12px;
1791
+ line-height: 16px;
1792
+ }
1793
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
1794
+ padding: 0 0 12px;
1795
+ }
1796
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
1797
+ min-height: 24px;
1798
+ line-height: 20px;
1799
+ padding-top: 2px;
1800
+ }
1801
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
1802
+ min-height: 24px;
1803
+ align-items: center;
1804
+ }
1805
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
1806
+ width: 35%;
1807
+ color: #757575;
1808
+ overflow: hidden;
1809
+ text-overflow: ellipsis;
1810
+ white-space: nowrap;
1811
+ }
1812
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
1813
+ width: 65%;
1814
+ overflow: hidden;
1815
+ text-overflow: ellipsis;
1816
+ white-space: nowrap;
1817
+ }
1818
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
1819
+ display: none;
1820
+ }
1821
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
1822
+ padding-bottom: 12px;
1823
+ }
1824
+
1825
+ .dataviews-view-picker-grid__field-value:empty,
1826
+ .dataviews-view-picker-grid__field:empty {
1827
+ display: none;
1828
+ }
1829
+
1830
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
1831
+ position: absolute;
1832
+ top: -9999em;
1833
+ left: 8px;
1834
+ z-index: 1;
1835
+ }
1836
+ @media (hover: none) {
1837
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
1838
+ top: 8px;
1839
+ }
1840
+ }
1841
+
1842
+ .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
1843
+ .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
1844
+ .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
1845
+ top: 8px;
1846
+ }
1847
+
1848
+ .dataviews-view-picker-grid__media--clickable {
1849
+ cursor: pointer;
1850
+ }
1851
+
1852
+ .dataviews-view-picker-grid-group__header {
1853
+ font-size: 15px;
1854
+ font-weight: 500;
1855
+ color: #1e1e1e;
1856
+ margin: 0 0 8px 0;
1857
+ padding: 0 48px;
1858
+ }
1859
+
1677
1860
  .dataviews-controls__datetime {
1678
1861
  border: none;
1679
1862
  padding: 0;
@@ -2145,7 +2328,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2145
2328
  contain: content;
2146
2329
  }
2147
2330
 
2148
- @keyframes _3br4l_slide-from-right {
2331
+ @keyframes _pg5yl_slide-from-right {
2149
2332
  from {
2150
2333
  transform: translateX(50px);
2151
2334
  opacity: 0;
@@ -2155,7 +2338,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2155
2338
  opacity: 1;
2156
2339
  }
2157
2340
  }
2158
- @keyframes _3br4l_slide-from-left {
2341
+ @keyframes _pg5yl_slide-from-left {
2159
2342
  from {
2160
2343
  transform: translateX(-50px);
2161
2344
  opacity: 0;
@@ -2211,10 +2394,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2211
2394
  }
2212
2395
  }
2213
2396
  .edit-site-sidebar__screen-wrapper.slide-from-left {
2214
- animation-name: _3br4l_slide-from-left;
2397
+ animation-name: _pg5yl_slide-from-left;
2215
2398
  }
2216
2399
  .edit-site-sidebar__screen-wrapper.slide-from-right {
2217
- animation-name: _3br4l_slide-from-right;
2400
+ animation-name: _pg5yl_slide-from-right;
2218
2401
  }
2219
2402
 
2220
2403
  .edit-site-site-hub {