PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.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 All 404 releases
← All changes | build/styles/edit-site/style.css +125 -254 23.9.0 → trunk View file →
@@ -241,8 +241,12 @@
241 241 .dataviews__search {
242 242 flex-grow: 1;
243 243 }
244 244
245 +.dataviews__search .dataviews-search {
246 + flex-basis: 210px;
247 +}
248 +
245 249 .dataviews-no-results,
246 250 .dataviews-loading {
247 251 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
248 252 flex-grow: 1;
@@ -512,9 +516,9 @@
512 516 cursor: var(--wpds-cursor-control, pointer);
513 517 }
514 518
515 519 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
516 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
520 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
517 521 }
518 522
519 523 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
520 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -520,13 +524,13 @@
520 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
521 525 }
522 526
523 527 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
524 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
528 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
525 529 }
526 530
527 531 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
528 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
532 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
529 533 }
530 534
531 535 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
532 536 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -588,10 +592,11 @@
588 592 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
589 593 }
590 594
591 595 .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 {
596 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
597 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
592 598 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
593 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
594 599 }
595 600
596 601 .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 {
597 602 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -705,9 +710,9 @@
705 710 }
706 711 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
707 712 --checkbox-size: 24px;
708 713 flex-shrink: 0;
709 - border: 1px solid #1e1e1e;
714 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
710 715 margin-right: 12px;
711 716 transition: none;
712 717 border-radius: 2px;
713 718 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -726,9 +731,9 @@
726 731 /* Override core line-height. To be reviewed. */
727 732 line-height: normal;
728 733 }
729 734 }
730 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
735 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
731 736 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
732 737 }
733 738
734 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
@@ -737,14 +742,14 @@
737 742 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
738 743 box-shadow: none;
739 744 }
740 745
741 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
746 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
742 747 color: rgba(30, 30, 30, 0.62);
743 748 }
744 749
745 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
746 - color: rgba(30, 30, 30, 0.62);
750 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
751 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
747 752 }
748 753
749 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
750 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -777,9 +782,9 @@
777 782 display: inline-block;
778 783 vertical-align: middle;
779 784 width: 16px;
780 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
781 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
782 787 speak: none;
783 788 -webkit-font-smoothing: antialiased;
784 789 -moz-osx-font-smoothing: grayscale;
785 790 }
@@ -790,17 +795,23 @@
790 795 font-size: 21px;
791 796 }
792 797 }
793 798 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
794 - background: #f0f0f0;
795 - border-color: #ddd;
799 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
800 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
801 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
796 802 cursor: default;
797 803 opacity: 1;
798 804 }
799 805
806 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
807 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
808 +}
809 +
800 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
801 811 position: relative;
802 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
812 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
813 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
803 814 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
804 815 margin: 0;
805 816 padding: 0;
806 817 width: var(--checkbox-size);
@@ -823,9 +834,9 @@
823 834 }
824 835
825 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
826 837 --checkmark-size: var(--checkbox-size);
827 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
828 839 position: absolute;
829 840 left: 50%;
830 841 top: 50%;
831 842 transform: translate(-50%, -50%);
@@ -860,9 +871,9 @@
860 871 /* Override core line-height. To be reviewed. */
861 872 line-height: normal;
862 873 }
863 874 }
864 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
875 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
865 876 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
866 877 }
867 878
868 879 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
@@ -871,12 +882,8 @@
871 882 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
872 883 box-shadow: none;
873 884 }
874 885
875 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
876 - color: rgba(30, 30, 30, 0.62);
877 -}
878 -
879 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
880 887 color: rgba(30, 30, 30, 0.62);
881 888 }
882 889
@@ -899,12 +906,8 @@
899 906 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
900 907 background: var(--wpds-color-background-surface-neutral-strong, #fff);
901 908 }
902 909
903 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
904 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
905 -}
906 -
907 910 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
908 911 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
909 912 }
910 913
@@ -949,12 +952,8 @@
949 952 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
950 953 box-sizing: border-box;
951 954 }
952 955
953 -.dataviews-search {
954 - flex-basis: 210px;
955 -}
956 -
957 956 .dataviews-filters__user-input-widget {
958 957 padding: var(--wpds-dimension-padding-lg, 16px);
959 958 }
960 959
@@ -1231,9 +1230,8 @@
1231 1230 }
1232 1231
1233 1232 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1234 1233 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1235 - width: -moz-fit-content;
1236 1234 width: fit-content;
1237 1235 }
1238 1236
1239 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -1267,9 +1265,8 @@
1267 1265 }
1268 1266
1269 1267 .dataviews-view-grid .dataviews-view-grid__media img,
1270 1268 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1271 - -o-object-fit: cover;
1272 1269 object-fit: cover;
1273 1270 width: 100%;
1274 1271 height: 100%;
1275 1272 }
@@ -1303,9 +1300,8 @@
1303 1300 }
1304 1301
1305 1302 .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1306 1303 .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1307 - -o-object-fit: contain;
1308 1304 object-fit: contain;
1309 1305 }
1310 1306
1311 1307 .dataviews-view-grid .dataviews-view-grid__fields,
@@ -1469,9 +1465,8 @@
1469 1465
1470 1466 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1471 1467 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1472 1468 display: flex;
1473 - width: -moz-max-content;
1474 1469 width: max-content;
1475 1470 flex: 0 0 auto;
1476 1471 gap: var(--wpds-dimension-gap-xs, 4px);
1477 1472 white-space: nowrap;
@@ -1564,10 +1559,8 @@
1564 1559 position: absolute;
1565 1560 z-index: 1;
1566 1561 inset: 0;
1567 1562 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1568 - -webkit-appearance: none;
1569 - -moz-appearance: none;
1570 1563 appearance: none;
1571 1564 border: none;
1572 1565 background: none;
1573 1566 padding: 0;
@@ -1610,9 +1603,8 @@
1610 1603
1611 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1612 1605 width: 100%;
1613 1606 height: 100%;
1614 - -o-object-fit: cover;
1615 1607 object-fit: cover;
1616 1608 }
1617 1609
1618 1610 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -1751,9 +1743,9 @@
1751 1743
1752 1744 .dataviews-view-table th {
1753 1745 text-align: left;
1754 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1755 - font-weight: normal;
1747 + font-weight: 400;
1756 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1757 1749 }
1758 1750
1759 1751 .dataviews-view-table td,
@@ -1995,9 +1987,8 @@
1995 1987
1996 1988 .dataviews-column-primary__media img {
1997 1989 width: var(--wpds-dimension-size-md, 32px);
1998 1990 height: var(--wpds-dimension-size-md, 32px);
1999 - -o-object-fit: cover;
2000 1991 object-fit: cover;
2001 1992 }
2002 1993
2003 1994 .dataviews-column-primary__media::after {
@@ -2076,9 +2067,8 @@
2076 2067 text-align: start;
2077 2068 }
2078 2069
2079 2070 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2080 - width: -moz-fit-content;
2081 2071 width: fit-content;
2082 2072 }
2083 2073
2084 2074 .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 {
@@ -2119,9 +2109,8 @@
2119 2109 position: relative;
2120 2110 }
2121 2111
2122 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2123 - -o-object-fit: cover;
2124 2113 object-fit: cover;
2125 2114 width: 100%;
2126 2115 height: 100%;
2127 2116 }
@@ -2142,9 +2131,8 @@
2142 2131 background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2143 2132 }
2144 2133
2145 2134 .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2146 - -o-object-fit: contain;
2147 2135 object-fit: contain;
2148 2136 }
2149 2137
2150 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
@@ -2309,9 +2297,8 @@
2309 2297 }
2310 2298
2311 2299 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2312 2300 display: flex;
2313 - width: -moz-max-content;
2314 2301 width: max-content;
2315 2302 flex: 0 0 auto;
2316 2303 }
2317 2304
@@ -2443,9 +2430,8 @@
2443 2430 display: block;
2444 2431 width: 100%;
2445 2432 height: 100%;
2446 2433 margin: 0 auto;
2447 - -o-object-fit: cover;
2448 2434 object-fit: cover;
2449 2435 border-radius: 50%;
2450 2436 box-sizing: border-box;
2451 2437 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2660,9 +2646,8 @@
2660 2646 display: block;
2661 2647 width: 100%;
2662 2648 height: 100%;
2663 2649 margin: 0 auto;
2664 - -o-object-fit: cover;
2665 2650 object-fit: cover;
2666 2651 border-radius: 50%;
2667 2652 box-sizing: border-box;
2668 2653 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2717,27 +2702,19 @@
2717 2702 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2718 2703 }
2719 2704
2720 2705 .dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2721 - --focus-color: #cc1818;
2706 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2722 2707 }
2723 2708
2724 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2725 - border-color: #cc1818;
2709 +.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2710 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2726 2711 }
2727 2712
2728 -.dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
2729 - border-color: #cc1818;
2730 -}
2731 -
2732 2713 .dataviews-validated-control__wrapper-with-error-delegate {
2733 2714 position: relative;
2734 2715 }
2735 2716
2736 -.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
2737 - border-color: #cc1818;
2738 -}
2739 -
2740 2717 .dataviews-validated-control__error-delegate {
2741 2718 position: absolute;
2742 2719 top: 0;
2743 2720 height: 100%;
@@ -2868,9 +2845,10 @@
2868 2845 align-items: center;
2869 2846 overflow: clip;
2870 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2871 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2872 - word-break: break-word;
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2873 2851 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2874 2852 }
2875 2853
2876 2854 .dataforms-layouts-panel__field-control:has(a, button) {
@@ -3129,9 +3107,9 @@
3129 3107 padding: 12px;
3130 3108 display: grid;
3131 3109 align-items: center;
3132 3110 grid-template-columns: min-content 1fr min-content;
3133 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
3134 3112 color: #1e1e1e;
3135 3113 }
3136 3114
3137 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -3414,11 +3392,9 @@
3414 3392
3415 3393 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3416 3394 width: 100%;
3417 3395 height: 100%;
3418 - -o-object-fit: cover;
3419 3396 object-fit: cover;
3420 - -o-object-position: 50% 50%;
3421 3397 object-position: 50% 50%;
3422 3398 }
3423 3399
3424 3400 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -3478,9 +3454,8 @@
3478 3454
3479 3455 .fields-controls__author-avatar img {
3480 3456 width: 16px;
3481 3457 height: 16px;
3482 - -o-object-fit: cover;
3483 3458 object-fit: cover;
3484 3459 opacity: 0;
3485 3460 border-radius: 100%;
3486 3461 }
@@ -3516,18 +3491,15 @@
3516 3491 padding: 0;
3517 3492 margin: 0;
3518 3493 }
3519 3494
3520 -.fields-controls__slug .fields-controls__slug-external-icon {
3521 - margin-left: 5ch;
3522 -}
3523 -
3524 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3525 3496 padding-inline-start: 0 !important;
3526 3497 }
3527 3498
3528 3499 .fields-controls__slug .fields-controls__slug-help-link {
3529 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3530 3502 }
3531 3503
3532 3504 .fields-controls__slug .fields-controls__slug-help {
3533 3505 display: flex;
@@ -3802,13 +3774,13 @@
3802 3774 position: relative;
3803 3775 }
3804 3776
3805 3777 .font-library__font-card .font-library__font-card__name {
3806 - font-weight: bold;
3778 + font-weight: 700;
3807 3779 }
3808 3780
3809 3781 .font-library__font-card .font-library__font-card__count {
3810 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3811 3783 }
3812 3784
3813 3785 .font-library__font-card .font-library__font-variant_demo-image {
3814 3786 display: block;
@@ -3868,9 +3840,9 @@
3868 3840 width: 80%;
3869 3841 }
3870 3842
3871 3843 .font-library__local-fonts .font-library__upload-area__text {
3872 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3873 3845 }
3874 3846
3875 3847 .font-library__google-fonts-confirm {
3876 3848 display: flex;
@@ -3905,113 +3877,22 @@
3905 3877 .font-library__select-all .components-checkbox-control__label {
3906 3878 padding-left: 16px;
3907 3879 }
3908 3880
3909 -.global-styles-ui-pagination .components-button.is-tertiary {
3910 - width: 32px;
3911 - height: 32px;
3912 - justify-content: center;
3913 -}
3914 -
3915 -.global-styles-ui-screen-revisions__revisions-list {
3916 - list-style: none;
3917 - margin: 0 16px 16px 16px;
3918 - flex-grow: 1;
3919 -}
3920 -
3921 -.global-styles-ui-screen-revisions__revisions-list li {
3922 - margin-bottom: 0;
3923 -}
3924 -
3925 -.global-styles-ui-screen-revisions__revision-item {
3926 - position: relative;
3927 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3928 3882 display: flex;
3929 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3930 3886 }
3931 3887
3932 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3933 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3934 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3935 3890 }
3936 3891
3937 -.global-styles-ui-screen-revisions__revision-item:hover {
3938 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3939 -}
3940 -
3941 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3942 - color: var(--wp-admin-theme-color);
3943 -}
3944 -
3945 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3946 - position: absolute;
3947 - content: "\a";
3948 - display: block;
3949 -}
3950 -
3951 -.global-styles-ui-screen-revisions__revision-item::before {
3952 - background: #ddd;
3953 - border-radius: 50%;
3954 - height: 8px;
3955 - width: 8px;
3956 - top: 18px;
3957 - left: 17px;
3958 - transform: translate(-50%, -50%);
3959 - z-index: 1;
3960 - border: 4px solid transparent;
3961 -}
3962 -
3963 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3964 - border-radius: 2px;
3965 - outline: 3px solid transparent;
3966 - outline-offset: -2px;
3967 - color: var(--wp-admin-theme-color);
3968 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3969 -}
3970 -
3971 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3972 - color: var(--wp-admin-theme-color);
3973 -}
3974 -
3975 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3976 - background: var(--wp-admin-theme-color);
3977 -}
3978 -
3979 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3980 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3981 - color: #1e1e1e;
3982 -}
3983 -
3984 -.global-styles-ui-screen-revisions__revision-item::after {
3985 - height: 100%;
3986 - left: 16px;
3987 - top: 0;
3988 - width: 0;
3989 - border: 0.5px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3990 -}
3991 -
3992 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3993 - top: 18px;
3994 -}
3995 -
3996 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3997 - height: 18px;
3998 -}
3999 -
4000 -.global-styles-ui-screen-revisions__revision-item-wrapper {
4001 - display: block;
4002 - padding: 12px 12px 4px 40px;
4003 -}
4004 -
4005 -.global-styles-ui-screen-revisions__apply-button.is-primary,
4006 -.global-styles-ui-screen-revisions__active-badge {
4007 - align-self: flex-start;
4008 - margin: 0 12px 12px 40px;
4009 -}
4010 -
4011 -.global-styles-ui-screen-revisions__changes,
4012 -.global-styles-ui-screen-revisions__meta {
4013 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4014 3895 font-size: 12px;
4015 3896 }
4016 3897
4017 3898 .global-styles-ui-screen-revisions__description {
@@ -4020,11 +3901,11 @@
4020 3901 align-items: flex-start;
4021 3902 gap: 8px;
4022 3903 }
4023 3904
4024 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
4025 - text-transform: uppercase;
4026 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3905 +.global-styles-ui-screen-revisions__changes,
3906 +.global-styles-ui-screen-revisions__meta {
3907 + color: #2f2f2f;
4027 3908 font-size: 12px;
4028 3909 }
4029 3910
4030 3911 .global-styles-ui-screen-revisions__meta {
@@ -4030,11 +3911,10 @@
4030 3911 .global-styles-ui-screen-revisions__meta {
4031 3912 display: flex;
4032 3913 justify-content: start;
4033 3914 width: 100%;
4034 - align-items: flex-start;
3915 + align-items: center;
4035 3916 text-align: left;
4036 - margin-bottom: 4px;
4037 3917 }
4038 3918
4039 3919 .global-styles-ui-screen-revisions__meta img {
4040 3920 width: 16px;
@@ -4042,16 +3922,12 @@
4042 3922 border-radius: 100%;
4043 3923 margin-right: 8px;
4044 3924 }
4045 3925
4046 -.global-styles-ui-screen-revisions__loading {
4047 - margin: 24px auto !important;
4048 -}
4049 -
4050 3926 .global-styles-ui-screen-revisions__changes {
4051 3927 text-align: left;
4052 3928 line-height: 1.4;
4053 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
4054 3930 list-style: disc;
4055 3931 }
4056 3932
4057 3933 .global-styles-ui-screen-revisions__changes li {
@@ -4057,47 +3933,8 @@
4057 3933 .global-styles-ui-screen-revisions__changes li {
4058 3934 margin-bottom: 4px;
4059 3935 }
4060 3936
4061 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
4062 - justify-content: space-between;
4063 - gap: 2px;
4064 -}
4065 -
4066 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
4067 - position: absolute;
4068 - left: -1000px;
4069 - height: 1px;
4070 - margin: -1px;
4071 - overflow: hidden;
4072 -}
4073 -
4074 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
4075 - font-size: 12px;
4076 - will-change: opacity;
4077 -}
4078 -
4079 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
4080 - color: #1e1e1e;
4081 -}
4082 -
4083 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
4084 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
4085 - color: #949494;
4086 -}
4087 -
4088 -.global-styles-ui-screen-revisions__footer {
4089 - height: 56px;
4090 - z-index: 1;
4091 - position: sticky;
4092 - min-width: 100%;
4093 - bottom: 0;
4094 - background: #fff;
4095 - padding: 12px;
4096 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4097 - box-sizing: border-box;
4098 -}
4099 -
4100 3937 .global-styles-ui-variations_item {
4101 3938 box-sizing: border-box;
4102 3939 cursor: var(--wpds-cursor-control, pointer);
4103 3940 }
@@ -4247,10 +4084,20 @@
4247 4084
4248 4085 .global-styles-ui__color-indicator-wrapper {
4249 4086 height: 24px;
4250 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4251 4090 }
4252 4091
4092 +.global-styles-ui__palette-preview {
4093 + display: inline-flex;
4094 +}
4095 +
4096 +.global-styles-ui__palette-preview > * + * {
4097 + margin-inline-start: -8px;
4098 +}
4099 +
4253 4100 .global-styles-ui__shadows-panel__options-container,
4254 4101 .global-styles-ui__typography-panel__options-container {
4255 4102 height: 24px;
4256 4103 }
@@ -4262,9 +4109,10 @@
4262 4109 border-radius: 2px;
4263 4110 overflow: hidden;
4264 4111 }
4265 4112
4266 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4267 4115 height: 144px;
4268 4116 border: #ddd 1px solid;
4269 4117 border-radius: 2px;
4270 4118 overflow: auto;
@@ -4274,9 +4122,9 @@
4274 4122 /*rtl:end:ignore*/
4275 4123 background-size: 16px 16px;
4276 4124 }
4277 4125
4278 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
4279 4127 border: #ddd 1px solid;
4280 4128 border-radius: 2px;
4281 4129 background-color: #fff;
4282 4130 width: 60%;
@@ -4282,22 +4130,44 @@
4282 4130 width: 60%;
4283 4131 height: 60px;
4284 4132 }
4285 4133
4286 -.global-styles-ui__shadow-editor__dropdown-content {
4134 +.global-styles-ui__text-shadow-preview-panel {
4135 + margin-block: -8px 16px;
4136 +}
4137 +
4138 +.global-styles-ui__text-shadow-preview-text {
4139 + font-size: 24px;
4140 +}
4141 +
4142 +.global-styles-ui__text-shadow-editor__header {
4143 + margin-block-end: 8px;
4144 +}
4145 +
4146 +.global-styles-ui__text-shadow-editor__inputs {
4147 + display: grid;
4148 + grid-template-columns: repeat(2, 1fr);
4149 + gap: 16px;
4150 +}
4151 +
4152 +.global-styles-ui__shadow-editor__dropdown-content,
4153 +.global-styles-ui__text-shadow-editor__dropdown-content {
4287 4154 width: 280px;
4288 4155 }
4289 4156
4290 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
4291 4159 margin-bottom: 4px;
4292 4160 }
4293 4161
4294 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
4295 4164 width: 100%;
4296 4165 position: relative;
4297 4166 }
4298 4167
4299 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4300 4170 width: 100%;
4301 4171 height: auto;
4302 4172 padding-top: 8px;
4303 4173 padding-bottom: 8px;
@@ -4304,14 +4174,16 @@
4304 4174 text-align: left;
4305 4175 border-radius: inherit;
4306 4176 }
4307 4177
4308 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4178 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4179 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
4309 4180 background: #f0f0f0;
4310 4181 color: var(--wp-admin-theme-color);
4311 4182 }
4312 4183
4313 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
4314 4186 position: absolute;
4315 4187 right: 8px;
4316 4188 top: 8px;
4317 4189 opacity: 0;
@@ -4316,14 +4188,19 @@
4316 4188 top: 8px;
4317 4189 opacity: 0;
4318 4190 }
4319 4191
4320 -.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
4192 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
4193 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4194 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4195 +.global-styles-ui__text-shadow-editor__remove-button:focus,
4196 +.global-styles-ui__text-shadow-editor__remove-button:hover {
4321 4197 opacity: 1;
4322 4198 }
4323 4199
4324 4200 @media (hover: none) {
4325 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
4326 4203 opacity: 1;
4327 4204 }
4328 4205 }
4329 4206 .global-styles-ui-screen-css {
@@ -4419,13 +4296,8 @@
4419 4296 }
4420 4297 .edit-site-custom-template-modal__contents-wrapper > * {
4421 4298 width: 100%;
4422 4299 }
4423 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4424 - margin-left: -12px;
4425 - margin-right: -12px;
4426 - width: calc(100% + 24px);
4427 -}
4428 4300 .edit-site-custom-template-modal__contents > .components-button {
4429 4301 height: auto;
4430 4302 justify-content: center;
4431 4303 }
@@ -4435,10 +4307,14 @@
4435 4307 }
4436 4308 }
4437 4309 @media (min-width: 600px) {
4438 4310 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4439 - max-height: 224px;
4440 4311 overflow-y: auto;
4312 + max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313 + padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314 + margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4315 + width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4316 + scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4441 4317 }
4442 4318 }
4443 4319 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4444 4320 display: block;
@@ -4464,11 +4340,8 @@
4464 4340 }
4465 4341 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4466 4342 background-color: #f0f0f0;
4467 4343 }
4468 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4469 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4470 -}
4471 4344 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4472 4345 overflow: hidden;
4473 4346 text-overflow: ellipsis;
4474 4347 display: block;
@@ -4500,14 +4373,10 @@
4500 4373 }
4501 4374 }
4502 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4503 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4504 - fill: var(--wp-admin-theme-color);
4377 + color: var(--wp-admin-theme-color);
4505 4378 }
4506 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4507 - flex-grow: 1;
4508 - align-items: flex-start;
4509 -}
4510 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4511 4380 padding: 8px;
4512 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4513 4382 border-radius: 100%;
@@ -4521,9 +4390,8 @@
4521 4390 display: flex;
4522 4391 flex-direction: column;
4523 4392 border: 1px solid #ddd;
4524 4393 justify-content: center;
4525 - outline: 1px solid transparent;
4526 4394 }
4527 4395 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4528 4396 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4529 4397 color: #1e1e1e;
@@ -4541,14 +4409,8 @@
4541 4409 .edit-site-custom-template-modal__contents > .components-button:hover span,
4542 4410 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4543 4411 color: var(--wp-admin-theme-color);
4544 4412 }
4545 -.edit-site-custom-template-modal__contents > .components-button:focus,
4546 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4547 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4548 - border-color: transparent;
4549 - outline: 3px solid transparent;
4550 -}
4551 4413 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4552 4414 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4553 4415 color: var(--wp-admin-theme-color);
4554 4416 }
@@ -4560,10 +4422,12 @@
4560 4422 }
4561 4423
4562 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4563 4425 height: 100%;
4426 + padding: 16px;
4564 4427 text-align: start;
4565 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4566 4430 }
4567 4431
4568 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4569 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4772,10 +4636,9 @@
4772 4636 }
4773 4637 .edit-site-welcome-guide__image > img {
4774 4638 display: block;
4775 4639 max-width: 100%;
4776 - -o-object-fit: cover;
4777 - object-fit: cover;
4640 + object-fit: cover;
4778 4641 }
4779 4642 .edit-site-welcome-guide__heading {
4780 4643 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4781 4644 font-size: 24px;
@@ -4796,9 +4659,9 @@
4796 4659 margin: 0 4px;
4797 4660 vertical-align: text-top;
4798 4661 }
4799 4662 .edit-site-welcome-guide .components-button:hover svg {
4800 - fill: #fff;
4663 + color: #fff;
4801 4664 }
4802 4665
4803 4666 .edit-site-layout {
4804 4667 height: 100%;
@@ -5365,13 +5228,8 @@
5365 5228 margin-left: -16px;
5366 5229 margin-right: -16px;
5367 5230 }
5368 5231
5369 -.edit-site-sidebar-navigation-screen-templates-browse {
5370 - margin-left: -16px;
5371 - margin-right: -16px;
5372 -}
5373 -
5374 5232 .edit-site-sidebar-dataviews {
5375 5233 margin-left: -16px;
5376 5234 margin-right: -16px;
5377 5235 }
@@ -5479,9 +5337,8 @@
5479 5337 }
5480 5338 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5481 5339 cursor: col-resize;
5482 5340 -webkit-user-select: none;
5483 - -moz-user-select: none;
5484 5341 user-select: none;
5485 5342 }
5486 5343
5487 5344 .edit-site-resizable-frame__inner.is-resizing::before {
@@ -5565,8 +5422,14 @@
5565 5422 .edit-site-styles .edit-site-sidebar-button {
5566 5423 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5567 5424 }
5568 5425
5426 +.edit-site-styles__content {
5427 + flex-grow: 1;
5428 + min-height: 0;
5429 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5430 +}
5431 +
5569 5432 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5570 5433 width: auto;
5571 5434 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5572 5435 }
@@ -5575,8 +5438,16 @@
5575 5438 }
5576 5439 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5577 5440 content: attr(aria-label);
5578 5441 font-size: var(--wpds-typography-font-size-sm, 12px);
5442 +}
5443 +
5444 +.edit-site-sidebar-identity__form {
5445 + flex-grow: 1;
5446 + min-height: 0;
5447 + overflow: auto;
5448 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5449 + padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5579 5450 }
5580 5451
5581 5452 ::view-transition-image-pair(root) {
5582 5453 isolation: auto;