PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
← All changes | build/styles/editor/style.css +797 -2870 23.6.2 → 22.7.0 View file →
@@ -68,14 +68,8 @@
68 68 /**
69 69 * Focus styles.
70 70 */
71 71 /**
72 - * Standard focus rings for the WordPress Design System.
73 - *
74 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
75 - * e.g. `&:focus { @include outset-ring__focus(); }`.
76 - */
77 -/**
78 72 * Applies editor left position to the selector passed as argument
79 73 */
80 74 /**
81 75 * Styles that are reused verbatim in a few places
@@ -157,8 +151,176 @@
157 151 /**
158 152 * React Native specific.
159 153 * These variables do not appear to be used anywhere else.
160 154 */
155 +/**
156 + * Typography
157 + */
158 +/**
159 + * Breakpoints & Media Queries
160 + */
161 +/**
162 +* Converts a hex value into the rgb equivalent.
163 +*
164 +* @param {string} hex - the hexadecimal value to convert
165 +* @return {string} comma separated rgb values
166 +*/
167 +/**
168 + * Long content fade mixin
169 + *
170 + * Creates a fading overlay to signify that the content is longer
171 + * than the space allows.
172 + */
173 +/**
174 + * Breakpoint mixins
175 + */
176 +/**
177 + * Focus styles.
178 + */
179 +/**
180 + * Applies editor left position to the selector passed as argument
181 + */
182 +/**
183 + * Styles that are reused verbatim in a few places
184 + */
185 +/**
186 + * Allows users to opt-out of animations via OS-level preferences.
187 + */
188 +/**
189 + * Reset default styles for JavaScript UI based pages.
190 + * This is a WP-admin agnostic reset
191 + */
192 +/**
193 + * Reset the WP Admin page styles for Gutenberg-like pages.
194 + */
195 +/**
196 + * Creates a checkerboard pattern background to indicate transparency.
197 + * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
198 + */
199 +.admin-ui-page {
200 + display: flex;
201 + height: 100%;
202 + background-color: #fff;
203 + color: #2f2f2f;
204 + position: relative;
205 + z-index: 1;
206 + flex-flow: column;
207 + text-wrap: pretty;
208 +}
209 +
210 +.admin-ui-page__header {
211 + padding: 16px 24px;
212 + border-bottom: 1px solid #f0f0f0;
213 + background: #fff;
214 + position: sticky;
215 + top: 0;
216 + z-index: 1;
217 +}
218 +
219 +.admin-ui-page__sidebar-toggle-slot:empty {
220 + display: none;
221 +}
222 +
223 +.admin-ui-page__header-subtitle {
224 + padding-block-end: 8px;
225 + color: #757575;
226 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
227 + font-weight: 400;
228 + font-size: 13px;
229 + line-height: 20px;
230 + margin: 0;
231 +}
232 +
233 +.admin-ui-page__content {
234 + flex-grow: 1;
235 + overflow: auto;
236 + display: flex;
237 + flex-direction: column;
238 +}
239 +
240 +.admin-ui-page__content.has-padding {
241 + padding: 16px 24px;
242 +}
243 +
244 +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
245 + width: auto;
246 + padding: 0 8px;
247 +}
248 +
249 +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
250 + display: none;
251 +}
252 +
253 +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
254 + content: attr(aria-label);
255 + font-size: 12px;
256 +}
257 +
258 +.admin-ui-breadcrumbs__list {
259 + list-style: none;
260 + padding: 0;
261 + margin: 0;
262 + gap: 0;
263 + font-size: 15px;
264 + min-height: 32px;
265 + font-weight: 500;
266 +}
267 +
268 +.admin-ui-breadcrumbs__list li:not(:last-child)::after {
269 + content: "/";
270 + margin: 0 8px;
271 +}
272 +
273 +.admin-ui-breadcrumbs__list h1 {
274 + font-size: inherit;
275 + line-height: inherit;
276 +}
277 +
278 +/**
279 + * Colors
280 + */
281 +/**
282 + * SCSS Variables.
283 + *
284 + * Please use variables from this sheet to ensure consistency across the UI.
285 + * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
286 + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
287 + */
288 +/**
289 + * Fonts & basic variables.
290 + */
291 +/**
292 + * Typography
293 + */
294 +/**
295 + * Grid System.
296 + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
297 + */
298 +/**
299 + * Radius scale.
300 + */
301 +/**
302 + * Elevation scale.
303 + */
304 +/**
305 + * Dimensions.
306 + */
307 +/**
308 + * Mobile specific styles
309 + */
310 +/**
311 + * Editor styles.
312 + */
313 +/**
314 + * Block & Editor UI.
315 + */
316 +/**
317 + * Block paddings.
318 + */
319 +/**
320 + * React Native specific.
321 + * These variables do not appear to be used anywhere else.
322 + */
161 323 .interface-complementary-area-header {
162 324 background: #fff;
163 325 padding-right: 8px;
164 326 gap: 4px;
@@ -192,14 +354,8 @@
192 354 /**
193 355 * Focus styles.
194 356 */
195 357 /**
196 - * Standard focus rings for the WordPress Design System.
197 - *
198 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
199 - * e.g. `&:focus { @include outset-ring__focus(); }`.
200 - */
201 -/**
202 358 * Applies editor left position to the selector passed as argument
203 359 */
204 360 /**
205 361 * Styles that are reused verbatim in a few places
@@ -251,9 +407,9 @@
251 407 }
252 408
253 409 .interface-complementary-area h2 {
254 410 font-size: 13px;
255 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
411 + font-weight: 499;
256 412 color: #1e1e1e;
257 413 margin-bottom: 1.5em;
258 414 }
259 415
@@ -259,9 +415,9 @@
259 415
260 416 .interface-complementary-area h3 {
261 417 font-size: 11px;
262 418 text-transform: uppercase;
263 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
419 + font-weight: 499;
264 420 color: #1e1e1e;
265 421 margin-bottom: 1.5em;
266 422 }
267 423
@@ -293,9 +449,14 @@
293 449 height: 100%;
294 450 }
295 451
296 452 @media (min-width: 782px) {
297 - body.js.is-fullscreen-mode #adminmenumain {
453 + body.js.is-fullscreen-mode {
454 + margin-top: -32px;
455 + height: calc(100% + 32px);
456 + }
457 + body.js.is-fullscreen-mode #adminmenumain,
458 + body.js.is-fullscreen-mode #wpadminbar {
298 459 display: none;
299 460 }
300 461 body.js.is-fullscreen-mode #wpcontent,
301 462 body.js.is-fullscreen-mode #wpfooter {
@@ -329,9 +490,9 @@
329 490 .interface-interface-skeleton {
330 491 top: 32px;
331 492 }
332 493 .is-fullscreen-mode .interface-interface-skeleton {
333 - top: var(--wp-admin--admin-bar--height, 0);
494 + top: 0;
334 495 }
335 496 }
336 497 .interface-interface-skeleton__editor {
337 498 display: flex;
@@ -511,9 +672,9 @@
511 672 border-left: 1px solid #ddd;
512 673 top: 32px;
513 674 }
514 675 .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
515 - top: var(--wp-admin--admin-bar--height, 0);
676 + top: 0;
516 677 }
517 678 }
518 679 .interface-pinned-items {
519 680 display: flex;
@@ -611,14 +772,8 @@
611 772 /**
612 773 * Focus styles.
613 774 */
614 775 /**
615 - * Standard focus rings for the WordPress Design System.
616 - *
617 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
618 - * e.g. `&:focus { @include outset-ring__focus(); }`.
619 - */
620 -/**
621 776 * Applies editor left position to the selector passed as argument
622 777 */
623 778 /**
624 779 * Styles that are reused verbatim in a few places
@@ -652,9 +807,9 @@
652 807 }
653 808
654 809 .font-library-modal .font-library__subtitle {
655 810 text-transform: uppercase;
656 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
811 + font-weight: 499;
657 812 font-size: 11px;
658 813 }
659 814
660 815 .font-library-modal__tab-panel {
@@ -703,9 +858,9 @@
703 858 }
704 859
705 860 .font-library__page-selection {
706 861 font-size: 11px;
707 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
862 + font-weight: 499;
708 863 text-transform: uppercase;
709 864 }
710 865
711 866 @media (min-width: 600px) {
@@ -710,15 +865,15 @@
710 865
711 866 @media (min-width: 600px) {
712 867 .font-library__page-selection .font-library__page-selection-trigger {
713 868 font-size: 11px !important;
714 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
869 + font-weight: 499;
715 870 }
716 871 }
717 872 .font-library__fonts-title {
718 873 text-transform: uppercase;
719 874 font-size: 11px;
720 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
875 + font-weight: 600;
721 876 margin-top: 0;
722 877 margin-bottom: 0;
723 878 }
724 879
@@ -854,9 +1009,9 @@
854 1009 }
855 1010
856 1011 .global-styles-ui-screen-revisions__revision-item {
857 1012 position: relative;
858 - cursor: var(--wpds-cursor-control, pointer);
1013 + cursor: pointer;
859 1014 display: flex;
860 1015 flex-direction: column;
861 1016 }
862 1017
@@ -907,9 +1062,10 @@
907 1062 background: var(--wp-admin-theme-color);
908 1063 }
909 1064
910 1065 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
911 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
1066 +.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
1067 +.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
912 1068 color: #1e1e1e;
913 1069 }
914 1070
915 1071 .global-styles-ui-screen-revisions__revision-item::after {
@@ -933,15 +1089,16 @@
933 1089 padding: 12px 12px 4px 40px;
934 1090 }
935 1091
936 1092 .global-styles-ui-screen-revisions__apply-button.is-primary,
937 -.global-styles-ui-screen-revisions__active-badge {
1093 +.global-styles-ui-screen-revisions__applied-text {
938 1094 align-self: flex-start;
939 - margin: 0 12px 12px 40px;
1095 + margin: 4px 12px 12px 40px;
940 1096 }
941 1097
942 1098 .global-styles-ui-screen-revisions__changes,
943 -.global-styles-ui-screen-revisions__meta {
1099 +.global-styles-ui-screen-revisions__meta,
1100 +.global-styles-ui-screen-revisions__applied-text {
944 1101 color: #757575;
945 1102 font-size: 12px;
946 1103 }
947 1104
@@ -953,9 +1110,9 @@
953 1110 }
954 1111
955 1112 .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
956 1113 text-transform: uppercase;
957 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1114 + font-weight: 600;
958 1115 font-size: 12px;
959 1116 }
960 1117
961 1118 .global-styles-ui-screen-revisions__meta {
@@ -1024,14 +1181,13 @@
1024 1181 bottom: 0;
1025 1182 background: #fff;
1026 1183 padding: 12px;
1027 1184 border-top: 1px solid #ddd;
1028 - box-sizing: border-box;
1029 1185 }
1030 1186
1031 1187 .global-styles-ui-variations_item {
1032 1188 box-sizing: border-box;
1033 - cursor: var(--wpds-cursor-control, pointer);
1189 + cursor: pointer;
1034 1190 }
1035 1191
1036 1192 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1037 1193 border-radius: 2px;
@@ -1067,8 +1223,16 @@
1067 1223 .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1068 1224 outline-color: var(--wp-admin-theme-color);
1069 1225 }
1070 1226
1227 +.global-styles-ui-preview {
1228 + display: flex;
1229 + align-items: center;
1230 + justify-content: center;
1231 + line-height: 1;
1232 + cursor: pointer;
1233 +}
1234 +
1071 1235 .global-styles-ui-preview__wrapper {
1072 1236 max-width: 100%;
1073 1237 display: block;
1074 1238 width: 100%;
@@ -1073,12 +1237,8 @@
1073 1237 display: block;
1074 1238 width: 100%;
1075 1239 }
1076 1240
1077 -.global-styles-ui-preview__wrapper.is-hoverable {
1078 - cursor: var(--wpds-cursor-control, pointer);
1079 -}
1080 -
1081 1241 .global-styles-ui-typography-preview {
1082 1242 display: flex;
1083 1243 align-items: center;
1084 1244 justify-content: center;
@@ -1132,21 +1292,20 @@
1132 1292 }
1133 1293
1134 1294 .global-styles-ui-header {
1135 1295 margin-bottom: 0 !important;
1136 - line-height: 1.9 !important;
1137 1296 }
1138 1297
1139 1298 .global-styles-ui-subtitle {
1140 1299 margin-bottom: 0 !important;
1141 1300 text-transform: uppercase;
1142 - font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
1301 + font-weight: 499 !important;
1143 1302 font-size: 11px !important;
1144 1303 }
1145 1304
1146 1305 .global-styles-ui-section-title {
1147 1306 color: #2f2f2f;
1148 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1307 + font-weight: 600;
1149 1308 line-height: 1.2;
1150 1309 padding: 16px 16px 0;
1151 1310 margin: 0;
1152 1311 }
@@ -1246,26 +1405,28 @@
1246 1405 flex-direction: column;
1247 1406 margin: 16px;
1248 1407 }
1249 1408
1250 -.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
1409 +.global-styles-ui-screen-css .components-v-stack {
1251 1410 flex: 1 1 auto;
1252 1411 }
1253 1412
1254 -.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
1413 +.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
1255 1414 flex: 1 1 auto;
1256 1415 display: flex;
1257 1416 flex-direction: column;
1258 1417 }
1259 1418
1260 -.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
1419 +.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
1261 1420 flex: 1 1 auto;
1262 1421 display: flex;
1263 1422 flex-direction: column;
1264 1423 }
1265 1424
1266 -.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
1425 +.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
1267 1426 flex: 1 1 auto;
1427 + /*rtl:ignore*/
1428 + direction: ltr;
1268 1429 }
1269 1430
1270 1431 .global-styles-ui-screen-css-help-link {
1271 1432 display: inline-block;
@@ -1290,16 +1451,8 @@
1290 1451 flex-direction: column;
1291 1452 height: 100%;
1292 1453 }
1293 1454
1294 -.global-styles-ui-color-palette__tablist-container {
1295 - border-bottom: 1px solid #ddd;
1296 -}
1297 -
1298 -.global-styles-ui-color-palette__tablist {
1299 - margin-bottom: -1px;
1300 -}
1301 -
1302 1455 .global-styles-ui-sidebar__navigator-screen .single-column {
1303 1456 grid-column: span 1;
1304 1457 }
1305 1458
@@ -1326,9 +1479,9 @@
1326 1479 padding: 16px;
1327 1480 }
1328 1481
1329 1482 /**
1330 - * Typography
1483 + * Colors
1331 1484 */
1332 1485 /**
1333 1486 * SCSS Variables.
1334 1487 *
@@ -1336,11 +1489,8 @@
1336 1489 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1337 1490 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1338 1491 */
1339 1492 /**
1340 - * Colors
1341 - */
1342 -/**
1343 1493 * Fonts & basic variables.
1344 1494 */
1345 1495 /**
1346 1496 * Typography
@@ -1374,8 +1524,11 @@
1374 1524 * React Native specific.
1375 1525 * These variables do not appear to be used anywhere else.
1376 1526 */
1377 1527 /**
1528 + * Typography
1529 + */
1530 +/**
1378 1531 * Breakpoints & Media Queries
1379 1532 */
1380 1533 /**
1381 1534 * Converts a hex value into the rgb equivalent.
@@ -1395,14 +1548,8 @@
1395 1548 /**
1396 1549 * Focus styles.
1397 1550 */
1398 1551 /**
1399 - * Standard focus rings for the WordPress Design System.
1400 - *
1401 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
1402 - * e.g. `&:focus { @include outset-ring__focus(); }`.
1403 - */
1404 -/**
1405 1552 * Applies editor left position to the selector passed as argument
1406 1553 */
1407 1554 /**
1408 1555 * Styles that are reused verbatim in a few places
@@ -1423,24 +1570,24 @@
1423 1570 */
1424 1571 .dataviews-wrapper,
1425 1572 .dataviews-picker-wrapper {
1426 1573 height: 100%;
1427 - flex-grow: 1;
1428 - min-height: 0;
1574 + overflow: auto;
1429 1575 box-sizing: border-box;
1430 1576 scroll-padding-bottom: 64px;
1577 + /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
1431 1578 container: dataviews-wrapper/inline-size;
1432 1579 display: flex;
1433 1580 flex-direction: column;
1434 - font-size: var(--wpds-typography-font-size-md, 13px);
1435 - line-height: var(--wpds-typography-line-height-sm, 20px);
1436 - background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1581 + font-size: 13px;
1582 + line-height: 1.4;
1583 + background-color: var(--wp-dataviews-color-background, #fff);
1437 1584 }
1438 1585
1439 1586 .dataviews__view-actions,
1440 1587 .dataviews-filters__container {
1441 1588 box-sizing: border-box;
1442 - padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
1589 + padding: 16px 24px;
1443 1590 flex-shrink: 0;
1444 1591 position: sticky;
1445 1592 left: 0;
1446 1593 background-color: inherit;
@@ -1453,9 +1600,9 @@
1453 1600 }
1454 1601 }
1455 1602 .dataviews-no-results,
1456 1603 .dataviews-loading {
1457 - padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1604 + padding: 0 24px;
1458 1605 flex-grow: 1;
1459 1606 display: flex;
1460 1607 align-items: center;
1461 1608 justify-content: center;
@@ -1489,22 +1636,18 @@
1489 1636 .dataviews-loading-more {
1490 1637 text-align: center;
1491 1638 }
1492 1639
1493 -.dataviews-loading-more[aria-hidden=true] {
1494 - visibility: hidden;
1495 -}
1496 -
1497 1640 @container (max-width: 430px) {
1498 1641 .dataviews__view-actions,
1499 1642 .dataviews-filters__container {
1500 - padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1643 + padding: 12px 24px;
1501 1644 }
1502 1645 }
1503 1646 .dataviews-title-field {
1504 - font-size: var(--wpds-typography-font-size-md, 13px);
1505 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1506 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1647 + font-size: 13px;
1648 + font-weight: 499;
1649 + color: #2f2f2f;
1507 1650 text-overflow: ellipsis;
1508 1651 white-space: nowrap;
1509 1652 width: 100%;
1510 1653 }
@@ -1515,13 +1658,13 @@
1515 1658 white-space: nowrap;
1516 1659 overflow: hidden;
1517 1660 display: block;
1518 1661 flex-grow: 0;
1519 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1662 + color: #2f2f2f;
1520 1663 }
1521 1664
1522 1665 .dataviews-title-field a:hover {
1523 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1666 + color: var(--wp-admin-theme-color);
1524 1667 }
1525 1668
1526 1669 .dataviews-title-field a:focus {
1527 1670 color: var(--wp-admin-theme-color--rgb);
@@ -1536,22 +1679,22 @@
1536 1679 white-space: nowrap;
1537 1680 overflow: hidden;
1538 1681 display: block;
1539 1682 width: 100%;
1540 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1683 + color: #1e1e1e;
1541 1684 }
1542 1685
1543 1686 .dataviews-title-field button.components-button.is-link:hover {
1544 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1687 + color: var(--wp-admin-theme-color);
1545 1688 }
1546 1689
1547 1690 .dataviews-title-field--clickable {
1548 - cursor: var(--wpds-cursor-control, pointer);
1549 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1691 + cursor: pointer;
1692 + color: #2f2f2f;
1550 1693 }
1551 1694
1552 1695 .dataviews-title-field--clickable:hover {
1553 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1696 + color: var(--wp-admin-theme-color);
1554 1697 }
1555 1698
1556 1699 .dataviews-title-field--clickable:focus {
1557 1700 color: var(--wp-admin-theme-color--rgb);
@@ -1558,42 +1701,26 @@
1558 1701 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1559 1702 border-radius: 2px;
1560 1703 }
1561 1704
1562 -.dataviews__view-actions--infinite-scroll {
1563 - position: sticky;
1564 - top: 0;
1565 - z-index: 2;
1566 - background-color: #fff;
1567 -}
1568 -
1569 1705 /**
1570 1706 * When DataViews are placed within cards, apply a consistent top padding.
1571 1707 */
1572 1708 .components-card__body:has(> .dataviews-wrapper),
1573 1709 .components-card__body:has(> .dataviews-picker-wrapper) {
1574 - padding: var(--wpds-dimension-padding-sm, 8px) 0 0;
1710 + padding: 8px 0 0;
1575 1711 overflow: hidden;
1576 1712 }
1577 1713
1578 1714 .dataviews-bulk-actions-footer__item-count {
1579 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1715 + color: #1e1e1e;
1580 1716 }
1581 1717
1582 1718 .dataviews-bulk-actions-footer__container {
1583 1719 margin-right: auto;
1584 - min-height: var(--wpds-dimension-size-md, 32px);
1720 + min-height: 32px;
1585 1721 }
1586 1722
1587 -.dataviews-layout__container {
1588 - flex: 1;
1589 - min-height: 0;
1590 - overflow: auto;
1591 - display: flex;
1592 - flex-direction: column;
1593 - background-color: inherit;
1594 -}
1595 -
1596 1723 .dataviews-filters__button {
1597 1724 position: relative;
1598 1725 }
1599 1726
@@ -1609,10 +1736,10 @@
1609 1736 opacity: 1;
1610 1737 }
1611 1738
1612 1739 .dataviews-filters__summary-popover {
1613 - font-size: var(--wpds-typography-font-size-md, 13px);
1614 - line-height: var(--wpds-typography-line-height-sm, 20px);
1740 + font-size: 13px;
1741 + line-height: 1.4;
1615 1742 }
1616 1743
1617 1744 .dataviews-filters__summary-popover .components-popover__content {
1618 1745 width: 100%;
@@ -1617,9 +1744,9 @@
1617 1744 .dataviews-filters__summary-popover .components-popover__content {
1618 1745 width: 100%;
1619 1746 min-width: 230px;
1620 1747 max-width: 250px;
1621 - border-radius: var(--wpds-border-radius-md, 4px);
1748 + border-radius: 4px;
1622 1749 }
1623 1750
1624 1751 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
1625 1752 padding: 0;
@@ -1625,13 +1752,13 @@
1625 1752 padding: 0;
1626 1753 }
1627 1754
1628 1755 .dataviews-filters__summary-operators-container {
1629 - padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
1756 + padding: 8px 16px;
1630 1757 }
1631 1758
1632 1759 .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
1633 - border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1760 + border-bottom: 1px solid #e0e0e0;
1634 1761 }
1635 1762
1636 1763 .dataviews-filters__summary-operators-container:empty {
1637 1764 display: none;
@@ -1637,9 +1764,9 @@
1637 1764 display: none;
1638 1765 }
1639 1766
1640 1767 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
1641 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1768 + color: #757575;
1642 1769 white-space: nowrap;
1643 1770 overflow: hidden;
1644 1771 text-overflow: ellipsis;
1645 1772 flex-shrink: 0; /* Prevents this element from shrinking */
@@ -1657,14 +1784,15 @@
1657 1784 white-space: pre-wrap;
1658 1785 }
1659 1786
1660 1787 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
1661 - border-radius: var(--wpds-border-radius-lg, 8px);
1662 - border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1663 - cursor: var(--wpds-cursor-control, pointer);
1664 - padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1665 - min-height: var(--wpds-dimension-size-md, 32px);
1666 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1788 + border-radius: 16px;
1789 + border: 1px solid transparent;
1790 + cursor: pointer;
1791 + padding: 4px 12px;
1792 + min-height: 32px;
1793 + background: #f0f0f0;
1794 + color: #2f2f2f;
1667 1795 position: relative;
1668 1796 display: flex;
1669 1797 align-items: center;
1670 1798 box-sizing: border-box;
@@ -1674,46 +1802,42 @@
1674 1802 cursor: default;
1675 1803 }
1676 1804
1677 1805 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
1678 - padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
1806 + padding-inline-end: 28px;
1679 1807 }
1680 1808
1681 1809 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
1682 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1683 - border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1684 - background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1810 + background: #e0e0e0;
1811 + color: #1e1e1e;
1685 1812 }
1686 1813
1687 1814 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
1688 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1689 - background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1690 - border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1815 + color: var(--wp-admin-theme-color);
1816 + background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1691 1817 }
1692 1818
1693 -.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
1694 - color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1695 - background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1696 - border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1819 +.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
1820 + background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
1697 1821 }
1698 1822
1699 1823 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
1700 1824 outline: none;
1701 - box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1825 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1702 1826 }
1703 1827
1704 1828 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
1705 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1829 + font-weight: 499;
1706 1830 }
1707 1831
1708 1832 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
1709 - width: var(--wpds-dimension-size-sm, 24px);
1710 - height: var(--wpds-dimension-size-sm, 24px);
1711 - border-radius: var(--wpds-border-radius-md, 4px);
1833 + width: 24px;
1834 + height: 24px;
1835 + border-radius: 50%;
1712 1836 border: 0;
1713 1837 padding: 0;
1714 1838 position: absolute;
1715 - right: var(--wpds-dimension-padding-xs, 4px);
1839 + right: 4px;
1716 1840 top: 50%;
1717 1841 transform: translateY(-50%);
1718 1842 display: flex;
1719 1843 align-items: center;
@@ -1718,49 +1842,49 @@
1718 1842 display: flex;
1719 1843 align-items: center;
1720 1844 justify-content: center;
1721 1845 background: transparent;
1722 - cursor: var(--wpds-cursor-control, pointer);
1846 + cursor: pointer;
1723 1847 }
1724 1848
1725 1849 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1726 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1850 + fill: #757575;
1727 1851 }
1728 1852
1729 1853 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1730 - background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1854 + background: #e0e0e0;
1731 1855 }
1732 1856
1733 1857 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1734 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1858 + fill: #1e1e1e;
1735 1859 }
1736 1860
1737 1861 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1738 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1862 + fill: var(--wp-admin-theme-color);
1739 1863 }
1740 1864
1741 1865 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1742 - background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1866 + background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1743 1867 }
1744 1868
1745 1869 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
1746 1870 outline: none;
1747 - box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1871 + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1748 1872 }
1749 1873
1750 1874 .dataviews-filters__search-widget-filter-combobox-list {
1751 1875 max-height: 184px;
1752 - padding: var(--wpds-dimension-padding-xs, 4px);
1876 + padding: 4px;
1753 1877 overflow: auto;
1754 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1878 + border-top: 1px solid #e0e0e0;
1755 1879 }
1756 1880
1757 1881 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
1758 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1882 + font-weight: 600;
1759 1883 }
1760 1884
1761 1885 .dataviews-filters__search-widget-listbox {
1762 - padding: var(--wpds-dimension-padding-xs, 4px);
1886 + padding: 4px;
1763 1887 overflow: auto;
1764 1888 }
1765 1889
1766 1890 .dataviews-filters__search-widget-listitem {
@@ -1765,19 +1889,18 @@
1765 1889
1766 1890 .dataviews-filters__search-widget-listitem {
1767 1891 display: flex;
1768 1892 align-items: center;
1769 - gap: var(--wpds-dimension-gap-md, 12px);
1770 - border-radius: var(--wpds-border-radius-sm, 2px);
1893 + gap: 8px;
1894 + border-radius: 2px;
1771 1895 box-sizing: border-box;
1772 - padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1896 + padding: 4px 12px;
1773 1897 cursor: default;
1774 - min-height: var(--wpds-dimension-size-md, 32px);
1775 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1776 - font-weight: var(--wpds-typography-font-weight-default, 400);
1898 + min-height: 32px;
1899 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1900 + font-weight: 400;
1777 1901 font-size: 13px;
1778 1902 line-height: 20px;
1779 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1780 1903 }
1781 1904
1782 1905 .dataviews-filters__search-widget-listitem:last-child {
1783 1906 margin-block-end: 0;
@@ -1783,36 +1906,35 @@
1783 1906 margin-block-end: 0;
1784 1907 }
1785 1908
1786 1909 .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
1787 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1788 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1910 + background-color: var(--wp-admin-theme-color);
1911 + color: #fff;
1789 1912 }
1790 1913
1914 +.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
1915 + color: #fff;
1916 +}
1917 +
1791 1918 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
1792 - border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1793 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1919 + border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1920 + background: #fff;
1794 1921 }
1795 1922
1796 1923 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1797 - border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1798 - background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1924 + border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1925 + background: var(--wp-admin-theme-color-darker-20, #183ad6);
1799 1926 }
1800 1927
1801 1928 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
1802 - border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1803 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1929 + border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1804 1930 }
1805 1931
1806 1932 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1807 - border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1808 - background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1933 + border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1934 + background: var(--wp-admin-theme-color-darker-20, #183ad6);
1809 1935 }
1810 1936
1811 -.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
1812 - color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
1813 -}
1814 -
1815 1937 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
1816 1938 overflow: hidden;
1817 1939 text-overflow: ellipsis;
1818 1940 white-space: nowrap;
@@ -1822,11 +1944,11 @@
1822 1944 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
1823 1945 display: block;
1824 1946 overflow: hidden;
1825 1947 text-overflow: ellipsis;
1826 - font-size: var(--wpds-typography-font-size-sm, 12px);
1948 + font-size: 12px;
1827 1949 line-height: 16px;
1828 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1950 + color: #757575;
1829 1951 }
1830 1952
1831 1953 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1832 1954 border: 1px solid #1e1e1e;
@@ -1887,10 +2009,10 @@
1887 2009 padding: 0;
1888 2010 }
1889 2011
1890 2012 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1891 - background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1892 - border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2013 + background: var(--wp-admin-theme-color, #3858e9);
2014 + border-color: var(--wp-admin-theme-color, #3858e9);
1893 2015 }
1894 2016
1895 2017 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
1896 2018 content: "";
@@ -1902,10 +2024,10 @@
1902 2024 top: 50%;
1903 2025 left: 50%;
1904 2026 transform: translate(-50%, -50%);
1905 2027 margin: 0;
1906 - background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
1907 - border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
2028 + background-color: #fff;
2029 + border: 4px solid #fff;
1908 2030 }
1909 2031
1910 2032 @media (min-width: 600px) {
1911 2033 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -1919,9 +2041,9 @@
1919 2041 border: 1px solid #1e1e1e;
1920 2042 margin-right: 12px;
1921 2043 transition: none;
1922 2044 border-radius: 2px;
1923 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2045 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1924 2046 padding: 6px 8px;
1925 2047 /* Fonts smaller than 16px causes mobile safari to zoom. */
1926 2048 font-size: 16px;
1927 2049 /* Override core line-height. To be reviewed. */
@@ -1948,12 +2070,8 @@
1948 2070 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1949 2071 outline: 2px solid transparent;
1950 2072 }
1951 2073
1952 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
1953 - color: rgba(30, 30, 30, 0.62);
1954 -}
1955 -
1956 2074 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1957 2075 color: rgba(30, 30, 30, 0.62);
1958 2076 }
1959 2077
@@ -2009,10 +2127,10 @@
2009 2127 }
2010 2128
2011 2129 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2012 2130 position: relative;
2013 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
2014 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2131 + background: #fff;
2132 + color: #1e1e1e;
2015 2133 margin: 0;
2016 2134 padding: 0;
2017 2135 width: var(--checkbox-size);
2018 2136 height: var(--checkbox-size);
@@ -2028,15 +2146,15 @@
2028 2146 transition: 0.1s border-color ease-in-out;
2029 2147 }
2030 2148 }
2031 2149 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
2032 - background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2033 - border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2150 + background: var(--wp-admin-theme-color, #3858e9);
2151 + border-color: var(--wp-admin-theme-color, #3858e9);
2034 2152 }
2035 2153
2036 2154 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2037 2155 --checkmark-size: var(--checkbox-size);
2038 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2156 + fill: #fff;
2039 2157 position: absolute;
2040 2158 left: 50%;
2041 2159 top: 50%;
2042 2160 transform: translate(-50%, -50%);
@@ -2050,13 +2168,13 @@
2050 2168 }
2051 2169 }
2052 2170 .dataviews-filters__search-widget-filter-combobox__wrapper {
2053 2171 position: relative;
2054 - padding: var(--wpds-dimension-padding-sm, 8px);
2172 + padding: 8px;
2055 2173 }
2056 2174
2057 2175 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2058 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2176 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2059 2177 padding: 6px 8px;
2060 2178 /* Fonts smaller than 16px causes mobile safari to zoom. */
2061 2179 font-size: 16px;
2062 2180 /* Override core line-height. To be reviewed. */
@@ -2083,12 +2201,8 @@
2083 2201 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2084 2202 outline: 2px solid transparent;
2085 2203 }
2086 2204
2087 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2088 - color: rgba(30, 30, 30, 0.62);
2089 -}
2090 -
2091 2205 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2092 2206 color: rgba(30, 30, 30, 0.62);
2093 2207 }
2094 2208
@@ -2093,11 +2207,11 @@
2093 2207 }
2094 2208
2095 2209 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2096 2210 display: block;
2097 - padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-size-md, 32px);
2211 + padding: 0 8px 0 32px;
2098 2212 width: 100%;
2099 - height: var(--wpds-dimension-size-md, 32px);
2213 + height: 32px;
2100 2214 margin-left: 0;
2101 2215 margin-right: 0;
2102 2216 /* Fonts smaller than 16px causes mobile safari to zoom. */
2103 2217 font-size: 16px;
@@ -2104,22 +2218,18 @@
2104 2218 }
2105 2219
2106 2220 @media (min-width: 600px) {
2107 2221 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2108 - font-size: var(--wpds-typography-font-size-md, 13px);
2222 + font-size: 13px;
2109 2223 }
2110 2224 }
2111 2225 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2112 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
2113 - box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2226 + background: #fff;
2227 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2114 2228 }
2115 2229
2116 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2117 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2118 -}
2119 -
2120 2230 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2121 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2231 + color: #757575;
2122 2232 }
2123 2233
2124 2234 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
2125 2235 -webkit-appearance: none;
@@ -2126,15 +2236,15 @@
2126 2236 }
2127 2237
2128 2238 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
2129 2239 position: absolute;
2130 - inset-inline-start: var(--wpds-dimension-gap-md, 12px);
2240 + inset-inline-start: 12px;
2131 2241 top: 0;
2132 2242 bottom: 0;
2133 2243 display: flex;
2134 2244 align-items: center;
2135 2245 justify-content: center;
2136 - width: var(--wpds-dimension-size-sm, 24px);
2246 + width: 24px;
2137 2247 }
2138 2248
2139 2249 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
2140 2250 transform: scaleX(-1);
@@ -2149,32 +2259,31 @@
2149 2259 position: absolute;
2150 2260 top: 0;
2151 2261 right: 0;
2152 2262 transform: translate(50%, -50%);
2153 - background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2154 - height: var(--wpds-dimension-size-2xs, 16px);
2155 - min-width: var(--wpds-dimension-size-2xs, 16px);
2156 - line-height: var(--wpds-typography-line-height-xs, 16px);
2157 - padding: 0 var(--wpds-dimension-padding-xs, 4px);
2263 + background: var(--wp-admin-theme-color, #3858e9);
2264 + height: 16px;
2265 + min-width: 16px;
2266 + line-height: 16px;
2267 + padding: 0 4px;
2158 2268 text-align: center;
2159 - border-radius: var(--wpds-border-radius-lg, 8px);
2269 + border-radius: 8px;
2160 2270 font-size: 11px;
2161 - outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
2162 - color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2271 + outline: var(--wp-admin-border-width-focus) solid #fff;
2272 + color: #fff;
2163 2273 box-sizing: border-box;
2164 2274 }
2165 2275
2166 2276 .dataviews-search {
2167 - width: -moz-fit-content;
2168 2277 width: fit-content;
2169 2278 }
2170 2279
2171 2280 .dataviews-filters__user-input-widget {
2172 - padding: var(--wpds-dimension-padding-lg, 16px);
2281 + padding: 16px;
2173 2282 }
2174 2283
2175 2284 .dataviews-filters__user-input-widget .components-input-control__prefix {
2176 - padding-left: var(--wpds-dimension-padding-sm, 8px);
2285 + padding-left: 8px;
2177 2286 }
2178 2287
2179 2288 .dataviews-filters__search-widget-no-elements {
2180 2289 display: flex;
@@ -2179,9 +2288,9 @@
2179 2288 .dataviews-filters__search-widget-no-elements {
2180 2289 display: flex;
2181 2290 align-items: center;
2182 2291 justify-content: center;
2183 - padding: var(--wpds-dimension-padding-lg, 16px);
2292 + padding: 16px;
2184 2293 }
2185 2294
2186 2295 .dataviews-footer {
2187 2296 position: sticky;
@@ -2187,10 +2296,10 @@
2187 2296 position: sticky;
2188 2297 bottom: 0;
2189 2298 left: 0;
2190 2299 background-color: inherit;
2191 - padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
2192 - border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2300 + padding: 12px 24px;
2301 + border-top: 1px solid #f0f0f0;
2193 2302 flex-shrink: 0;
2194 2303 }
2195 2304
2196 2305 @media not (prefers-reduced-motion) {
@@ -2198,9 +2307,9 @@
2198 2307 transition: padding ease-out 0.1s;
2199 2308 }
2200 2309 }
2201 2310 .dataviews-footer {
2202 - z-index: 1;
2311 + z-index: 2;
2203 2312 }
2204 2313
2205 2314 .dataviews-footer .is-refreshing {
2206 2315 opacity: 0.5;
@@ -2229,9 +2338,9 @@
2229 2338 }
2230 2339 }
2231 2340 .dataviews-pagination__page-select {
2232 2341 font-size: 11px;
2233 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2342 + font-weight: 499;
2234 2343 text-transform: uppercase;
2235 2344 }
2236 2345
2237 2346 @media (min-width: 600px) {
@@ -2236,9 +2345,9 @@
2236 2345
2237 2346 @media (min-width: 600px) {
2238 2347 .dataviews-pagination__page-select .components-select-control__input {
2239 2348 font-size: 11px !important;
2240 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2349 + font-weight: 499;
2241 2350 }
2242 2351 }
2243 2352 .dataviews-action-modal {
2244 2353 z-index: 1000001;
@@ -2244,9 +2353,9 @@
2244 2353 z-index: 1000001;
2245 2354 }
2246 2355
2247 2356 .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2248 - padding: 0 var(--wpds-dimension-padding-xs, 4px);
2357 + padding: 0 4px;
2249 2358 }
2250 2359
2251 2360 .dataviews-selection-checkbox {
2252 2361 --checkbox-input-size: 24px;
@@ -2267,11 +2376,12 @@
2267 2376 }
2268 2377
2269 2378 .dataviews-view-config {
2270 2379 width: 320px;
2380 + /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
2271 2381 container-type: inline-size;
2272 - font-size: var(--wpds-typography-font-size-md, 13px);
2273 - line-height: var(--wpds-typography-line-height-sm, 20px);
2382 + font-size: 13px;
2383 + line-height: 1.4;
2274 2384 }
2275 2385
2276 2386 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
2277 2387 overflow-y: scroll;
@@ -2286,9 +2396,9 @@
2286 2396 text-transform: uppercase;
2287 2397 }
2288 2398
2289 2399 .dataviews-settings-section__title.dataviews-settings-section__title {
2290 - line-height: var(--wpds-typography-line-height-md, 24px);
2400 + line-height: 24px;
2291 2401 font-size: 15px;
2292 2402 }
2293 2403
2294 2404 .dataviews-settings-section__sidebar {
@@ -2337,13 +2447,13 @@
2337 2447 }
2338 2448
2339 2449 .dataviews-view-config__modified-indicator {
2340 2450 position: absolute;
2341 - top: var(--wpds-dimension-gap-xs, 4px);
2342 - right: var(--wpds-dimension-gap-xs, 4px);
2343 - width: var(--wpds-dimension-gap-xs, 4px);
2344 - height: var(--wpds-dimension-gap-xs, 4px);
2345 - background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2451 + top: 4px;
2452 + right: 4px;
2453 + width: 4px;
2454 + height: 4px;
2455 + background: var(--wp-admin-theme-color, #3858e9);
2346 2456 border-radius: 50%;
2347 2457 pointer-events: none;
2348 2458 }
2349 2459
@@ -2349,12 +2459,12 @@
2349 2459
2350 2460 .dataviews-view-grid-items {
2351 2461 margin-bottom: auto;
2352 2462 display: grid;
2353 - gap: var(--wpds-dimension-gap-xl, 24px);
2463 + gap: 32px;
2354 2464 grid-template-rows: max-content;
2355 2465 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
2356 - padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2466 + padding: 0 24px 24px;
2357 2467 container-type: inline-size;
2358 2468 }
2359 2469
2360 2470 @media not (prefers-reduced-motion) {
@@ -2361,21 +2471,13 @@
2361 2471 .dataviews-view-grid-items {
2362 2472 transition: padding ease-out 0.1s;
2363 2473 }
2364 2474 }
2365 -.dataviews-view-grid-items.has-compact-density {
2366 - gap: var(--wpds-dimension-gap-lg, 16px);
2367 -}
2368 -
2369 -.dataviews-view-grid-items.has-comfortable-density {
2370 - gap: var(--wpds-dimension-gap-2xl, 32px);
2371 -}
2372 -
2373 2475 .dataviews-view-grid {
2374 - padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2476 + padding: 0 24px 24px;
2375 2477 display: flex;
2376 2478 flex-direction: column;
2377 - gap: var(--wpds-dimension-gap-xl, 24px);
2479 + gap: 32px;
2378 2480 container-type: inline-size;
2379 2481 margin-bottom: auto;
2380 2482 }
2381 2483
@@ -2383,31 +2485,15 @@
2383 2485 .dataviews-view-grid {
2384 2486 transition: padding ease-out 0.1s;
2385 2487 }
2386 2488 }
2387 -.dataviews-view-grid.has-compact-density {
2388 - gap: var(--wpds-dimension-gap-lg, 16px);
2389 -}
2390 -
2391 -.dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
2392 - gap: var(--wpds-dimension-gap-lg, 16px);
2393 -}
2394 -
2395 -.dataviews-view-grid.has-comfortable-density {
2396 - gap: var(--wpds-dimension-gap-2xl, 32px);
2397 -}
2398 -
2399 -.dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
2400 - gap: var(--wpds-dimension-gap-2xl, 32px);
2401 -}
2402 -
2403 2489 .dataviews-view-grid .dataviews-view-grid__row {
2404 2490 display: grid;
2405 - gap: var(--wpds-dimension-gap-xl, 24px);
2491 + gap: 32px;
2406 2492 }
2407 2493
2408 2494 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
2409 - border-radius: var(--wpds-border-radius-md, 4px);
2495 + border-radius: 4px;
2410 2496 position: relative;
2411 2497 }
2412 2498
2413 2499 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
@@ -2416,81 +2502,72 @@
2416 2502 top: 0;
2417 2503 left: 0;
2418 2504 width: 100%;
2419 2505 height: 100%;
2420 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2421 - border-radius: var(--wpds-border-radius-md, 4px);
2506 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2507 + border-radius: 4px;
2422 2508 pointer-events: none;
2423 2509 outline: 2px solid transparent;
2424 2510 }
2425 2511
2426 -.dataviews-view-grid .dataviews-view-grid__card,
2427 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
2512 +.dataviews-view-grid .dataviews-view-grid__card {
2428 2513 height: 100%;
2429 2514 justify-content: flex-start;
2430 2515 position: relative;
2431 - isolation: isolate;
2432 2516 }
2433 2517
2434 -.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions,
2435 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions {
2436 - padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2518 +.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title {
2519 + padding: 8px 0 4px;
2437 2520 }
2438 2521
2439 -.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
2440 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
2441 - min-height: var(--wpds-dimension-size-sm, 24px);
2522 +.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field {
2523 + min-height: 24px;
2442 2524 overflow: hidden;
2443 2525 align-content: center;
2444 2526 text-align: start;
2445 2527 }
2446 2528
2447 -.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2448 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2449 - width: -moz-fit-content;
2529 +.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2450 2530 width: fit-content;
2451 2531 }
2452 2532
2453 -.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2454 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2455 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2533 +.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2534 + color: #1e1e1e;
2456 2535 }
2457 2536
2458 2537 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
2459 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
2460 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2538 +.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2539 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2461 2540 }
2462 2541
2463 -.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
2464 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2465 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2542 +.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
2543 + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2466 2544 }
2467 2545
2468 -.dataviews-view-grid .dataviews-view-grid__media,
2469 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
2546 +.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2547 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2548 +}
2549 +
2550 +.dataviews-view-grid .dataviews-view-grid__media {
2470 2551 width: 100%;
2471 2552 aspect-ratio: 1/1;
2472 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2473 - border-radius: var(--wpds-border-radius-md, 4px);
2553 + background-color: #fff;
2554 + border-radius: 4px;
2474 2555 overflow: hidden;
2475 2556 position: relative;
2476 2557 }
2477 2558
2478 -.dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
2479 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
2559 +.dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
2480 2560 aspect-ratio: 3/1;
2481 2561 }
2482 2562
2483 -.dataviews-view-grid .dataviews-view-grid__media img,
2484 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2485 - -o-object-fit: cover;
2563 +.dataviews-view-grid .dataviews-view-grid__media img {
2486 2564 object-fit: cover;
2487 2565 width: 100%;
2488 2566 height: 100%;
2489 2567 }
2490 2568
2491 -.dataviews-view-grid .dataviews-view-grid__media::after,
2492 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
2569 +.dataviews-view-grid .dataviews-view-grid__media::after {
2493 2570 content: "";
2494 2571 position: absolute;
2495 2572 top: 0;
2496 2573 left: 0;
@@ -2495,59 +2572,52 @@
2495 2572 top: 0;
2496 2573 left: 0;
2497 2574 width: 100%;
2498 2575 height: 100%;
2499 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2500 - border-radius: var(--wpds-border-radius-md, 4px);
2576 + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2577 + border-radius: 4px;
2501 2578 pointer-events: none;
2502 2579 }
2503 2580
2504 -.dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
2505 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
2581 +.dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
2506 2582 width: 100%;
2507 2583 height: 100%;
2508 2584 display: block;
2509 - border-radius: var(--wpds-border-radius-md, 4px);
2585 + border-radius: 4px;
2510 2586 box-shadow: none;
2511 - background: var(--wpds-color-background-surface-neutral, #fcfcfc);
2587 + background: #f0f0f0;
2512 2588 }
2513 2589
2514 -.dataviews-view-grid .dataviews-view-grid__fields,
2515 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2590 +.dataviews-view-grid .dataviews-view-grid__fields {
2516 2591 position: relative;
2517 2592 font-size: 12px;
2518 2593 line-height: 16px;
2519 2594 }
2520 2595
2521 -.dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
2522 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
2523 - padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2596 +.dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
2597 + padding: 0 0 12px;
2524 2598 }
2525 2599
2526 -.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
2527 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
2528 - min-height: var(--wpds-dimension-size-sm, 24px);
2529 - line-height: var(--wpds-typography-line-height-sm, 20px);
2530 - padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
2600 +.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
2601 + min-height: 24px;
2602 + line-height: 20px;
2603 + padding-top: 2px;
2531 2604 }
2532 2605
2533 -.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
2534 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
2535 - min-height: var(--wpds-dimension-size-sm, 24px);
2606 +.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
2607 + min-height: 24px;
2536 2608 align-items: center;
2537 2609 }
2538 2610
2539 -.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
2540 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
2611 +.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
2541 2612 width: 35%;
2542 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2613 + color: #757575;
2543 2614 overflow: hidden;
2544 2615 text-overflow: ellipsis;
2545 2616 white-space: nowrap;
2546 2617 }
2547 2618
2548 -.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2549 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2619 +.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2550 2620 width: 65%;
2551 2621 overflow: hidden;
2552 2622 text-overflow: ellipsis;
2553 2623 white-space: nowrap;
@@ -2552,27 +2622,23 @@
2552 2622 text-overflow: ellipsis;
2553 2623 white-space: nowrap;
2554 2624 }
2555 2625
2556 -.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
2557 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
2626 +.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
2558 2627 display: none;
2559 2628 }
2560 2629
2561 -.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
2562 -.dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
2563 - padding-bottom: var(--wpds-dimension-padding-md, 12px);
2630 +.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
2631 + padding-bottom: 12px;
2564 2632 }
2565 2633
2566 -.dataviews-view-grid.is-refreshing,
2567 -.dataviews-view-grid-infinite-scroll.is-refreshing {
2634 +.dataviews-view-grid.is-refreshing {
2568 2635 opacity: 0.5;
2569 2636 pointer-events: none;
2570 2637 }
2571 2638
2572 2639 @media not (prefers-reduced-motion) {
2573 - .dataviews-view-grid.is-refreshing,
2574 - .dataviews-view-grid-infinite-scroll.is-refreshing {
2640 + .dataviews-view-grid.is-refreshing {
2575 2641 opacity: 1;
2576 2642 animation: dataviews-pulse 1s ease-in-out infinite;
2577 2643 }
2578 2644 }
@@ -2583,9 +2649,9 @@
2583 2649
2584 2650 .dataviews-view-grid__card .dataviews-selection-checkbox {
2585 2651 position: absolute;
2586 2652 top: -9999em;
2587 - left: var(--wpds-dimension-padding-sm, 8px);
2653 + left: 8px;
2588 2654 z-index: 1;
2589 2655 opacity: 0;
2590 2656 }
2591 2657
@@ -2596,9 +2662,9 @@
2596 2662 }
2597 2663 @media (hover: none) {
2598 2664 .dataviews-view-grid__card .dataviews-selection-checkbox {
2599 2665 opacity: 1;
2600 - top: var(--wpds-dimension-padding-sm, 8px);
2666 + top: 8px;
2601 2667 }
2602 2668 }
2603 2669 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
2604 2670 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
@@ -2603,21 +2669,21 @@
2603 2669 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
2604 2670 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
2605 2671 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
2606 2672 opacity: 1;
2607 - top: var(--wpds-dimension-padding-sm, 8px);
2673 + top: 8px;
2608 2674 }
2609 2675
2610 2676 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2611 2677 position: absolute;
2612 2678 z-index: 1;
2613 - top: var(--wpds-dimension-padding-xs, 4px);
2679 + top: 4px;
2614 2680 opacity: 0;
2615 - right: var(--wpds-dimension-padding-xs, 4px);
2681 + right: 4px;
2616 2682 }
2617 2683
2618 2684 .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
2619 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2685 + background-color: #fff;
2620 2686 }
2621 2687
2622 2688 @media not (prefers-reduced-motion) {
2623 2689 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
@@ -2626,9 +2692,9 @@
2626 2692 }
2627 2693 @media (hover: none) {
2628 2694 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2629 2695 opacity: 1;
2630 - top: var(--wpds-dimension-padding-xs, 4px);
2696 + top: 4px;
2631 2697 }
2632 2698 }
2633 2699 .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
2634 2700 .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
@@ -2636,17 +2702,17 @@
2636 2702 opacity: 1;
2637 2703 }
2638 2704
2639 2705 .dataviews-view-grid__media--clickable {
2640 - cursor: var(--wpds-cursor-control, pointer);
2706 + cursor: pointer;
2641 2707 }
2642 2708
2643 2709 .dataviews-view-grid__group-header {
2644 - font-size: var(--wpds-typography-font-size-lg, 15px);
2645 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2646 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2647 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2648 - padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2710 + font-size: 15px;
2711 + font-weight: 499;
2712 + color: #1e1e1e;
2713 + margin: 0 0 8px 0;
2714 + padding: 0 24px;
2649 2715 container-type: inline-size;
2650 2716 }
2651 2717
2652 2718 div.dataviews-view-list {
@@ -2659,15 +2725,15 @@
2659 2725
2660 2726 .dataviews-view-list div[role=row],
2661 2727 .dataviews-view-list div[role=article] {
2662 2728 margin: 0;
2663 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2729 + border-top: 1px solid #f0f0f0;
2664 2730 }
2665 2731
2666 2732 .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
2667 2733 .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
2668 2734 position: relative;
2669 - padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
2735 + padding: 16px 24px;
2670 2736 box-sizing: border-box;
2671 2737 }
2672 2738
2673 2739 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
@@ -2672,12 +2738,11 @@
2672 2738
2673 2739 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2674 2740 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2675 2741 display: flex;
2676 - width: -moz-max-content;
2677 2742 width: max-content;
2678 2743 flex: 0 0 auto;
2679 - gap: var(--wpds-dimension-gap-xs, 4px);
2744 + gap: 4px;
2680 2745 white-space: nowrap;
2681 2746 }
2682 2747
2683 2748 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
@@ -2687,9 +2752,9 @@
2687 2752 }
2688 2753
2689 2754 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
2690 2755 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
2691 - height: var(--wpds-dimension-size-sm, 24px);
2756 + height: 24px;
2692 2757 }
2693 2758
2694 2759 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2695 2760 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
@@ -2714,15 +2779,15 @@
2714 2779 }
2715 2780 }
2716 2781 .dataviews-view-list div[role=row].is-selected.is-selected,
2717 2782 .dataviews-view-list div[role=article].is-selected.is-selected {
2718 - border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
2783 + border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2719 2784 }
2720 2785
2721 2786 .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
2722 2787 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
2723 2788 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
2724 - border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
2789 + border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2725 2790 }
2726 2791
2727 2792 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2728 2793 .dataviews-view-list div[role=article]:not(.is-selected):hover,
@@ -2727,12 +2792,23 @@
2727 2792 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2728 2793 .dataviews-view-list div[role=article]:not(.is-selected):hover,
2729 2794 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2730 2795 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2731 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2732 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
2796 + color: var(--wp-admin-theme-color);
2797 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2798 + border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2733 2799 }
2734 2800
2801 +.dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=article],
2802 +.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=row],
2803 +.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=article],
2804 +.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=row],
2805 +.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=article],
2806 +.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=row],
2807 +.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=article] {
2808 + border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2809 +}
2810 +
2735 2811 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2736 2812 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
2737 2813 .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field,
2738 2814 .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
@@ -2741,9 +2817,9 @@
2741 2817 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2742 2818 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2743 2819 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2744 2820 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2745 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2821 + color: var(--wp-admin-theme-color);
2746 2822 }
2747 2823
2748 2824 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2749 2825 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -2748,10 +2824,10 @@
2748 2824 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2749 2825 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2750 2826 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2751 2827 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2752 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2753 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2828 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2829 + color: #1e1e1e;
2754 2830 }
2755 2831
2756 2832 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2757 2833 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -2760,9 +2836,9 @@
2760 2836 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2761 2837 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2762 2838 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2763 2839 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2764 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2840 + color: #1e1e1e;
2765 2841 }
2766 2842
2767 2843 .dataviews-view-list .dataviews-view-list__item {
2768 2844 position: absolute;
@@ -2767,16 +2843,14 @@
2767 2843 .dataviews-view-list .dataviews-view-list__item {
2768 2844 position: absolute;
2769 2845 z-index: 1;
2770 2846 inset: 0;
2771 - scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2772 - -webkit-appearance: none;
2773 - -moz-appearance: none;
2847 + scroll-margin: 8px 0;
2774 2848 appearance: none;
2775 2849 border: none;
2776 2850 background: none;
2777 2851 padding: 0;
2778 - cursor: var(--wpds-cursor-control, pointer);
2852 + cursor: pointer;
2779 2853 }
2780 2854
2781 2855 .dataviews-view-list .dataviews-view-list__item:focus-visible {
2782 2856 outline: none;
@@ -2785,17 +2859,17 @@
2785 2859 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
2786 2860 position: absolute;
2787 2861 content: "";
2788 2862 inset: var(--wp-admin-border-width-focus);
2789 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2790 - border-radius: var(--wpds-border-radius-sm, 2px);
2863 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2864 + border-radius: 2px;
2791 2865 outline: 2px solid transparent;
2792 2866 }
2793 2867
2794 2868 .dataviews-view-list .dataviews-view-list__title-field {
2795 2869 flex: 1;
2796 - min-height: var(--wpds-dimension-size-sm, 24px);
2797 - line-height: var(--wpds-typography-line-height-md, 24px);
2870 + min-height: 24px;
2871 + line-height: 24px;
2798 2872 overflow: hidden;
2799 2873 }
2800 2874
2801 2875 .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
@@ -2802,21 +2876,20 @@
2802 2876 z-index: 1;
2803 2877 }
2804 2878
2805 2879 .dataviews-view-list .dataviews-view-list__media-wrapper {
2806 - width: 48px;
2807 - height: 48px;
2880 + width: 52px;
2881 + height: 52px;
2808 2882 overflow: hidden;
2809 2883 position: relative;
2810 2884 flex-shrink: 0;
2811 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2812 - border-radius: var(--wpds-border-radius-md, 4px);
2885 + background-color: #fff;
2886 + border-radius: 4px;
2813 2887 }
2814 2888
2815 2889 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2816 2890 width: 100%;
2817 2891 height: 100%;
2818 - -o-object-fit: cover;
2819 2892 object-fit: cover;
2820 2893 }
2821 2894
2822 2895 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -2825,26 +2898,25 @@
2825 2898 top: 0;
2826 2899 left: 0;
2827 2900 width: 100%;
2828 2901 height: 100%;
2829 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2830 - border-radius: var(--wpds-border-radius-md, 4px);
2902 + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2903 + border-radius: 4px;
2831 2904 }
2832 2905
2833 2906 .dataviews-view-list .dataviews-view-list__field-wrapper {
2834 - min-height: 48px;
2835 2907 flex-grow: 1;
2836 2908 min-width: 0;
2837 2909 }
2838 2910
2839 2911 .dataviews-view-list .dataviews-view-list__field {
2840 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
2912 + color: #757575;
2841 2913 }
2842 2914
2843 2915 .dataviews-view-list .dataviews-view-list__fields {
2844 2916 display: flex;
2845 - gap: var(--wpds-dimension-gap-md, 12px);
2846 - row-gap: var(--wpds-dimension-gap-xs, 4px);
2917 + gap: 12px;
2918 + row-gap: 4px;
2847 2919 flex-wrap: wrap;
2848 2920 font-size: 12px;
2849 2921 }
2850 2922
@@ -2856,10 +2928,10 @@
2856 2928 display: none;
2857 2929 }
2858 2930
2859 2931 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
2860 - min-height: var(--wpds-dimension-size-sm, 24px);
2861 - line-height: var(--wpds-typography-line-height-sm, 20px);
2932 + min-height: 24px;
2933 + line-height: 20px;
2862 2934 display: flex;
2863 2935 align-items: center;
2864 2936 }
2865 2937
@@ -2867,42 +2939,38 @@
2867 2939 justify-content: space-between;
2868 2940 }
2869 2941
2870 2942 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
2871 - padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
2943 + padding: 8px 24px;
2872 2944 }
2873 2945
2874 2946 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
2875 - min-height: var(--wpds-dimension-size-2xs, 16px);
2876 - line-height: var(--wpds-typography-line-height-xs, 16px);
2947 + min-height: 16px;
2948 + line-height: 16px;
2877 2949 }
2878 2950
2879 2951 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
2880 - width: var(--wpds-dimension-size-md, 32px);
2881 - height: var(--wpds-dimension-size-md, 32px);
2952 + width: 32px;
2953 + height: 32px;
2882 2954 }
2883 2955
2884 -.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
2885 - min-height: var(--wpds-dimension-size-md, 32px);
2886 -}
2887 -
2888 2956 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
2889 - gap: var(--wpds-dimension-gap-sm, 8px);
2890 - row-gap: var(--wpds-dimension-gap-xs, 4px);
2957 + gap: 8px;
2958 + row-gap: 4px;
2891 2959 }
2892 2960
2893 2961 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2894 - min-height: var(--wpds-dimension-size-2xs, 16px);
2895 - line-height: var(--wpds-typography-line-height-xs, 16px);
2962 + min-height: 16px;
2963 + line-height: 16px;
2896 2964 }
2897 2965
2898 2966 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
2899 - padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2967 + padding: 24px 24px;
2900 2968 }
2901 2969
2902 2970 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
2903 - min-height: var(--wpds-dimension-size-md, 32px);
2904 - line-height: var(--wpds-typography-line-height-xl, 32px);
2971 + min-height: 32px;
2972 + line-height: 32px;
2905 2973 }
2906 2974
2907 2975 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
2908 2976 width: 64px;
@@ -2908,20 +2976,16 @@
2908 2976 width: 64px;
2909 2977 height: 64px;
2910 2978 }
2911 2979
2912 -.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
2913 - min-height: 64px;
2914 -}
2915 -
2916 2980 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
2917 - gap: var(--wpds-dimension-gap-lg, 16px);
2918 - row-gap: var(--wpds-dimension-gap-sm, 8px);
2981 + gap: 16px;
2982 + row-gap: 8px;
2919 2983 }
2920 2984
2921 2985 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2922 - min-height: var(--wpds-dimension-size-md, 32px);
2923 - line-height: var(--wpds-typography-line-height-md, 24px);
2986 + min-height: 32px;
2987 + line-height: 24px;
2924 2988 }
2925 2989
2926 2990 .dataviews-view-list.is-refreshing {
2927 2991 opacity: 0.5;
@@ -2934,13 +2998,13 @@
2934 2998 animation: dataviews-pulse 1s ease-in-out infinite;
2935 2999 }
2936 3000 }
2937 3001 .dataviews-view-list__group-header {
2938 - font-size: var(--wpds-typography-font-size-lg, 15px);
2939 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2940 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2941 - margin: 0 0 var(--wpds-dimension-gap-lg, 16px) 0;
2942 - padding: 0 var(--wpds-dimension-padding-2xl, 24px);
3002 + font-size: 15px;
3003 + font-weight: 499;
3004 + color: #1e1e1e;
3005 + margin: 0 0 8px 0;
3006 + padding: 0 24px;
2943 3007 }
2944 3008
2945 3009 .dataviews-view-table {
2946 3010 width: 100%;
@@ -2947,9 +3011,9 @@
2947 3011 text-indent: 0;
2948 3012 border-color: inherit;
2949 3013 border-collapse: collapse;
2950 3014 position: relative;
2951 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3015 + color: #757575;
2952 3016 margin-bottom: auto;
2953 3017 background-color: inherit;
2954 3018 }
2955 3019
@@ -2954,16 +3018,16 @@
2954 3018 }
2955 3019
2956 3020 .dataviews-view-table th {
2957 3021 text-align: left;
2958 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3022 + color: #1e1e1e;
2959 3023 font-weight: normal;
2960 - font-size: var(--wpds-typography-font-size-md, 13px);
3024 + font-size: 13px;
2961 3025 }
2962 3026
2963 3027 .dataviews-view-table td,
2964 3028 .dataviews-view-table th {
2965 - padding: var(--wpds-dimension-padding-md, 12px);
3029 + padding: 12px;
2966 3030 }
2967 3031
2968 3032 .dataviews-view-table td.dataviews-view-table__actions-column,
2969 3033 .dataviews-view-table th.dataviews-view-table__actions-column {
@@ -2973,9 +3037,9 @@
2973 3037 .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
2974 3038 .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
2975 3039 position: sticky;
2976 3040 right: 0;
2977 - background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3041 + background-color: var(--wp-dataviews-color-background, #fff);
2978 3042 }
2979 3043
2980 3044 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
2981 3045 .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
@@ -2985,9 +3049,9 @@
2985 3049 top: 0;
2986 3050 bottom: 0;
2987 3051 left: 0;
2988 3052 width: 1px;
2989 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
3053 + background-color: #f0f0f0;
2990 3054 }
2991 3055
2992 3056 .dataviews-view-table td.dataviews-view-table__checkbox-column,
2993 3057 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -3000,20 +3064,20 @@
3000 3064 min-width: auto;
3001 3065 }
3002 3066
3003 3067 .dataviews-view-table tr {
3004 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
3068 + border-top: 1px solid #f0f0f0;
3005 3069 background-color: inherit;
3006 3070 }
3007 3071
3008 3072 .dataviews-view-table tr td:first-child,
3009 3073 .dataviews-view-table tr th:first-child {
3010 - padding-left: var(--wpds-dimension-padding-2xl, 24px);
3074 + padding-left: 24px;
3011 3075 }
3012 3076
3013 3077 .dataviews-view-table tr td:last-child,
3014 3078 .dataviews-view-table tr th:last-child {
3015 - padding-right: var(--wpds-dimension-padding-2xl, 24px);
3079 + padding-right: 24px;
3016 3080 }
3017 3081
3018 3082 .dataviews-view-table tr:last-child {
3019 3083 border-bottom: 0;
@@ -3028,18 +3092,18 @@
3028 3092 opacity: 1;
3029 3093 }
3030 3094 }
3031 3095 .dataviews-view-table tr.is-selected {
3032 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3033 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3096 + background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
3097 + color: #757575;
3034 3098 }
3035 3099
3036 3100 .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
3037 - border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
3101 + border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
3038 3102 }
3039 3103
3040 3104 .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
3041 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3105 + background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
3042 3106 }
3043 3107
3044 3108 .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3045 3109 opacity: 1;
@@ -3045,13 +3109,13 @@
3045 3109 opacity: 1;
3046 3110 }
3047 3111
3048 3112 .dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
3049 - background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3113 + background-color: var(--wp-dataviews-color-background, #fff);
3050 3114 }
3051 3115
3052 3116 .dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
3053 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3117 + background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
3054 3118 }
3055 3119
3056 3120 .dataviews-view-table thead {
3057 3121 position: sticky;
@@ -3059,19 +3123,8 @@
3059 3123 z-index: 1;
3060 3124 background-color: inherit;
3061 3125 }
3062 3126
3063 -.dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
3064 - display: block;
3065 - content: "";
3066 - position: absolute;
3067 - bottom: 0;
3068 - left: 0;
3069 - right: 0;
3070 - height: 1px;
3071 - background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
3072 -}
3073 -
3074 3127 .dataviews-view-table thead tr {
3075 3128 border: 0;
3076 3129 }
3077 3130
@@ -3076,30 +3129,30 @@
3076 3129 }
3077 3130
3078 3131 .dataviews-view-table thead th {
3079 3132 background-color: inherit;
3080 - padding-top: var(--wpds-dimension-padding-sm, 8px);
3081 - padding-bottom: var(--wpds-dimension-padding-sm, 8px);
3133 + padding-top: 8px;
3134 + padding-bottom: 8px;
3082 3135 font-size: 11px;
3083 3136 text-transform: uppercase;
3084 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3137 + font-weight: 499;
3085 3138 }
3086 3139
3087 3140 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
3088 - padding-left: var(--wpds-dimension-padding-xs, 4px);
3089 - padding-right: var(--wpds-dimension-padding-xs, 4px);
3141 + padding-left: 4px;
3142 + padding-right: 4px;
3090 3143 }
3091 3144
3092 3145 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
3093 - gap: var(--wpds-dimension-gap-xs, 4px);
3146 + gap: 4px;
3094 3147 }
3095 3148
3096 3149 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
3097 - padding-left: var(--wpds-dimension-padding-lg, 16px);
3150 + padding-left: 16px;
3098 3151 }
3099 3152
3100 3153 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
3101 - padding-right: var(--wpds-dimension-padding-lg, 16px);
3154 + padding-right: 16px;
3102 3155 }
3103 3156
3104 3157 .dataviews-view-table tbody td {
3105 3158 vertical-align: top;
@@ -3105,9 +3158,9 @@
3105 3158 vertical-align: top;
3106 3159 }
3107 3160
3108 3161 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
3109 - min-height: var(--wpds-dimension-size-md, 32px);
3162 + min-height: 32px;
3110 3163 display: flex;
3111 3164 align-items: center;
3112 3165 white-space: nowrap;
3113 3166 }
@@ -3125,16 +3178,16 @@
3125 3178 min-height: 0;
3126 3179 }
3127 3180
3128 3181 .dataviews-view-table .dataviews-view-table-header-button {
3129 - padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3182 + padding: 4px 8px;
3130 3183 font-size: 11px;
3131 3184 text-transform: uppercase;
3132 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3185 + font-weight: 499;
3133 3186 }
3134 3187
3135 3188 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
3136 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3189 + color: #1e1e1e;
3137 3190 }
3138 3191
3139 3192 .dataviews-view-table .dataviews-view-table-header-button span {
3140 3193 speak: none;
@@ -3144,9 +3197,9 @@
3144 3197 display: none;
3145 3198 }
3146 3199
3147 3200 .dataviews-view-table .dataviews-view-table-header {
3148 - padding-left: var(--wpds-dimension-padding-xs, 4px);
3201 + padding-left: 4px;
3149 3202 }
3150 3203
3151 3204 .dataviews-view-table .dataviews-view-table__actions-column {
3152 3205 width: auto;
@@ -3162,14 +3215,14 @@
3162 3215 }
3163 3216
3164 3217 .dataviews-view-table.has-compact-density td,
3165 3218 .dataviews-view-table.has-compact-density th {
3166 - padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3219 + padding: 4px 8px;
3167 3220 }
3168 3221
3169 3222 .dataviews-view-table.has-comfortable-density td,
3170 3223 .dataviews-view-table.has-comfortable-density th {
3171 - padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px);
3224 + padding: 16px 12px;
3172 3225 }
3173 3226
3174 3227 .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
3175 3228 .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
@@ -3187,21 +3240,20 @@
3187 3240 }
3188 3241 }
3189 3242 .dataviews-column-primary__media {
3190 3243 max-width: 60px;
3191 - min-width: var(--wpds-dimension-size-md, 32px);
3192 - min-height: var(--wpds-dimension-size-md, 32px);
3244 + min-width: 32px;
3245 + min-height: 32px;
3193 3246 overflow: hidden;
3194 3247 position: relative;
3195 3248 flex-shrink: 0;
3196 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3197 - border-radius: var(--wpds-border-radius-md, 4px);
3249 + background-color: #fff;
3250 + border-radius: 4px;
3198 3251 }
3199 3252
3200 3253 .dataviews-column-primary__media img {
3201 - width: var(--wpds-dimension-size-md, 32px);
3202 - height: var(--wpds-dimension-size-md, 32px);
3203 - -o-object-fit: cover;
3254 + width: 32px;
3255 + height: 32px;
3204 3256 object-fit: cover;
3205 3257 }
3206 3258
3207 3259 .dataviews-column-primary__media::after {
@@ -3210,10 +3262,10 @@
3210 3262 top: 0;
3211 3263 left: 0;
3212 3264 width: 100%;
3213 3265 height: 100%;
3214 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3215 - border-radius: var(--wpds-border-radius-md, 4px);
3266 + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3267 + border-radius: 4px;
3216 3268 }
3217 3269
3218 3270 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3219 3271 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
@@ -3221,11 +3273,11 @@
3221 3273 max-width: 80ch;
3222 3274 }
3223 3275
3224 3276 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
3225 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3226 - padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
3227 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3277 + font-weight: 499;
3278 + padding: 12px 24px;
3279 + color: #1e1e1e;
3228 3280 }
3229 3281
3230 3282 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
3231 3283 .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
@@ -3242,29 +3294,20 @@
3242 3294 opacity: 1;
3243 3295 animation: dataviews-pulse 1s ease-in-out infinite;
3244 3296 }
3245 3297 }
3246 -.dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
3247 - gap: var(--wpds-dimension-gap-lg, 16px);
3248 -}
3249 -
3250 -.dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
3251 - gap: var(--wpds-dimension-gap-2xl, 32px);
3252 -}
3253 -
3254 3298 .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
3255 3299 height: 100%;
3256 3300 justify-content: flex-start;
3257 3301 position: relative;
3258 - isolation: isolate;
3259 3302 }
3260 3303
3261 3304 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
3262 - padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
3305 + padding: 8px 0 4px;
3263 3306 }
3264 3307
3265 3308 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
3266 - min-height: var(--wpds-dimension-size-sm, 24px);
3309 + min-height: 24px;
3267 3310 overflow: hidden;
3268 3311 align-content: center;
3269 3312 text-align: start;
3270 3313 }
@@ -3269,22 +3312,26 @@
3269 3312 text-align: start;
3270 3313 }
3271 3314
3272 3315 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3273 - width: -moz-fit-content;
3274 3316 width: fit-content;
3275 3317 }
3276 3318
3277 3319 .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 {
3278 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3320 + color: #1e1e1e;
3279 3321 }
3280 3322
3323 +.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
3324 +.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3325 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
3326 +}
3327 +
3281 3328 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
3282 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
3329 + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
3283 3330 }
3284 3331
3285 3332 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3286 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3333 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3287 3334 }
3288 3335
3289 3336 .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
3290 3337 outline: none;
@@ -3290,13 +3337,13 @@
3290 3337 outline: none;
3291 3338 }
3292 3339
3293 3340 .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
3294 - outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3341 + outline: 2px solid var(--wp-admin-theme-color);
3295 3342 }
3296 3343
3297 3344 .dataviews-view-picker-grid .dataviews-selection-checkbox {
3298 - top: var(--wpds-dimension-padding-sm, 8px) !important;
3345 + top: 8px !important;
3299 3346 }
3300 3347
3301 3348 .dataviews-view-picker-grid .dataviews-selection-checkbox input {
3302 3349 pointer-events: none;
@@ -3305,15 +3352,14 @@
3305 3352 .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
3306 3353 width: 100%;
3307 3354 aspect-ratio: 1/1;
3308 3355 min-height: 0;
3309 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3310 - border-radius: var(--wpds-border-radius-md, 4px);
3356 + background-color: #fff;
3357 + border-radius: 4px;
3311 3358 position: relative;
3312 3359 }
3313 3360
3314 3361 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3315 - -o-object-fit: cover;
3316 3362 object-fit: cover;
3317 3363 width: 100%;
3318 3364 height: 100%;
3319 3365 }
@@ -3324,10 +3370,10 @@
3324 3370 top: 0;
3325 3371 left: 0;
3326 3372 width: 100%;
3327 3373 height: 100%;
3328 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3329 - border-radius: var(--wpds-border-radius-md, 4px);
3374 + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3375 + border-radius: 4px;
3330 3376 pointer-events: none;
3331 3377 }
3332 3378
3333 3379 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
@@ -3336,25 +3382,25 @@
3336 3382 line-height: 16px;
3337 3383 }
3338 3384
3339 3385 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
3340 - padding: 0 0 var(--wpds-dimension-padding-md, 12px);
3386 + padding: 0 0 12px;
3341 3387 }
3342 3388
3343 3389 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
3344 - min-height: var(--wpds-dimension-size-sm, 24px);
3345 - line-height: var(--wpds-typography-line-height-sm, 20px);
3346 - padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
3390 + min-height: 24px;
3391 + line-height: 20px;
3392 + padding-top: 2px;
3347 3393 }
3348 3394
3349 3395 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
3350 - min-height: var(--wpds-dimension-size-sm, 24px);
3396 + min-height: 24px;
3351 3397 align-items: center;
3352 3398 }
3353 3399
3354 3400 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
3355 3401 width: 35%;
3356 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3402 + color: #757575;
3357 3403 overflow: hidden;
3358 3404 text-overflow: ellipsis;
3359 3405 white-space: nowrap;
3360 3406 }
@@ -3370,9 +3416,9 @@
3370 3416 display: none;
3371 3417 }
3372 3418
3373 3419 .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
3374 - padding-bottom: var(--wpds-dimension-padding-md, 12px);
3420 + padding-bottom: 12px;
3375 3421 }
3376 3422
3377 3423 .dataviews-view-picker-grid__field-value:empty,
3378 3424 .dataviews-view-picker-grid__field:empty {
@@ -3381,32 +3427,32 @@
3381 3427
3382 3428 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3383 3429 position: absolute;
3384 3430 top: -9999em;
3385 - left: var(--wpds-dimension-padding-sm, 8px);
3431 + left: 8px;
3386 3432 z-index: 1;
3387 3433 }
3388 3434
3389 3435 @media (hover: none) {
3390 3436 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3391 - top: var(--wpds-dimension-padding-sm, 8px);
3437 + top: 8px;
3392 3438 }
3393 3439 }
3394 3440 .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
3395 3441 .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
3396 3442 .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
3397 - top: var(--wpds-dimension-padding-sm, 8px);
3443 + top: 8px;
3398 3444 }
3399 3445
3400 3446 .dataviews-view-picker-grid__media--clickable {
3401 - cursor: var(--wpds-cursor-control, pointer);
3447 + cursor: pointer;
3402 3448 }
3403 3449
3404 3450 .dataviews-view-picker-grid-group__header {
3405 - font-size: var(--wpds-typography-font-size-lg, 15px);
3406 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3407 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3408 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3451 + font-size: 15px;
3452 + font-weight: 499;
3453 + color: #1e1e1e;
3454 + margin: 0 0 8px 0;
3409 3455 padding: 0 48px;
3410 3456 }
3411 3457
3412 3458 .dataviews-view-picker-table {
@@ -3421,9 +3467,9 @@
3421 3467 outline: none;
3422 3468 }
3423 3469
3424 3470 .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
3425 - outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3471 + outline: 2px solid var(--wp-admin-theme-color);
3426 3472 }
3427 3473
3428 3474 .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
3429 3475 pointer-events: none;
@@ -3430,38 +3476,38 @@
3430 3476 opacity: 1;
3431 3477 }
3432 3478
3433 3479 .dataviews-view-picker-table .dataviews-view-table__row {
3434 - cursor: var(--wpds-cursor-control, pointer);
3480 + cursor: pointer;
3435 3481 }
3436 3482
3437 3483 .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
3438 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3484 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3439 3485 }
3440 3486
3441 3487 .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
3442 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3488 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
3443 3489 }
3444 3490
3445 3491 .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
3446 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3492 + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
3447 3493 }
3448 3494
3449 3495 .dataviews-view-activity {
3450 3496 margin: 0 0 auto;
3451 - padding: 0 var(--wpds-dimension-padding-2xl, 24px);
3497 + padding: 8px 24px;
3452 3498 }
3453 3499
3454 3500 .dataviews-view-activity .dataviews-view-activity__group-header {
3455 - font-size: var(--wpds-typography-font-size-lg, 15px);
3456 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3457 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3458 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3501 + font-size: 15px;
3502 + font-weight: 499;
3503 + color: #949494;
3504 + margin: 0 0 8px 0;
3459 3505 padding: 0;
3460 3506 }
3461 3507
3462 3508 .dataviews-view-activity .dataviews-view-activity__item-actions {
3463 - min-width: var(--wpds-dimension-size-sm, 24px);
3509 + min-width: 24px;
3464 3510 }
3465 3511
3466 3512 .dataviews-view-activity .dataviews-view-activity__item-content {
3467 3513 flex-grow: 1;
@@ -3469,9 +3515,9 @@
3469 3515
3470 3516 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
3471 3517 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
3472 3518 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3473 - min-height: var(--wpds-dimension-size-2xs, 16px);
3519 + min-height: 16px;
3474 3520 }
3475 3521
3476 3522 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
3477 3523 position: relative;
@@ -3481,20 +3527,19 @@
3481 3527 overflow: hidden;
3482 3528 }
3483 3529
3484 3530 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
3485 - cursor: var(--wpds-cursor-control, pointer);
3531 + cursor: pointer;
3486 3532 }
3487 3533
3488 3534 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
3489 - outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3535 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
3490 3536 outline-offset: var(--wp-admin-border-width-focus);
3491 - border-radius: var(--wpds-border-radius-sm, 2px);
3537 + border-radius: 2px;
3492 3538 }
3493 3539
3494 3540 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3495 3541 display: flex;
3496 - width: -moz-max-content;
3497 3542 width: max-content;
3498 3543 flex: 0 0 auto;
3499 3544 }
3500 3545
@@ -3503,12 +3548,12 @@
3503 3548 z-index: 1;
3504 3549 }
3505 3550
3506 3551 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3507 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3552 + color: #757575;
3508 3553 display: flex;
3509 - gap: var(--wpds-dimension-gap-md, 12px);
3510 - row-gap: var(--wpds-dimension-gap-xs, 4px);
3554 + gap: 12px;
3555 + row-gap: 4px;
3511 3556 flex-wrap: wrap;
3512 3557 }
3513 3558
3514 3559 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
@@ -3533,9 +3578,9 @@
3533 3578 content: "";
3534 3579 flex: 1 1 auto;
3535 3580 width: 1px;
3536 3581 margin: 0 auto;
3537 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3582 + background-color: #ddd;
3538 3583 }
3539 3584
3540 3585 .dataviews-view-activity .dataviews-view-activity__item-type::before {
3541 3586 content: "";
@@ -3541,67 +3586,67 @@
3541 3586 content: "";
3542 3587 flex: 0 0 auto;
3543 3588 width: 1px;
3544 3589 margin: 0 auto;
3545 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3590 + background-color: #ddd;
3546 3591 }
3547 3592
3548 3593 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
3549 - width: var(--wpds-dimension-padding-md, 12px);
3594 + width: 8px;
3550 3595 }
3551 3596
3552 3597 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
3553 - height: var(--wpds-dimension-size-3xs, 12px);
3598 + height: 12px;
3554 3599 }
3555 3600
3556 3601 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
3557 - width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3558 - height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3602 + width: 11px;
3603 + height: 11px;
3559 3604 }
3560 3605
3561 3606 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
3562 - margin: var(--wpds-dimension-gap-md, 12px) 0;
3607 + margin: 12px 0;
3563 3608 }
3564 3609
3565 3610 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
3566 - width: var(--wpds-dimension-size-sm, 24px);
3611 + width: 24px;
3567 3612 }
3568 3613
3569 3614 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
3570 - height: var(--wpds-dimension-size-3xs, 12px);
3615 + height: 12px;
3571 3616 }
3572 3617
3573 3618 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
3574 - width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3575 - height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3619 + width: 25px;
3620 + height: 25px;
3576 3621 }
3577 3622
3578 3623 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
3579 - margin: var(--wpds-dimension-gap-md, 12px) 0;
3580 - padding-top: var(--wpds-dimension-padding-sm, 8px);
3624 + margin: 12px 0;
3625 + padding-top: 8px;
3581 3626 }
3582 3627
3583 3628 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
3584 - width: var(--wpds-dimension-size-md, 32px);
3629 + width: 32px;
3585 3630 }
3586 3631
3587 3632 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
3588 - height: var(--wpds-dimension-size-4xs, 8px);
3633 + height: 8px;
3589 3634 }
3590 3635
3591 3636 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
3592 - width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3593 - height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3637 + width: 33px;
3638 + height: 33px;
3594 3639 }
3595 3640
3596 3641 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
3597 - margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
3598 - padding-top: var(--wpds-dimension-padding-md, 12px);
3642 + margin: 8px 0 16px;
3643 + padding-top: 12px;
3599 3644 }
3600 3645
3601 3646 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
3602 - width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3603 - height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3647 + width: 9px;
3648 + height: 9px;
3604 3649 position: relative;
3605 3650 top: 50%;
3606 3651 transform: translateY(-50%);
3607 3652 }
@@ -3610,15 +3655,15 @@
3610 3655 visibility: hidden;
3611 3656 }
3612 3657
3613 3658 .dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
3614 - background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
3659 + background: linear-gradient(to bottom, #ddd 0%, rgba(221, 221, 221, 0.2) 60%, rgba(221, 221, 221, 0) 100%);
3615 3660 }
3616 3661
3617 3662 .dataviews-view-activity .dataviews-view-activity__item-type-icon {
3618 3663 overflow: hidden;
3619 3664 flex-shrink: 0;
3620 - background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3665 + background-color: #fff;
3621 3666 }
3622 3667
3623 3668 .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
3624 3669 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
@@ -3626,22 +3671,21 @@
3626 3671 display: block;
3627 3672 width: 100%;
3628 3673 height: 100%;
3629 3674 margin: 0 auto;
3630 - -o-object-fit: cover;
3631 3675 object-fit: cover;
3632 3676 border-radius: 50%;
3633 3677 box-sizing: border-box;
3634 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3678 + box-shadow: inset 0 0 0 1px #ddd;
3635 3679 }
3636 3680
3637 3681 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
3638 - padding: var(--wpds-dimension-padding-xs, 4px);
3682 + padding: 4px;
3639 3683 }
3640 3684
3641 3685 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
3642 3686 content: "";
3643 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3687 + background-color: #ddd;
3644 3688 }
3645 3689
3646 3690 .dataviews-view-activity.is-refreshing {
3647 3691 opacity: 0.5;
@@ -3657,212 +3701,11 @@
3657 3701 .dataviews-view-activity + .dataviews-pagination {
3658 3702 justify-content: space-between;
3659 3703 }
3660 3704
3661 -.dataviews-view-picker-activity {
3662 - margin: 0;
3663 - padding: 0;
3664 - flex-grow: 1;
3665 -}
3666 -
3667 -.dataviews-view-picker-activity:focus-visible[aria-activedescendant] {
3668 - outline: none;
3669 -}
3670 -
3671 -.dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
3672 - outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3673 - outline-offset: -2px;
3674 -}
3675 -
3676 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item {
3677 - cursor: var(--wpds-cursor-control, pointer);
3678 - border-radius: var(--wpds-border-radius-sm, 2px);
3679 - padding-inline: var(--wpds-dimension-padding-2xl, 24px);
3680 - transition: background-color 0.1s ease;
3681 -}
3682 -
3683 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
3684 - background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3685 -}
3686 -
3687 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
3688 - outline: 3px solid transparent;
3689 - outline-offset: -2px;
3690 -}
3691 -
3692 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type {
3693 - width: var(--wpds-dimension-padding-md, 12px);
3694 -}
3695 -
3696 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
3697 - height: var(--wpds-dimension-size-3xs, 12px);
3698 -}
3699 -
3700 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
3701 - width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3702 - height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3703 -}
3704 -
3705 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content {
3706 - margin: var(--wpds-dimension-gap-md, 12px) 0;
3707 -}
3708 -
3709 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
3710 - width: var(--wpds-dimension-size-sm, 24px);
3711 -}
3712 -
3713 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
3714 - height: var(--wpds-dimension-size-3xs, 12px);
3715 -}
3716 -
3717 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
3718 - width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3719 - height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3720 -}
3721 -
3722 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content {
3723 - margin: var(--wpds-dimension-gap-md, 12px) 0;
3724 - padding-top: var(--wpds-dimension-padding-sm, 8px);
3725 -}
3726 -
3727 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
3728 - width: var(--wpds-dimension-size-md, 32px);
3729 -}
3730 -
3731 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
3732 - height: var(--wpds-dimension-size-4xs, 8px);
3733 -}
3734 -
3735 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
3736 - width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3737 - height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3738 -}
3739 -
3740 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content {
3741 - margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
3742 - padding-top: var(--wpds-dimension-padding-md, 12px);
3743 -}
3744 -
3745 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-bullet, .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-bullet {
3746 - width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3747 - height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3748 - position: relative;
3749 - top: 50%;
3750 - transform: translateY(-50%);
3751 -}
3752 -
3753 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content {
3754 - flex-grow: 1;
3755 -}
3756 -
3757 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
3758 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
3759 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
3760 - min-height: var(--wpds-dimension-size-2xs, 16px);
3761 -}
3762 -
3763 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
3764 - position: relative;
3765 - display: flex;
3766 - align-items: center;
3767 - flex: 1;
3768 - overflow: hidden;
3769 -}
3770 -
3771 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty {
3772 - display: none;
3773 -}
3774 -
3775 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
3776 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3777 - display: flex;
3778 - gap: var(--wpds-dimension-gap-md, 12px);
3779 - row-gap: var(--wpds-dimension-gap-xs, 4px);
3780 - flex-wrap: wrap;
3781 -}
3782 -
3783 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty {
3784 - display: none;
3785 -}
3786 -
3787 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field:has(.dataviews-view-picker-activity__item-field-value:empty) {
3788 - display: none;
3789 -}
3790 -
3791 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value {
3792 - display: flex;
3793 - align-items: center;
3794 -}
3795 -
3796 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type {
3797 - align-self: stretch;
3798 - flex-shrink: 0;
3799 -}
3800 -
3801 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after {
3802 - content: "";
3803 - flex: 1 1 auto;
3804 - width: 1px;
3805 - margin: 0 auto;
3806 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3807 -}
3808 -
3809 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before {
3810 - content: "";
3811 - flex: 0 0 auto;
3812 - width: 1px;
3813 - margin: 0 auto;
3814 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3815 -}
3816 -
3817 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before {
3818 - visibility: hidden;
3819 -}
3820 -
3821 -.dataviews-view-picker-activity .dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type .dataviews-view-picker-activity__item-type::after, .dataviews-view-picker-activity > .dataviews-view-picker-activity__item:last-child .dataviews-view-picker-activity__item-type::after {
3822 - background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
3823 -}
3824 -
3825 -.dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
3826 - font-size: var(--wpds-typography-font-size-lg, 15px);
3827 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3828 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3829 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3830 - padding: 0;
3831 - padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
3832 -}
3833 -
3834 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon {
3835 - overflow: hidden;
3836 - flex-shrink: 0;
3837 - background-color: transparent;
3838 -}
3839 -
3840 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img,
3841 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg,
3842 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
3843 - display: block;
3844 - width: 100%;
3845 - height: 100%;
3846 - margin: 0 auto;
3847 - -o-object-fit: cover;
3848 - object-fit: cover;
3849 - border-radius: 50%;
3850 - box-sizing: border-box;
3851 - box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3852 -}
3853 -
3854 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg {
3855 - padding: var(--wpds-dimension-padding-xs, 4px);
3856 -}
3857 -
3858 -.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
3859 - background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3860 -}
3861 -
3862 3705 .dataviews-picker-footer__bulk-selection {
3863 3706 align-self: flex-start;
3864 - height: var(--wpds-dimension-size-md, 32px);
3707 + height: 32px;
3865 3708 }
3866 3709
3867 3710 .dataviews-picker-footer__actions {
3868 3711 align-self: flex-end;
@@ -3867,13 +3710,8 @@
3867 3710 .dataviews-picker-footer__actions {
3868 3711 align-self: flex-end;
3869 3712 }
3870 3713
3871 -.dataviews-controls__richtext [data-rich-text-placeholder]::after {
3872 - content: attr(data-rich-text-placeholder);
3873 - color: color-mix(in srgb, currentColor, transparent 38%);
3874 -}
3875 -
3876 3714 .dataviews-controls__datetime {
3877 3715 border: none;
3878 3716 padding: 0;
3879 3717 }
@@ -3897,13 +3735,13 @@
3897 3735 display: flex;
3898 3736 }
3899 3737
3900 3738 .dataviews-controls__date-preset {
3901 - border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3739 + border: 1px solid #ddd;
3902 3740 }
3903 3741
3904 3742 .dataviews-controls__date-preset:active {
3905 - background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3743 + background-color: #000;
3906 3744 }
3907 3745
3908 3746 .dataforms-layouts-panel__field-trigger {
3909 3747 position: relative;
@@ -3909,18 +3747,18 @@
3909 3747 position: relative;
3910 3748 color: inherit;
3911 3749 display: flex;
3912 3750 width: 100%;
3913 - min-height: var(--wpds-dimension-size-sm, 24px);
3914 - cursor: var(--wpds-cursor-control, pointer);
3751 + min-height: 24px;
3752 + cursor: pointer;
3915 3753 align-items: flex-start;
3916 - border-radius: var(--wpds-border-radius-sm, 2px);
3754 + border-radius: 2px;
3917 3755 isolation: isolate;
3918 3756 }
3919 3757
3920 3758 .dataforms-layouts-panel__field-trigger--label-side {
3921 3759 flex-direction: row;
3922 - gap: var(--wpds-dimension-gap-sm, 8px);
3760 + gap: var(--wpds-dimension-gap-md, 12px);
3923 3761 }
3924 3762
3925 3763 .dataforms-layouts-panel__field-trigger--label-top {
3926 3764 display: grid;
@@ -3931,9 +3769,9 @@
3931 3769 align-items: center;
3932 3770 }
3933 3771
3934 3772 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
3935 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3773 + color: var(--wp-admin-theme-color);
3936 3774 }
3937 3775
3938 3776 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
3939 3777 opacity: 1;
@@ -3939,9 +3777,9 @@
3939 3777 opacity: 1;
3940 3778 }
3941 3779
3942 3780 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
3943 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3781 + color: var(--wp-admin-theme-color);
3944 3782 }
3945 3783
3946 3784 .dataforms-layouts-panel__field-trigger.is-disabled {
3947 3785 cursor: default;
@@ -3947,10 +3785,10 @@
3947 3785 cursor: default;
3948 3786 }
3949 3787
3950 3788 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
3951 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3952 - font-weight: var(--wpds-typography-font-weight-default, 400);
3789 + color: #757575;
3790 + font-weight: var(--wpds-font-weight-regular, 400);
3953 3791 }
3954 3792
3955 3793 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
3956 3794 opacity: 1;
@@ -3957,14 +3795,14 @@
3957 3795 fill: currentColor;
3958 3796 }
3959 3797
3960 3798 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3961 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3799 + fill: var(--wp-admin-theme-color);
3962 3800 }
3963 3801
3964 3802 .dataforms-layouts-panel__field-trigger-icon {
3965 3803 padding: 0;
3966 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3804 + color: var(--wp-admin-theme-color);
3967 3805 flex: 0 0 auto;
3968 3806 opacity: 0;
3969 3807 border-radius: var(--wpds-border-radius-xs, 1px);
3970 3808 }
@@ -3970,9 +3808,9 @@
3970 3808 }
3971 3809
3972 3810 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3973 3811 opacity: 1;
3974 - outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3812 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wp-admin-theme-color);
3975 3813 }
3976 3814
3977 3815 .dataforms-layouts-panel__field-dropdown-anchor {
3978 3816 width: 100%;
@@ -3984,14 +3822,15 @@
3984 3822
3985 3823 .dataforms-layouts-panel__field-label {
3986 3824 width: 38%;
3987 3825 flex-shrink: 0;
3988 - min-height: var(--wpds-dimension-size-sm, 24px);
3826 + min-height: 24px;
3989 3827 display: flex;
3990 3828 align-items: center;
3991 - line-height: var(--wpds-typography-line-height-sm, 20px);
3829 + line-height: 20px;
3992 3830 hyphens: auto;
3993 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3831 + color: #757575;
3832 + text-transform: capitalize;
3994 3833 }
3995 3834
3996 3835 .dataforms-layouts-panel__field-label .components-base-control__label {
3997 3836 display: inline;
@@ -3999,9 +3838,9 @@
3999 3838 line-height: inherit;
4000 3839 }
4001 3840
4002 3841 .dataforms-layouts-panel__field-label.has-error {
4003 - color: var(--wpds-color-foreground-content-error-weak, #cc1818);
3842 + color: #cc1818;
4004 3843 }
4005 3844
4006 3845 .dataforms-layouts-panel__field-label-error-content {
4007 3846 position: relative;
@@ -4006,27 +3845,29 @@
4006 3845 .dataforms-layouts-panel__field-label-error-content {
4007 3846 position: relative;
4008 3847 z-index: 1;
4009 3848 cursor: help;
4010 - color: var(--wpds-color-foreground-content-error-weak, #cc1818);
3849 + fill: #cc1818;
4011 3850 display: inline-flex;
4012 3851 flex-direction: row;
4013 3852 align-items: center;
4014 - gap: var(--wpds-dimension-gap-xs, 4px);
3853 + gap: 4px;
4015 3854 }
4016 3855
3856 +.dataforms-layouts-panel__field-label-error-content svg {
3857 + fill: currentColor;
3858 +}
3859 +
4017 3860 .dataforms-layouts-panel__field-control {
4018 3861 flex-grow: 1;
4019 3862 min-width: 0;
4020 - min-height: var(--wpds-dimension-size-sm, 24px);
4021 - line-height: var(--wpds-typography-line-height-md, 24px);
3863 + min-height: 24px;
3864 + line-height: var(--wpds-font-line-height-md, 24px);
4022 3865 display: flex;
4023 3866 align-items: center;
4024 - overflow: clip;
4025 - padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4026 - margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3867 + overflow: hidden;
4027 3868 word-break: break-word;
4028 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3869 + font-weight: var(--wpds-font-weight-medium, 499);
4029 3870 }
4030 3871
4031 3872 .dataforms-layouts-panel__field-control > * {
4032 3873 min-width: 0;
@@ -4046,17 +3887,17 @@
4046 3887 }
4047 3888
4048 3889 .dataforms-layouts-panel__field-dropdown .components-popover__content {
4049 3890 min-width: 320px;
4050 - padding: var(--wpds-dimension-padding-lg, 16px);
3891 + padding: 16px;
4051 3892 }
4052 3893
4053 3894 .dataforms-layouts-panel__dropdown-header {
4054 - margin-bottom: var(--wpds-dimension-gap-lg, 16px);
3895 + margin-bottom: 16px;
4055 3896 }
4056 3897
4057 3898 .dataforms-layouts-panel__modal-footer {
4058 - margin-top: var(--wpds-dimension-gap-lg, 16px);
3899 + margin-top: 16px;
4059 3900 }
4060 3901
4061 3902 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4062 3903 z-index: 159990;
@@ -4061,15 +3902,11 @@
4061 3902 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4062 3903 z-index: 159990;
4063 3904 }
4064 3905
4065 -.dataforms-layouts-panel__summary-button:empty {
4066 - min-width: 160px;
4067 -}
4068 -
4069 3906 .dataforms-layouts-regular__field {
4070 3907 width: 100%;
4071 - min-height: var(--wpds-dimension-size-md, 32px);
3908 + min-height: 32px;
4072 3909 justify-content: flex-start !important;
4073 3910 align-items: flex-start !important;
4074 3911 }
4075 3912
@@ -4075,18 +3912,18 @@
4075 3912
4076 3913 .dataforms-layouts-regular__field .components-base-control__label,
4077 3914 .dataforms-layouts-regular__field .components-input-control__label,
4078 3915 .dataforms-layouts-regular__field .components-form-token-field__label {
4079 - color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3916 + color: #1e1e1e;
4080 3917 }
4081 3918
4082 3919 .dataforms-layouts-regular__field-label {
4083 3920 width: 38%;
4084 3921 flex-shrink: 0;
4085 - min-height: var(--wpds-dimension-size-md, 32px);
3922 + min-height: 32px;
4086 3923 display: flex;
4087 3924 align-items: center;
4088 - line-height: var(--wpds-typography-line-height-sm, 20px);
3925 + line-height: 20px;
4089 3926 hyphens: auto;
4090 3927 }
4091 3928
4092 3929 .dataforms-layouts-regular__field-label--label-position-side {
@@ -4098,46 +3935,45 @@
4098 3935 }
4099 3936
4100 3937 .dataforms-layouts-regular__field-control {
4101 3938 flex-grow: 1;
4102 - min-height: var(--wpds-dimension-size-md, 32px);
3939 + min-height: 32px;
4103 3940 display: flex;
4104 3941 align-items: center;
4105 3942 }
4106 3943
3944 +.dataforms-layouts-card__field-header-label {
3945 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3946 + font-weight: 499;
3947 + font-size: 15px;
3948 + line-height: 20px;
3949 +}
3950 +
4107 3951 .dataforms-layouts-card__field {
4108 3952 width: 100%;
4109 3953 }
4110 3954
4111 -.dataforms-layouts-card__field-header-content {
4112 - min-height: 24px;
4113 -}
4114 -
4115 -.dataforms-layouts-card__field-header-content-description {
4116 - display: contents;
4117 -}
4118 -
4119 3955 .dataforms-layouts-card__field-description {
4120 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3956 + color: #757575;
4121 3957 display: block;
4122 - font-size: var(--wpds-typography-font-size-md, 13px);
4123 - margin-bottom: var(--wpds-dimension-gap-lg, 16px);
3958 + font-size: 13px;
3959 + margin-bottom: 16px;
4124 3960 }
4125 3961
4126 3962 .dataforms-layouts-card__field-summary {
4127 3963 display: flex;
4128 3964 flex-direction: row;
4129 - gap: var(--wpds-dimension-gap-lg, 16px);
3965 + gap: 16px;
4130 3966 align-items: center;
4131 3967 }
4132 3968
4133 3969 .dataforms-layouts-details__summary-content {
4134 3970 display: inline-flex;
4135 - min-height: var(--wpds-dimension-size-sm, 24px);
3971 + min-height: 24px;
4136 3972 }
4137 3973
4138 3974 .dataforms-layouts-details__content {
4139 - padding-top: var(--wpds-dimension-padding-md, 12px);
3975 + padding-top: 12px;
4140 3976 }
4141 3977
4142 3978 .dataforms-layouts-row__field-control {
4143 3979 width: 100%;
@@ -4143,609 +3979,18 @@
4143 3979 width: 100%;
4144 3980 }
4145 3981
4146 3982 .dataforms-layouts__wrapper {
4147 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4148 - font-weight: var(--wpds-typography-font-weight-default, 400);
3983 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3984 + font-weight: 400;
4149 3985 font-size: 13px;
4150 3986 line-height: 20px;
4151 3987 }
4152 3988
4153 3989 /**
4154 - * Typography
4155 - */
4156 -/**
4157 - * SCSS Variables.
4158 - *
4159 - * Please use variables from this sheet to ensure consistency across the UI.
4160 - * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
4161 - * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
4162 - */
4163 -/**
4164 3990 * Colors
4165 3991 */
4166 3992 /**
4167 - * Fonts & basic variables.
4168 - */
4169 -/**
4170 - * Typography
4171 - */
4172 -/**
4173 - * Grid System.
4174 - * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
4175 - */
4176 -/**
4177 - * Radius scale.
4178 - */
4179 -/**
4180 - * Elevation scale.
4181 - */
4182 -/**
4183 - * Dimensions.
4184 - */
4185 -/**
4186 - * Mobile specific styles
4187 - */
4188 -/**
4189 - * Editor styles.
4190 - */
4191 -/**
4192 - * Block & Editor UI.
4193 - */
4194 -/**
4195 - * Block paddings.
4196 - */
4197 -/**
4198 - * React Native specific.
4199 - * These variables do not appear to be used anywhere else.
4200 - */
4201 -/**
4202 - * Breakpoints & Media Queries
4203 - */
4204 -/**
4205 -* Converts a hex value into the rgb equivalent.
4206 -*
4207 -* @param {string} hex - the hexadecimal value to convert
4208 -* @return {string} comma separated rgb values
4209 -*/
4210 -/**
4211 - * Long content fade mixin
4212 - *
4213 - * Creates a fading overlay to signify that the content is longer
4214 - * than the space allows.
4215 - */
4216 -/**
4217 - * Breakpoint mixins
4218 - */
4219 -/**
4220 - * Focus styles.
4221 - */
4222 -/**
4223 - * Standard focus rings for the WordPress Design System.
4224 - *
4225 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
4226 - * e.g. `&:focus { @include outset-ring__focus(); }`.
4227 - */
4228 -/**
4229 - * Applies editor left position to the selector passed as argument
4230 - */
4231 -/**
4232 - * Styles that are reused verbatim in a few places
4233 - */
4234 -/**
4235 - * Allows users to opt-out of animations via OS-level preferences.
4236 - */
4237 -/**
4238 - * Reset default styles for JavaScript UI based pages.
4239 - * This is a WP-admin agnostic reset
4240 - */
4241 -/**
4242 - * Reset the WP Admin page styles for Gutenberg-like pages.
4243 - */
4244 -/**
4245 - * Creates a checkerboard pattern background to indicate transparency.
4246 - * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
4247 - */
4248 -:root {
4249 - --wp-block-synced-color: #7a00df;
4250 - --wp-block-synced-color--rgb: 122, 0, 223;
4251 - --wp-bound-block-color: var(--wp-block-synced-color);
4252 - --wp-editor-canvas-background: #ddd;
4253 - --wp-admin-theme-color: #007cba;
4254 - --wp-admin-theme-color--rgb: 0, 124, 186;
4255 - --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
4256 - --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
4257 - --wp-admin-theme-color-darker-20: #005a87;
4258 - --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
4259 - --wp-admin-border-width-focus: 2px;
4260 -}
4261 -
4262 -@media (min-resolution: 192dpi) {
4263 - :root {
4264 - --wp-admin-border-width-focus: 1.5px;
4265 - }
4266 -}
4267 -.fields-create-template-part-modal {
4268 - z-index: 1000001;
4269 -}
4270 -
4271 -.fields-create-template-part-modal__area-fieldset {
4272 - border: 0;
4273 - padding: 0;
4274 - margin: 0;
4275 -}
4276 -
4277 -.fields-create-template-part-modal__area-radio-group {
4278 - border: 1px solid #949494;
4279 - border-radius: 2px;
4280 -}
4281 -
4282 -.fields-create-template-part-modal__area-radio-wrapper {
4283 - position: relative;
4284 - padding: 12px;
4285 - display: grid;
4286 - align-items: center;
4287 - grid-template-columns: min-content 1fr min-content;
4288 - grid-gap: 4px 8px;
4289 - color: #1e1e1e;
4290 -}
4291 -
4292 -.fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
4293 - border-top: 1px solid #949494;
4294 -}
4295 -
4296 -.fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
4297 - position: absolute;
4298 - opacity: 0;
4299 -}
4300 -
4301 -.fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
4302 - z-index: 1;
4303 -}
4304 -
4305 -.fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
4306 - color: var(--wp-admin-theme-color);
4307 -}
4308 -
4309 -.fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
4310 - pointer-events: none;
4311 -}
4312 -
4313 -.fields-create-template-part-modal__area-radio-label::before {
4314 - content: "";
4315 - position: absolute;
4316 - inset: 0;
4317 -}
4318 -
4319 -input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
4320 - cursor: var(--wpds-cursor-control, pointer);
4321 -}
4322 -
4323 -input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
4324 - outline: 4px solid transparent;
4325 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4326 -}
4327 -
4328 -.fields-create-template-part-modal__area-radio-icon,
4329 -.fields-create-template-part-modal__area-radio-checkmark {
4330 - fill: currentColor;
4331 -}
4332 -
4333 -input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
4334 - opacity: 0;
4335 -}
4336 -
4337 -.fields-create-template-part-modal__area-radio-description {
4338 - grid-column: 2/3;
4339 - margin: 0;
4340 - color: #757575;
4341 - font-size: 12px;
4342 - line-height: normal;
4343 - text-wrap: pretty;
4344 -}
4345 -
4346 -input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
4347 - color: inherit;
4348 -}
4349 -
4350 -fieldset.fields__media-edit {
4351 - border: 0;
4352 - padding: 0;
4353 - margin: 0;
4354 - width: 100%;
4355 -}
4356 -
4357 -fieldset.fields__media-edit .components-base-control__label {
4358 - color: #1e1e1e;
4359 -}
4360 -
4361 -fieldset.fields__media-edit .fields__media-edit-description {
4362 - font-size: 12px;
4363 - line-height: 1.5;
4364 -}
4365 -
4366 -fieldset.fields__media-edit {
4367 - container-type: inline-size;
4368 -}
4369 -
4370 -fieldset.fields__media-edit .fields__media-edit-compact-group {
4371 - border: 1px dashed #949494;
4372 - border-radius: 4px;
4373 - overflow: hidden;
4374 -}
4375 -
4376 -fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
4377 - border-radius: 2px;
4378 -}
4379 -
4380 -fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
4381 - border: 0;
4382 - border-radius: 0;
4383 -}
4384 -
4385 -fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
4386 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4387 -}
4388 -
4389 -fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
4390 - border-bottom: 1px solid #f0f0f0;
4391 -}
4392 -
4393 -fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
4394 - display: flex;
4395 - align-items: center;
4396 - gap: 8px;
4397 -}
4398 -
4399 -fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4400 - margin: 0;
4401 -}
4402 -
4403 -fieldset.fields__media-edit .fields__media-edit-compact {
4404 - position: relative;
4405 - min-width: 0;
4406 -}
4407 -
4408 -fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
4409 - opacity: 1;
4410 -}
4411 -
4412 -fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
4413 - position: absolute;
4414 - right: 8px;
4415 - top: 50%;
4416 - transform: translateY(-50%);
4417 - opacity: 0;
4418 - pointer-events: none;
4419 - z-index: 1;
4420 - border-radius: 2px;
4421 - background: #fff;
4422 -}
4423 -
4424 -fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
4425 - pointer-events: auto;
4426 -}
4427 -
4428 -fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
4429 - display: flex;
4430 - align-items: center;
4431 - gap: 8px;
4432 -}
4433 -
4434 -fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4435 - margin: 0;
4436 -}
4437 -
4438 -fieldset.fields__media-edit .fields__media-edit-picker-button {
4439 - position: relative;
4440 - display: flex;
4441 - align-items: center;
4442 - gap: 8px;
4443 - border: 1px dashed #949494;
4444 - border-radius: 2px;
4445 - padding: 4px 8px;
4446 - min-height: 40px;
4447 - cursor: var(--wpds-cursor-control, pointer);
4448 - min-width: 0;
4449 -}
4450 -
4451 -fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
4452 - border-color: var(--wp-admin-theme-color);
4453 - color: var(--wp-admin-theme-color);
4454 -}
4455 -
4456 -fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
4457 - background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
4458 - color: var(--wp-admin-theme-color-darker-20);
4459 - border-color: var(--wp-admin-theme-color-darker-20);
4460 -}
4461 -
4462 -fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
4463 - color: var(--wp-admin-theme-color);
4464 -}
4465 -
4466 -fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
4467 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4468 - outline: none;
4469 -}
4470 -
4471 -fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
4472 - opacity: 0.6;
4473 - cursor: default;
4474 -}
4475 -
4476 -fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
4477 - position: absolute;
4478 - top: 50%;
4479 - left: 50%;
4480 - transform: translate(-50%, -50%);
4481 - z-index: 1;
4482 -}
4483 -
4484 -fieldset.fields__media-edit .fields__media-edit-filename,
4485 -fieldset.fields__media-edit .fields__media-edit-placeholder {
4486 - flex: 1;
4487 - width: 100%;
4488 - min-width: 0;
4489 -}
4490 -
4491 -fieldset.fields__media-edit .fields__media-edit-placeholder {
4492 - text-align: center;
4493 -}
4494 -
4495 -fieldset.fields__media-edit .fields__media-edit-thumbnail {
4496 - width: 24px;
4497 - aspect-ratio: 1/1;
4498 - flex-shrink: 0;
4499 - border-radius: 2px;
4500 -}
4501 -
4502 -fieldset.fields__media-edit .fields__media-edit-expanded {
4503 - display: grid;
4504 - gap: 8px;
4505 -}
4506 -
4507 -fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
4508 - display: flex;
4509 - align-items: center;
4510 - gap: 8px;
4511 -}
4512 -
4513 -fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4514 - margin: 0;
4515 -}
4516 -
4517 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
4518 - position: relative;
4519 - width: 100%;
4520 - aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4521 - border-radius: 2px;
4522 - padding: 4px;
4523 - overflow: hidden;
4524 - display: flex;
4525 - align-items: center;
4526 - justify-content: center;
4527 -}
4528 -
4529 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
4530 - width: 100%;
4531 - height: 100%;
4532 -}
4533 -
4534 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
4535 - position: absolute;
4536 - top: 0;
4537 - left: 0;
4538 - right: 0;
4539 - bottom: 0;
4540 - opacity: 0;
4541 - pointer-events: none;
4542 -}
4543 -
4544 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
4545 - pointer-events: auto;
4546 -}
4547 -
4548 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
4549 - position: absolute;
4550 - top: 4px;
4551 - right: 4px;
4552 - border-radius: 2px;
4553 - background: #fff;
4554 -}
4555 -
4556 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
4557 - position: relative;
4558 - min-width: 0;
4559 - border-radius: 4px;
4560 -}
4561 -
4562 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
4563 - opacity: 1;
4564 -}
4565 -
4566 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
4567 - padding: 8px;
4568 -}
4569 -
4570 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4571 - width: 100%;
4572 - height: 100%;
4573 - -o-object-fit: cover;
4574 - object-fit: cover;
4575 - -o-object-position: 50% 50%;
4576 - object-position: 50% 50%;
4577 -}
4578 -
4579 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
4580 - text-align: center;
4581 - flex: none;
4582 -}
4583 -
4584 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
4585 - margin: 0;
4586 -}
4587 -
4588 -fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
4589 - grid-template-columns: 1fr;
4590 -}
4591 -
4592 -fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
4593 - aspect-ratio: 2/1;
4594 -}
4595 -
4596 -fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
4597 - border-radius: 4px;
4598 -}
4599 -
4600 -fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
4601 - border-radius: 2px;
4602 -}
4603 -
4604 -fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4605 - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
4606 -}
4607 -
4608 -@container (max-width: 500px) {
4609 - fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4610 - grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
4611 - }
4612 -}
4613 -fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
4614 - padding: 0;
4615 -}
4616 -
4617 -fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
4618 - display: flex;
4619 - align-items: center;
4620 - justify-content: center;
4621 - aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4622 -}
4623 -
4624 -.fields-controls__author-avatar {
4625 - flex-shrink: 0;
4626 - overflow: hidden;
4627 - width: 24px;
4628 - height: 24px;
4629 - align-items: center;
4630 - justify-content: left;
4631 - display: flex;
4632 -}
4633 -
4634 -.fields-controls__author-avatar img {
4635 - width: 16px;
4636 - height: 16px;
4637 - -o-object-fit: cover;
4638 - object-fit: cover;
4639 - opacity: 0;
4640 - border-radius: 100%;
4641 -}
4642 -
4643 -@media not (prefers-reduced-motion) {
4644 - .fields-controls__author-avatar img {
4645 - transition: opacity 0.1s linear;
4646 - }
4647 -}
4648 -.fields-controls__author-avatar.is-loaded img {
4649 - opacity: 1;
4650 -}
4651 -
4652 -.fields-controls__author-icon {
4653 - display: flex;
4654 - flex-shrink: 0;
4655 - width: 24px;
4656 - height: 24px;
4657 -}
4658 -
4659 -.fields-controls__author-icon svg {
4660 - margin-left: -4px;
4661 - fill: currentColor;
4662 -}
4663 -
4664 -.fields-controls__author-name {
4665 - text-overflow: ellipsis;
4666 - overflow: hidden;
4667 -}
4668 -
4669 -.fields-controls__slug {
4670 - border: 0;
4671 - padding: 0;
4672 - margin: 0;
4673 -}
4674 -
4675 -.fields-controls__slug .fields-controls__slug-external-icon {
4676 - margin-left: 5ch;
4677 -}
4678 -
4679 -.fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4680 - padding-inline-start: 0 !important;
4681 -}
4682 -
4683 -.fields-controls__slug .fields-controls__slug-help-link {
4684 - word-break: break-word;
4685 -}
4686 -
4687 -.fields-controls__slug .fields-controls__slug-help {
4688 - display: flex;
4689 - flex-direction: column;
4690 -}
4691 -
4692 -.fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
4693 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4694 -}
4695 -
4696 -.fields-controls__featured-image-image,
4697 -.fields-controls__featured-image-placeholder {
4698 - width: 100%;
4699 - height: 100%;
4700 - display: block;
4701 - border-radius: 4px;
4702 -}
4703 -
4704 -.fields-controls__featured-image-placeholder {
4705 - box-shadow: none;
4706 - background: #f0f0f0;
4707 -}
4708 -
4709 -.fields-controls__parent {
4710 - border: 0;
4711 - padding: 0;
4712 - margin: 0;
4713 -}
4714 -
4715 -.fields-controls__password {
4716 - border: 0;
4717 - padding: 0;
4718 - margin: 0;
4719 -}
4720 -
4721 -.fields-controls__status-icon {
4722 - height: 24px;
4723 - width: 24px;
4724 -}
4725 -
4726 -.fields-controls__status-icon svg {
4727 - fill: currentColor;
4728 - margin-left: -4px;
4729 -}
4730 -
4731 -.fields-field__title > span:first-child {
4732 - text-overflow: ellipsis;
4733 - overflow: hidden;
4734 - text-decoration: none;
4735 - white-space: nowrap;
4736 - display: block;
4737 - flex-grow: 0;
4738 -}
4739 -
4740 -.fields-field__pattern-title span:first-child {
4741 - flex: 1;
4742 -}
4743 -
4744 -/**
4745 - * Colors
4746 - */
4747 -/**
4748 3993 * SCSS Variables.
4749 3994 *
4750 3995 * Please use variables from this sheet to ensure consistency across the UI.
4751 3996 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
@@ -4810,9 +4055,8 @@
4810 4055
4811 4056 .media-editor-preview--image img {
4812 4057 max-width: 100%;
4813 4058 max-height: 100%;
4814 - -o-object-fit: contain;
4815 4059 object-fit: contain;
4816 4060 width: auto;
4817 4061 height: auto;
4818 4062 opacity: 0;
@@ -4834,9 +4078,8 @@
4834 4078 }
4835 4079 .media-editor-preview--video video {
4836 4080 max-width: 100%;
4837 4081 max-height: 100%;
4838 - -o-object-fit: contain;
4839 4082 object-fit: contain;
4840 4083 width: auto;
4841 4084 height: auto;
4842 4085 }
@@ -4855,9 +4098,9 @@
4855 4098 border-radius: 2px;
4856 4099 }
4857 4100
4858 4101 .media-editor-preview__file-name {
4859 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4102 + font-weight: 600;
4860 4103 margin-bottom: 8px;
4861 4104 }
4862 4105
4863 4106 .media-editor-preview__mime-type {
@@ -4882,821 +4125,8 @@
4882 4125 word-break: break-all;
4883 4126 margin-top: 8px;
4884 4127 }
4885 4128
4886 -.wp-media-editor-image-editor {
4887 - position: relative;
4888 - overflow: hidden;
4889 - width: 100%;
4890 - height: 100%;
4891 - touch-action: none;
4892 - -webkit-user-select: none;
4893 - -moz-user-select: none;
4894 - user-select: none;
4895 - cursor: grab;
4896 -}
4897 -
4898 -.wp-media-editor-image-editor__canvas {
4899 - position: absolute;
4900 - inset: 24px;
4901 - min-height: 100px;
4902 - min-width: 100px;
4903 -}
4904 -
4905 -.wp-media-editor-image-editor__canvas:focus {
4906 - outline: none;
4907 -}
4908 -
4909 -.wp-media-editor-image-editor__stage {
4910 - position: absolute;
4911 - inset: 0;
4912 -}
4913 -
4914 -.wp-media-editor-image-editor--dragging {
4915 - cursor: grabbing;
4916 -}
4917 -
4918 -.wp-media-editor-image-editor__image {
4919 - position: absolute;
4920 - top: 0;
4921 - left: 0;
4922 - will-change: transform;
4923 - transform-origin: center center;
4924 -}
4925 -
4926 -.wp-media-editor-image-editor__stencil {
4927 - position: absolute;
4928 - pointer-events: none;
4929 -}
4930 -
4931 -.wp-media-editor-image-editor__dimming {
4932 - position: absolute;
4933 - pointer-events: none;
4934 - /* Large shadow spread washes everything outside the crop area
4935 - toward the canvas grey ($gray-200). Slightly stronger at rest
4936 - for clear crop framing, lighter during drag so the user can see
4937 - where they're panning. */
4938 - box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.6);
4939 - transition: box-shadow 0.15s ease;
4940 -}
4941 -
4942 -.wp-media-editor-image-editor--dragging .wp-media-editor-image-editor__dimming {
4943 - box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.4);
4944 -}
4945 -
4946 -.wp-media-editor-image-editor__grid {
4947 - position: absolute;
4948 - pointer-events: none;
4949 - overflow: hidden;
4950 - transition: opacity 0.15s ease;
4951 -}
4952 -
4953 -.wp-media-editor-image-editor__canvas--grid-interactive .wp-media-editor-image-editor__grid {
4954 - opacity: 0;
4955 - transition-delay: 0.1s;
4956 -}
4957 -
4958 -.wp-media-editor-image-editor__canvas--show-grid .wp-media-editor-image-editor__grid {
4959 - opacity: 1;
4960 - transition-delay: 0s;
4961 -}
4962 -
4963 -.wp-media-editor-image-editor__canvas--settling .wp-media-editor-image-editor__grid {
4964 - opacity: 0;
4965 - transition: none;
4966 -}
4967 -
4968 -.wp-media-editor-image-editor__grid-line {
4969 - position: absolute;
4970 - background: rgba(255, 255, 255, 0.4);
4971 -}
4972 -
4973 -.wp-media-editor-image-editor__grid-line--horizontal {
4974 - left: 0;
4975 - width: 100%;
4976 - height: 1px;
4977 -}
4978 -
4979 -.wp-media-editor-image-editor__grid-line--vertical {
4980 - top: 0;
4981 - height: 100%;
4982 - width: 1px;
4983 -}
4984 -
4985 -.wp-media-editor-image-editor__dimensions-tooltip {
4986 - position: absolute;
4987 - padding: 2px 6px;
4988 - background: #fff;
4989 - color: #1e1e1e;
4990 - font-size: 11px;
4991 - line-height: 1.4;
4992 - font-variant-numeric: tabular-nums;
4993 - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
4994 - pointer-events: none;
4995 - white-space: nowrap;
4996 - z-index: 2;
4997 -}
4998 -
4999 -.wp-media-editor-image-editor__stencil-rect {
5000 - position: absolute;
5001 - border: 1px solid #1e1e1e;
5002 - box-sizing: border-box;
5003 - pointer-events: none;
5004 - transition: border-color 0.15s ease, box-shadow 0.15s ease;
5005 -}
5006 -
5007 -.wp-media-editor-image-editor__canvas--focus-visible:focus .wp-media-editor-image-editor__stencil-rect {
5008 - border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5009 - box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5010 -}
5011 -
5012 -.wp-media-editor-image-editor__handle {
5013 - -webkit-appearance: none;
5014 - -moz-appearance: none;
5015 - appearance: none;
5016 - margin: 0;
5017 - padding: 0;
5018 - font: inherit;
5019 - cursor: default;
5020 - position: absolute;
5021 - width: 12px;
5022 - height: 12px;
5023 - background: #fff;
5024 - border: 1px solid var(--wp-admin-theme-color, #007cba);
5025 - border-radius: 50%;
5026 - box-sizing: border-box;
5027 - pointer-events: auto;
5028 - transition: background-color 0.15s ease, box-shadow 0.15s ease;
5029 -}
5030 -
5031 -.wp-media-editor-image-editor__handle:focus {
5032 - outline: none;
5033 -}
5034 -
5035 -.wp-media-editor-image-editor__canvas--focus-visible .wp-media-editor-image-editor__handle:focus {
5036 - background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5037 - border-color: transparent;
5038 - box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5039 -}
5040 -
5041 -.wp-media-editor-image-editor__handle::before {
5042 - content: "";
5043 - position: absolute;
5044 - top: 50%;
5045 - left: 50%;
5046 - width: 44px;
5047 - height: 44px;
5048 - transform: translate(-50%, -50%);
5049 -}
5050 -
5051 -.wp-media-editor-image-editor__handle {
5052 - /* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */
5053 -}
5054 -
5055 -.wp-media-editor-image-editor__handle--n {
5056 - top: -6px;
5057 - left: 50%;
5058 - margin-left: -6px;
5059 - cursor: ns-resize;
5060 -}
5061 -
5062 -.wp-media-editor-image-editor__handle--s {
5063 - bottom: -6px;
5064 - left: 50%;
5065 - margin-left: -6px;
5066 - cursor: ns-resize;
5067 -}
5068 -
5069 -.wp-media-editor-image-editor__handle--e {
5070 - top: 50%;
5071 - right: -6px;
5072 - margin-top: -6px;
5073 - cursor: ew-resize;
5074 -}
5075 -
5076 -.wp-media-editor-image-editor__handle--w {
5077 - top: 50%;
5078 - left: -6px;
5079 - margin-top: -6px;
5080 - cursor: ew-resize;
5081 -}
5082 -
5083 -.wp-media-editor-image-editor__handle--nw {
5084 - top: -6px;
5085 - left: -6px;
5086 - cursor: nwse-resize;
5087 -}
5088 -
5089 -.wp-media-editor-image-editor__handle--ne {
5090 - top: -6px;
5091 - right: -6px;
5092 - cursor: nesw-resize;
5093 -}
5094 -
5095 -.wp-media-editor-image-editor__handle--sw {
5096 - bottom: -6px;
5097 - left: -6px;
5098 - cursor: nesw-resize;
5099 -}
5100 -
5101 -.wp-media-editor-image-editor__handle--se {
5102 - bottom: -6px;
5103 - right: -6px;
5104 - cursor: nwse-resize;
5105 -}
5106 -
5107 -/**
5108 - * Breakpoints & Media Queries
5109 - */
5110 -/**
5111 - * Typography
5112 - */
5113 -/**
5114 -* Converts a hex value into the rgb equivalent.
5115 -*
5116 -* @param {string} hex - the hexadecimal value to convert
5117 -* @return {string} comma separated rgb values
5118 -*/
5119 -/**
5120 - * Long content fade mixin
5121 - *
5122 - * Creates a fading overlay to signify that the content is longer
5123 - * than the space allows.
5124 - */
5125 -/**
5126 - * Breakpoint mixins
5127 - */
5128 -/**
5129 - * Focus styles.
5130 - */
5131 -/**
5132 - * Standard focus rings for the WordPress Design System.
5133 - *
5134 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
5135 - * e.g. `&:focus { @include outset-ring__focus(); }`.
5136 - */
5137 -/**
5138 - * Applies editor left position to the selector passed as argument
5139 - */
5140 -/**
5141 - * Styles that are reused verbatim in a few places
5142 - */
5143 -/**
5144 - * Allows users to opt-out of animations via OS-level preferences.
5145 - */
5146 -/**
5147 - * Reset default styles for JavaScript UI based pages.
5148 - * This is a WP-admin agnostic reset
5149 - */
5150 -/**
5151 - * Reset the WP Admin page styles for Gutenberg-like pages.
5152 - */
5153 -/**
5154 - * Creates a checkerboard pattern background to indicate transparency.
5155 - * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
5156 - */
5157 -.media-editor {
5158 - display: flex;
5159 - flex: 1;
5160 - flex-direction: column;
5161 - height: 100%;
5162 - min-height: 0;
5163 -}
5164 -
5165 -.media-editor .media-editor__loading {
5166 - height: 100%;
5167 - display: flex;
5168 - align-items: center;
5169 - justify-content: center;
5170 -}
5171 -
5172 -.media-editor .interface-interface-skeleton {
5173 - position: relative;
5174 - top: auto;
5175 - right: auto;
5176 - bottom: auto;
5177 - left: auto;
5178 - height: 100%;
5179 - max-height: none;
5180 - flex: 1;
5181 - flex-direction: column;
5182 -}
5183 -
5184 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5185 - top: auto;
5186 -}
5187 -
5188 -.media-editor .interface-interface-skeleton__editor {
5189 - min-width: 0;
5190 - flex: 1;
5191 -}
5192 -
5193 -.media-editor .media-editor__content {
5194 - display: flex;
5195 - flex: 1;
5196 - flex-direction: column;
5197 - min-height: 0;
5198 - margin: 0 24px;
5199 - border-radius: 8px;
5200 - overflow: hidden;
5201 -}
5202 -
5203 -.media-editor .media-editor__canvas-toolbar {
5204 - display: flex;
5205 - flex-shrink: 0;
5206 - justify-content: center;
5207 - background: #e0e0e0;
5208 - padding: 8px 16px;
5209 -}
5210 -
5211 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5212 - flex: 0 1 360px;
5213 - min-width: 0;
5214 -}
5215 -
5216 -.media-editor .media-editor__canvas-area {
5217 - display: flex;
5218 - align-items: center;
5219 - justify-content: center;
5220 - background: #e0e0e0;
5221 - overflow: auto;
5222 - flex: 1;
5223 - min-height: 0;
5224 -}
5225 -
5226 -.media-editor .media-editor__canvas-area .media-editor-preview {
5227 - height: 100%;
5228 -}
5229 -
5230 -.media-editor .media-editor__canvas-area img,
5231 -.media-editor .media-editor__canvas-area video {
5232 - max-width: 100%;
5233 - max-height: 100%;
5234 - -o-object-fit: contain;
5235 - object-fit: contain;
5236 -}
5237 -
5238 -.media-editor .media-editor__sidebar {
5239 - box-sizing: border-box;
5240 -}
5241 -
5242 -.media-editor .media-editor__sidebar *,
5243 -.media-editor .media-editor__sidebar *::before,
5244 -.media-editor .media-editor__sidebar *::after {
5245 - box-sizing: inherit;
5246 -}
5247 -
5248 -@media (min-width: 600px) {
5249 - .media-editor .media-editor__sidebar {
5250 - padding-left: 1px;
5251 - }
5252 -}
5253 -.media-editor .media-editor__sidebar-panel {
5254 - padding-bottom: 24px;
5255 -}
5256 -
5257 -.media-editor .interface-interface-skeleton__sidebar {
5258 - border-top: 0;
5259 - box-shadow: none;
5260 - outline: 1px solid transparent;
5261 -}
5262 -
5263 -.media-editor .media-editor__panel {
5264 - padding: 16px;
5265 -}
5266 -
5267 -@media (min-width: 600px) {
5268 - .media-editor .media-editor__panel {
5269 - padding: 24px 24px 0 0;
5270 - }
5271 -}
5272 -.media-editor .components-panel__header.media-editor__sidebar-header {
5273 - padding-left: 0;
5274 - padding-right: 8px;
5275 - margin-right: 24px;
5276 - margin-right: 0;
5277 -}
5278 -
5279 -@media (min-width: 600px) {
5280 - .media-editor .components-panel__header.media-editor__sidebar-header {
5281 - margin-right: 24px;
5282 - }
5283 -}
5284 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5285 - padding: 0;
5286 -}
5287 -
5288 -@media (min-width: 600px) {
5289 - .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5290 - display: flex;
5291 - }
5292 -}
5293 -@media (min-width: 600px) and (max-width: 781px) {
5294 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5295 - position: relative !important;
5296 - }
5297 - .media-editor .interface-complementary-area__fill,
5298 - .media-editor .interface-complementary-area {
5299 - width: 280px !important;
5300 - }
5301 -}
5302 -@media (max-width: 599px) {
5303 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5304 - width: 100%;
5305 - }
5306 - .media-editor .interface-complementary-area__fill,
5307 - .media-editor .interface-complementary-area {
5308 - width: 100% !important;
5309 - }
5310 -}
5311 -.media-editor__snackbar {
5312 - position: fixed;
5313 - bottom: 24px;
5314 - left: 0;
5315 - right: 0;
5316 - padding-inline: 16px;
5317 - box-sizing: border-box;
5318 - display: flex;
5319 - flex-direction: column;
5320 - pointer-events: none;
5321 -}
5322 -
5323 -.media-editor__snackbar .components-snackbar {
5324 - margin-inline: auto;
5325 -}
5326 -
5327 -.media-editor-form .dataforms-layouts-panel__field-control {
5328 - text-wrap: pretty;
5329 -}
5330 -
5331 -.media-editor-modal.components-modal__frame .components-modal__content {
5332 - padding: 0;
5333 - margin-bottom: 0;
5334 - display: flex;
5335 - flex-direction: column;
5336 - min-height: 0;
5337 -}
5338 -
5339 -.media-editor-modal.components-modal__frame .components-modal__children-container {
5340 - display: flex;
5341 - flex: 1;
5342 - flex-direction: column;
5343 - min-height: 0;
5344 -}
5345 -
5346 -.media-editor-modal.components-modal__frame .media-editor-modal__footer {
5347 - flex-shrink: 0;
5348 - display: flex;
5349 - gap: 16px;
5350 - padding: 16px 32px 24px;
5351 - background: #fff;
5352 - z-index: 1000001;
5353 -}
5354 -
5355 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5356 - flex-direction: row;
5357 - align-items: center;
5358 -}
5359 -
5360 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5361 - margin-left: auto;
5362 -}
5363 -
5364 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5365 - flex-direction: column;
5366 -}
5367 -
5368 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5369 - align-self: center;
5370 -}
5371 -
5372 -.media-editor-modal__footer-row {
5373 - display: flex;
5374 - flex-wrap: wrap;
5375 - align-items: center;
5376 - gap: 16px;
5377 -}
5378 -
5379 -.media-editor-modal__footer-row .media-editor-image-controls,
5380 -.media-editor-modal__footer-row .media-editor__footer-actions {
5381 - margin-left: auto;
5382 -}
5383 -
5384 -.media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5385 - color: var(--wp-admin-theme-color);
5386 -}
5387 -
5388 -.media-editor-modal {
5389 - display: flex;
5390 - flex-direction: column;
5391 -}
5392 -
5393 -.media-editor-modal__snackbar {
5394 - position: fixed;
5395 - bottom: 24px;
5396 - left: 0;
5397 - right: 0;
5398 - padding-inline: 16px;
5399 - box-sizing: border-box;
5400 - display: flex;
5401 - flex-direction: column;
5402 - pointer-events: none;
5403 -}
5404 -
5405 -.media-editor-modal__snackbar .components-snackbar {
5406 - margin-inline: auto;
5407 -}
5408 -
5409 -.media-editor-modal__snackbar {
5410 - z-index: 1000001;
5411 -}
5412 -
5413 -.media-editor-canvas {
5414 - position: relative;
5415 - width: 100%;
5416 - height: 100%;
5417 -}
5418 -
5419 -.media-editor-canvas__cropper {
5420 - width: 100%;
5421 - height: 100%;
5422 - opacity: 0;
5423 - pointer-events: none;
5424 -}
5425 -
5426 -.media-editor-canvas__cropper.is-loaded {
5427 - opacity: 1;
5428 - pointer-events: auto;
5429 -}
5430 -
5431 -@keyframes __wp-base-styles-fade-in {
5432 - from {
5433 - opacity: 0;
5434 - }
5435 - to {
5436 - opacity: 1;
5437 - }
5438 -}
5439 -@media not (prefers-reduced-motion) {
5440 - .media-editor-canvas__cropper.is-loaded {
5441 - animation: __wp-base-styles-fade-in 0.2s linear 0s;
5442 - animation-fill-mode: forwards;
5443 - }
5444 -}
5445 -.media-editor-canvas__spinner {
5446 - position: absolute;
5447 - top: 50%;
5448 - left: 50%;
5449 - transform: translate(-50%, -50%);
5450 -}
5451 -
5452 -.media-editor-canvas__error {
5453 - display: flex;
5454 - align-items: center;
5455 - justify-content: center;
5456 - width: 100%;
5457 - height: 100%;
5458 - color: #757575;
5459 - text-align: center;
5460 -}
5461 -
5462 -.media-editor-image-controls {
5463 - display: flex;
5464 - flex-wrap: nowrap;
5465 - align-items: center;
5466 - gap: 8px;
5467 -}
5468 -
5469 -.media-editor-image-controls.is-stacked {
5470 - flex-direction: column;
5471 - align-items: flex-start;
5472 - gap: 24px;
5473 -}
5474 -
5475 -.media-editor-image-controls__transforms {
5476 - display: flex;
5477 - gap: 48px;
5478 -}
5479 -
5480 -.media-editor-image-controls__group {
5481 - display: flex;
5482 - flex-direction: column;
5483 - gap: 4px;
5484 -}
5485 -
5486 -.media-editor-image-controls__label {
5487 - font-size: 11px;
5488 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5489 - line-height: 1.4;
5490 - text-transform: uppercase;
5491 -}
5492 -
5493 -.media-editor-image-controls__buttons {
5494 - display: flex;
5495 - gap: 8px;
5496 - padding-inline: 2px 0;
5497 -}
5498 -
5499 -.media-editor-keyboard-shortcuts-modal {
5500 - min-width: 280px;
5501 -}
5502 -
5503 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__note {
5504 - margin: 0 0 16px;
5505 - color: #757575;
5506 - font-size: 13px;
5507 -}
5508 -
5509 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-list {
5510 - list-style: none;
5511 - margin: 0;
5512 - padding: 0;
5513 -}
5514 -
5515 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut {
5516 - display: flex;
5517 - align-items: baseline;
5518 - padding: 0.6rem 0;
5519 - border-top: 1px solid #ddd;
5520 - margin-bottom: 0;
5521 -}
5522 -
5523 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut:last-child {
5524 - border-bottom: 1px solid #ddd;
5525 -}
5526 -
5527 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-description {
5528 - flex: 1;
5529 - margin: 0;
5530 -}
5531 -
5532 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-term {
5533 - background: none;
5534 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5535 - margin: 0 0 0 1rem;
5536 - padding: 0;
5537 - text-align: right;
5538 -}
5539 -
5540 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key {
5541 - padding: 0.25rem 0.5rem;
5542 - border-radius: 8%;
5543 - margin: 0 0.2rem 0 0.2rem;
5544 -}
5545 -
5546 -.media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key:last-child {
5547 - margin: 0 0 0 0.2rem;
5548 -}
5549 -
5550 -.rotation-ruler {
5551 - position: relative;
5552 - min-width: 180px;
5553 - height: 32px;
5554 - padding: 0 8px;
5555 - box-sizing: border-box;
5556 - color: #1e1e1e;
5557 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5558 - -webkit-user-select: none;
5559 - -moz-user-select: none;
5560 - user-select: none;
5561 - touch-action: none;
5562 - cursor: ew-resize;
5563 - container-type: inline-size;
5564 -}
5565 -
5566 -.rotation-ruler[data-disabled] {
5567 - opacity: 0.5;
5568 - pointer-events: none;
5569 - cursor: default;
5570 -}
5571 -
5572 -.rotation-ruler:has(.rotation-ruler__input:focus-visible) {
5573 - outline: 2px solid var(--wp-admin-theme-color, #3858e9);
5574 - outline-offset: 2px;
5575 - border-radius: 4px;
5576 -}
5577 -
5578 -.rotation-ruler__input {
5579 - position: absolute;
5580 - width: 1px;
5581 - height: 1px;
5582 - margin: -1px;
5583 - padding: 0;
5584 - border: 0;
5585 - clip: rect(0 0 0 0);
5586 - overflow: hidden;
5587 - white-space: nowrap;
5588 -}
5589 -
5590 -.rotation-ruler__pointer {
5591 - position: absolute;
5592 - bottom: 0;
5593 - left: 50%;
5594 - width: 2px;
5595 - height: 18px;
5596 - background: var(--wp-admin-theme-color, #3858e9);
5597 - border-radius: 1px;
5598 - transform: translateX(-50%);
5599 - pointer-events: none;
5600 -}
5601 -
5602 -.rotation-ruler__strip {
5603 - position: absolute;
5604 - inset: 0;
5605 - overflow: hidden;
5606 - mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5607 - -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5608 -}
5609 -
5610 -.rotation-ruler__ticks {
5611 - position: absolute;
5612 - /*rtl:ignore*/
5613 - left: 50%;
5614 - top: 0;
5615 - display: block;
5616 - overflow: visible;
5617 -}
5618 -
5619 -.rotation-ruler__tick {
5620 - stroke: currentColor;
5621 - stroke-width: 1;
5622 -}
5623 -
5624 -.rotation-ruler__tick--minor {
5625 - opacity: 0.35;
5626 -}
5627 -
5628 -.rotation-ruler__tick--mid {
5629 - opacity: 0.6;
5630 -}
5631 -
5632 -.rotation-ruler__tick--major {
5633 - opacity: 1;
5634 -}
5635 -
5636 -.rotation-ruler__label {
5637 - fill: currentColor;
5638 - font-size: 10px;
5639 - font-weight: 400;
5640 - opacity: 0.45;
5641 -}
5642 -
5643 -.rotation-ruler__active-label {
5644 - position: absolute;
5645 - top: 0;
5646 - left: 50%;
5647 - height: 14px;
5648 - transform: translateX(-50%);
5649 - font-size: 12px;
5650 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5651 - line-height: 14px;
5652 - color: #1e1e1e;
5653 - pointer-events: none;
5654 -}
5655 -
5656 -.rotation-ruler__active-label::before {
5657 - content: "";
5658 - position: absolute;
5659 - top: 0;
5660 - left: 50%;
5661 - width: 60px;
5662 - height: 100%;
5663 - transform: translateX(-50%);
5664 - background: linear-gradient(to right, transparent 0, #e0e0e0 12px, #e0e0e0 calc(100% - 12px), transparent 100%);
5665 -}
5666 -
5667 -.rotation-ruler__active-label-number {
5668 - position: relative;
5669 - display: inline-block;
5670 -}
5671 -
5672 -.rotation-ruler__active-label-sign {
5673 - position: absolute;
5674 - top: 0;
5675 - right: 100%;
5676 -}
5677 -
5678 -.rotation-ruler__active-label-unit {
5679 - position: absolute;
5680 - top: 0;
5681 - left: 100%;
5682 -}
5683 -
5684 -@container (max-width: 220px) {
5685 - .rotation-ruler__tick--minor {
5686 - opacity: 0;
5687 - }
5688 -}
5689 -@media (prefers-reduced-motion: reduce) {
5690 - .rotation-ruler__ticks {
5691 - transition: none;
5692 - }
5693 -}
5694 -.editor-autocompleters__link {
5695 - white-space: nowrap;
5696 - gap: 8px;
5697 -}
5698 -
5699 4129 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5700 4130 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5701 4131 font: normal 20px/1 dashicons;
5702 4132 content: "\f110";
@@ -5722,9 +4152,9 @@
5722 4152 .editor-autocompleters__user .editor-autocompleters__user-slug {
5723 4153 margin-left: 8px;
5724 4154 white-space: nowrap;
5725 4155 text-overflow: ellipsis;
5726 - overflow: hidden;
4156 + overflow: none;
5727 4157 max-width: 100px;
5728 4158 flex-grow: 0;
5729 4159 flex-shrink: 0;
5730 4160 }
@@ -5744,16 +4174,14 @@
5744 4174 overflow: hidden;
5745 4175 }
5746 4176
5747 4177 .editor-collab-sidebar-panel {
5748 - position: relative;
5749 4178 padding: 16px 16px 24px;
5750 4179 height: 100%;
5751 4180 overflow: hidden;
5752 4181 }
5753 4182
5754 -.editor-collab-sidebar-panel__thread,
5755 -.editor-collab-sidebar-panel__add-note {
4183 +.editor-collab-sidebar-panel__thread {
5756 4184 position: relative;
5757 4185 padding: 16px;
5758 4186 border-radius: 8px;
5759 4187 border: 1px solid #ddd;
@@ -5760,29 +4188,22 @@
5760 4188 background-color: #f0f0f0;
5761 4189 overflow: hidden;
5762 4190 width: auto;
5763 4191 }
5764 -.editor-collab-sidebar-panel__thread.is-selected,
5765 -.editor-collab-sidebar-panel__add-note.is-selected {
4192 +.editor-collab-sidebar-panel__thread.is-selected {
5766 4193 background-color: #fff;
5767 4194 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
5768 4195 z-index: 1;
5769 4196 }
5770 -.editor-collab-sidebar-panel__thread:focus,
5771 -.editor-collab-sidebar-panel__add-note:focus {
4197 +.editor-collab-sidebar-panel__thread:focus {
5772 4198 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
5773 4199 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
5774 4200 }
5775 -.editor-collab-sidebar-panel__thread.is-floating,
5776 -.editor-collab-sidebar-panel__add-note.is-floating {
4201 +.editor-collab-sidebar-panel__thread.is-floating {
5777 4202 left: 16px;
5778 4203 right: 16px;
5779 4204 position: absolute;
5780 4205 margin-top: 16px;
5781 - transform: translateY(var(--canvas-scroll, 0));
5782 - will-change: transform;
5783 - max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5784 - overflow-y: auto;
5785 4206 }
5786 4207
5787 4208 .editor-collab-sidebar-panel__user-name {
5788 4209 font-size: 12px;
@@ -5800,28 +4221,11 @@
5800 4221 text-align: left;
5801 4222 color: #757575;
5802 4223 }
5803 4224
5804 -.editor-collab-sidebar-panel__show-more-button {
5805 - width: -moz-fit-content;
5806 - width: fit-content;
5807 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5808 - cursor: var(--wpds-cursor-control, pointer);
5809 -}
5810 -.editor-collab-sidebar-panel__show-more-button:hover, .editor-collab-sidebar-panel__show-more-button:focus, .editor-collab-sidebar-panel__show-more-button:active {
5811 - color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
5812 -}
5813 -
5814 -.editor-collab-sidebar-panel__note-content p:last-child {
4225 +.editor-collab-sidebar-panel__user-comment p:last-child {
5815 4226 margin-bottom: 0;
5816 4227 }
5817 -.editor-collab-sidebar-panel__note-content.is-collapsed {
5818 - -webkit-line-clamp: 3;
5819 - line-clamp: 3;
5820 - display: -webkit-box;
5821 - -webkit-box-orient: vertical;
5822 - overflow: hidden;
5823 -}
5824 4228
5825 4229 .editor-collab-sidebar-panel__user-avatar {
5826 4230 border-radius: 50%;
5827 4231 flex-shrink: 0;
@@ -5830,12 +4234,12 @@
5830 4234 padding: var(--wp-admin-border-width-focus);
5831 4235 background: #fff;
5832 4236 }
5833 4237
5834 -.editor-collab-sidebar-panel__note-actions {
4238 +.editor-collab-sidebar-panel__comment-status {
5835 4239 margin-left: auto;
5836 4240 }
5837 -.editor-collab-sidebar-panel__note-actions button.has-icon:not(.has-text) {
4241 +.editor-collab-sidebar-panel__comment-status button.has-icon:not(.has-text) {
5838 4242 min-width: 24px;
5839 4243 padding: 0;
5840 4244 width: 24px;
5841 4245 height: 24px;
@@ -5841,50 +4245,67 @@
5841 4245 height: 24px;
5842 4246 flex-shrink: 0;
5843 4247 }
5844 4248
5845 -.editor-collab-sidebar-panel__more-reply-separator::before, .editor-collab-sidebar-panel__more-reply-separator::after,
5846 -.editor-collab-sidebar-panel__status-separator::before,
5847 -.editor-collab-sidebar-panel__status-separator::after {
4249 +.editor-collab-sidebar-panel__comment-dropdown-menu {
4250 + flex-shrink: 0;
4251 +}
4252 +
4253 +.editor-collab-sidebar-panel__more-reply-separator::before, .editor-collab-sidebar-panel__more-reply-separator::after {
5848 4254 content: "";
5849 - flex: 1;
4255 + display: block;
4256 + width: 100%;
5850 4257 height: 1px;
5851 4258 background-color: #ddd;
4259 + flex: 1;
5852 4260 }
5853 4261
5854 4262 .editor-collab-sidebar-panel__more-reply-button {
5855 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4263 + font-weight: 499;
5856 4264 }
5857 4265
5858 -.editor-collab-sidebar-panel__deleted-block-notice {
5859 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5860 - color: #757575;
5861 -}
5862 -
5863 4266 .editor-collab-sidebar-panel__resolution-text {
5864 4267 font-style: italic;
5865 4268 }
5866 4269
5867 -.editor-collab-sidebar-panel__note-form [role=textbox] {
5868 - line-height: 20px;
5869 - max-height: 418px;
5870 - overflow-y: auto;
5871 - white-space: pre-wrap;
5872 - word-wrap: break-word;
4270 +.editor-collab-sidebar-panel__comment-form textarea {
4271 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4272 + padding: 6px 8px;
4273 + /* Fonts smaller than 16px causes mobile safari to zoom. */
4274 + font-size: 16px;
4275 + /* Override core line-height. To be reviewed. */
4276 + line-height: normal;
4277 + box-shadow: 0 0 0 transparent;
4278 + border-radius: 2px;
4279 + border: 1px solid #949494;
5873 4280 }
5874 -.editor-collab-sidebar-panel__note-form [role=textbox] code {
5875 - font-family: Menlo, Consolas, monaco, monospace;
5876 - font-size: 0.9em;
5877 - padding: 0 2px;
5878 - background: #f0f0f0;
5879 - border-radius: 2px;
4281 +@media not (prefers-reduced-motion) {
4282 + .editor-collab-sidebar-panel__comment-form textarea {
4283 + transition: box-shadow 0.1s linear;
4284 + }
5880 4285 }
5881 -.editor-collab-sidebar-panel__note-form [role=textbox] a {
5882 - color: var(--wp-admin-theme-color);
5883 - text-decoration: underline;
4286 +@media (min-width: 600px) {
4287 + .editor-collab-sidebar-panel__comment-form textarea {
4288 + font-size: 13px;
4289 + /* Override core line-height. To be reviewed. */
4290 + line-height: normal;
4291 + }
5884 4292 }
4293 +.editor-collab-sidebar-panel__comment-form textarea:focus {
4294 + border-color: var(--wp-admin-theme-color);
4295 + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
4296 + outline: 2px solid transparent;
4297 +}
4298 +.editor-collab-sidebar-panel__comment-form textarea::placeholder {
4299 + color: rgba(30, 30, 30, 0.62);
4300 +}
4301 +.editor-collab-sidebar-panel__comment-form textarea {
4302 + padding: 9px 11px;
4303 + line-height: 20px !important;
4304 + display: block;
4305 +}
5885 4306
5886 -.editor-collab-sidebar-panel__skip-to-note,
4307 +.editor-collab-sidebar-panel__skip-to-comment,
5887 4308 .editor-collab-sidebar-panel__skip-to-block {
5888 4309 position: absolute;
5889 4310 top: -9999px;
5890 4311 right: -9999px;
@@ -5892,9 +4313,9 @@
5892 4313 clip-path: inset(50%);
5893 4314 background: #fff !important;
5894 4315 z-index: -1;
5895 4316 }
5896 -.editor-collab-sidebar-panel__skip-to-note:focus,
4317 +.editor-collab-sidebar-panel__skip-to-comment:focus,
5897 4318 .editor-collab-sidebar-panel__skip-to-block:focus {
5898 4319 overflow: visible;
5899 4320 clip-path: none;
5900 4321 z-index: 1;
@@ -5900,9 +4321,9 @@
5900 4321 z-index: 1;
5901 4322 right: 8px;
5902 4323 }
5903 4324
5904 -.editor-collab-sidebar-panel__skip-to-note:focus {
4325 +.editor-collab-sidebar-panel__skip-to-comment:focus {
5905 4326 top: 8px;
5906 4327 }
5907 4328
5908 4329 .editor-collab-sidebar-panel__skip-to-block:focus {
@@ -5909,9 +4330,9 @@
5909 4330 top: auto;
5910 4331 bottom: 8px;
5911 4332 }
5912 4333
5913 -.editor-note-indicator__avatar {
4334 +.comment-avatar {
5914 4335 width: 24px;
5915 4336 border-radius: 50%;
5916 4337 margin-left: -12px;
5917 4338 border-width: var(--wp-admin-border-width-focus);
@@ -5919,377 +4340,23 @@
5919 4340 padding: var(--wp-admin-border-width-focus);
5920 4341 background: #fff;
5921 4342 box-sizing: border-box;
5922 4343 }
5923 -.editor-note-indicator__avatar:first-child {
4344 +.comment-avatar:first-child {
5924 4345 margin-left: 0;
5925 4346 }
5926 4347
5927 -.editor-note-indicator__overflow {
5928 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5929 -}
5930 -
5931 -.show-icon-labels .editor-note-indicator {
4348 +.show-icon-labels .comment-avatar-indicator {
5932 4349 width: auto;
5933 4350 }
5934 -.show-icon-labels .editor-note-indicator div {
4351 +.show-icon-labels .comment-avatar-indicator div {
5935 4352 display: none;
5936 4353 }
5937 -.show-icon-labels .editor-note-indicator::after {
4354 +.show-icon-labels .comment-avatar-indicator::after {
5938 4355 content: attr(aria-label);
5939 4356 font-size: 12px;
5940 4357 }
5941 4358
5942 -mark.wp-note {
5943 - border-radius: 1px;
5944 - transition: background-color 0.1s ease-in-out;
5945 -}
5946 -
5947 -.wp-note-mention {
5948 - display: inline;
5949 - padding: 0 var(--wpds-dimension-padding-xs, 4px);
5950 - border-radius: var(--wpds-border-radius-sm, 2px);
5951 - background: var(--wpds-color-background-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white));
5952 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5953 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5954 - white-space: nowrap;
5955 -}
5956 -@media (forced-colors: active) {
5957 - .wp-note-mention {
5958 - border: 1px solid;
5959 - }
5960 -}
5961 -
5962 -.editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar {
5963 - border-radius: 50%;
5964 -}
5965 -
5966 -.editor-avatar {
5967 - position: relative;
5968 - display: inline-flex;
5969 - align-items: center;
5970 - border-radius: 9999px;
5971 - flex-shrink: 0;
5972 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
5973 -}
5974 -
5975 -.editor-avatar__image {
5976 - box-sizing: border-box;
5977 - position: relative;
5978 - width: 32px;
5979 - height: 32px;
5980 - border-radius: 9999px;
5981 - border: 0;
5982 - background-color: var(--wp-admin-theme-color, #3858e9);
5983 - overflow: hidden;
5984 - overflow: clip;
5985 - flex-shrink: 0;
5986 - font-size: 0;
5987 - color: #fff;
5988 -}
5989 -.is-small > .editor-avatar__image {
5990 - width: 24px;
5991 - height: 24px;
5992 -}
5993 -.has-avatar-border-color > .editor-avatar__image {
5994 - border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color);
5995 - background-clip: padding-box;
5996 -}
5997 -.has-avatar-border-color > .editor-avatar__image::after {
5998 - content: "";
5999 - position: absolute;
6000 - inset: 0;
6001 - border-radius: inherit;
6002 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
6003 - pointer-events: none;
6004 - z-index: 1;
6005 -}
6006 -
6007 -.editor-avatar__img {
6008 - position: absolute;
6009 - inset: 0;
6010 - width: 100%;
6011 - height: 100%;
6012 - -o-object-fit: cover;
6013 - object-fit: cover;
6014 - border-radius: inherit;
6015 - opacity: 0;
6016 -}
6017 -.has-src > .editor-avatar__image > .editor-avatar__img {
6018 - opacity: 1;
6019 -}
6020 -
6021 -.editor-avatar:not(.has-src) > .editor-avatar__image {
6022 - display: flex;
6023 - align-items: center;
6024 - justify-content: center;
6025 - font-size: 11px;
6026 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6027 - border: 0;
6028 - background-clip: border-box;
6029 -}
6030 -.editor-avatar:not(.has-src) > .editor-avatar__image::after {
6031 - content: none;
6032 -}
6033 -
6034 -.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
6035 - background-color: var(--editor-avatar-outline-color);
6036 -}
6037 -
6038 -.editor-avatar__name {
6039 - font-size: 13px;
6040 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6041 - line-height: 20px;
6042 - color: var(--editor-avatar-name-color, #fff);
6043 - min-width: 0;
6044 - padding-bottom: 2px;
6045 - overflow: hidden;
6046 - opacity: 0;
6047 - white-space: nowrap;
6048 - transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
6049 -}
6050 -
6051 -.editor-avatar.is-badge {
6052 - display: inline-grid;
6053 - grid-template-columns: min-content 0fr;
6054 - -moz-column-gap: 0;
6055 - column-gap: 0;
6056 - padding-inline-end: 0;
6057 - background-color: var(--wp-admin-theme-color, #3858e9);
6058 - transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6059 - transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1), -moz-column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6060 -}
6061 -.editor-avatar.is-badge:hover {
6062 - grid-template-columns: min-content 1fr;
6063 - -moz-column-gap: 4px;
6064 - column-gap: 4px;
6065 - padding-inline-end: 8px;
6066 - transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6067 -}
6068 -.editor-avatar.is-badge:hover .editor-avatar__name {
6069 - opacity: 1;
6070 - transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6071 -}
6072 -
6073 -.editor-avatar.is-badge.has-avatar-border-color {
6074 - background-color: var(--editor-avatar-outline-color);
6075 -}
6076 -
6077 -.editor-avatar.is-dimmed > .editor-avatar__image {
6078 - opacity: 0.5;
6079 - background-color: #757575;
6080 -}
6081 -
6082 -.editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image {
6083 - border-color: #757575;
6084 -}
6085 -
6086 -.editor-avatar.is-dimmed .editor-avatar__img {
6087 - filter: grayscale(1);
6088 -}
6089 -
6090 -.editor-avatar__status-indicator {
6091 - position: absolute;
6092 - top: 0;
6093 - left: 0;
6094 - width: 32px;
6095 - height: 32px;
6096 - display: flex;
6097 - align-items: center;
6098 - justify-content: center;
6099 - z-index: 1;
6100 - color: #1e1e1e;
6101 - fill: #1e1e1e;
6102 -}
6103 -.is-small > .editor-avatar__status-indicator {
6104 - width: 24px;
6105 - height: 24px;
6106 -}
6107 -.editor-avatar__status-indicator svg {
6108 - width: 75%;
6109 - height: 75%;
6110 -}
6111 -
6112 -@media (prefers-reduced-motion: reduce) {
6113 - .editor-avatar.is-badge,
6114 - .editor-avatar__name {
6115 - transition: none;
6116 - }
6117 -}
6118 -.editor-avatar-group {
6119 - display: flex;
6120 - align-items: center;
6121 -}
6122 -.editor-avatar-group > .editor-avatar + .editor-avatar {
6123 - margin-inline-start: -8px;
6124 -}
6125 -.editor-avatar-group > .editor-avatar {
6126 - position: relative;
6127 -}
6128 -.editor-avatar-group > .editor-avatar:nth-child(1) {
6129 - z-index: 10;
6130 -}
6131 -.editor-avatar-group > .editor-avatar:nth-child(2) {
6132 - z-index: 9;
6133 -}
6134 -.editor-avatar-group > .editor-avatar:nth-child(3) {
6135 - z-index: 8;
6136 -}
6137 -.editor-avatar-group > .editor-avatar:nth-child(4) {
6138 - z-index: 7;
6139 -}
6140 -.editor-avatar-group > .editor-avatar:nth-child(5) {
6141 - z-index: 6;
6142 -}
6143 -.editor-avatar-group > .editor-avatar:nth-child(6) {
6144 - z-index: 5;
6145 -}
6146 -.editor-avatar-group > .editor-avatar:nth-child(7) {
6147 - z-index: 4;
6148 -}
6149 -.editor-avatar-group > .editor-avatar:nth-child(8) {
6150 - z-index: 3;
6151 -}
6152 -.editor-avatar-group > .editor-avatar:nth-child(9) {
6153 - z-index: 2;
6154 -}
6155 -.editor-avatar-group > .editor-avatar:nth-child(10) {
6156 - z-index: 1;
6157 -}
6158 -
6159 -.editor-avatar-group__overflow {
6160 - margin-inline-start: 4px;
6161 - margin-inline-end: 4px;
6162 - font-size: 12px;
6163 - line-height: 20px;
6164 - color: #1e1e1e;
6165 - white-space: nowrap;
6166 -}
6167 -
6168 -.editor-collaborators-presence__list.components-popover .components-popover__content {
6169 - border: 1px solid #ddd;
6170 - border-width: 1px 0 0 1px;
6171 - border-radius: 8px;
6172 - background: #fff;
6173 - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
6174 -}
6175 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content {
6176 - min-width: 280px;
6177 -}
6178 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header {
6179 - display: flex;
6180 - justify-content: space-between;
6181 - align-items: center;
6182 - padding: 8px 16px;
6183 -}
6184 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title {
6185 - font-size: 13px;
6186 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6187 - line-height: 20px;
6188 - display: flex;
6189 - gap: 4px;
6190 -}
6191 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span {
6192 - color: #757575;
6193 -}
6194 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action {
6195 - padding: 0;
6196 -}
6197 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button {
6198 - color: #1e1e1e;
6199 - height: 32px;
6200 - width: 32px;
6201 - padding: 0;
6202 -}
6203 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items {
6204 - display: flex;
6205 - flex-direction: column;
6206 - padding-bottom: 16px;
6207 -}
6208 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item {
6209 - all: unset;
6210 - box-sizing: border-box;
6211 - display: flex;
6212 - align-items: center;
6213 - padding: 12px 16px;
6214 - gap: 8px;
6215 - width: 100%;
6216 - cursor: var(--wpds-cursor-control, pointer);
6217 - transition: background-color 0.2s ease;
6218 -}
6219 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled) {
6220 - background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
6221 -}
6222 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled) {
6223 - background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
6224 -}
6225 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible {
6226 - outline: 2px solid var(--wp-admin-theme-color, #3858e9);
6227 - outline-offset: -2px;
6228 -}
6229 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled {
6230 - cursor: default;
6231 -}
6232 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info {
6233 - display: flex;
6234 - flex-direction: column;
6235 - flex: 1;
6236 - min-width: 0;
6237 -}
6238 -.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name {
6239 - font-size: 13px;
6240 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6241 - line-height: 20px;
6242 - color: #1e1e1e;
6243 - overflow: hidden;
6244 - text-overflow: ellipsis;
6245 - white-space: nowrap;
6246 -}
6247 -
6248 -.editor-collaborators-presence {
6249 - display: flex;
6250 - align-items: center;
6251 - flex-shrink: 0;
6252 - height: 32px;
6253 - background: #f0f0f0;
6254 - border-radius: 4px;
6255 -}
6256 -.editor-collaborators-presence:hover {
6257 - background-color: #e0e0e0;
6258 -}
6259 -.editor-collaborators-presence:has(.is-pressed) {
6260 - background-color: #e0e0e0;
6261 -}
6262 -
6263 -.editor-header__center .editor-collaborators-presence {
6264 - margin-right: 8px;
6265 -}
6266 -
6267 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6268 - display: flex;
6269 - align-items: center;
6270 - cursor: var(--wpds-cursor-control, pointer);
6271 - position: relative;
6272 - padding: 4px;
6273 - border-radius: 4px;
6274 - height: 100%;
6275 - box-sizing: border-box;
6276 - color: #2f2f2f;
6277 - background: transparent;
6278 -}
6279 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
6280 - background: transparent;
6281 - color: #2f2f2f;
6282 -}
6283 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover {
6284 - background: transparent;
6285 - color: #2f2f2f;
6286 -}
6287 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6288 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6289 - outline: none;
6290 -}
6291 -
6292 4359 .editor-collapsible-block-toolbar {
6293 4360 overflow: hidden;
6294 4361 display: flex;
6295 4362 align-items: center;
@@ -6356,9 +4423,9 @@
6356 4423 background-color: #fff;
6357 4424 text-align: center;
6358 4425 position: sticky;
6359 4426 top: -5px;
6360 - z-index: 1;
4427 + z-index: 2;
6361 4428 }
6362 4429 .editor-block-visibility__disabled-blocks-count ~ .block-editor-block-manager__content .block-editor-block-manager__category-title {
6363 4430 top: 31px;
6364 4431 }
@@ -6388,9 +4455,9 @@
6388 4455 border-radius: 4px;
6389 4456 }
6390 4457 @media not (prefers-reduced-motion) {
6391 4458 .editor-document-bar .components-button {
6392 - transition: background-color 0.1s ease-out;
4459 + transition: all 0.1s ease-out;
6393 4460 }
6394 4461 }
6395 4462 .editor-document-bar .components-button:hover {
6396 4463 background: #e0e0e0;
@@ -6412,8 +4479,13 @@
6412 4479 color: #1e1e1e;
6413 4480 margin: 0 auto;
6414 4481 max-width: 70%;
6415 4482 }
4483 +@media (min-width: 782px) {
4484 + .editor-document-bar__title {
4485 + padding-left: 24px;
4486 + }
4487 +}
6416 4488 .editor-document-bar__title h1 {
6417 4489 display: flex;
6418 4490 align-items: center;
6419 4491 justify-content: center;
@@ -6439,8 +4511,19 @@
6439 4511 display: none;
6440 4512 }
6441 4513 }
6442 4514
4515 +.editor-document-bar__shortcut {
4516 + color: #2f2f2f;
4517 + min-width: 24px;
4518 + display: none;
4519 +}
4520 +@media (min-width: 782px) {
4521 + .editor-document-bar__shortcut {
4522 + display: initial;
4523 + }
4524 +}
4525 +
6443 4526 .editor-document-bar__back.components-button.has-icon.has-text {
6444 4527 min-width: 36px;
6445 4528 flex-shrink: 0;
6446 4529 color: #757575;
@@ -6500,9 +4583,9 @@
6500 4583 content: "—————";
6501 4584 }
6502 4585
6503 4586 .document-outline__button {
6504 - cursor: var(--wpds-cursor-control, pointer);
4587 + cursor: pointer;
6505 4588 background: none;
6506 4589 border: none;
6507 4590 display: flex;
6508 4591 align-items: flex-start;
@@ -6627,18 +4710,8 @@
6627 4710 .editor-editor-interface .interface-interface-skeleton__content {
6628 4711 isolation: isolate;
6629 4712 }
6630 4713
6631 -.editor-notices.notices-inline-notices-wrapper,
6632 -.editor-notices .components-notice-list {
6633 - gap: 0;
6634 -}
6635 -
6636 -.editor-notices .components-notice {
6637 - border-top-width: 0;
6638 - border-inline-width: 0;
6639 -}
6640 -
6641 4714 .editor-visual-editor {
6642 4715 flex: 1 0 auto;
6643 4716 }
6644 4717
@@ -6709,9 +4782,9 @@
6709 4782 margin-bottom: 4px;
6710 4783 }
6711 4784
6712 4785 .editor-error-boundary {
6713 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4786 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6714 4787 margin: auto;
6715 4788 max-width: 780px;
6716 4789 padding: 1em;
6717 4790 margin-top: 64px;
@@ -6745,8 +4818,17 @@
6745 4818 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
6746 4819 flex: 1;
6747 4820 }
6748 4821
4822 +.editor-global-styles-sidebar .components-navigation__menu-title-heading {
4823 + font-size: 15.6px;
4824 + font-weight: 499;
4825 +}
4826 +
4827 +.editor-global-styles-sidebar .components-navigation__item > button span {
4828 + font-weight: 499;
4829 +}
4830 +
6749 4831 .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
6750 4832 border: 0;
6751 4833 }
6752 4834
@@ -6798,13 +4880,12 @@
6798 4880 }
6799 4881 .editor-welcome-guide__image > img {
6800 4882 display: block;
6801 4883 max-width: 100%;
6802 - -o-object-fit: cover;
6803 - object-fit: cover;
4884 + object-fit: cover;
6804 4885 }
6805 4886 .editor-welcome-guide__heading {
6806 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4887 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6807 4888 font-size: 24px;
6808 4889 line-height: 1.4;
6809 4890 margin: 16px 0 16px 0;
6810 4891 padding: 0 32px;
@@ -6834,16 +4915,16 @@
6834 4915 height: 64px;
6835 4916 background: #fff;
6836 4917 display: grid;
6837 4918 grid-auto-flow: row;
6838 - grid-template: auto/32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
4919 + grid-template: auto/64px minmax(0, max-content) minmax(min-content, 1fr) 64px;
6839 4920 }
6840 4921 .editor-header:has(> .editor-header__center) {
6841 - grid-template: auto/32px min-content 1fr min-content 64px;
4922 + grid-template: auto/64px min-content 1fr min-content 64px;
6842 4923 }
6843 4924 @media (min-width: 782px) {
6844 4925 .editor-header:has(> .editor-header__center) {
6845 - grid-template: auto/32px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
4926 + grid-template: auto/64px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6846 4927 }
6847 4928 }
6848 4929 @media (min-width: 480px) {
6849 4930 .editor-header {
@@ -6860,12 +4941,8 @@
6860 4941 flex-wrap: nowrap;
6861 4942 }
6862 4943 }
6863 4944
6864 -.editor-header__back-button {
6865 - padding-left: 8px;
6866 -}
6867 -
6868 4945 .editor-header__toolbar {
6869 4946 grid-column: 1/3;
6870 4947 }
6871 4948 .editor-header__toolbar > :first-child {
@@ -6910,8 +4987,9 @@
6910 4987 display: flex;
6911 4988 justify-content: center;
6912 4989 align-items: center;
6913 4990 min-width: 0;
4991 + clip-path: inset(-2px);
6914 4992 }
6915 4993 @media (max-width: 479px) {
6916 4994 .editor-header__center > :first-child {
6917 4995 margin-inline-start: 8px;
@@ -6919,8 +4997,11 @@
6919 4997 .editor-header__center > :last-child {
6920 4998 margin-inline-end: 8px;
6921 4999 }
6922 5000 }
5001 +.editor-revisions-header .editor-header__center {
5002 + clip-path: none;
5003 +}
6923 5004
6924 5005 /**
6925 5006 * Buttons on the right side
6926 5007 */
@@ -7111,9 +5192,9 @@
7111 5192 margin: 0 0 2rem 0;
7112 5193 }
7113 5194 .editor-keyboard-shortcut-help-modal__section-title {
7114 5195 font-size: 0.9rem;
7115 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5196 + font-weight: 600;
7116 5197 }
7117 5198 .editor-keyboard-shortcut-help-modal__shortcut {
7118 5199 display: flex;
7119 5200 align-items: baseline;
@@ -7127,9 +5208,9 @@
7127 5208 .editor-keyboard-shortcut-help-modal__shortcut:empty {
7128 5209 display: none;
7129 5210 }
7130 5211 .editor-keyboard-shortcut-help-modal__shortcut-term {
7131 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5212 + font-weight: 600;
7132 5213 margin: 0 0 0 1rem;
7133 5214 text-align: right;
7134 5215 }
7135 5216 .editor-keyboard-shortcut-help-modal__shortcut-description {
@@ -7294,10 +5375,10 @@
7294 5375 .editor-post-card-panel__title {
7295 5376 width: 100%;
7296 5377 }
7297 5378 .editor-post-card-panel__title.editor-post-card-panel__title {
7298 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
7299 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5379 + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5380 + font-weight: 499;
7300 5381 font-size: 13px;
7301 5382 line-height: 20px;
7302 5383 margin: 0;
7303 5384 display: flex;
@@ -7302,10 +5383,9 @@
7302 5383 margin: 0;
7303 5384 display: flex;
7304 5385 align-items: center;
7305 5386 flex-wrap: wrap;
7306 - -moz-column-gap: 8px;
7307 - column-gap: 8px;
5387 + column-gap: 8px;
7308 5388 row-gap: 4px;
7309 5389 word-break: break-word;
7310 5390 }
7311 5391 .editor-post-card-panel__icon {
@@ -7396,9 +5476,9 @@
7396 5476 .editor-post-featured-image__toggle,
7397 5477 .editor-post-featured-image__preview {
7398 5478 width: 100%;
7399 5479 padding: 0;
7400 - border-color: #ccc;
5480 + box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
7401 5481 overflow: hidden;
7402 5482 outline-offset: -1px;
7403 5483 min-height: 40px;
7404 5484 display: flex;
@@ -7414,16 +5494,21 @@
7414 5494 /*rtl:end:ignore*/
7415 5495 background-size: 24px 24px;
7416 5496 }
7417 5497 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7418 - -o-object-fit: cover;
7419 - object-fit: cover;
5498 + object-fit: cover;
7420 5499 width: 100%;
7421 - -o-object-position: 50% 50%;
7422 - object-position: 50% 50%;
5500 + object-position: 50% 50%;
7423 5501 aspect-ratio: 2/1;
7424 5502 }
7425 5503
5504 +.editor-post-featured-image__toggle {
5505 + box-shadow: inset 0 0 0 1px #ccc;
5506 +}
5507 +.editor-post-featured-image__toggle:focus:not(:disabled) {
5508 + box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5509 +}
5510 +
7426 5511 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
7427 5512 bottom: 0;
7428 5513 opacity: 0;
7429 5514 padding: 8px;
@@ -7460,9 +5545,9 @@
7460 5545 }
7461 5546
7462 5547 .editor-post-last-revision__title {
7463 5548 width: 100%;
7464 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5549 + font-weight: 499;
7465 5550 }
7466 5551
7467 5552 .editor-post-last-revision__title.components-button.has-icon {
7468 5553 height: 100%;
@@ -7483,8 +5568,12 @@
7483 5568 .components-panel__body.is-opened.editor-post-last-revision__panel .editor-post-last-revision__title.components-button.components-button {
7484 5569 padding: 16px;
7485 5570 }
7486 5571
5572 +.editor-private-post-last-revision__button {
5573 + display: inline-block;
5574 +}
5575 +
7487 5576 .editor-post-locked-modal__buttons {
7488 5577 margin-top: 24px;
7489 5578 }
7490 5579
@@ -7509,9 +5598,8 @@
7509 5598 align-items: center;
7510 5599 padding: 6px 0;
7511 5600 line-height: 20px;
7512 5601 hyphens: auto;
7513 - word-break: break-word;
7514 5602 }
7515 5603
7516 5604 .editor-post-panel__row-control {
7517 5605 flex-grow: 1;
@@ -7526,9 +5614,9 @@
7526 5614 text-wrap: balance;
7527 5615 text-wrap: pretty;
7528 5616 height: auto;
7529 5617 min-height: 32px;
7530 - font-weight: var(--wpds-typography-font-weight-default, 400);
5618 + font-weight: 400;
7531 5619 }
7532 5620 .editor-post-panel__row-control .components-dropdown {
7533 5621 max-width: 100%;
7534 5622 }
@@ -7699,9 +5787,9 @@
7699 5787 margin-left: 16px;
7700 5788 }
7701 5789
7702 5790 .post-publish-panel__postpublish-header {
7703 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5791 + font-weight: 499;
7704 5792 }
7705 5793
7706 5794 .post-publish-panel__postpublish-subheader {
7707 5795 margin: 0 0 8px;
@@ -7750,9 +5838,9 @@
7750 5838 }
7751 5839 }
7752 5840 @media (min-width: 782px) {
7753 5841 body.is-fullscreen-mode .editor-post-publish-panel {
7754 - top: var(--wp-admin--admin-bar--height, 0);
5842 + top: 0;
7755 5843 }
7756 5844 [role=region]:focus .editor-post-publish-panel {
7757 5845 transform: translateX(0%);
7758 5846 }
@@ -7793,9 +5881,9 @@
7793 5881
7794 5882 .revision-diff-markers {
7795 5883 position: relative;
7796 5884 flex-shrink: 0;
7797 - width: max(16px, 1rem);
5885 + width: 12px;
7798 5886 background: rgba(0, 0, 0, 0.05);
7799 5887 }
7800 5888 .revision-diff-markers .revision-diff-marker {
7801 5889 position: absolute;
@@ -7802,19 +5890,19 @@
7802 5890 width: 100%;
7803 5891 min-height: 4px;
7804 5892 border: none;
7805 5893 padding: 0;
7806 - cursor: var(--wpds-cursor-control, pointer);
5894 + cursor: pointer;
7807 5895 transition: opacity 0.1s ease;
7808 5896 }
7809 5897 .revision-diff-markers .revision-diff-marker.is-added {
7810 - background: #008a20;
5898 + background: #00a32a;
7811 5899 }
7812 5900 .revision-diff-markers .revision-diff-marker.is-removed {
7813 - background: repeating-linear-gradient(45deg, #d63638, #d63638 6px, rgba(214, 54, 56, 0.45) 6px, rgba(214, 54, 56, 0.45) 8px);
5901 + background: #d63638;
7814 5902 }
7815 5903 .revision-diff-markers .revision-diff-marker.is-modified {
7816 - background: repeating-linear-gradient(-45deg, #9a7000, #9a7000 6px, rgba(154, 112, 0, 0.45) 6px, rgba(154, 112, 0, 0.45) 8px);
5904 + background: #dba617;
7817 5905 }
7818 5906 .revision-diff-markers .revision-diff-marker:hover {
7819 5907 opacity: 0.7;
7820 5908 }
@@ -7822,52 +5910,8 @@
7822 5910 outline: 2px solid #1e1e1e;
7823 5911 outline-offset: -2px;
7824 5912 }
7825 5913
7826 -.interface-complementary-area:has(.editor-post-revisions-timeline) {
7827 - display: flex;
7828 - flex-direction: column;
7829 - overflow: hidden;
7830 -}
7831 -.interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs {
7832 - flex-shrink: 0;
7833 -}
7834 -
7835 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) {
7836 - display: flex;
7837 - flex-direction: column;
7838 - flex: 1;
7839 - min-height: 0;
7840 -}
7841 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) [role=tabpanel]:has(.editor-post-revisions-timeline) {
7842 - display: flex;
7843 - flex-direction: column;
7844 - flex: 1;
7845 - min-height: 0;
7846 -}
7847 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content {
7848 - max-height: 80px;
7849 - overflow-y: auto;
7850 -}
7851 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline {
7852 - flex: 1;
7853 - min-height: 0;
7854 -}
7855 -
7856 -.editor-revision-fields-diff__value {
7857 - word-break: break-word;
7858 -}
7859 -
7860 -.editor-revision-fields-diff__added {
7861 - background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
7862 - text-decoration: none;
7863 -}
7864 -
7865 -.editor-revision-fields-diff__removed {
7866 - text-decoration: line-through;
7867 - color: #d63638;
7868 -}
7869 -
7870 5914 .editor-post-saved-state {
7871 5915 display: flex;
7872 5916 align-items: center;
7873 5917 width: 28px;
@@ -7980,17 +6024,13 @@
7980 6024 display: inline-block;
7981 6025 margin-right: 8px;
7982 6026 }
7983 6027
7984 -.editor-sync-connection-error-modal {
7985 - z-index: 1000001;
7986 -}
7987 -
7988 -.editor-sync-connection-error-modal p {
6028 +.editor-sync-connection-modal p {
7989 6029 margin: 0;
7990 6030 }
7991 6031
7992 -.editor-sync-connection-error-modal__retry-countdown {
6032 +.editor-sync-connection-modal__retry-countdown {
7993 6033 color: #757575;
7994 6034 }
7995 6035
7996 6036 .editor-post-template__swap-template-modal {
@@ -8010,29 +6050,24 @@
8010 6050 z-index: 1000001;
8011 6051 }
8012 6052
8013 6053 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8014 - -moz-column-count: 2;
8015 - column-count: 2;
8016 - -moz-column-gap: 24px;
8017 - column-gap: 24px;
6054 + column-count: 2;
6055 + column-gap: 24px;
8018 6056 padding-top: 2px;
8019 6057 }
8020 6058 @media (min-width: 782px) {
8021 6059 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8022 - -moz-column-count: 3;
8023 - column-count: 3;
6060 + column-count: 3;
8024 6061 }
8025 6062 }
8026 6063 @media (min-width: 1280px) {
8027 6064 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8028 - -moz-column-count: 4;
8029 - column-count: 4;
6065 + column-count: 4;
8030 6066 }
8031 6067 }
8032 6068 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8033 - -moz-column-break-inside: avoid;
8034 - break-inside: avoid-column;
6069 + break-inside: avoid-column;
8035 6070 }
8036 6071
8037 6072 .editor-post-template__dropdown .components-popover__content {
8038 6073 min-width: 240px;
@@ -8042,43 +6077,16 @@
8042 6077 background: inherit;
8043 6078 color: inherit;
8044 6079 }
8045 6080
8046 -.editor-post-template__classic-theme-dropdown {
8047 - padding: 8px;
8048 -}
8049 -
8050 -.editor-template-actions-panel__preview .block-editor-block-preview__container {
8051 - display: flex;
8052 - aspect-ratio: 4/3;
8053 - overflow: hidden;
8054 - border-radius: 4px;
8055 -}
8056 -.editor-template-actions-panel__preview .block-editor-block-preview__container::after {
8057 - outline: 1px solid rgba(0, 0, 0, 0.1);
8058 - outline-offset: -1px;
8059 - border-radius: 4px;
8060 -}
8061 -@media not (prefers-reduced-motion) {
8062 - .editor-template-actions-panel__preview .block-editor-block-preview__container::after {
8063 - transition: outline 0.1s linear;
6081 +@media (min-width: 782px) {
6082 + .editor-post-template__create-form {
6083 + width: 320px;
8064 6084 }
8065 6085 }
8066 -.editor-template-actions-panel__preview[role=button] {
8067 - cursor: var(--wpds-cursor-control, pointer);
8068 -}
8069 -.editor-template-actions-panel__preview[role=button]:hover .block-editor-block-preview__container::after {
8070 - outline-color: rgba(0, 0, 0, 0.3);
8071 -}
8072 -.editor-template-actions-panel__preview[role=button]:focus-visible .block-editor-block-preview__container::after {
8073 - outline-color: var(--wp-admin-theme-color);
8074 - outline-width: var(--wp-admin-border-width-focus);
8075 - outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
8076 -}
8077 6086
8078 -.editor-template-actions-panel__action {
8079 - flex: 1;
8080 - justify-content: center;
6087 +.editor-post-template__classic-theme-dropdown {
6088 + padding: 8px;
8081 6089 }
8082 6090
8083 6091 textarea.editor-post-text-editor {
8084 6092 border: 1px solid #949494;
@@ -8119,11 +6127,8 @@
8119 6127 border-color: var(--wp-admin-theme-color);
8120 6128 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8121 6129 position: relative;
8122 6130 }
8123 -textarea.editor-post-text-editor::-moz-placeholder {
8124 - color: rgba(30, 30, 30, 0.62);
8125 -}
8126 6131 textarea.editor-post-text-editor::placeholder {
8127 6132 color: rgba(30, 30, 30, 0.62);
8128 6133 }
8129 6134
@@ -8165,9 +6170,9 @@
8165 6170 outline: 3px solid rgba(0, 0, 0, 0);
8166 6171 }
8167 6172
8168 6173 .editor-post-url__link-slug {
8169 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6174 + font-weight: 600;
8170 6175 }
8171 6176
8172 6177 .editor-post-url__input input.components-input-control__input {
8173 6178 padding-inline-start: 0 !important;
@@ -8172,13 +6177,8 @@
8172 6177 .editor-post-url__input input.components-input-control__input {
8173 6178 padding-inline-start: 0 !important;
8174 6179 }
8175 6180
8176 -.editor-post-url__panel-toggle,
8177 -.editor-post-parent__panel-toggle {
8178 - word-break: break-word;
8179 -}
8180 -
8181 6181 .editor-post-url__intro {
8182 6182 margin: 0;
8183 6183 }
8184 6184
@@ -8204,18 +6204,14 @@
8204 6204 padding-right: 4px;
8205 6205 padding-left: 6px;
8206 6206 }
8207 6207
8208 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8209 - color: var(--wp-block-synced-color);
6208 +.editor-preview-dropdown__button-external {
6209 + width: 100%;
6210 + display: flex;
6211 + justify-content: space-between;
8210 6212 }
8211 6213
8212 -@media (prefers-reduced-motion: no-preference) {
8213 - .editor-resizable-editor:not(.is-resizing) {
8214 - transition: width 0.2s ease-out, height 0.2s ease-out;
8215 - }
8216 -}
8217 -
8218 6214 .editor-resizable-editor.is-resizable {
8219 6215 overflow: visible;
8220 6216 margin: 0 auto;
8221 6217 }
@@ -8226,11 +6222,9 @@
8226 6222 bottom: 0;
8227 6223 padding: 0;
8228 6224 margin: auto 0;
8229 6225 width: 12px;
8230 - -webkit-appearance: none;
8231 - -moz-appearance: none;
8232 - appearance: none;
6226 + appearance: none;
8233 6227 cursor: ew-resize;
8234 6228 outline: none;
8235 6229 background: none;
8236 6230 border-radius: 9999px;
@@ -8304,28 +6298,23 @@
8304 6298 padding-bottom: 72px;
8305 6299 }
8306 6300
8307 6301 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8308 - -moz-column-count: 2;
8309 - column-count: 2;
8310 - -moz-column-gap: 24px;
8311 - column-gap: 24px;
6302 + column-count: 2;
6303 + column-gap: 24px;
8312 6304 }
8313 6305 @media (min-width: 782px) {
8314 6306 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8315 - -moz-column-count: 3;
8316 - column-count: 3;
6307 + column-count: 3;
8317 6308 }
8318 6309 }
8319 6310 @media (min-width: 1280px) {
8320 6311 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8321 - -moz-column-count: 4;
8322 - column-count: 4;
6312 + column-count: 4;
8323 6313 }
8324 6314 }
8325 6315 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8326 - -moz-column-break-inside: avoid;
8327 - break-inside: avoid-column;
6316 + break-inside: avoid-column;
8328 6317 margin-bottom: 24px;
8329 6318 }
8330 6319 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8331 6320 min-height: 100px;
@@ -8351,28 +6340,23 @@
8351 6340 padding-bottom: 92px;
8352 6341 }
8353 6342
8354 6343 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8355 - -moz-column-count: 2;
8356 - column-count: 2;
8357 - -moz-column-gap: 24px;
8358 - column-gap: 24px;
6344 + column-count: 2;
6345 + column-gap: 24px;
8359 6346 }
8360 6347 @media (min-width: 782px) {
8361 6348 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8362 - -moz-column-count: 3;
8363 - column-count: 3;
6349 + column-count: 3;
8364 6350 }
8365 6351 }
8366 6352 @media (min-width: 1280px) {
8367 6353 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8368 - -moz-column-count: 4;
8369 - column-count: 4;
6354 + column-count: 4;
8370 6355 }
8371 6356 }
8372 6357 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8373 - -moz-column-break-inside: avoid;
8374 - break-inside: avoid-column;
6358 + break-inside: avoid-column;
8375 6359 }
8376 6360 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
8377 6361 display: none;
8378 6362 }
@@ -8407,13 +6391,8 @@
8407 6391 color: #757575;
8408 6392 font-size: 13px;
8409 6393 }
8410 6394
8411 -.fields-controls__password {
8412 - border-top: 1px solid #e0e0e0;
8413 - padding-top: 16px;
8414 -}
8415 -
8416 6395 .editor-site-discussion-dropdown__content .components-popover__content {
8417 6396 min-width: 320px;
8418 6397 padding: 16px;
8419 6398 }
@@ -8423,8 +6402,13 @@
8423 6402 }
8424 6403 .editor-style-book.is-button {
8425 6404 border-radius: 8px;
8426 6405 }
6406 +.editor-style-book {
6407 + display: flex;
6408 + flex-direction: column;
6409 + align-items: stretch;
6410 +}
8427 6411
8428 6412 .editor-style-book__iframe {
8429 6413 display: block;
8430 6414 height: 100%;
@@ -8437,14 +6421,8 @@
8437 6421 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
8438 6422 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
8439 6423 }
8440 6424
8441 -.editor-style-book__tabs {
8442 - height: 100%;
8443 - display: flex;
8444 - flex-direction: column;
8445 -}
8446 -
8447 6425 .editor-style-book__tablist-container {
8448 6426 flex: none;
8449 6427 display: flex;
8450 6428 width: 100%;
@@ -8458,9 +6436,9 @@
8458 6436 }
8459 6437
8460 6438 .editor-styles-canvas {
8461 6439 height: 100%;
8462 - padding: 24px;
6440 + padding: 16px;
8463 6441 background-color: var(--wp-editor-canvas-background);
8464 6442 }
8465 6443 .editor-styles-canvas iframe {
8466 6444 display: block;
@@ -8469,8 +6447,9 @@
8469 6447 }
8470 6448
8471 6449 .editor-styles-canvas__section {
8472 6450 background: #fff;
6451 + border-radius: 8px;
8473 6452 bottom: 0;
8474 6453 left: 0;
8475 6454 overflow: hidden;
8476 6455 position: absolute;
@@ -8556,9 +6535,9 @@
8556 6535 .table-of-contents__title {
8557 6536 display: block;
8558 6537 margin-top: 20px;
8559 6538 font-size: 15px;
8560 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6539 + font-weight: 600;
8561 6540 }
8562 6541
8563 6542 .editor-text-editor {
8564 6543 box-sizing: border-box;
@@ -8569,9 +6548,8 @@
8569 6548 box-sizing: inherit;
8570 6549 }
8571 6550 .editor-text-editor {
8572 6551 position: relative;
8573 - isolation: isolate;
8574 6552 width: 100%;
8575 6553 background-color: #fff;
8576 6554 flex-grow: 1;
8577 6555 }
@@ -8637,31 +6615,11 @@
8637 6615 font-size: 13px;
8638 6616 color: #1e1e1e;
8639 6617 }
8640 6618
8641 -.editor-upload-progress-snackbar__spinner,
8642 -.editor-upload-progress-snackbar__check {
8643 - display: inline-flex;
8644 - align-items: center;
8645 - justify-content: center;
8646 - width: 24px;
8647 - height: 24px;
8648 -}
8649 -
8650 -.editor-upload-progress-snackbar__spinner .components-spinner {
8651 - margin: 0;
8652 -}
8653 -
8654 -.editor-upload-progress-snackbar__check svg {
8655 - width: 24px;
8656 - height: 24px;
8657 - fill: currentColor;
8658 -}
8659 -
8660 6619 .editor-visual-editor {
8661 6620 position: relative;
8662 6621 display: flex;
8663 - max-height: 100%;
8664 6622 background-color: var(--wp-editor-canvas-background);
8665 6623 }
8666 6624 .editor-visual-editor iframe[name=editor-canvas] {
8667 6625 background-color: transparent;
@@ -8668,26 +6626,19 @@
8668 6626 }
8669 6627 .editor-visual-editor {
8670 6628 align-items: center;
8671 6629 }
8672 -@media (prefers-reduced-motion: no-preference) {
8673 - .editor-visual-editor {
8674 - transition: padding 0.2s ease-out;
8675 - }
6630 +.editor-visual-editor.is-resizable {
6631 + max-height: 100%;
8676 6632 }
8677 -.editor-visual-editor.has-vertical-padding {
8678 - padding-top: 24px;
8679 - padding-bottom: 24px;
6633 +.editor-visual-editor.has-padding {
6634 + padding: 24px 24px 0;
8680 6635 }
8681 -.editor-visual-editor.has-horizontal-padding {
8682 - padding-left: 24px;
8683 - padding-right: 24px;
8684 -}
8685 -.editor-visual-editor {
6636 +.editor-visual-editor.is-iframed {
8686 6637 overflow: hidden;
8687 6638 }
8688 6639 .editor-visual-editor .components-button {
8689 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6640 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8690 6641 font-size: 13px;
8691 6642 padding: 6px 12px;
8692 6643 }
8693 6644 .editor-visual-editor .components-button.is-tertiary, .editor-visual-editor .components-button.has-icon {
@@ -8716,29 +6667,5 @@
8716 6667
8717 6668 .editor-push-changes-to-global-styles-control .components-button {
8718 6669 justify-content: center;
8719 6670 width: 100%;
8720 -}
8721 -
8722 -.editor-push-changes-to-global-styles-modal p {
8723 - margin-top: 0;
8724 -}
8725 -
8726 -.editor-push-changes-to-global-styles-modal .dataviews-layout__container {
8727 - overflow-x: hidden;
8728 -}
8729 -@media (max-width: 600px) {
8730 - .editor-push-changes-to-global-styles-modal .dataviews-layout__container {
8731 - overflow-x: auto;
8732 - }
8733 -}
8734 -.editor-push-changes-to-global-styles-modal .components-modal__content {
8735 - padding-bottom: 0;
8736 -}
8737 -.editor-push-changes-to-global-styles-modal .dataviews-footer {
8738 - padding-bottom: 24px;
8739 -}
8740 -
8741 -.editor-push-changes-to-global-styles-modal__value {
8742 - color: #1e1e1e;
8743 - overflow-wrap: anywhere;
8744 6671 }