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/block-library/style.css +414 -221 23.5.2 → trunk View file →
@@ -57,11 +57,13 @@
57 57 align-items: center;
58 58 justify-content: center;
59 59 }
60 60
61 -.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
62 - display: none;
61 +.wp-block-accordion-panel[hidden] {
62 + border: none !important;
63 + box-shadow: none !important;
63 64 margin-block-start: 0;
65 + padding: 0 !important;
64 66 }
65 67
66 68 .wp-block-archives {
67 69 box-sizing: border-box;
@@ -151,8 +153,14 @@
151 153 /**
152 154 * Focus styles.
153 155 */
154 156 /**
157 + * Standard focus rings for the WordPress Design System.
158 + *
159 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
160 + * e.g. `&:focus { @include outset-ring__focus(); }`.
161 + */
162 +/**
155 163 * Applies editor left position to the selector passed as argument
156 164 */
157 165 /**
158 166 * Styles that are reused verbatim in a few places
@@ -212,9 +220,10 @@
212 220 .wp-block-button__link {
213 221 cursor: pointer;
214 222 display: inline-block;
215 223 text-align: center;
216 - word-break: break-word;
224 + word-break: normal;
225 + overflow-wrap: anywhere;
217 226 box-sizing: border-box;
218 227 height: 100%;
219 228 align-content: center;
220 229 }
@@ -417,9 +426,10 @@
417 426 }
418 427 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
419 428 text-align: center;
420 429 }
421 -.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
430 +
431 +:where(.wp-block-categories__label:not(.screen-reader-text)) {
422 432 width: 100%;
423 433 display: block;
424 434 }
425 435
@@ -491,15 +501,15 @@
491 501 margin-bottom: 1.75em;
492 502 }
493 503
494 504 :where(.wp-block-columns.has-background) {
495 - padding: 1.25em 2.375em;
505 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
496 506 }
497 507
498 508 .wp-block-column {
499 509 flex-grow: 1;
500 510 min-width: 0;
501 - word-break: break-word;
511 + word-break: normal;
502 512 overflow-wrap: break-word;
503 513 /**
504 514 * Individual Column Alignment
505 515 */
@@ -578,9 +588,9 @@
578 588 font-size: 0.875em;
579 589 line-height: 1.5;
580 590 }
581 591 .wp-block-post-comments .comment-meta b {
582 - font-weight: normal;
592 + font-weight: 400;
583 593 }
584 594 .wp-block-post-comments .comment-meta .comment-awaiting-moderation {
585 595 margin-top: 1em;
586 596 margin-bottom: 1em;
@@ -588,15 +598,8 @@
588 598 }
589 599 .wp-block-post-comments .comment-body .commentmetadata {
590 600 font-size: 0.875em;
591 601 }
592 -.wp-block-post-comments .comment-form-comment label,
593 -.wp-block-post-comments .comment-form-author label,
594 -.wp-block-post-comments .comment-form-email label,
595 -.wp-block-post-comments .comment-form-url label {
596 - display: block;
597 - margin-bottom: 0.25em;
598 -}
599 602 .wp-block-post-comments .comment-form textarea,
600 603 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
601 604 display: block;
602 605 box-sizing: border-box;
@@ -630,8 +633,16 @@
630 633 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
631 634 padding: calc(0.667em + 2px);
632 635 }
633 636
637 +:where(.wp-block-post-comments .comment-form-comment label),
638 +:where(.wp-block-post-comments .comment-form-author label),
639 +:where(.wp-block-post-comments .comment-form-email label),
640 +:where(.wp-block-post-comments .comment-form-url label) {
641 + display: block;
642 + margin-bottom: 0.25em;
643 +}
644 +
634 645 :where(.wp-block-post-comments input[type=submit]) {
635 646 border: none;
636 647 }
637 648
@@ -683,9 +694,8 @@
683 694 }
684 695 .wp-block-comment-template.aligncenter {
685 696 margin-left: auto;
686 697 margin-right: auto;
687 - width: -moz-fit-content;
688 698 width: fit-content;
689 699 }
690 700 .wp-block-comment-template.alignright {
691 701 float: right;
@@ -1007,14 +1017,19 @@
1007 1017 width: 100%;
1008 1018 height: 100%;
1009 1019 max-width: none;
1010 1020 max-height: none;
1011 - -o-object-fit: cover;
1012 - object-fit: cover;
1021 + object-fit: cover;
1013 1022 outline: none;
1014 1023 border: none;
1015 1024 box-shadow: none;
1016 1025 }
1026 +@supports (-webkit-hyphens: none) {
1027 + .wp-block-cover-image.has-aspect-ratio,
1028 + .wp-block-cover.has-aspect-ratio {
1029 + min-height: fit-content !important;
1030 + }
1031 +}
1017 1032 .wp-block-cover-image .wp-block-cover__embed-background,
1018 1033 .wp-block-cover .wp-block-cover__embed-background {
1019 1034 position: absolute;
1020 1035 top: 0;
@@ -1305,57 +1320,8 @@
1305 1320 opacity: 0.85;
1306 1321 text-decoration: none;
1307 1322 }
1308 1323
1309 -.wp-block-form-input__label {
1310 - width: 100%;
1311 - display: flex;
1312 - flex-direction: column;
1313 - gap: 0.25em;
1314 - margin-bottom: 0.5em;
1315 -}
1316 -.wp-block-form-input__label.is-label-inline {
1317 - flex-direction: row;
1318 - gap: 0.5em;
1319 - align-items: center;
1320 -}
1321 -.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
1322 - margin-bottom: 0.5em;
1323 -}
1324 -.wp-block-form-input__label:has(input[type=checkbox]) {
1325 - flex-direction: row;
1326 - width: -moz-fit-content;
1327 - width: fit-content;
1328 -}
1329 -.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
1330 - margin: 0;
1331 -}
1332 -.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
1333 - /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
1334 - flex-direction: row-reverse;
1335 -}
1336 -
1337 -.wp-block-form-input__label-content {
1338 - width: -moz-fit-content;
1339 - width: fit-content;
1340 -}
1341 -
1342 -:where(.wp-block-form-input__input) {
1343 - padding: 0 0.5em;
1344 - font-size: 1em;
1345 - margin-bottom: 0.5em;
1346 -}
1347 -:where(.wp-block-form-input__input)[type=text], :where(.wp-block-form-input__input)[type=password], :where(.wp-block-form-input__input)[type=date], :where(.wp-block-form-input__input)[type=datetime], :where(.wp-block-form-input__input)[type=datetime-local], :where(.wp-block-form-input__input)[type=email], :where(.wp-block-form-input__input)[type=month], :where(.wp-block-form-input__input)[type=number], :where(.wp-block-form-input__input)[type=search], :where(.wp-block-form-input__input)[type=tel], :where(.wp-block-form-input__input)[type=time], :where(.wp-block-form-input__input)[type=url], :where(.wp-block-form-input__input)[type=week] {
1348 - min-height: 2em;
1349 - line-height: 2;
1350 - border-width: 1px;
1351 - border-style: solid;
1352 -}
1353 -
1354 -textarea.wp-block-form-input__input {
1355 - min-height: 10em;
1356 -}
1357 -
1358 1324 .wp-block-gallery:not(.has-nested-images),
1359 1325 .blocks-gallery-grid:not(.has-nested-images) {
1360 1326 display: flex;
1361 1327 flex-wrap: wrap;
@@ -1437,10 +1403,9 @@
1437 1403 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
1438 1404 width: 100%;
1439 1405 height: 100%;
1440 1406 flex: 1;
1441 - -o-object-fit: cover;
1442 - object-fit: cover;
1407 + object-fit: cover;
1443 1408 }
1444 1409 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
1445 1410 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
1446 1411 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
@@ -1545,37 +1510,104 @@
1545 1510 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
1546 1511 align-self: flex-start;
1547 1512 }
1548 1513
1549 -figure.wp-block-gallery.has-nested-images {
1514 +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
1550 1515 align-items: normal;
1551 1516 }
1552 1517
1553 -.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
1518 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
1554 1519 width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
1555 1520 margin: 0;
1556 1521 }
1557 -.wp-block-gallery.has-nested-images figure.wp-block-image {
1522 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
1558 1523 display: flex;
1559 1524 flex-grow: 1;
1560 1525 justify-content: center;
1561 - position: relative;
1562 1526 flex-direction: column;
1563 1527 max-width: 100%;
1564 1528 box-sizing: border-box;
1565 1529 }
1566 -.wp-block-gallery.has-nested-images figure.wp-block-image > div,
1567 -.wp-block-gallery.has-nested-images figure.wp-block-image > a {
1530 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
1531 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
1568 1532 margin: 0;
1569 1533 flex-direction: column;
1570 1534 flex-grow: 1;
1571 1535 }
1572 -.wp-block-gallery.has-nested-images figure.wp-block-image img {
1536 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
1573 1537 display: block;
1574 1538 height: auto;
1575 1539 max-width: 100% !important;
1576 1540 width: auto;
1577 1541 }
1542 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
1543 + flex-grow: 1;
1544 + flex-basis: 100%;
1545 + text-align: center;
1546 +}
1547 +.wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1548 + margin-top: 0;
1549 + margin-bottom: auto;
1550 +}
1551 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
1552 + align-self: inherit;
1553 +}
1554 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1555 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
1556 + display: flex;
1557 +}
1558 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
1559 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
1560 + width: 100%;
1561 + flex: 1 0 0%;
1562 + height: 100%;
1563 + object-fit: cover;
1564 +}
1565 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
1566 + width: 100%;
1567 +}
1568 +@media (min-width: 600px) {
1569 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
1570 + width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1571 + }
1572 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
1573 + width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1574 + }
1575 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
1576 + width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1577 + }
1578 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
1579 + width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1580 + }
1581 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
1582 + width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1583 + }
1584 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
1585 + width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1586 + }
1587 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
1588 + width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1589 + }
1590 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
1591 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
1592 + width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1593 + }
1594 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
1595 + width: 100%;
1596 + }
1597 +}
1598 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
1599 + max-width: 420px;
1600 + width: 100%;
1601 +}
1602 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
1603 + justify-content: center;
1604 +}
1605 +
1606 +.wp-block-gallery.has-nested-images figure.wp-block-image {
1607 + position: relative;
1608 + margin: 0;
1609 +}
1578 1610 .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
1579 1611 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1580 1612 position: absolute;
1581 1613 bottom: 0;
@@ -1588,10 +1620,9 @@
1588 1620 height: 100%;
1589 1621 max-height: 3em;
1590 1622 pointer-events: none;
1591 1623 backdrop-filter: blur(3px);
1592 - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1593 - mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1624 + mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1594 1625 }
1595 1626 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1596 1627 color: #fff;
1597 1628 text-shadow: 0 0 1.5px #000;
@@ -1662,72 +1693,13 @@
1662 1693 }
1663 1694 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded::before, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border::before {
1664 1695 content: none;
1665 1696 }
1666 -.wp-block-gallery.has-nested-images figcaption {
1667 - flex-grow: 1;
1668 - flex-basis: 100%;
1697 +
1698 +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
1699 + grid-column: 1/-1;
1669 1700 text-align: center;
1670 1701 }
1671 -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1672 - margin-top: 0;
1673 - margin-bottom: auto;
1674 -}
1675 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
1676 - align-self: inherit;
1677 -}
1678 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1679 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
1680 - display: flex;
1681 -}
1682 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
1683 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
1684 - width: 100%;
1685 - flex: 1 0 0%;
1686 - height: 100%;
1687 - -o-object-fit: cover;
1688 - object-fit: cover;
1689 -}
1690 -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
1691 - width: 100%;
1692 -}
1693 -@media (min-width: 600px) {
1694 - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
1695 - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1696 - }
1697 - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
1698 - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1699 - }
1700 - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
1701 - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1702 - }
1703 - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
1704 - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1705 - }
1706 - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
1707 - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1708 - }
1709 - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
1710 - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1711 - }
1712 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
1713 - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1714 - }
1715 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
1716 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
1717 - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1718 - }
1719 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
1720 - width: 100%;
1721 - }
1722 -}
1723 -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
1724 - max-width: 420px;
1725 - width: 100%;
1726 -}
1727 -.wp-block-gallery.has-nested-images.aligncenter {
1728 - justify-content: center;
1729 -}
1730 1702
1731 1703 .wp-block-group {
1732 1704 box-sizing: border-box;
1733 1705 }
@@ -1741,9 +1713,9 @@
1741 1713 h3:where(.wp-block-heading).has-background,
1742 1714 h4:where(.wp-block-heading).has-background,
1743 1715 h5:where(.wp-block-heading).has-background,
1744 1716 h6:where(.wp-block-heading).has-background {
1745 - padding: 1.25em 2.375em;
1717 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
1746 1718 }
1747 1719 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
1748 1720 h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),
1749 1721 h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
@@ -1786,12 +1758,16 @@
1786 1758 :where(.wp-block-icon) svg {
1787 1759 width: 100%;
1788 1760 height: 100%;
1789 1761 }
1762 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1763 + vector-effect: none;
1764 +}
1790 1765
1791 1766 .wp-block-image > a,
1792 1767 .wp-block-image > figure > a {
1793 1768 display: inline-block;
1769 + color: inherit;
1794 1770 }
1795 1771 .wp-block-image img {
1796 1772 height: auto;
1797 1773 max-width: 100%;
@@ -1866,20 +1842,15 @@
1866 1842 }
1867 1843 .wp-block-image.is-style-circle-mask img {
1868 1844 border-radius: 9999px;
1869 1845 }
1870 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1846 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1871 1847 .wp-block-image.is-style-circle-mask img {
1872 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1873 - -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1874 - mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1848 + mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1875 1849 mask-mode: alpha;
1876 - -webkit-mask-repeat: no-repeat;
1877 - mask-repeat: no-repeat;
1878 - -webkit-mask-size: contain;
1879 - mask-size: contain;
1880 - -webkit-mask-position: center;
1881 - mask-position: center;
1850 + mask-repeat: no-repeat;
1851 + mask-size: contain;
1852 + mask-position: center;
1882 1853 border-radius: 0;
1883 1854 }
1884 1855 }
1885 1856
@@ -2259,49 +2230,54 @@
2259 2230 .wp-block-latest-posts.wp-block-latest-posts__list li {
2260 2231 clear: both;
2261 2232 overflow-wrap: break-word;
2262 2233 }
2263 -.wp-block-latest-posts.is-grid {
2234 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2264 2235 display: flex;
2265 2236 flex-wrap: wrap;
2266 2237 }
2267 -.wp-block-latest-posts.is-grid li {
2238 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2268 2239 margin: 0 1.25em 1.25em 0;
2269 2240 width: 100%;
2270 2241 }
2271 2242 @media (min-width: 600px) {
2272 - .wp-block-latest-posts.columns-2 li {
2243 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2273 2244 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2274 2245 }
2275 - .wp-block-latest-posts.columns-2 li:nth-child(2n) {
2246 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
2276 2247 margin-right: 0;
2277 2248 }
2278 - .wp-block-latest-posts.columns-3 li {
2249 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2279 2250 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2280 2251 }
2281 - .wp-block-latest-posts.columns-3 li:nth-child(3n) {
2252 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
2282 2253 margin-right: 0;
2283 2254 }
2284 - .wp-block-latest-posts.columns-4 li {
2255 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2285 2256 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2286 2257 }
2287 - .wp-block-latest-posts.columns-4 li:nth-child(4n) {
2258 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
2288 2259 margin-right: 0;
2289 2260 }
2290 - .wp-block-latest-posts.columns-5 li {
2261 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2291 2262 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2292 2263 }
2293 - .wp-block-latest-posts.columns-5 li:nth-child(5n) {
2264 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
2294 2265 margin-right: 0;
2295 2266 }
2296 - .wp-block-latest-posts.columns-6 li {
2267 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2297 2268 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2298 2269 }
2299 - .wp-block-latest-posts.columns-6 li:nth-child(6n) {
2270 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
2300 2271 margin-right: 0;
2301 2272 }
2302 2273 }
2303 2274
2275 +@media (max-width: 600px) {
2276 + .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
2277 + grid-template-columns: 1fr;
2278 + }
2279 +}
2304 2280 :root :where(.wp-block-latest-posts.is-grid) {
2305 2281 padding: 0;
2306 2282 }
2307 2283 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2350,9 +2326,9 @@
2350 2326 box-sizing: border-box;
2351 2327 }
2352 2328
2353 2329 :root :where(.wp-block-list.has-background) {
2354 - padding: 1.25em 2.375em;
2330 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2355 2331 }
2356 2332
2357 2333 .wp-block-loginout {
2358 2334 box-sizing: border-box;
@@ -2455,9 +2431,9 @@
2455 2431 height: 1px;
2456 2432 padding: 0;
2457 2433 margin: -1px;
2458 2434 overflow: hidden;
2459 - clip: rect(0, 0, 0, 0);
2435 + clip-path: inset(50%);
2460 2436 border: 0;
2461 2437 }
2462 2438
2463 2439 /* Image fill for versions 8 and onwards */
@@ -2475,10 +2451,9 @@
2475 2451 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2476 2452 position: absolute;
2477 2453 width: 100%;
2478 2454 height: 100%;
2479 - -o-object-fit: cover;
2480 - object-fit: cover;
2455 + object-fit: cover;
2481 2456 }
2482 2457
2483 2458 /*
2484 2459 * Here we here not able to use a mobile first CSS approach.
@@ -2574,9 +2549,16 @@
2574 2549 .wp-block-navigation.is-vertical {
2575 2550 --navigation-layout-direction: column;
2576 2551 --navigation-layout-justify: initial;
2577 2552 --navigation-layout-align: flex-start;
2553 + text-align: var(--navigation-layout-text-align, inherit);
2578 2554 }
2555 +.wp-block-navigation.is-vertical .wp-block-navigation-item__content {
2556 + text-align: inherit;
2557 +}
2558 +.wp-block-navigation.is-vertical .wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
2559 + text-align: initial;
2560 +}
2579 2561 .wp-block-navigation.no-wrap {
2580 2562 --navigation-layout-wrap: nowrap;
2581 2563 }
2582 2564 .wp-block-navigation.items-justified-center {
@@ -2581,8 +2563,9 @@
2581 2563 }
2582 2564 .wp-block-navigation.items-justified-center {
2583 2565 --navigation-layout-justification-setting: center;
2584 2566 --navigation-layout-justify: center;
2567 + --navigation-layout-text-align: center;
2585 2568 }
2586 2569 .wp-block-navigation.items-justified-center.is-vertical {
2587 2570 --navigation-layout-align: center;
2588 2571 }
@@ -2588,8 +2571,9 @@
2588 2571 }
2589 2572 .wp-block-navigation.items-justified-right {
2590 2573 --navigation-layout-justification-setting: flex-end;
2591 2574 --navigation-layout-justify: flex-end;
2575 + --navigation-layout-text-align: end;
2592 2576 }
2593 2577 .wp-block-navigation.items-justified-right.is-vertical {
2594 2578 --navigation-layout-align: flex-end;
2595 2579 }
@@ -2660,9 +2644,9 @@
2660 2644 transform: rotate(-90deg);
2661 2645 }
2662 2646 }
2663 2647 @media (hover: hover) {
2664 - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
2648 + .wp-block-navigation .has-child:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
2665 2649 visibility: visible;
2666 2650 overflow: visible;
2667 2651 opacity: 1;
2668 2652 width: auto;
@@ -2669,10 +2653,9 @@
2669 2653 height: auto;
2670 2654 min-width: 200px;
2671 2655 }
2672 2656 }
2673 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2674 -.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2657 +.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2675 2658 visibility: visible;
2676 2659 overflow: visible;
2677 2660 opacity: 1;
2678 2661 width: auto;
@@ -2720,8 +2703,9 @@
2720 2703 position: static;
2721 2704 border: none;
2722 2705 background-color: transparent;
2723 2706 color: inherit;
2707 + box-shadow: none !important;
2724 2708 }
2725 2709
2726 2710 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2727 2711 left: 0;
@@ -2927,8 +2911,9 @@
2927 2911 display: flex;
2928 2912 flex-direction: column;
2929 2913 flex-wrap: nowrap;
2930 2914 align-items: var(--navigation-layout-justification-setting, inherit);
2915 + text-align: var(--navigation-layout-text-align, inherit);
2931 2916 }
2932 2917 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2933 2918 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2934 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2954,11 +2939,13 @@
2954 2939 gap: inherit;
2955 2940 }
2956 2941 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
2957 2942 padding-top: var(--wp--style--block-gap, 2em);
2943 + text-align: inherit;
2958 2944 }
2959 2945 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
2960 2946 padding: 0;
2947 + text-align: inherit;
2961 2948 }
2962 2949 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2963 2950 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2964 2951 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2972,8 +2959,11 @@
2972 2959 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2973 2960 color: inherit !important;
2974 2961 background: transparent !important;
2975 2962 }
2963 +.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container {
2964 + box-shadow: none !important;
2965 +}
2976 2966 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
2977 2967 right: auto;
2978 2968 left: auto;
2979 2969 }
@@ -3019,9 +3009,9 @@
3019 3009 }
3020 3010
3021 3011 .wp-block-navigation__toggle_button_label {
3022 3012 font-size: 1rem;
3023 - font-weight: bold;
3013 + font-weight: 700;
3024 3014 }
3025 3015
3026 3016 .wp-block-navigation__responsive-container-open,
3027 3017 .wp-block-navigation__responsive-container-close {
@@ -3129,8 +3119,20 @@
3129 3119 margin-left: 8px;
3130 3120 text-transform: uppercase;
3131 3121 }
3132 3122
3123 +:where(.wp-block-navigation-overlay-close) {
3124 + color: inherit;
3125 + font-family: inherit;
3126 + font-size: inherit;
3127 + font-style: inherit;
3128 + font-weight: inherit;
3129 + letter-spacing: inherit;
3130 + line-height: inherit;
3131 + text-transform: inherit;
3132 + border: none;
3133 +}
3134 +
3133 3135 .wp-block-navigation-overlay-close {
3134 3136 display: inline-flex;
3135 3137 align-items: center;
3136 3138 justify-content: center;
@@ -3135,9 +3137,8 @@
3135 3137 align-items: center;
3136 3138 justify-content: center;
3137 3139 gap: 0.5em;
3138 3140 padding: 0;
3139 - border: none;
3140 3141 background: transparent;
3141 3142 cursor: pointer;
3142 3143 text-decoration: none;
3143 3144 }
@@ -3207,9 +3208,9 @@
3207 3208 overflow: hidden;
3208 3209 }
3209 3210
3210 3211 :root :where(p.has-background) {
3211 - padding: 1.25em 2.375em;
3212 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3212 3213 }
3213 3214
3214 3215 :where(p.has-text-color:not(.has-link-color)) a {
3215 3216 color: inherit;
@@ -3222,11 +3223,23 @@
3222 3223
3223 3224 .waveform-player {
3224 3225 font-family: inherit;
3225 3226 color: inherit;
3226 - line-height: 1.4;
3227 + line-height: var(--waveform-line-height, 1.4);
3228 + --wfp-accent: #71717a;
3229 + --wfp-button-color: rgba(255, 255, 255, .9);
3230 + --wfp-text-color: #ffffff;
3231 + --wfp-text-secondary-color: rgba(255, 255, 255, .6);
3232 + --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
3233 + --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
3227 3234 }
3228 3235
3236 +.waveform-player.waveform-theme-light {
3237 + --wfp-button-color: rgba(0, 0, 0, .8);
3238 + --wfp-text-color: #333333;
3239 + --wfp-text-secondary-color: rgba(0, 0, 0, .6);
3240 +}
3241 +
3229 3242 .waveform-player * {
3230 3243 box-sizing: border-box;
3231 3244 }
3232 3245
@@ -3232,26 +3245,26 @@
3232 3245
3233 3246 .waveform-body {
3234 3247 display: flex;
3235 3248 flex-direction: column;
3236 - gap: 8px;
3249 + gap: var(--waveform-body-gap, 8px);
3237 3250 }
3238 3251
3239 3252 .waveform-track {
3240 3253 display: flex;
3241 3254 align-items: center;
3242 - gap: 12px;
3255 + gap: var(--waveform-track-gap, 12px);
3243 3256 position: relative;
3244 3257 }
3245 3258
3246 3259 .waveform-btn {
3247 - width: 36px;
3248 - height: 36px;
3249 - min-width: 36px;
3250 - border-radius: 50%;
3260 + width: var(--wfp-btn-size, 36px);
3261 + height: var(--wfp-btn-size, 36px);
3262 + min-width: var(--wfp-btn-size, 36px);
3263 + border-radius: var(--wfp-btn-radius, 50%);
3251 3264 border: 2px solid currentColor;
3252 3265 background: transparent;
3253 - color: inherit;
3266 + color: var(--wfp-button-color, inherit);
3254 3267 cursor: pointer;
3255 3268 display: flex;
3256 3269 align-items: center;
3257 3270 justify-content: center;
@@ -3265,8 +3278,27 @@
3265 3278 opacity: 1;
3266 3279 transform: scale(1.05);
3267 3280 }
3268 3281
3282 +.waveform-btn-minimal {
3283 + width: calc(var(--wfp-btn-size, 36px) * 1.1);
3284 + height: calc(var(--wfp-btn-size, 36px) * 1.1);
3285 + min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
3286 + border: none;
3287 + border-radius: 0;
3288 + opacity: 0.7;
3289 +}
3290 +
3291 +.waveform-btn-minimal:hover:not(:disabled) {
3292 + opacity: 1;
3293 + transform: none;
3294 +}
3295 +
3296 +.waveform-btn.waveform-btn-minimal svg {
3297 + width: calc(var(--wfp-btn-size, 36px) * 0.94);
3298 + height: calc(var(--wfp-btn-size, 36px) * 0.94);
3299 +}
3300 +
3269 3301 .waveform-btn:disabled {
3270 3302 cursor: not-allowed;
3271 3303 opacity: 0.3;
3272 3304 }
@@ -3279,14 +3311,48 @@
3279 3311 height: 100%;
3280 3312 }
3281 3313
3282 3314 .waveform-btn svg {
3283 - width: 16px;
3284 - height: 16px;
3315 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3316 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3285 3317 fill: currentColor;
3286 3318 display: block;
3287 3319 }
3288 3320
3321 +.waveform-btn-has-artwork {
3322 + --wfp-btn-size: 64px;
3323 + --wfp-btn-radius: 8px;
3324 + position: relative;
3325 + overflow: hidden;
3326 + border: none;
3327 + color: var(--wfp-btn-artwork-color);
3328 +}
3329 +
3330 +.waveform-btn > .waveform-btn-artwork {
3331 + display: block;
3332 + position: absolute;
3333 + inset: 0;
3334 + width: 100%;
3335 + height: 100%;
3336 + object-fit: cover;
3337 + pointer-events: none;
3338 + z-index: 0;
3339 +}
3340 +
3341 +.waveform-btn-has-artwork:after {
3342 + content: "";
3343 + position: absolute;
3344 + inset: 0;
3345 + background: var(--wfp-btn-artwork-scrim);
3346 + pointer-events: none;
3347 + z-index: 1;
3348 +}
3349 +
3350 +.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
3351 + position: relative;
3352 + z-index: 2;
3353 +}
3354 +
3289 3355 .waveform-icon-play svg {
3290 3356 margin-left: 1px;
3291 3357 }
3292 3358
@@ -3298,8 +3364,12 @@
3298 3364 min-width: 0;
3299 3365 width: 100%;
3300 3366 }
3301 3367
3368 +.waveform-container:focus-visible {
3369 + outline: 2px solid currentColor;
3370 +}
3371 +
3302 3372 .waveform-container canvas {
3303 3373 display: block;
3304 3374 width: 100%;
3305 3375 height: 100%;
@@ -3325,8 +3395,9 @@
3325 3395 min-width: 0;
3326 3396 }
3327 3397
3328 3398 .waveform-title {
3399 + color: var(--wfp-text-color);
3329 3400 white-space: nowrap;
3330 3401 overflow: hidden;
3331 3402 text-overflow: ellipsis;
3332 3403 font-weight: 500;
@@ -3331,9 +3402,10 @@
3331 3402 text-overflow: ellipsis;
3332 3403 font-weight: 500;
3333 3404 }
3334 3405
3335 -.waveform-subtitle {
3406 +.waveform-artist {
3407 + color: var(--wfp-text-secondary-color);
3336 3408 font-size: 11px;
3337 3409 white-space: nowrap;
3338 3410 overflow: hidden;
3339 3411 text-overflow: ellipsis;
@@ -3339,8 +3411,9 @@
3339 3411 text-overflow: ellipsis;
3340 3412 }
3341 3413
3342 3414 .waveform-time {
3415 + color: var(--wfp-text-secondary-color);
3343 3416 font-size: 11px;
3344 3417 white-space: nowrap;
3345 3418 flex-shrink: 0;
3346 3419 }
@@ -3345,8 +3418,9 @@
3345 3418 flex-shrink: 0;
3346 3419 }
3347 3420
3348 3421 .waveform-bpm {
3422 + color: var(--wfp-text-secondary-color);
3349 3423 font-size: 11px;
3350 3424 white-space: nowrap;
3351 3425 flex-shrink: 0;
3352 3426 display: inline-flex;
@@ -3402,8 +3476,14 @@
3402 3476 width: 4px;
3403 3477 z-index: 20;
3404 3478 }
3405 3479
3480 +.waveform-marker.active {
3481 + width: 4px;
3482 + background: currentColor;
3483 + z-index: 10;
3484 +}
3485 +
3406 3486 .waveform-marker-tooltip {
3407 3487 position: absolute;
3408 3488 bottom: calc(100% + 4px);
3409 3489 left: 50%;
@@ -3419,12 +3499,54 @@
3419 3499 transition: opacity 0.2s;
3420 3500 z-index: 1000;
3421 3501 }
3422 3502
3423 -.waveform-marker:hover .waveform-marker-tooltip {
3503 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3424 3504 opacity: 1;
3425 3505 }
3426 3506
3507 +.waveform-hover-time {
3508 + position: absolute;
3509 + bottom: calc(100% + 4px);
3510 + transform: translate(-50%);
3511 + background: rgba(0, 0, 0, 0.9019607843);
3512 + color: #fff;
3513 + padding: 3px 7px;
3514 + border-radius: 4px;
3515 + font-size: 11px;
3516 + font-variant-numeric: tabular-nums;
3517 + white-space: nowrap;
3518 + pointer-events: none;
3519 + opacity: 0;
3520 + transition: opacity 0.15s;
3521 + z-index: 1000;
3522 +}
3523 +
3524 +.waveform-seek-handle {
3525 + position: absolute;
3526 + top: 50%;
3527 + left: 0;
3528 + width: 11px;
3529 + height: 11px;
3530 + border-radius: 50%;
3531 + background: #fff;
3532 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
3533 + transform: translate(-50%, -50%) scale(0);
3534 + opacity: 0;
3535 + transition: opacity 0.12s ease, transform 0.12s ease;
3536 + pointer-events: none;
3537 + z-index: 6;
3538 +}
3539 +
3540 +.waveform-seek-handle.is-visible {
3541 + opacity: 1;
3542 + transform: translate(-50%, -50%) scale(1);
3543 +}
3544 +
3545 +.waveform-seek-handle.is-active {
3546 + transform: translate(-50%, -50%) scale(1.25);
3547 +}
3548 +
3427 3549 .waveform-btn:focus-visible {
3428 3550 outline: 2px solid currentColor;
3429 3551 outline-offset: 2px;
3430 3552 }
@@ -3493,15 +3615,15 @@
3493 3615 color: #fff;
3494 3616 }
3495 3617
3496 3618 .speed-option.active {
3497 - background: rgba(168, 85, 247, 0.2);
3498 - color: #a855f7;
3619 + background: rgba(255, 255, 255, 0.1607843137);
3620 + color: #fff;
3499 3621 font-weight: 600;
3500 3622 }
3501 3623
3502 3624 .waveform-player.waveform-focused {
3503 - outline: 2px solid rgba(168, 85, 247, 0.5);
3625 + outline: 2px solid var(--wfp-accent);
3504 3626 outline-offset: 2px;
3505 3627 border-radius: 4px;
3506 3628 }
3507 3629
@@ -3509,12 +3631,26 @@
3509 3631 outline: none;
3510 3632 }
3511 3633
3512 3634 .waveform-player:focus-visible {
3513 - outline: 1px solid rgba(168, 85, 247, 0.3);
3635 + outline: 1px solid var(--wfp-accent);
3514 3636 outline-offset: 1px;
3515 3637 }
3516 3638
3639 +.waveform-layout-preview .waveform-meta {
3640 + display: none !important;
3641 +}
3642 +
3643 +.waveform-layout-preview .waveform-info {
3644 + justify-content: center;
3645 +}
3646 +
3647 +.waveform-layout-preview .waveform-text {
3648 + flex: 0 1 auto;
3649 + align-items: center;
3650 + text-align: center;
3651 +}
3652 +
3517 3653 .waveform-player.waveform-focused {
3518 3654 outline: none;
3519 3655 }
3520 3656
@@ -3539,11 +3675,11 @@
3539 3675 }
3540 3676
3541 3677 @media (max-width: 480px) {
3542 3678 .waveform-btn {
3543 - width: 32px;
3544 - height: 32px;
3545 - min-width: 32px;
3679 + width: var(--wfp-btn-size, 32px);
3680 + height: var(--wfp-btn-size, 32px);
3681 + min-width: var(--wfp-btn-size, 32px);
3546 3682 }
3547 3683 .waveform-container {
3548 3684 min-height: 50px;
3549 3685 }
@@ -3549,15 +3685,21 @@
3549 3685 }
3550 3686 .waveform-info {
3551 3687 font-size: 12px;
3552 3688 }
3553 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3689 + .waveform-artist, .waveform-time, .waveform-bpm {
3554 3690 font-size: 10px;
3555 3691 }
3556 3692 }
3693 +@media (prefers-reduced-motion: reduce) {
3694 + .waveform-player *, .waveform-player *:before, .waveform-player *:after {
3695 + transition-duration: 0.01ms !important;
3696 + animation-duration: 0.01ms !important;
3697 + animation-iteration-count: 1 !important;
3698 + }
3699 +}
3557 3700 .wp-block-playlist {
3558 - overflow: hidden;
3559 - overflow: clip;
3701 + box-sizing: border-box;
3560 3702 }
3561 3703 .wp-block-playlist .wp-block-playlist__waveform-player {
3562 3704 width: 100%;
3563 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3562,13 +3704,18 @@
3562 3704 width: 100%;
3563 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3564 3706 position: relative;
3565 3707 }
3708 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3709 + outline: revert;
3710 + outline-offset: revert;
3711 +}
3566 3712 .wp-block-playlist .waveform-track {
3567 3713 height: 100px;
3568 3714 gap: 0;
3569 3715 }
3570 3716 .wp-block-playlist .waveform-btn {
3717 + border: none;
3571 3718 border-radius: 0;
3572 3719 border-end-start-radius: 0.125rem;
3573 3720 border-start-start-radius: 0.125rem;
3574 3721 width: 100px;
@@ -3579,14 +3726,45 @@
3579 3726 }
3580 3727 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3581 3728 transform: none;
3582 3729 }
3730 +.wp-block-playlist .waveform-btn svg {
3731 + width: 3rem;
3732 + height: 3rem;
3733 +}
3734 +.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
3735 + width: 2.625rem;
3736 + height: 2.625rem;
3737 +}
3738 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
3739 + background-image: var(--wp--playlist--play-button-artwork);
3740 + background-position: center;
3741 + background-size: cover;
3742 + color: #fff;
3743 +}
3744 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
3745 + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
3746 +}
3747 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
3748 + fill: #fff !important;
3749 +}
3583 3750 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3584 3751 margin-bottom: 0;
3585 3752 }
3586 -.wp-block-playlist .waveform-subtitle {
3753 +.wp-block-playlist .waveform-btn:focus-visible,
3754 +.wp-block-playlist .waveform-container:focus-visible {
3755 + outline: revert;
3756 + outline-offset: revert;
3757 +}
3758 +.wp-block-playlist .waveform-artist {
3587 3759 opacity: 0.7;
3588 3760 }
3761 +.wp-block-playlist .waveform-info,
3762 +.wp-block-playlist .waveform-artist,
3763 +.wp-block-playlist .waveform-title,
3764 +.wp-block-playlist .waveform-time {
3765 + font-size: inherit;
3766 +}
3589 3767 .wp-block-playlist .wp-block-playlist__tracklist {
3590 3768 margin: 0;
3591 3769 padding-left: 0;
3592 3770 list-style: none;
@@ -3633,8 +3811,17 @@
3633 3811 margin-right: var(--wp--preset--spacing--20, 0.5em);
3634 3812 font-size: 0.85em;
3635 3813 opacity: 0.7;
3636 3814 }
3815 +.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
3816 + flex: 0 0 50px;
3817 + width: 50px;
3818 + height: 50px;
3819 + margin-right: var(--wp--preset--spacing--20, 0.5em);
3820 + border: 1px solid rgba(0, 0, 0, 0.08);
3821 + box-sizing: border-box;
3822 + object-fit: cover;
3823 +}
3637 3824 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3638 3825 flex: 1 1 0;
3639 3826 min-width: 0;
3640 3827 }
@@ -3681,8 +3868,9 @@
3681 3868
3682 3869 .wp-block-post-author-biography {
3683 3870 box-sizing: border-box;
3684 3871 white-space: pre-wrap;
3872 + overflow-wrap: break-word;
3685 3873 }
3686 3874
3687 3875 :where(.wp-block-post-comments-form textarea),
3688 3876 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3731,14 +3919,8 @@
3731 3919 display: block;
3732 3920 box-sizing: border-box;
3733 3921 width: 100%;
3734 3922 }
3735 -.wp-block-post-comments-form .comment-form-author label,
3736 -.wp-block-post-comments-form .comment-form-email label,
3737 -.wp-block-post-comments-form .comment-form-url label {
3738 - display: block;
3739 - margin-bottom: 0.25em;
3740 -}
3741 3923 .wp-block-post-comments-form .comment-form-cookies-consent {
3742 3924 display: flex;
3743 3925 gap: 0.25em;
3744 3926 }
@@ -3752,8 +3934,15 @@
3752 3934 font-size: var(--wp--preset--font-size--medium, smaller);
3753 3935 margin-left: 0.5em;
3754 3936 }
3755 3937
3938 +:where(.wp-block-post-comments-form .comment-form-author label),
3939 +:where(.wp-block-post-comments-form .comment-form-email label),
3940 +:where(.wp-block-post-comments-form .comment-form-url label) {
3941 + display: block;
3942 + margin-bottom: 0.25em;
3943 +}
3944 +
3756 3945 .wp-block-post-comments-count {
3757 3946 box-sizing: border-box;
3758 3947 }
3759 3948
@@ -3855,8 +4044,11 @@
3855 4044 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3856 4045 width: 100%;
3857 4046 }
3858 4047
4048 +.wp-block-post-navigation-link {
4049 + box-sizing: border-box;
4050 +}
3859 4051 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3860 4052 display: inline-block;
3861 4053 margin-right: 1ch;
3862 4054 }
@@ -3885,13 +4077,13 @@
3885 4077 box-sizing: border-box;
3886 4078 }
3887 4079
3888 4080 .wp-block-post-title {
3889 - word-break: break-word;
4081 + word-break: normal;
4082 + overflow-wrap: anywhere;
3890 4083 box-sizing: border-box;
3891 4084 }
3892 4085 .wp-block-post-title :where(a) {
3893 - display: inline-block;
3894 4086 font-family: inherit;
3895 4087 font-size: inherit;
3896 4088 font-style: inherit;
3897 4089 font-weight: inherit;
@@ -3909,9 +4101,9 @@
3909 4101 white-space: pre-wrap;
3910 4102 }
3911 4103
3912 4104 :where(.wp-block-preformatted.has-background) {
3913 - padding: 1.25em 2.375em;
4105 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3914 4106 }
3915 4107
3916 4108 .wp-block-pullquote {
3917 4109 text-align: center;
@@ -4039,8 +4231,12 @@
4039 4231 margin-inline-start: auto;
4040 4232 margin-inline-end: auto;
4041 4233 }
4042 4234
4235 +:where(.wp-block-query-no-results) {
4236 + box-sizing: border-box;
4237 +}
4238 +
4043 4239 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4044 4240 margin-inline-start: auto;
4045 4241 }
4046 4242 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4096,9 +4292,8 @@
4096 4292 }
4097 4293
4098 4294 .wp-block-read-more {
4099 4295 display: block;
4100 - width: -moz-fit-content;
4101 4296 width: fit-content;
4102 4297 }
4103 4298 .wp-block-read-more:where(:not([style*=text-decoration])) {
4104 4299 text-decoration: none;
@@ -4181,9 +4376,9 @@
4181 4376 flex-wrap: nowrap;
4182 4377 max-width: 100%;
4183 4378 }
4184 4379
4185 -.wp-block-search__label {
4380 +:where(.wp-block-search__label) {
4186 4381 width: 100%;
4187 4382 }
4188 4383
4189 4384 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4234,11 +4429,9 @@
4234 4429 margin-right: 0;
4235 4430 min-width: 3rem;
4236 4431 border: 1px solid #949494;
4237 4432 text-decoration: unset !important;
4238 - -webkit-appearance: initial;
4239 - -moz-appearance: initial;
4240 - appearance: initial;
4433 + appearance: initial;
4241 4434 }
4242 4435
4243 4436 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4244 4437 padding: 4px;
@@ -4807,9 +5000,8 @@
4807 5000 :where(.wp-block-tab-list button) {
4808 5001 box-sizing: border-box;
4809 5002 color: inherit;
4810 5003 display: block;
4811 - width: -moz-max-content;
4812 5004 width: max-content;
4813 5005 text-decoration: none;
4814 5006 cursor: pointer;
4815 5007 flex-basis: inherit !important;
@@ -4816,10 +5008,9 @@
4816 5008 flex-grow: inherit !important;
4817 5009 position: relative;
4818 5010 border: none;
4819 5011 background: none;
4820 - -moz-appearance: none;
4821 - appearance: none;
5012 + appearance: none;
4822 5013 -webkit-appearance: none;
4823 5014 margin: 0;
4824 5015 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4825 5016 font-size: inherit;
@@ -4839,11 +5030,17 @@
4839 5030 width: 100%;
4840 5031 bottom: 0;
4841 5032 }
4842 5033
4843 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5034 +.wp-block-tab-panel:empty {
4844 5035 display: none !important;
4845 5036 }
5037 +.wp-block-tab-panel[hidden] {
5038 + box-shadow: none !important;
5039 + border: none !important;
5040 + margin-block-start: 0;
5041 + padding: 0 !important;
5042 +}
4846 5043
4847 5044 .wp-block-table {
4848 5045 overflow-x: auto;
4849 5046 }
@@ -5043,9 +5240,10 @@
5043 5240 box-sizing: border-box;
5044 5241 overflow: auto;
5045 5242 white-space: pre-wrap;
5046 5243 min-width: 1em;
5047 - word-break: break-word;
5244 + word-break: normal;
5245 + overflow-wrap: break-word;
5048 5246 }
5049 5247
5050 5248 :where(pre.wp-block-verse) {
5051 5249 font-family: inherit;
@@ -5060,10 +5258,9 @@
5060 5258 vertical-align: middle;
5061 5259 }
5062 5260 @supports (position: sticky) {
5063 5261 .wp-block-video [poster] {
5064 - -o-object-fit: cover;
5065 - object-fit: cover;
5262 + object-fit: cover;
5066 5263 }
5067 5264 }
5068 5265 .wp-block-video.aligncenter {
5069 5266 text-align: center;
@@ -5227,9 +5424,9 @@
5227 5424 overflow: hidden;
5228 5425 padding: 0;
5229 5426 position: absolute;
5230 5427 width: 1px;
5231 - word-wrap: normal !important;
5428 + overflow-wrap: normal !important;
5232 5429 word-break: normal !important;
5233 5430 }
5234 5431
5235 5432 .screen-reader-text:focus {
@@ -5342,16 +5539,12 @@
5342 5539 margin: 0 0 1em 0;
5343 5540 }
5344 5541
5345 5542 html :where(.is-position-sticky) {
5346 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5347 5543 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5348 - /* stylelint-enable length-zero-no-unit */
5349 5544 }
5350 5545
5351 5546 @media screen and (max-width: 600px) {
5352 5547 html :where(.is-position-sticky) {
5353 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5354 5548 --wp-admin--admin-bar--position-offset: 0px;
5355 - /* stylelint-enable length-zero-no-unit */
5356 5549 }
5357 5550 }