| @@ -163,11 +163,8 @@ | ||
| 163 | 163 | } |
| 164 | 164 | .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover { |
| 165 | 165 | color: var(--wp-admin-theme-color); |
| 166 | 166 | } |
| 167 | -.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus { | |
| 168 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 169 | -} | |
| 170 | 167 | .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading { |
| 171 | 168 | height: 100%; |
| 172 | 169 | position: absolute; |
| 173 | 170 | z-index: 1; |
| @@ -260,11 +257,11 @@ | ||
| 260 | 257 | z-index: 159890; |
| 261 | 258 | } |
| 262 | 259 | |
| 263 | 260 | .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content { |
| 264 | - width: 226px; | |
| 261 | + width: auto; | |
| 265 | 262 | } |
| 266 | -.block-editor-global-styles-background-panel__media-replace-popover .components-button { | |
| 263 | +.block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button { | |
| 267 | 264 | padding: 0 8px; |
| 268 | 265 | } |
| 269 | 266 | .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right { |
| 270 | 267 | margin-right: 16px; |
| @@ -298,13 +295,8 @@ | ||
| 298 | 295 | } |
| 299 | 296 | .block-editor-block-icon.has-colors svg { |
| 300 | 297 | fill: currentColor; |
| 301 | 298 | } |
| 302 | -@media (forced-colors: active) { | |
| 303 | - .block-editor-block-icon.has-colors svg { | |
| 304 | - fill: CanvasText; | |
| 305 | - } | |
| 306 | -} | |
| 307 | 299 | .block-editor-block-icon svg { |
| 308 | 300 | min-width: 20px; |
| 309 | 301 | min-height: 20px; |
| 310 | 302 | max-width: 24px; |
| @@ -347,8 +339,21 @@ | ||
| 347 | 339 | padding: 32px 16px; |
| 348 | 340 | text-align: center; |
| 349 | 341 | } |
| 350 | 342 | |
| 343 | +.block-editor-block-inspector__state-badges { | |
| 344 | + display: flex; | |
| 345 | + align-items: center; | |
| 346 | + flex-wrap: wrap; | |
| 347 | + gap: 8px; | |
| 348 | + padding: 8px 16px; | |
| 349 | + margin-top: -16px; | |
| 350 | +} | |
| 351 | + | |
| 352 | +.block-editor-block-inspector__state-badges-text { | |
| 353 | + white-space: nowrap; | |
| 354 | +} | |
| 355 | + | |
| 351 | 356 | .block-editor-block-inspector__no-block-tools { |
| 352 | 357 | border-top: 1px solid #ddd; |
| 353 | 358 | } |
| 354 | 359 | |
| @@ -475,8 +480,14 @@ | ||
| 475 | 480 | } |
| 476 | 481 | .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent { |
| 477 | 482 | margin-right: 0; |
| 478 | 483 | } |
| 484 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) { | |
| 485 | + margin-right: calc(48px + 24px + 12px + 8px + 2 * 1px); | |
| 486 | +} | |
| 487 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) { | |
| 488 | + margin-right: 0; | |
| 489 | +} | |
| 479 | 490 | .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar { |
| 480 | 491 | overflow: visible; |
| 481 | 492 | } |
| 482 | 493 | .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group, |
| @@ -497,8 +508,67 @@ | ||
| 497 | 508 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector { |
| 498 | 509 | position: absolute; |
| 499 | 510 | right: calc(-48px - 8px - 1px); |
| 500 | 511 | } |
| 512 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) { | |
| 513 | + right: calc(-48px - 24px - 12px - 8px - 3 * 1px); | |
| 514 | + border: 1px solid #1e1e1e; | |
| 515 | + border-radius: 2px; | |
| 516 | + background-color: #fff; | |
| 517 | +} | |
| 518 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) > .components-toolbar-group:last-child { | |
| 519 | + border-left: none; | |
| 520 | +} | |
| 521 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) .block-editor-block-parent-selector__button { | |
| 522 | + border: none; | |
| 523 | + background: none; | |
| 524 | +} | |
| 525 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon { | |
| 526 | + color: #fff; | |
| 527 | + background: transparent; | |
| 528 | +} | |
| 529 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after { | |
| 530 | + content: ""; | |
| 531 | + position: absolute; | |
| 532 | + z-index: -1; | |
| 533 | + top: 50%; | |
| 534 | + right: 50%; | |
| 535 | + transform: translate(50%, -50%); | |
| 536 | + width: 24px; | |
| 537 | + height: 24px; | |
| 538 | + border-radius: 2px; | |
| 539 | + background: #1e1e1e; | |
| 540 | +} | |
| 541 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover { | |
| 542 | + color: #fff; | |
| 543 | +} | |
| 544 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after { | |
| 545 | + background: var(--wp-admin-theme-color); | |
| 546 | +} | |
| 547 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon { | |
| 548 | + width: auto; | |
| 549 | + padding: 0 12px; | |
| 550 | + color: inherit; | |
| 551 | +} | |
| 552 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon svg { | |
| 553 | + display: none; | |
| 554 | +} | |
| 555 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after { | |
| 556 | + content: attr(aria-label); | |
| 557 | + position: static; | |
| 558 | + transform: none; | |
| 559 | + width: auto; | |
| 560 | + height: auto; | |
| 561 | + border-radius: 0; | |
| 562 | + background: none; | |
| 563 | + white-space: nowrap; | |
| 564 | +} | |
| 565 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover { | |
| 566 | + color: var(--wp-admin-theme-color); | |
| 567 | +} | |
| 568 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after { | |
| 569 | + background: none; | |
| 570 | +} | |
| 501 | 571 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before { |
| 502 | 572 | content: ""; |
| 503 | 573 | } |
| 504 | 574 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after { |
| @@ -578,9 +648,9 @@ | ||
| 578 | 648 | } |
| 579 | 649 | .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon { |
| 580 | 650 | flex-shrink: 0; |
| 581 | 651 | margin-left: 12px; |
| 582 | - fill: #1e1e1e; | |
| 652 | + color: #1e1e1e; | |
| 583 | 653 | } |
| 584 | 654 | .block-editor-block-lock-modal__checklist-item:hover { |
| 585 | 655 | background-color: #f0f0f0; |
| 586 | 656 | border-radius: 2px; |
| @@ -688,8 +758,9 @@ | ||
| 688 | 758 | display: flex; |
| 689 | 759 | align-items: center; |
| 690 | 760 | flex-wrap: wrap; |
| 691 | 761 | gap: 4px 8px; |
| 762 | + overflow-wrap: anywhere; | |
| 692 | 763 | } |
| 693 | 764 | .block-editor-block-card__title.block-editor-block-card__title { |
| 694 | 765 | font-size: 13px; |
| 695 | 766 | line-height: 1.4; |
| @@ -793,11 +864,9 @@ | ||
| 793 | 864 | height: 48px; |
| 794 | 865 | padding: 0 13px; |
| 795 | 866 | position: relative; |
| 796 | 867 | -webkit-user-select: none; |
| 797 | - -moz-user-select: none; | |
| 798 | 868 | user-select: none; |
| 799 | - width: -moz-max-content; | |
| 800 | 869 | width: max-content; |
| 801 | 870 | } |
| 802 | 871 | .block-editor-block-draggable-chip svg { |
| 803 | 872 | fill: currentColor; |
| @@ -897,8 +966,9 @@ | ||
| 897 | 966 | } |
| 898 | 967 | .block-editor-block-manager__checklist-item .block-editor-block-icon { |
| 899 | 968 | margin-left: 10px; |
| 900 | 969 | fill: #1e1e1e; |
| 970 | + color: #1e1e1e; | |
| 901 | 971 | } |
| 902 | 972 | |
| 903 | 973 | .block-editor-block-manager__results { |
| 904 | 974 | border-top: 1px solid #ddd; |
| @@ -987,16 +1057,8 @@ | ||
| 987 | 1057 | animation: components-button__appear-animation 0.1s ease; |
| 988 | 1058 | animation-fill-mode: forwards; |
| 989 | 1059 | } |
| 990 | 1060 | } |
| 991 | -.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before { | |
| 992 | - box-shadow: none; | |
| 993 | - outline: none; | |
| 994 | -} | |
| 995 | -.components-button.block-editor-block-mover-button:focus-visible::before { | |
| 996 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 997 | - outline: 2px solid transparent; | |
| 998 | -} | |
| 999 | 1061 | |
| 1000 | 1062 | .block-editor-block-navigation__container { |
| 1001 | 1063 | min-width: 280px; |
| 1002 | 1064 | } |
| @@ -1069,9 +1131,9 @@ | ||
| 1069 | 1131 | min-width: 24px; |
| 1070 | 1132 | height: 24px; |
| 1071 | 1133 | } |
| 1072 | 1134 | .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon { |
| 1073 | - fill: var(--wp-block-synced-color); | |
| 1135 | + color: var(--wp-block-synced-color); | |
| 1074 | 1136 | } |
| 1075 | 1137 | |
| 1076 | 1138 | .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination { |
| 1077 | 1139 | border-top: 1px solid #2f2f2f; |
| @@ -1097,9 +1159,8 @@ | ||
| 1097 | 1159 | } |
| 1098 | 1160 | .components-popover.block-editor-block-popover .components-popover__content { |
| 1099 | 1161 | margin: 0 !important; |
| 1100 | 1162 | min-width: auto; |
| 1101 | - width: -moz-max-content; | |
| 1102 | 1163 | width: max-content; |
| 1103 | 1164 | overflow-y: visible; |
| 1104 | 1165 | } |
| 1105 | 1166 | .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * { |
| @@ -1184,40 +1245,19 @@ | ||
| 1184 | 1245 | grid-column: 1/-1; |
| 1185 | 1246 | } |
| 1186 | 1247 | |
| 1187 | 1248 | .block-editor-block-styles__variants { |
| 1188 | - display: flex; | |
| 1189 | - flex-wrap: wrap; | |
| 1190 | - justify-content: space-between; | |
| 1249 | + display: grid; | |
| 1191 | 1250 | gap: 8px; |
| 1192 | 1251 | } |
| 1193 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item { | |
| 1194 | - color: #1e1e1e; | |
| 1195 | - border-color: #ddd; | |
| 1196 | - display: inline-block; | |
| 1197 | - width: calc(50% - 4px); | |
| 1252 | +.block-editor-block-styles__variants .block-editor-block-styles__row { | |
| 1253 | + display: grid; | |
| 1254 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 1255 | + gap: 8px; | |
| 1198 | 1256 | } |
| 1199 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover { | |
| 1200 | - color: var(--wp-admin-theme-color); | |
| 1201 | - box-shadow: inset 0 0 0 1px #ddd; | |
| 1202 | -} | |
| 1203 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover { | |
| 1204 | - background-color: #1e1e1e; | |
| 1205 | - box-shadow: none; | |
| 1206 | -} | |
| 1207 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text { | |
| 1208 | - color: #fff; | |
| 1209 | -} | |
| 1210 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus { | |
| 1211 | - 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)); | |
| 1212 | - outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 1213 | -} | |
| 1214 | 1257 | .block-editor-block-styles__variants .block-editor-block-styles__item-text { |
| 1215 | - word-break: break-all; | |
| 1216 | - white-space: normal; | |
| 1217 | 1258 | text-align: start; |
| 1218 | - -moz-text-align-last: center; | |
| 1219 | - text-align-last: center; | |
| 1259 | + text-align-last: center; | |
| 1220 | 1260 | } |
| 1221 | 1261 | |
| 1222 | 1262 | .components-popover.block-editor-block-switcher__popover .components-popover__content { |
| 1223 | 1263 | min-width: 300px; |
| @@ -1320,22 +1360,19 @@ | ||
| 1320 | 1360 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar { |
| 1321 | 1361 | justify-content: center; |
| 1322 | 1362 | } |
| 1323 | 1363 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { |
| 1324 | - -moz-column-gap: 24px; | |
| 1325 | - column-gap: 24px; | |
| 1364 | + column-gap: 24px; | |
| 1326 | 1365 | display: block; |
| 1327 | 1366 | width: 100%; |
| 1328 | 1367 | padding: 32px; |
| 1329 | 1368 | padding-bottom: 0; |
| 1330 | 1369 | padding-top: 0; |
| 1331 | - -moz-column-count: 2; | |
| 1332 | - column-count: 2; | |
| 1370 | + column-count: 2; | |
| 1333 | 1371 | } |
| 1334 | 1372 | @media (min-width: 1440px) { |
| 1335 | 1373 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { |
| 1336 | - -moz-column-count: 3; | |
| 1337 | - column-count: 3; | |
| 1374 | + column-count: 3; | |
| 1338 | 1375 | } |
| 1339 | 1376 | } |
| 1340 | 1377 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container, |
| 1341 | 1378 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] { |
| @@ -1355,10 +1392,9 @@ | ||
| 1355 | 1392 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title { |
| 1356 | 1393 | color: var(--wp-admin-theme-color); |
| 1357 | 1394 | } |
| 1358 | 1395 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item { |
| 1359 | - -moz-column-break-inside: avoid; | |
| 1360 | - break-inside: avoid-column; | |
| 1396 | + break-inside: avoid-column; | |
| 1361 | 1397 | margin-bottom: 24px; |
| 1362 | 1398 | } |
| 1363 | 1399 | .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title { |
| 1364 | 1400 | padding-top: 8px; |
| @@ -1508,12 +1544,8 @@ | ||
| 1508 | 1544 | margin: 0; |
| 1509 | 1545 | min-width: 0; |
| 1510 | 1546 | } |
| 1511 | 1547 | |
| 1512 | -.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) { | |
| 1513 | - display: block; | |
| 1514 | -} | |
| 1515 | - | |
| 1516 | 1548 | @media screen and (min-width: 782px) { |
| 1517 | 1549 | .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches { |
| 1518 | 1550 | display: grid; |
| 1519 | 1551 | grid-template-columns: repeat(6, 28px); |
| @@ -1521,8 +1553,18 @@ | ||
| 1521 | 1553 | } |
| 1522 | 1554 | .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control { |
| 1523 | 1555 | margin-bottom: inherit; |
| 1524 | 1556 | } |
| 1557 | +.block-editor-panel-color-gradient-settings { | |
| 1558 | + /* Increased specificity required to remove the slot wrapper's row gap */ | |
| 1559 | +} | |
| 1560 | +.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper { | |
| 1561 | + grid-column: 1/-1; | |
| 1562 | + row-gap: 0; | |
| 1563 | +} | |
| 1564 | +.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper > * { | |
| 1565 | + grid-column: 1/-1; | |
| 1566 | +} | |
| 1525 | 1567 | |
| 1526 | 1568 | .block-editor-panel-color-gradient-settings__dropdown-content { |
| 1527 | 1569 | min-height: 160px; |
| 1528 | 1570 | } |
| @@ -1586,8 +1628,9 @@ | ||
| 1586 | 1628 | background: #f0f0f0; |
| 1587 | 1629 | color: var(--wp-admin-theme-color); |
| 1588 | 1630 | } |
| 1589 | 1631 | .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name { |
| 1632 | + min-width: 0; | |
| 1590 | 1633 | white-space: nowrap; |
| 1591 | 1634 | overflow: hidden; |
| 1592 | 1635 | text-overflow: ellipsis; |
| 1593 | 1636 | max-width: calc(100% - 44px); |
| @@ -1602,8 +1645,21 @@ | ||
| 1602 | 1645 | .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator { |
| 1603 | 1646 | flex-shrink: 0; |
| 1604 | 1647 | } |
| 1605 | 1648 | |
| 1649 | +.block-editor-panel-color-gradient-settings__labeled-indicators { | |
| 1650 | + width: 100%; | |
| 1651 | + min-width: 0; | |
| 1652 | +} | |
| 1653 | + | |
| 1654 | +.block-editor-panel-color-gradient-settings__color-indicators { | |
| 1655 | + display: flex; | |
| 1656 | + flex-shrink: 0; | |
| 1657 | +} | |
| 1658 | +.block-editor-panel-color-gradient-settings__color-indicators > * + * { | |
| 1659 | + margin-inline-start: -8px; | |
| 1660 | +} | |
| 1661 | + | |
| 1606 | 1662 | .block-editor-panel-color-gradient-settings__reset { |
| 1607 | 1663 | position: absolute; |
| 1608 | 1664 | left: 0; |
| 1609 | 1665 | top: 8px; |
| @@ -1733,8 +1789,17 @@ | ||
| 1733 | 1789 | .block-editor-global-styles__shadow-dropdown-toggle.is-open { |
| 1734 | 1790 | background-color: #f0f0f0; |
| 1735 | 1791 | } |
| 1736 | 1792 | |
| 1793 | +.block-editor-panel-duotone-settings__label-row { | |
| 1794 | + width: 100%; | |
| 1795 | + min-width: 0; | |
| 1796 | +} | |
| 1797 | + | |
| 1798 | +.block-editor-panel-duotone-settings__label { | |
| 1799 | + min-width: 0; | |
| 1800 | +} | |
| 1801 | + | |
| 1737 | 1802 | .block-editor-global-styles__shadow-editor__remove-button { |
| 1738 | 1803 | position: absolute; |
| 1739 | 1804 | left: 0; |
| 1740 | 1805 | top: 8px; |
| @@ -1755,11 +1820,9 @@ | ||
| 1755 | 1820 | } |
| 1756 | 1821 | } |
| 1757 | 1822 | |
| 1758 | 1823 | .block-editor-global-styles__shadow-indicator { |
| 1759 | - -webkit-appearance: none; | |
| 1760 | - -moz-appearance: none; | |
| 1761 | - appearance: none; | |
| 1824 | + appearance: none; | |
| 1762 | 1825 | background: none; |
| 1763 | 1826 | color: #2f2f2f; |
| 1764 | 1827 | border: #e0e0e0 1px solid; |
| 1765 | 1828 | border-radius: 2px; |
| @@ -1818,8 +1881,72 @@ | ||
| 1818 | 1881 | opacity: 1; |
| 1819 | 1882 | } |
| 1820 | 1883 | } |
| 1821 | 1884 | |
| 1885 | +.block-editor-global-styles__text-shadow { | |
| 1886 | + width: 260px; | |
| 1887 | + padding: 8px; | |
| 1888 | +} | |
| 1889 | + | |
| 1890 | +.block-editor-global-styles__text-shadow-preview { | |
| 1891 | + display: flex; | |
| 1892 | + align-items: center; | |
| 1893 | + justify-content: center; | |
| 1894 | + height: 80px; | |
| 1895 | + border: #ddd 1px solid; | |
| 1896 | + border-radius: 2px; | |
| 1897 | + font-size: 24px; | |
| 1898 | + margin-bottom: 16px; | |
| 1899 | + background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); | |
| 1900 | + background-position: 0 0, 8px 8px; | |
| 1901 | + background-size: 16px 16px; | |
| 1902 | +} | |
| 1903 | + | |
| 1904 | +.block-editor-global-styles__text-shadow-list-item { | |
| 1905 | + justify-content: space-between; | |
| 1906 | + gap: 8px; | |
| 1907 | + width: 100%; | |
| 1908 | +} | |
| 1909 | +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg { | |
| 1910 | + opacity: 0; | |
| 1911 | +} | |
| 1912 | + | |
| 1913 | +.block-editor-global-styles__text-shadow-dropdown { | |
| 1914 | + display: block; | |
| 1915 | + padding: 0; | |
| 1916 | + position: relative; | |
| 1917 | + border: 1px solid #ddd; | |
| 1918 | + border-radius: 2px; | |
| 1919 | +} | |
| 1920 | + | |
| 1921 | +.block-editor-global-styles__text-shadow-dropdown-toggle { | |
| 1922 | + width: 100%; | |
| 1923 | + padding: 8px; | |
| 1924 | +} | |
| 1925 | +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open { | |
| 1926 | + background-color: #f0f0f0; | |
| 1927 | +} | |
| 1928 | + | |
| 1929 | +.block-editor-global-styles__text-shadow-remove-button { | |
| 1930 | + position: absolute; | |
| 1931 | + left: 8px; | |
| 1932 | + top: 8px; | |
| 1933 | + opacity: 0; | |
| 1934 | +} | |
| 1935 | +@media not (prefers-reduced-motion) { | |
| 1936 | + .block-editor-global-styles__text-shadow-remove-button { | |
| 1937 | + transition: opacity 0.1s ease-in-out; | |
| 1938 | + } | |
| 1939 | +} | |
| 1940 | +.block-editor-global-styles__text-shadow-dropdown:hover .block-editor-global-styles__text-shadow-remove-button, .block-editor-global-styles__text-shadow-remove-button:focus, .block-editor-global-styles__text-shadow-remove-button:hover { | |
| 1941 | + opacity: 1; | |
| 1942 | +} | |
| 1943 | +@media (hover: none) { | |
| 1944 | + .block-editor-global-styles__text-shadow-remove-button { | |
| 1945 | + opacity: 1; | |
| 1946 | + } | |
| 1947 | +} | |
| 1948 | + | |
| 1822 | 1949 | .is-inherited-from-global-styles .components-base-control__label, |
| 1823 | 1950 | .is-inherited-from-global-styles .components-input-control__label { |
| 1824 | 1951 | text-decoration-line: underline; |
| 1825 | 1952 | text-decoration-style: dotted; |
| @@ -2039,16 +2166,8 @@ | ||
| 2039 | 2166 | animation: components-button__appear-animation 0.1s ease; |
| 2040 | 2167 | animation-fill-mode: forwards; |
| 2041 | 2168 | } |
| 2042 | 2169 | } |
| 2043 | -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before { | |
| 2044 | - box-shadow: none; | |
| 2045 | - outline: none; | |
| 2046 | -} | |
| 2047 | -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before { | |
| 2048 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 2049 | - outline: 2px solid transparent; | |
| 2050 | -} | |
| 2051 | 2170 | |
| 2052 | 2171 | .block-editor-grid-item-mover__move-vertical-button-container { |
| 2053 | 2172 | display: flex; |
| 2054 | 2173 | position: relative; |
| @@ -2162,8 +2281,27 @@ | ||
| 2162 | 2281 | position: absolute; |
| 2163 | 2282 | left: 0; |
| 2164 | 2283 | } |
| 2165 | 2284 | |
| 2285 | +.wp-block-image__crop-area { | |
| 2286 | + position: relative; | |
| 2287 | + max-width: 100%; | |
| 2288 | + width: 100%; | |
| 2289 | + overflow: hidden; | |
| 2290 | +} | |
| 2291 | +.wp-block-image__crop-area .reactEasyCrop_Container { | |
| 2292 | + pointer-events: auto; | |
| 2293 | +} | |
| 2294 | +.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image { | |
| 2295 | + border: none; | |
| 2296 | + border-radius: 0; | |
| 2297 | +} | |
| 2298 | + | |
| 2299 | +.wp-block-image__zoom .components-popover__content { | |
| 2300 | + min-width: 260px; | |
| 2301 | + overflow: visible !important; | |
| 2302 | +} | |
| 2303 | + | |
| 2166 | 2304 | .block-editor-block-types-list__list-item { |
| 2167 | 2305 | display: block; |
| 2168 | 2306 | width: 33.33%; |
| 2169 | 2307 | padding: 0; |
| @@ -2193,9 +2331,10 @@ | ||
| 2193 | 2331 | align-items: stretch; |
| 2194 | 2332 | justify-content: center; |
| 2195 | 2333 | cursor: var(--wpds-cursor-control, pointer); |
| 2196 | 2334 | background: transparent; |
| 2197 | - word-break: break-word; | |
| 2335 | + word-break: normal; | |
| 2336 | + overflow-wrap: break-word; | |
| 2198 | 2337 | } |
| 2199 | 2338 | @media not (prefers-reduced-motion) { |
| 2200 | 2339 | .components-button.block-editor-block-types-list__item { |
| 2201 | 2340 | transition: all 0.05s ease-in-out; |
| @@ -2450,9 +2589,9 @@ | ||
| 2450 | 2589 | width: 32px; |
| 2451 | 2590 | max-height: 32px; |
| 2452 | 2591 | } |
| 2453 | 2592 | .block-editor-link-control__preview .block-editor-link-control__preview-title { |
| 2454 | - line-height: 1.1; | |
| 2593 | + line-height: var(--wpds-typography-line-height-sm, 20px); | |
| 2455 | 2594 | } |
| 2456 | 2595 | .block-editor-link-control__preview .block-editor-link-control__preview-title:focus { |
| 2457 | 2596 | box-shadow: none; |
| 2458 | 2597 | } |
| @@ -2466,9 +2605,9 @@ | ||
| 2466 | 2605 | color: inherit; |
| 2467 | 2606 | background-color: transparent; |
| 2468 | 2607 | } |
| 2469 | 2608 | .block-editor-link-control__preview .block-editor-link-control__preview-title span { |
| 2470 | - font-weight: normal; | |
| 2609 | + font-weight: 400; | |
| 2471 | 2610 | } |
| 2472 | 2611 | .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon { |
| 2473 | 2612 | position: absolute; |
| 2474 | 2613 | width: 1px; |
| @@ -2475,9 +2614,9 @@ | ||
| 2475 | 2614 | height: 1px; |
| 2476 | 2615 | padding: 0; |
| 2477 | 2616 | margin: -1px; |
| 2478 | 2617 | overflow: hidden; |
| 2479 | - clip: rect(0, 0, 0, 0); | |
| 2618 | + clip-path: inset(50%); | |
| 2480 | 2619 | border: 0; |
| 2481 | 2620 | } |
| 2482 | 2621 | |
| 2483 | 2622 | .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg, |
| @@ -2631,10 +2770,9 @@ | ||
| 2631 | 2770 | |
| 2632 | 2771 | .link-preview-button__image { |
| 2633 | 2772 | width: 100%; |
| 2634 | 2773 | height: 100%; |
| 2635 | - -o-object-fit: cover; | |
| 2636 | - object-fit: cover; | |
| 2774 | + object-fit: cover; | |
| 2637 | 2775 | border-radius: 2px; |
| 2638 | 2776 | } |
| 2639 | 2777 | |
| 2640 | 2778 | .link-preview-button__content { |
| @@ -2696,8 +2834,11 @@ | ||
| 2696 | 2834 | .block-editor-list-view-leaf { |
| 2697 | 2835 | position: relative; |
| 2698 | 2836 | transform: translateY(0); |
| 2699 | 2837 | } |
| 2838 | +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting { | |
| 2839 | + z-index: 1; | |
| 2840 | +} | |
| 2700 | 2841 | .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents { |
| 2701 | 2842 | cursor: grab; |
| 2702 | 2843 | } |
| 2703 | 2844 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] { |
| @@ -2708,13 +2849,8 @@ | ||
| 2708 | 2849 | } |
| 2709 | 2850 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg { |
| 2710 | 2851 | fill: currentColor; |
| 2711 | 2852 | } |
| 2712 | -@media (forced-colors: active) { | |
| 2713 | - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg { | |
| 2714 | - fill: CanvasText; | |
| 2715 | - } | |
| 2716 | -} | |
| 2717 | 2853 | .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover { |
| 2718 | 2854 | color: inherit; |
| 2719 | 2855 | } |
| 2720 | 2856 | .block-editor-list-view-leaf.is-selected td { |
| @@ -2726,23 +2862,45 @@ | ||
| 2726 | 2862 | .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus, |
| 2727 | 2863 | .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon { |
| 2728 | 2864 | color: var(--wp-block-synced-color); |
| 2729 | 2865 | } |
| 2730 | -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after { | |
| 2731 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); | |
| 2866 | +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after { | |
| 2867 | + --focus-color: var(--wp-block-synced-color); | |
| 2732 | 2868 | } |
| 2869 | +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus { | |
| 2870 | + --focus-color: var(--wp-block-synced-color); | |
| 2871 | + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9))); | |
| 2872 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 2873 | +} | |
| 2733 | 2874 | .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon { |
| 2734 | 2875 | color: #fff; |
| 2735 | 2876 | } |
| 2736 | -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after { | |
| 2737 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); | |
| 2877 | +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2878 | + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff); | |
| 2879 | + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9))); | |
| 2880 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 2881 | + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))); | |
| 2738 | 2882 | } |
| 2739 | -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after { | |
| 2740 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); | |
| 2883 | +@media (forced-colors: active) { | |
| 2884 | + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td { | |
| 2885 | + background: SelectedItem; | |
| 2886 | + } | |
| 2887 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon { | |
| 2888 | + color: SelectedItemText; | |
| 2889 | + } | |
| 2890 | + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg { | |
| 2891 | + fill: SelectedItemText; | |
| 2892 | + } | |
| 2893 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title { | |
| 2894 | + forced-color-adjust: none; | |
| 2895 | + } | |
| 2896 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after { | |
| 2897 | + --focus-color: CanvasText; | |
| 2898 | + } | |
| 2899 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2900 | + --focus-color: SelectedItemText; | |
| 2901 | + } | |
| 2741 | 2902 | } |
| 2742 | -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2743 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff; | |
| 2744 | -} | |
| 2745 | 2903 | .block-editor-list-view-leaf.is-first-selected td:first-child { |
| 2746 | 2904 | border-top-right-radius: 2px; |
| 2747 | 2905 | } |
| 2748 | 2906 | .block-editor-list-view-leaf.is-first-selected td:last-child { |
| @@ -2864,8 +3022,9 @@ | ||
| 2864 | 3022 | } |
| 2865 | 3023 | .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents, |
| 2866 | 3024 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus { |
| 2867 | 3025 | box-shadow: none; |
| 3026 | + outline: none; | |
| 2868 | 3027 | } |
| 2869 | 3028 | .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after, |
| 2870 | 3029 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { |
| 2871 | 3030 | content: ""; |
| @@ -2870,13 +3029,16 @@ | ||
| 2870 | 3029 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { |
| 2871 | 3030 | content: ""; |
| 2872 | 3031 | position: absolute; |
| 2873 | 3032 | top: 0; |
| 2874 | - left: -29px; | |
| 3033 | + left: -28px; | |
| 2875 | 3034 | bottom: 0; |
| 2876 | 3035 | right: 0; |
| 2877 | 3036 | border-radius: inherit; |
| 2878 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); | |
| 3037 | + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9))); | |
| 3038 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 3039 | + outline-offset: 1px; | |
| 3040 | + box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff); | |
| 2879 | 3041 | z-index: 2; |
| 2880 | 3042 | pointer-events: none; |
| 2881 | 3043 | } |
| 2882 | 3044 | .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after { |
| @@ -2881,12 +3043,8 @@ | ||
| 2881 | 3043 | } |
| 2882 | 3044 | .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after { |
| 2883 | 3045 | left: 0; |
| 2884 | 3046 | } |
| 2885 | -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu { | |
| 2886 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); | |
| 2887 | - z-index: 1; | |
| 2888 | -} | |
| 2889 | 3047 | .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents { |
| 2890 | 3048 | opacity: 1; |
| 2891 | 3049 | } |
| 2892 | 3050 | @keyframes __wp-base-styles-fade-in { |
| @@ -2956,14 +3114,8 @@ | ||
| 2956 | 3114 | } |
| 2957 | 3115 | .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg { |
| 2958 | 3116 | top: -4px; |
| 2959 | 3117 | } |
| 2960 | -.block-editor-list-view-leaf .block-editor-block-mover-button::before { | |
| 2961 | - height: 16px; | |
| 2962 | - min-width: 100%; | |
| 2963 | - right: 0; | |
| 2964 | - left: 0; | |
| 2965 | -} | |
| 2966 | 3118 | .block-editor-list-view-leaf .block-editor-inserter__toggle { |
| 2967 | 3119 | background: #1e1e1e; |
| 2968 | 3120 | color: #fff; |
| 2969 | 3121 | height: 24px; |
| @@ -2972,8 +3124,14 @@ | ||
| 2972 | 3124 | } |
| 2973 | 3125 | .block-editor-list-view-leaf .block-editor-inserter__toggle:active { |
| 2974 | 3126 | color: #fff; |
| 2975 | 3127 | } |
| 3128 | +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper { | |
| 3129 | + width: 100%; | |
| 3130 | +} | |
| 3131 | +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * { | |
| 3132 | + min-width: 0; | |
| 3133 | +} | |
| 2976 | 3134 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg { |
| 2977 | 3135 | right: 2px; |
| 2978 | 3136 | position: relative; |
| 2979 | 3137 | } |
| @@ -2994,8 +3152,19 @@ | ||
| 2994 | 3152 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor { |
| 2995 | 3153 | position: absolute; |
| 2996 | 3154 | left: 0; |
| 2997 | 3155 | transform: translateY(-50%); |
| 3156 | + box-sizing: border-box; | |
| 3157 | + max-width: 100%; | |
| 3158 | + padding: 2px 8px; | |
| 3159 | + border-radius: 2px; | |
| 3160 | + background: #f0f0f0; | |
| 3161 | + color: #2f2f2f; | |
| 3162 | + font-size: 12px; | |
| 3163 | + line-height: 20px; | |
| 3164 | + overflow: hidden; | |
| 3165 | + text-overflow: ellipsis; | |
| 3166 | + white-space: nowrap; | |
| 2998 | 3167 | } |
| 2999 | 3168 | .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor { |
| 3000 | 3169 | background: rgba(0, 0, 0, 0.3); |
| 3001 | 3170 | color: #fff; |
| @@ -3240,8 +3409,12 @@ | ||
| 3240 | 3409 | .block-editor-multi-selection-inspector__card-title { |
| 3241 | 3410 | font-weight: var(--wpds-typography-font-weight-emphasis, 600); |
| 3242 | 3411 | } |
| 3243 | 3412 | |
| 3413 | +.block-editor-multi-selection-inspector__card-description { | |
| 3414 | + color: #757575; | |
| 3415 | +} | |
| 3416 | + | |
| 3244 | 3417 | .block-editor-multi-selection-inspector__card .block-editor-block-icon { |
| 3245 | 3418 | margin-right: -2px; |
| 3246 | 3419 | padding: 0 3px; |
| 3247 | 3420 | width: 36px; |
| @@ -3247,8 +3420,13 @@ | ||
| 3247 | 3420 | width: 36px; |
| 3248 | 3421 | height: 24px; |
| 3249 | 3422 | } |
| 3250 | 3423 | |
| 3424 | +.block-editor-plain-text { | |
| 3425 | + width: 100%; | |
| 3426 | + field-sizing: content; | |
| 3427 | +} | |
| 3428 | + | |
| 3251 | 3429 | .block-editor-responsive-block-control { |
| 3252 | 3430 | margin-bottom: 28px; |
| 3253 | 3431 | border-bottom: 1px solid #ccc; |
| 3254 | 3432 | padding-bottom: 14px; |
| @@ -3286,9 +3464,9 @@ | ||
| 3286 | 3464 | overflow: hidden; |
| 3287 | 3465 | padding: 0; |
| 3288 | 3466 | position: absolute; |
| 3289 | 3467 | width: 1px; |
| 3290 | - word-wrap: normal !important; | |
| 3468 | + overflow-wrap: normal !important; | |
| 3291 | 3469 | word-break: normal !important; |
| 3292 | 3470 | } |
| 3293 | 3471 | |
| 3294 | 3472 | .preset-input-control__wrapper > * { |
| @@ -3541,8 +3719,13 @@ | ||
| 3541 | 3719 | padding: 16px; |
| 3542 | 3720 | border-top: 1px solid #1e1e1e; |
| 3543 | 3721 | } |
| 3544 | 3722 | |
| 3723 | +.block-editor-url-popover__link-container-content { | |
| 3724 | + display: flex; | |
| 3725 | + align-items: center; | |
| 3726 | +} | |
| 3727 | + | |
| 3545 | 3728 | .block-editor-url-popover__link-editor, |
| 3546 | 3729 | .block-editor-url-popover__link-viewer { |
| 3547 | 3730 | display: flex; |
| 3548 | 3731 | } |
| @@ -3587,174 +3770,8 @@ | ||
| 3587 | 3770 | .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper { |
| 3588 | 3771 | row-gap: 0; |
| 3589 | 3772 | } |
| 3590 | 3773 | |
| 3591 | -.block-editor-content-only-controls__link { | |
| 3592 | - width: 100%; | |
| 3593 | - border-color: #ccc; | |
| 3594 | -} | |
| 3595 | - | |
| 3596 | -.block-editor-content-only-controls__link-row { | |
| 3597 | - align-items: center; | |
| 3598 | -} | |
| 3599 | - | |
| 3600 | -.block-editor-content-only-controls__link-title { | |
| 3601 | - width: 100%; | |
| 3602 | - white-space: nowrap; | |
| 3603 | - text-overflow: ellipsis; | |
| 3604 | - overflow: hidden; | |
| 3605 | -} | |
| 3606 | - | |
| 3607 | -.block-editor-content-only-controls__media { | |
| 3608 | - width: 100%; | |
| 3609 | - border-color: #ccc; | |
| 3610 | - padding-left: 32px; | |
| 3611 | -} | |
| 3612 | - | |
| 3613 | -.block-editor-content-only-controls__media-replace-flow { | |
| 3614 | - display: block; | |
| 3615 | -} | |
| 3616 | - | |
| 3617 | -.block-editor-content-only-controls__media-row { | |
| 3618 | - align-items: center; | |
| 3619 | -} | |
| 3620 | - | |
| 3621 | -.block-editor-content-only-controls__media-placeholder { | |
| 3622 | - width: 24px; | |
| 3623 | - height: 24px; | |
| 3624 | - border-radius: 2px; | |
| 3625 | - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); | |
| 3626 | - display: inline-block; | |
| 3627 | - padding: 0; | |
| 3628 | - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); | |
| 3629 | -} | |
| 3630 | - | |
| 3631 | -.block-editor-content-only-controls__media-title { | |
| 3632 | - width: 100%; | |
| 3633 | - white-space: nowrap; | |
| 3634 | - text-overflow: ellipsis; | |
| 3635 | - overflow: hidden; | |
| 3636 | -} | |
| 3637 | - | |
| 3638 | -.block-editor-content-only-controls__media-thumbnail { | |
| 3639 | - width: 20px; | |
| 3640 | - height: 20px; | |
| 3641 | - border-radius: 2px; | |
| 3642 | - align-self: center; | |
| 3643 | - overflow: hidden; | |
| 3644 | -} | |
| 3645 | -.block-editor-content-only-controls__media-thumbnail img { | |
| 3646 | - width: 100% !important; | |
| 3647 | - height: 100% !important; | |
| 3648 | - -o-object-fit: cover; | |
| 3649 | - object-fit: cover; | |
| 3650 | -} | |
| 3651 | - | |
| 3652 | -.block-editor-content-only-controls { | |
| 3653 | - position: relative; | |
| 3654 | -} | |
| 3655 | - | |
| 3656 | -.block-editor-content-only-controls__media-reset { | |
| 3657 | - position: absolute; | |
| 3658 | - left: 0; | |
| 3659 | - top: 8px; | |
| 3660 | - margin: auto 8px auto; | |
| 3661 | - opacity: 0; | |
| 3662 | - border-radius: 2px; | |
| 3663 | -} | |
| 3664 | -@media not (prefers-reduced-motion) { | |
| 3665 | - .block-editor-content-only-controls__media-reset { | |
| 3666 | - transition: opacity 0.1s ease-in-out; | |
| 3667 | - } | |
| 3668 | -} | |
| 3669 | -.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover { | |
| 3670 | - opacity: 1; | |
| 3671 | -} | |
| 3672 | -@media (hover: none) { | |
| 3673 | - .block-editor-content-only-controls__media-reset { | |
| 3674 | - opacity: 1; | |
| 3675 | - } | |
| 3676 | -} | |
| 3677 | - | |
| 3678 | -.block-editor-content-only-controls__rich-text { | |
| 3679 | - width: 100%; | |
| 3680 | - margin: 0; | |
| 3681 | - background: #fff; | |
| 3682 | - color: #1e1e1e; | |
| 3683 | - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 3684 | - padding: 6px 8px; | |
| 3685 | - /* Fonts smaller than 16px causes mobile safari to zoom. */ | |
| 3686 | - font-size: 16px; | |
| 3687 | - /* Override core line-height. To be reviewed. */ | |
| 3688 | - line-height: normal; | |
| 3689 | - box-shadow: 0 0 0 transparent; | |
| 3690 | - border-radius: 2px; | |
| 3691 | - border: 1px solid #949494; | |
| 3692 | -} | |
| 3693 | -@media not (prefers-reduced-motion) { | |
| 3694 | - .block-editor-content-only-controls__rich-text { | |
| 3695 | - transition: box-shadow 0.1s linear; | |
| 3696 | - } | |
| 3697 | -} | |
| 3698 | -@media (min-width: 600px) { | |
| 3699 | - .block-editor-content-only-controls__rich-text { | |
| 3700 | - font-size: 13px; | |
| 3701 | - /* Override core line-height. To be reviewed. */ | |
| 3702 | - line-height: normal; | |
| 3703 | - } | |
| 3704 | -} | |
| 3705 | -.block-editor-content-only-controls__rich-text:focus { | |
| 3706 | - border-color: var(--wp-admin-theme-color, #3858e9); | |
| 3707 | - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9); | |
| 3708 | - outline: 2px solid transparent; | |
| 3709 | -} | |
| 3710 | -.block-editor-content-only-controls__rich-text::-moz-placeholder { | |
| 3711 | - color: rgba(30, 30, 30, 0.62); | |
| 3712 | -} | |
| 3713 | -.block-editor-content-only-controls__rich-text::placeholder { | |
| 3714 | - color: rgba(30, 30, 30, 0.62); | |
| 3715 | -} | |
| 3716 | -.block-editor-content-only-controls__rich-text { | |
| 3717 | - border-color: #949494; | |
| 3718 | -} | |
| 3719 | -.block-editor-content-only-controls__rich-text::-moz-placeholder { | |
| 3720 | - color: color-mix(in srgb, #1e1e1e, transparent 38%); | |
| 3721 | -} | |
| 3722 | -.block-editor-content-only-controls__rich-text::placeholder { | |
| 3723 | - color: color-mix(in srgb, #1e1e1e, transparent 38%); | |
| 3724 | -} | |
| 3725 | -.block-editor-content-only-controls__rich-text { | |
| 3726 | - min-height: 40px; | |
| 3727 | - padding: 12px; | |
| 3728 | -} | |
| 3729 | - | |
| 3730 | -.block-editor-block-fields__container { | |
| 3731 | - padding: 0 16px 16px; | |
| 3732 | -} | |
| 3733 | -.block-editor-block-fields__container:first-of-type { | |
| 3734 | - padding-block-start: 8px; | |
| 3735 | - /* | |
| 3736 | - * Add border for the entire content controls and remove the similar border | |
| 3737 | - * for tools panel. | |
| 3738 | - */ | |
| 3739 | - border-block-start: 1px solid #e0e0e0; | |
| 3740 | -} | |
| 3741 | - | |
| 3742 | -.block-editor-block-fields__header { | |
| 3743 | - padding: 8px 0; | |
| 3744 | - margin-bottom: 4px; | |
| 3745 | -} | |
| 3746 | - | |
| 3747 | -.block-editor-block-fields__header-icon { | |
| 3748 | - flex: 0 0 24px; | |
| 3749 | -} | |
| 3750 | - | |
| 3751 | -.block-editor-block-fields__header-title { | |
| 3752 | - flex: 1; | |
| 3753 | - /* Override the default margin on a h2 element. */ | |
| 3754 | - margin: 0 !important; | |
| 3755 | -} | |
| 3756 | - | |
| 3757 | 3774 | .block-editor-hooks__block-hooks { |
| 3758 | 3775 | /** |
| 3759 | 3776 | * Un-reverse the flex direction for the toggle's label. |
| 3760 | 3777 | */ |
| @@ -3767,21 +3784,8 @@ | ||
| 3767 | 3784 | font-size: 12px; |
| 3768 | 3785 | margin-bottom: 16px; |
| 3769 | 3786 | } |
| 3770 | 3787 | |
| 3771 | -.block-editor-hooks__position-control-item { | |
| 3772 | - /** | |
| 3773 | - * Try to make items match the width of the anchor, subtract any margin on | |
| 3774 | - * items to calculate the correct inner width. | |
| 3775 | - */ | |
| 3776 | - max-inline-size: max(var(--anchor-width) - 2 * var(--wp-ui-popup-padding), 223px); | |
| 3777 | -} | |
| 3778 | - | |
| 3779 | -.block-editor-hooks__position-control-item-hint { | |
| 3780 | - color: var(--wpds-color-foreground-content-neutral-weak, #707070); | |
| 3781 | - margin-block-start: 4px; | |
| 3782 | -} | |
| 3783 | - | |
| 3784 | 3788 | div.block-editor-bindings__panel { |
| 3785 | 3789 | grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); |
| 3786 | 3790 | } |
| 3787 | 3791 | div.block-editor-bindings__panel button:hover .block-editor-bindings__item span { |
| @@ -4101,9 +4105,9 @@ | ||
| 4101 | 4105 | } |
| 4102 | 4106 | .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list { |
| 4103 | 4107 | display: grid; |
| 4104 | 4108 | grid-template-columns: 1fr 1fr; |
| 4105 | - grid-gap: 12px; | |
| 4109 | + gap: 12px; | |
| 4106 | 4110 | } |
| 4107 | 4111 | .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { |
| 4108 | 4112 | margin-bottom: 0; |
| 4109 | 4113 | } |
| @@ -4289,12 +4293,8 @@ | ||
| 4289 | 4293 | .block-editor-inserter__parent-block-header .block-editor-block-icon { |
| 4290 | 4294 | margin-left: 8px; |
| 4291 | 4295 | } |
| 4292 | 4296 | |
| 4293 | -.block-editor-inserter__preview-container__popover { | |
| 4294 | - top: 16px !important; | |
| 4295 | -} | |
| 4296 | - | |
| 4297 | 4297 | .block-editor-inserter__preview-container { |
| 4298 | 4298 | display: none; |
| 4299 | 4299 | width: 280px; |
| 4300 | 4300 | padding: 16px; |
| @@ -4435,9 +4435,9 @@ | ||
| 4435 | 4435 | |
| 4436 | 4436 | .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list { |
| 4437 | 4437 | display: grid; |
| 4438 | 4438 | grid-template-columns: 1fr 1fr; |
| 4439 | - grid-gap: 8px; | |
| 4439 | + gap: 8px; | |
| 4440 | 4440 | } |
| 4441 | 4441 | .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { |
| 4442 | 4442 | margin-bottom: 0; |
| 4443 | 4443 | } |
| @@ -4452,59 +4452,54 @@ | ||
| 4452 | 4452 | .block-editor-inserter__popover.is-quick > .components-popover__content { |
| 4453 | 4453 | padding: 0; |
| 4454 | 4454 | } |
| 4455 | 4455 | |
| 4456 | -.block-editor-inserter__quick-inserter-expand.components-button { | |
| 4457 | - display: block; | |
| 4458 | - background: #1e1e1e; | |
| 4459 | - color: #fff; | |
| 4456 | +.block-editor-inserter__quick-inserter-expand { | |
| 4457 | + padding: 0 16px 16px; | |
| 4458 | +} | |
| 4459 | + | |
| 4460 | +.block-editor-inserter__quick-inserter-expand-toggle { | |
| 4460 | 4461 | width: 100%; |
| 4461 | - border-radius: 0; | |
| 4462 | + justify-content: center; | |
| 4462 | 4463 | } |
| 4463 | -.block-editor-inserter__quick-inserter-expand.components-button:hover { | |
| 4464 | - color: #fff; | |
| 4465 | -} | |
| 4466 | -.block-editor-inserter__quick-inserter-expand.components-button:active { | |
| 4467 | - color: #ccc; | |
| 4468 | -} | |
| 4469 | -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) { | |
| 4470 | - box-shadow: none; | |
| 4471 | - background: var(--wp-admin-theme-color); | |
| 4472 | - border-color: var(--wp-admin-theme-color); | |
| 4473 | -} | |
| 4474 | 4464 | |
| 4475 | 4465 | .block-editor-block-patterns-explorer__sidebar { |
| 4476 | - position: absolute; | |
| 4477 | - top: 72px; | |
| 4478 | - right: 0; | |
| 4479 | - bottom: 0; | |
| 4480 | - width: 280px; | |
| 4481 | - padding: 24px 24px 24px; | |
| 4482 | - overflow-x: visible; | |
| 4483 | - overflow-y: auto; | |
| 4466 | + padding-bottom: 24px; | |
| 4484 | 4467 | } |
| 4485 | -.block-editor-block-patterns-explorer__sidebar__categories-list__item { | |
| 4486 | - display: block; | |
| 4487 | - width: 100%; | |
| 4488 | - height: 48px; | |
| 4489 | - text-align: right; | |
| 4468 | +@media (min-width: 782px) { | |
| 4469 | + .block-editor-block-patterns-explorer__sidebar { | |
| 4470 | + position: absolute; | |
| 4471 | + top: 72px; | |
| 4472 | + right: 0; | |
| 4473 | + bottom: 0; | |
| 4474 | + width: 280px; | |
| 4475 | + padding: 24px; | |
| 4476 | + overflow-x: visible; | |
| 4477 | + overflow-y: auto; | |
| 4478 | + } | |
| 4490 | 4479 | } |
| 4491 | -.block-editor-block-patterns-explorer__search { | |
| 4492 | - margin-bottom: 32px; | |
| 4480 | + | |
| 4481 | +@media (min-width: 782px) { | |
| 4482 | + .block-editor-block-patterns-explorer__panel { | |
| 4483 | + margin-inline-start: 280px; | |
| 4484 | + } | |
| 4493 | 4485 | } |
| 4494 | -.block-editor-block-patterns-explorer__search-results-count { | |
| 4495 | - padding-bottom: 32px; | |
| 4486 | + | |
| 4487 | +.block-editor-block-patterns-explorer__no-results { | |
| 4488 | + padding: 32px; | |
| 4489 | + text-align: center; | |
| 4496 | 4490 | } |
| 4491 | + | |
| 4497 | 4492 | .block-editor-block-patterns-explorer__list { |
| 4498 | - margin-right: 280px; | |
| 4499 | 4493 | padding: 24px 0 32px; |
| 4500 | 4494 | } |
| 4501 | 4495 | .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container { |
| 4502 | 4496 | width: 380px; |
| 4503 | 4497 | } |
| 4498 | + | |
| 4504 | 4499 | .block-editor-block-patterns-explorer .block-editor-block-patterns-list { |
| 4505 | 4500 | display: grid; |
| 4506 | - grid-gap: 32px; | |
| 4501 | + gap: 32px; | |
| 4507 | 4502 | grid-template-columns: repeat(1, 1fr); |
| 4508 | 4503 | margin-bottom: 16px; |
| 4509 | 4504 | } |
| 4510 | 4505 | @media (min-width: 1080px) { |
| @@ -4834,9 +4829,9 @@ | ||
| 4834 | 4829 | .block-editor-block-visibility-modal__options-checkbox--everywhere { |
| 4835 | 4830 | font-weight: var(--wpds-typography-font-weight-emphasis, 600); |
| 4836 | 4831 | } |
| 4837 | 4832 | .block-editor-block-visibility-modal__options-icon--checked { |
| 4838 | - fill: #ddd; | |
| 4833 | + color: #ddd; | |
| 4839 | 4834 | } |
| 4840 | 4835 | .block-editor-block-visibility-modal__sub-options { |
| 4841 | 4836 | width: 100%; |
| 4842 | 4837 | padding-inline-start: 12px; |
| @@ -4846,11 +4841,52 @@ | ||
| 4846 | 4841 | color: #757575; |
| 4847 | 4842 | } |
| 4848 | 4843 | |
| 4849 | 4844 | .block-editor-block-visibility-info { |
| 4850 | - padding-top: 4px; | |
| 4851 | - padding-bottom: 4px; | |
| 4852 | 4845 | margin: 0 16px 16px; |
| 4853 | - display: flex; | |
| 4854 | - align-items: center; | |
| 4855 | - justify-content: start; | |
| 4846 | +} | |
| 4847 | + | |
| 4848 | +/* The stop element is invisible, so its focus indication is drawn around the | |
| 4849 | + canvas it stands for. For the iframed canvas it is an overlay instead of | |
| 4850 | + an outline, because Safari paints an outline on an iframe element | |
| 4851 | + underneath the iframe's content. */ | |
| 4852 | +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after { | |
| 4853 | + content: ""; | |
| 4854 | + position: absolute; | |
| 4855 | + inset: 0; | |
| 4856 | + z-index: 1; | |
| 4857 | + pointer-events: none; | |
| 4858 | + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); | |
| 4859 | +} | |
| 4860 | + | |
| 4861 | +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow { | |
| 4862 | + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); | |
| 4863 | + outline-offset: calc(-1 * var(--wp-admin-border-width-focus)); | |
| 4864 | +} | |
| 4865 | + | |
| 4866 | +/* Looks like a tooltip. Shown at the top of the canvas while the stop is | |
| 4867 | + focused. Sticky, because on the widgets screen the stop spans scrolling | |
| 4868 | + content and the hint must stay in view; anywhere else there is nothing | |
| 4869 | + to scroll and it stays at the top of the canvas. */ | |
| 4870 | +.block-editor-writing-flow__canvas-stop-hint { | |
| 4871 | + display: none; | |
| 4872 | + position: sticky; | |
| 4873 | + top: 16px; | |
| 4874 | + margin-inline: auto; | |
| 4875 | + width: fit-content; | |
| 4876 | + z-index: 2; | |
| 4877 | + background: #000; | |
| 4878 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 4879 | + border-radius: 4px; | |
| 4880 | + color: #f0f0f0; | |
| 4881 | + text-align: center; | |
| 4882 | + line-height: 1.4; | |
| 4883 | + font-size: 12px; | |
| 4884 | + padding: 4px 8px; | |
| 4885 | + 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); | |
| 4886 | + white-space: nowrap; | |
| 4887 | + pointer-events: none; | |
| 4888 | +} | |
| 4889 | + | |
| 4890 | +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint { | |
| 4891 | + display: block; | |
| 4856 | 4892 | } |
