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 +88 -174 24.0.0 → trunk View file →
@@ -710,9 +710,9 @@
710 710 }
711 711 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
712 712 --checkbox-size: 24px;
713 713 flex-shrink: 0;
714 - border: 1px solid #1e1e1e;
714 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
715 715 margin-right: 12px;
716 716 transition: none;
717 717 border-radius: 2px;
718 718 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -731,9 +731,9 @@
731 731 /* Override core line-height. To be reviewed. */
732 732 line-height: normal;
733 733 }
734 734 }
735 -.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]) {
736 736 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
737 737 }
738 738
739 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
@@ -746,8 +746,12 @@
746 746 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
747 747 color: rgba(30, 30, 30, 0.62);
748 748 }
749 749
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);
752 +}
753 +
750 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
751 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
752 756 outline: 2px solid transparent;
753 757 }
@@ -778,9 +782,9 @@
778 782 display: inline-block;
779 783 vertical-align: middle;
780 784 width: 16px;
781 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
782 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
783 787 speak: none;
784 788 -webkit-font-smoothing: antialiased;
785 789 -moz-osx-font-smoothing: grayscale;
786 790 }
@@ -791,14 +795,19 @@
791 795 font-size: 21px;
792 796 }
793 797 }
794 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 {
795 - background: #f0f0f0;
796 - 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);
797 802 cursor: default;
798 803 opacity: 1;
799 804 }
800 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 +
801 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
802 811 position: relative;
803 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. */
804 813 background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
@@ -862,9 +871,9 @@
862 871 /* Override core line-height. To be reviewed. */
863 872 line-height: normal;
864 873 }
865 874 }
866 -.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]) {
867 876 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
868 877 }
869 878
870 879 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
@@ -1734,9 +1743,9 @@
1734 1743
1735 1744 .dataviews-view-table th {
1736 1745 text-align: left;
1737 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1738 - font-weight: normal;
1747 + font-weight: 400;
1739 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1740 1749 }
1741 1750
1742 1751 .dataviews-view-table td,
@@ -2836,9 +2845,10 @@
2836 2845 align-items: center;
2837 2846 overflow: clip;
2838 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2839 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2840 - word-break: break-word;
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2841 2851 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2842 2852 }
2843 2853
2844 2854 .dataforms-layouts-panel__field-control:has(a, button) {
@@ -3486,9 +3496,10 @@
3486 3496 padding-inline-start: 0 !important;
3487 3497 }
3488 3498
3489 3499 .fields-controls__slug .fields-controls__slug-help-link {
3490 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3491 3502 }
3492 3503
3493 3504 .fields-controls__slug .fields-controls__slug-help {
3494 3505 display: flex;
@@ -3763,13 +3774,13 @@
3763 3774 position: relative;
3764 3775 }
3765 3776
3766 3777 .font-library__font-card .font-library__font-card__name {
3767 - font-weight: bold;
3778 + font-weight: 700;
3768 3779 }
3769 3780
3770 3781 .font-library__font-card .font-library__font-card__count {
3771 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3772 3783 }
3773 3784
3774 3785 .font-library__font-card .font-library__font-variant_demo-image {
3775 3786 display: block;
@@ -3829,9 +3840,9 @@
3829 3840 width: 80%;
3830 3841 }
3831 3842
3832 3843 .font-library__local-fonts .font-library__upload-area__text {
3833 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3834 3845 }
3835 3846
3836 3847 .font-library__google-fonts-confirm {
3837 3848 display: flex;
@@ -3866,113 +3877,22 @@
3866 3877 .font-library__select-all .components-checkbox-control__label {
3867 3878 padding-left: 16px;
3868 3879 }
3869 3880
3870 -.global-styles-ui-pagination .components-button.is-tertiary {
3871 - width: 32px;
3872 - height: 32px;
3873 - justify-content: center;
3874 -}
3875 -
3876 -.global-styles-ui-screen-revisions__revisions-list {
3877 - list-style: none;
3878 - margin: 0 16px 16px 16px;
3879 - flex-grow: 1;
3880 -}
3881 -
3882 -.global-styles-ui-screen-revisions__revisions-list li {
3883 - margin-bottom: 0;
3884 -}
3885 -
3886 -.global-styles-ui-screen-revisions__revision-item {
3887 - position: relative;
3888 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3889 3882 display: flex;
3890 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3891 3886 }
3892 3887
3893 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3894 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3895 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3896 3890 }
3897 3891
3898 -.global-styles-ui-screen-revisions__revision-item:hover {
3899 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3900 -}
3901 -
3902 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3903 - color: var(--wp-admin-theme-color);
3904 -}
3905 -
3906 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3907 - position: absolute;
3908 - content: "\a";
3909 - display: block;
3910 -}
3911 -
3912 -.global-styles-ui-screen-revisions__revision-item::before {
3913 - background: #ddd;
3914 - border-radius: 50%;
3915 - height: 8px;
3916 - width: 8px;
3917 - top: 18px;
3918 - left: 17px;
3919 - transform: translate(-50%, -50%);
3920 - z-index: 1;
3921 - border: 4px solid transparent;
3922 -}
3923 -
3924 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3925 - border-radius: 2px;
3926 - outline: 3px solid transparent;
3927 - outline-offset: -2px;
3928 - color: var(--wp-admin-theme-color);
3929 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3930 -}
3931 -
3932 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3933 - color: var(--wp-admin-theme-color);
3934 -}
3935 -
3936 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3937 - background: var(--wp-admin-theme-color);
3938 -}
3939 -
3940 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3941 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3942 - color: #1e1e1e;
3943 -}
3944 -
3945 -.global-styles-ui-screen-revisions__revision-item::after {
3946 - height: 100%;
3947 - left: 16px;
3948 - top: 0;
3949 - width: 0;
3950 - border: 0.5px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3951 -}
3952 -
3953 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3954 - top: 18px;
3955 -}
3956 -
3957 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3958 - height: 18px;
3959 -}
3960 -
3961 -.global-styles-ui-screen-revisions__revision-item-wrapper {
3962 - display: block;
3963 - padding: 12px 12px 4px 40px;
3964 -}
3965 -
3966 -.global-styles-ui-screen-revisions__apply-button.is-primary,
3967 -.global-styles-ui-screen-revisions__active-badge {
3968 - align-self: flex-start;
3969 - margin: 0 12px 12px 40px;
3970 -}
3971 -
3972 -.global-styles-ui-screen-revisions__changes,
3973 -.global-styles-ui-screen-revisions__meta {
3974 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3975 3895 font-size: 12px;
3976 3896 }
3977 3897
3978 3898 .global-styles-ui-screen-revisions__description {
@@ -3981,11 +3901,11 @@
3981 3901 align-items: flex-start;
3982 3902 gap: 8px;
3983 3903 }
3984 3904
3985 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3986 - text-transform: uppercase;
3987 - 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;
3988 3908 font-size: 12px;
3989 3909 }
3990 3910
3991 3911 .global-styles-ui-screen-revisions__meta {
@@ -3991,11 +3911,10 @@
3991 3911 .global-styles-ui-screen-revisions__meta {
3992 3912 display: flex;
3993 3913 justify-content: start;
3994 3914 width: 100%;
3995 - align-items: flex-start;
3915 + align-items: center;
3996 3916 text-align: left;
3997 - margin-bottom: 4px;
3998 3917 }
3999 3918
4000 3919 .global-styles-ui-screen-revisions__meta img {
4001 3920 width: 16px;
@@ -4003,16 +3922,12 @@
4003 3922 border-radius: 100%;
4004 3923 margin-right: 8px;
4005 3924 }
4006 3925
4007 -.global-styles-ui-screen-revisions__loading {
4008 - margin: 24px auto !important;
4009 -}
4010 -
4011 3926 .global-styles-ui-screen-revisions__changes {
4012 3927 text-align: left;
4013 3928 line-height: 1.4;
4014 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
4015 3930 list-style: disc;
4016 3931 }
4017 3932
4018 3933 .global-styles-ui-screen-revisions__changes li {
@@ -4018,47 +3933,8 @@
4018 3933 .global-styles-ui-screen-revisions__changes li {
4019 3934 margin-bottom: 4px;
4020 3935 }
4021 3936
4022 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
4023 - justify-content: space-between;
4024 - gap: 2px;
4025 -}
4026 -
4027 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
4028 - position: absolute;
4029 - left: -1000px;
4030 - height: 1px;
4031 - margin: -1px;
4032 - overflow: hidden;
4033 -}
4034 -
4035 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
4036 - font-size: 12px;
4037 - will-change: opacity;
4038 -}
4039 -
4040 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
4041 - color: #1e1e1e;
4042 -}
4043 -
4044 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
4045 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
4046 - color: #949494;
4047 -}
4048 -
4049 -.global-styles-ui-screen-revisions__footer {
4050 - height: 56px;
4051 - z-index: 1;
4052 - position: sticky;
4053 - min-width: 100%;
4054 - bottom: 0;
4055 - background: #fff;
4056 - padding: 12px;
4057 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4058 - box-sizing: border-box;
4059 -}
4060 -
4061 3937 .global-styles-ui-variations_item {
4062 3938 box-sizing: border-box;
4063 3939 cursor: var(--wpds-cursor-control, pointer);
4064 3940 }
@@ -4208,10 +4084,20 @@
4208 4084
4209 4085 .global-styles-ui__color-indicator-wrapper {
4210 4086 height: 24px;
4211 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4212 4090 }
4213 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 +
4214 4100 .global-styles-ui__shadows-panel__options-container,
4215 4101 .global-styles-ui__typography-panel__options-container {
4216 4102 height: 24px;
4217 4103 }
@@ -4223,9 +4109,10 @@
4223 4109 border-radius: 2px;
4224 4110 overflow: hidden;
4225 4111 }
4226 4112
4227 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4228 4115 height: 144px;
4229 4116 border: #ddd 1px solid;
4230 4117 border-radius: 2px;
4231 4118 overflow: auto;
@@ -4235,9 +4122,9 @@
4235 4122 /*rtl:end:ignore*/
4236 4123 background-size: 16px 16px;
4237 4124 }
4238 4125
4239 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
4240 4127 border: #ddd 1px solid;
4241 4128 border-radius: 2px;
4242 4129 background-color: #fff;
4243 4130 width: 60%;
@@ -4243,22 +4130,44 @@
4243 4130 width: 60%;
4244 4131 height: 60px;
4245 4132 }
4246 4133
4247 -.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 {
4248 4154 width: 280px;
4249 4155 }
4250 4156
4251 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
4252 4159 margin-bottom: 4px;
4253 4160 }
4254 4161
4255 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
4256 4164 width: 100%;
4257 4165 position: relative;
4258 4166 }
4259 4167
4260 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4261 4170 width: 100%;
4262 4171 height: auto;
4263 4172 padding-top: 8px;
4264 4173 padding-bottom: 8px;
@@ -4265,14 +4174,16 @@
4265 4174 text-align: left;
4266 4175 border-radius: inherit;
4267 4176 }
4268 4177
4269 -.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 {
4270 4180 background: #f0f0f0;
4271 4181 color: var(--wp-admin-theme-color);
4272 4182 }
4273 4183
4274 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
4275 4186 position: absolute;
4276 4187 right: 8px;
4277 4188 top: 8px;
4278 4189 opacity: 0;
@@ -4277,14 +4188,19 @@
4277 4188 top: 8px;
4278 4189 opacity: 0;
4279 4190 }
4280 4191
4281 -.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 {
4282 4197 opacity: 1;
4283 4198 }
4284 4199
4285 4200 @media (hover: none) {
4286 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
4287 4203 opacity: 1;
4288 4204 }
4289 4205 }
4290 4206 .global-styles-ui-screen-css {
@@ -4459,12 +4375,8 @@
4459 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4460 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4461 4377 color: var(--wp-admin-theme-color);
4462 4378 }
4463 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4464 - flex-grow: 1;
4465 - align-items: flex-start;
4466 -}
4467 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4468 4380 padding: 8px;
4469 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4470 4382 border-radius: 100%;
@@ -4510,10 +4422,12 @@
4510 4422 }
4511 4423
4512 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4513 4425 height: 100%;
4426 + padding: 16px;
4514 4427 text-align: start;
4515 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4516 4430 }
4517 4431
4518 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4519 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);