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-rtl.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 }
@@ -414,9 +423,10 @@
414 423 }
415 424 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
416 425 text-align: center;
417 426 }
418 -.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
427 +
428 +:where(.wp-block-categories__label:not(.screen-reader-text)) {
419 429 width: 100%;
420 430 display: block;
421 431 }
422 432
@@ -486,15 +496,15 @@
486 496 margin-bottom: 1.75em;
487 497 }
488 498
489 499 :where(.wp-block-columns.has-background) {
490 - padding: 1.25em 2.375em;
500 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
491 501 }
492 502
493 503 .wp-block-column {
494 504 flex-grow: 1;
495 505 min-width: 0;
496 - word-break: break-word;
506 + word-break: normal;
497 507 overflow-wrap: break-word;
498 508 /**
499 509 * Individual Column Alignment
500 510 */
@@ -573,9 +583,9 @@
573 583 font-size: 0.875em;
574 584 line-height: 1.5;
575 585 }
576 586 .wp-block-post-comments .comment-meta b {
577 - font-weight: normal;
587 + font-weight: 400;
578 588 }
579 589 .wp-block-post-comments .comment-meta .comment-awaiting-moderation {
580 590 margin-top: 1em;
581 591 margin-bottom: 1em;
@@ -583,15 +593,8 @@
583 593 }
584 594 .wp-block-post-comments .comment-body .commentmetadata {
585 595 font-size: 0.875em;
586 596 }
587 -.wp-block-post-comments .comment-form-comment label,
588 -.wp-block-post-comments .comment-form-author label,
589 -.wp-block-post-comments .comment-form-email label,
590 -.wp-block-post-comments .comment-form-url label {
591 - display: block;
592 - margin-bottom: 0.25em;
593 -}
594 597 .wp-block-post-comments .comment-form textarea,
595 598 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
596 599 display: block;
597 600 box-sizing: border-box;
@@ -625,8 +628,16 @@
625 628 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
626 629 padding: calc(0.667em + 2px);
627 630 }
628 631
632 +:where(.wp-block-post-comments .comment-form-comment label),
633 +:where(.wp-block-post-comments .comment-form-author label),
634 +:where(.wp-block-post-comments .comment-form-email label),
635 +:where(.wp-block-post-comments .comment-form-url label) {
636 + display: block;
637 + margin-bottom: 0.25em;
638 +}
639 +
629 640 :where(.wp-block-post-comments input[type=submit]) {
630 641 border: none;
631 642 }
632 643
@@ -678,9 +689,8 @@
678 689 }
679 690 .wp-block-comment-template.aligncenter {
680 691 margin-right: auto;
681 692 margin-left: auto;
682 - width: -moz-fit-content;
683 693 width: fit-content;
684 694 }
685 695 .wp-block-comment-template.alignright {
686 696 float: left;
@@ -1000,14 +1010,19 @@
1000 1010 width: 100%;
1001 1011 height: 100%;
1002 1012 max-width: none;
1003 1013 max-height: none;
1004 - -o-object-fit: cover;
1005 - object-fit: cover;
1014 + object-fit: cover;
1006 1015 outline: none;
1007 1016 border: none;
1008 1017 box-shadow: none;
1009 1018 }
1019 +@supports (-webkit-hyphens: none) {
1020 + .wp-block-cover-image.has-aspect-ratio,
1021 + .wp-block-cover.has-aspect-ratio {
1022 + min-height: fit-content !important;
1023 + }
1024 +}
1010 1025 .wp-block-cover-image .wp-block-cover__embed-background,
1011 1026 .wp-block-cover .wp-block-cover__embed-background {
1012 1027 position: absolute;
1013 1028 top: 0;
@@ -1297,57 +1312,8 @@
1297 1312 opacity: 0.85;
1298 1313 text-decoration: none;
1299 1314 }
1300 1315
1301 -.wp-block-form-input__label {
1302 - width: 100%;
1303 - display: flex;
1304 - flex-direction: column;
1305 - gap: 0.25em;
1306 - margin-bottom: 0.5em;
1307 -}
1308 -.wp-block-form-input__label.is-label-inline {
1309 - flex-direction: row;
1310 - gap: 0.5em;
1311 - align-items: center;
1312 -}
1313 -.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
1314 - margin-bottom: 0.5em;
1315 -}
1316 -.wp-block-form-input__label:has(input[type=checkbox]) {
1317 - flex-direction: row;
1318 - width: -moz-fit-content;
1319 - width: fit-content;
1320 -}
1321 -.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
1322 - margin: 0;
1323 -}
1324 -.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
1325 - /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
1326 - flex-direction: row-reverse;
1327 -}
1328 -
1329 -.wp-block-form-input__label-content {
1330 - width: -moz-fit-content;
1331 - width: fit-content;
1332 -}
1333 -
1334 -:where(.wp-block-form-input__input) {
1335 - padding: 0 0.5em;
1336 - font-size: 1em;
1337 - margin-bottom: 0.5em;
1338 -}
1339 -: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] {
1340 - min-height: 2em;
1341 - line-height: 2;
1342 - border-width: 1px;
1343 - border-style: solid;
1344 -}
1345 -
1346 -textarea.wp-block-form-input__input {
1347 - min-height: 10em;
1348 -}
1349 -
1350 1316 .wp-block-gallery:not(.has-nested-images),
1351 1317 .blocks-gallery-grid:not(.has-nested-images) {
1352 1318 display: flex;
1353 1319 flex-wrap: wrap;
@@ -1429,10 +1395,9 @@
1429 1395 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
1430 1396 width: 100%;
1431 1397 height: 100%;
1432 1398 flex: 1;
1433 - -o-object-fit: cover;
1434 - object-fit: cover;
1399 + object-fit: cover;
1435 1400 }
1436 1401 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
1437 1402 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
1438 1403 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
@@ -1537,37 +1502,104 @@
1537 1502 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
1538 1503 align-self: flex-start;
1539 1504 }
1540 1505
1541 -figure.wp-block-gallery.has-nested-images {
1506 +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
1542 1507 align-items: normal;
1543 1508 }
1544 1509
1545 -.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
1510 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
1546 1511 width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
1547 1512 margin: 0;
1548 1513 }
1549 -.wp-block-gallery.has-nested-images figure.wp-block-image {
1514 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
1550 1515 display: flex;
1551 1516 flex-grow: 1;
1552 1517 justify-content: center;
1553 - position: relative;
1554 1518 flex-direction: column;
1555 1519 max-width: 100%;
1556 1520 box-sizing: border-box;
1557 1521 }
1558 -.wp-block-gallery.has-nested-images figure.wp-block-image > div,
1559 -.wp-block-gallery.has-nested-images figure.wp-block-image > a {
1522 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
1523 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
1560 1524 margin: 0;
1561 1525 flex-direction: column;
1562 1526 flex-grow: 1;
1563 1527 }
1564 -.wp-block-gallery.has-nested-images figure.wp-block-image img {
1528 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
1565 1529 display: block;
1566 1530 height: auto;
1567 1531 max-width: 100% !important;
1568 1532 width: auto;
1569 1533 }
1534 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
1535 + flex-grow: 1;
1536 + flex-basis: 100%;
1537 + text-align: center;
1538 +}
1539 +.wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1540 + margin-top: 0;
1541 + margin-bottom: auto;
1542 +}
1543 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
1544 + align-self: inherit;
1545 +}
1546 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1547 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
1548 + display: flex;
1549 +}
1550 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
1551 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
1552 + width: 100%;
1553 + flex: 1 0 0%;
1554 + height: 100%;
1555 + object-fit: cover;
1556 +}
1557 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
1558 + width: 100%;
1559 +}
1560 +@media (min-width: 600px) {
1561 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
1562 + width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1563 + }
1564 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
1565 + width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1566 + }
1567 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
1568 + width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1569 + }
1570 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
1571 + width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1572 + }
1573 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
1574 + width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1575 + }
1576 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
1577 + width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1578 + }
1579 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
1580 + width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1581 + }
1582 + .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),
1583 + .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) {
1584 + width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1585 + }
1586 + .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) {
1587 + width: 100%;
1588 + }
1589 +}
1590 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
1591 + max-width: 420px;
1592 + width: 100%;
1593 +}
1594 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
1595 + justify-content: center;
1596 +}
1597 +
1598 +.wp-block-gallery.has-nested-images figure.wp-block-image {
1599 + position: relative;
1600 + margin: 0;
1601 +}
1570 1602 .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
1571 1603 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1572 1604 position: absolute;
1573 1605 bottom: 0;
@@ -1580,10 +1612,9 @@
1580 1612 height: 100%;
1581 1613 max-height: 3em;
1582 1614 pointer-events: none;
1583 1615 backdrop-filter: blur(3px);
1584 - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1585 - mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1616 + mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1586 1617 }
1587 1618 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1588 1619 color: #fff;
1589 1620 text-shadow: 0 0 1.5px #000;
@@ -1654,72 +1685,13 @@
1654 1685 }
1655 1686 .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 {
1656 1687 content: none;
1657 1688 }
1658 -.wp-block-gallery.has-nested-images figcaption {
1659 - flex-grow: 1;
1660 - flex-basis: 100%;
1689 +
1690 +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
1691 + grid-column: 1/-1;
1661 1692 text-align: center;
1662 1693 }
1663 -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1664 - margin-top: 0;
1665 - margin-bottom: auto;
1666 -}
1667 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
1668 - align-self: inherit;
1669 -}
1670 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1671 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
1672 - display: flex;
1673 -}
1674 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
1675 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
1676 - width: 100%;
1677 - flex: 1 0 0%;
1678 - height: 100%;
1679 - -o-object-fit: cover;
1680 - object-fit: cover;
1681 -}
1682 -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
1683 - width: 100%;
1684 -}
1685 -@media (min-width: 600px) {
1686 - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
1687 - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1688 - }
1689 - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
1690 - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1691 - }
1692 - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
1693 - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1694 - }
1695 - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
1696 - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1697 - }
1698 - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
1699 - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1700 - }
1701 - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
1702 - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1703 - }
1704 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
1705 - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1706 - }
1707 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
1708 - .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) {
1709 - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1710 - }
1711 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
1712 - width: 100%;
1713 - }
1714 -}
1715 -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
1716 - max-width: 420px;
1717 - width: 100%;
1718 -}
1719 -.wp-block-gallery.has-nested-images.aligncenter {
1720 - justify-content: center;
1721 -}
1722 1694
1723 1695 .wp-block-group {
1724 1696 box-sizing: border-box;
1725 1697 }
@@ -1733,9 +1705,9 @@
1733 1705 h3:where(.wp-block-heading).has-background,
1734 1706 h4:where(.wp-block-heading).has-background,
1735 1707 h5:where(.wp-block-heading).has-background,
1736 1708 h6:where(.wp-block-heading).has-background {
1737 - padding: 1.25em 2.375em;
1709 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
1738 1710 }
1739 1711 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
1740 1712 h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),
1741 1713 h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
@@ -1778,12 +1750,16 @@
1778 1750 :where(.wp-block-icon) svg {
1779 1751 width: 100%;
1780 1752 height: 100%;
1781 1753 }
1754 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1755 + vector-effect: none;
1756 +}
1782 1757
1783 1758 .wp-block-image > a,
1784 1759 .wp-block-image > figure > a {
1785 1760 display: inline-block;
1761 + color: inherit;
1786 1762 }
1787 1763 .wp-block-image img {
1788 1764 height: auto;
1789 1765 max-width: 100%;
@@ -1852,20 +1828,15 @@
1852 1828 }
1853 1829 .wp-block-image.is-style-circle-mask img {
1854 1830 border-radius: 9999px;
1855 1831 }
1856 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1832 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1857 1833 .wp-block-image.is-style-circle-mask img {
1858 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1859 - -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>');
1860 - 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>');
1834 + 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>');
1861 1835 mask-mode: alpha;
1862 - -webkit-mask-repeat: no-repeat;
1863 - mask-repeat: no-repeat;
1864 - -webkit-mask-size: contain;
1865 - mask-size: contain;
1866 - -webkit-mask-position: center;
1867 - mask-position: center;
1836 + mask-repeat: no-repeat;
1837 + mask-size: contain;
1838 + mask-position: center;
1868 1839 border-radius: 0;
1869 1840 }
1870 1841 }
1871 1842
@@ -2243,49 +2214,54 @@
2243 2214 .wp-block-latest-posts.wp-block-latest-posts__list li {
2244 2215 clear: both;
2245 2216 overflow-wrap: break-word;
2246 2217 }
2247 -.wp-block-latest-posts.is-grid {
2218 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2248 2219 display: flex;
2249 2220 flex-wrap: wrap;
2250 2221 }
2251 -.wp-block-latest-posts.is-grid li {
2222 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2252 2223 margin: 0 0 1.25em 1.25em;
2253 2224 width: 100%;
2254 2225 }
2255 2226 @media (min-width: 600px) {
2256 - .wp-block-latest-posts.columns-2 li {
2227 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2257 2228 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2258 2229 }
2259 - .wp-block-latest-posts.columns-2 li:nth-child(2n) {
2230 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
2260 2231 margin-left: 0;
2261 2232 }
2262 - .wp-block-latest-posts.columns-3 li {
2233 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2263 2234 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2264 2235 }
2265 - .wp-block-latest-posts.columns-3 li:nth-child(3n) {
2236 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
2266 2237 margin-left: 0;
2267 2238 }
2268 - .wp-block-latest-posts.columns-4 li {
2239 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2269 2240 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2270 2241 }
2271 - .wp-block-latest-posts.columns-4 li:nth-child(4n) {
2242 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
2272 2243 margin-left: 0;
2273 2244 }
2274 - .wp-block-latest-posts.columns-5 li {
2245 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2275 2246 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2276 2247 }
2277 - .wp-block-latest-posts.columns-5 li:nth-child(5n) {
2248 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
2278 2249 margin-left: 0;
2279 2250 }
2280 - .wp-block-latest-posts.columns-6 li {
2251 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2281 2252 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2282 2253 }
2283 - .wp-block-latest-posts.columns-6 li:nth-child(6n) {
2254 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
2284 2255 margin-left: 0;
2285 2256 }
2286 2257 }
2287 2258
2259 +@media (max-width: 600px) {
2260 + .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
2261 + grid-template-columns: 1fr;
2262 + }
2263 +}
2288 2264 :root :where(.wp-block-latest-posts.is-grid) {
2289 2265 padding: 0;
2290 2266 }
2291 2267 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2330,9 +2306,9 @@
2330 2306 box-sizing: border-box;
2331 2307 }
2332 2308
2333 2309 :root :where(.wp-block-list.has-background) {
2334 - padding: 1.25em 2.375em;
2310 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2335 2311 }
2336 2312
2337 2313 .wp-block-loginout {
2338 2314 box-sizing: border-box;
@@ -2425,9 +2401,9 @@
2425 2401 height: 1px;
2426 2402 padding: 0;
2427 2403 margin: -1px;
2428 2404 overflow: hidden;
2429 - clip: rect(0, 0, 0, 0);
2405 + clip-path: inset(50%);
2430 2406 border: 0;
2431 2407 }
2432 2408
2433 2409 /* Image fill for versions 8 and onwards */
@@ -2445,10 +2421,9 @@
2445 2421 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2446 2422 position: absolute;
2447 2423 width: 100%;
2448 2424 height: 100%;
2449 - -o-object-fit: cover;
2450 - object-fit: cover;
2425 + object-fit: cover;
2451 2426 }
2452 2427
2453 2428 /*
2454 2429 * Here we here not able to use a mobile first CSS approach.
@@ -2544,9 +2519,16 @@
2544 2519 .wp-block-navigation.is-vertical {
2545 2520 --navigation-layout-direction: column;
2546 2521 --navigation-layout-justify: initial;
2547 2522 --navigation-layout-align: flex-start;
2523 + text-align: var(--navigation-layout-text-align, inherit);
2548 2524 }
2525 +.wp-block-navigation.is-vertical .wp-block-navigation-item__content {
2526 + text-align: inherit;
2527 +}
2528 +.wp-block-navigation.is-vertical .wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
2529 + text-align: initial;
2530 +}
2549 2531 .wp-block-navigation.no-wrap {
2550 2532 --navigation-layout-wrap: nowrap;
2551 2533 }
2552 2534 .wp-block-navigation.items-justified-center {
@@ -2551,8 +2533,9 @@
2551 2533 }
2552 2534 .wp-block-navigation.items-justified-center {
2553 2535 --navigation-layout-justification-setting: center;
2554 2536 --navigation-layout-justify: center;
2537 + --navigation-layout-text-align: center;
2555 2538 }
2556 2539 .wp-block-navigation.items-justified-center.is-vertical {
2557 2540 --navigation-layout-align: center;
2558 2541 }
@@ -2558,8 +2541,9 @@
2558 2541 }
2559 2542 .wp-block-navigation.items-justified-right {
2560 2543 --navigation-layout-justification-setting: flex-end;
2561 2544 --navigation-layout-justify: flex-end;
2545 + --navigation-layout-text-align: end;
2562 2546 }
2563 2547 .wp-block-navigation.items-justified-right.is-vertical {
2564 2548 --navigation-layout-align: flex-end;
2565 2549 }
@@ -2630,9 +2614,9 @@
2630 2614 transform: rotate(90deg);
2631 2615 }
2632 2616 }
2633 2617 @media (hover: hover) {
2634 - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
2618 + .wp-block-navigation .has-child:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
2635 2619 visibility: visible;
2636 2620 overflow: visible;
2637 2621 opacity: 1;
2638 2622 width: auto;
@@ -2639,10 +2623,9 @@
2639 2623 height: auto;
2640 2624 min-width: 200px;
2641 2625 }
2642 2626 }
2643 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2644 -.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2627 +.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 {
2645 2628 visibility: visible;
2646 2629 overflow: visible;
2647 2630 opacity: 1;
2648 2631 width: auto;
@@ -2690,8 +2673,9 @@
2690 2673 position: static;
2691 2674 border: none;
2692 2675 background-color: transparent;
2693 2676 color: inherit;
2677 + box-shadow: none !important;
2694 2678 }
2695 2679
2696 2680 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2697 2681 right: 0;
@@ -2897,8 +2881,9 @@
2897 2881 display: flex;
2898 2882 flex-direction: column;
2899 2883 flex-wrap: nowrap;
2900 2884 align-items: var(--navigation-layout-justification-setting, inherit);
2885 + text-align: var(--navigation-layout-text-align, inherit);
2901 2886 }
2902 2887 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2903 2888 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2904 2889 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2924,11 +2909,13 @@
2924 2909 gap: inherit;
2925 2910 }
2926 2911 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
2927 2912 padding-top: var(--wp--style--block-gap, 2em);
2913 + text-align: inherit;
2928 2914 }
2929 2915 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
2930 2916 padding: 0;
2917 + text-align: inherit;
2931 2918 }
2932 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2933 2920 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2934 2921 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2942,8 +2929,11 @@
2942 2929 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2943 2930 color: inherit !important;
2944 2931 background: transparent !important;
2945 2932 }
2933 +.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container {
2934 + box-shadow: none !important;
2935 +}
2946 2936 .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 {
2947 2937 left: auto;
2948 2938 right: auto;
2949 2939 }
@@ -2989,9 +2979,9 @@
2989 2979 }
2990 2980
2991 2981 .wp-block-navigation__toggle_button_label {
2992 2982 font-size: 1rem;
2993 - font-weight: bold;
2983 + font-weight: 700;
2994 2984 }
2995 2985
2996 2986 .wp-block-navigation__responsive-container-open,
2997 2987 .wp-block-navigation__responsive-container-close {
@@ -3099,8 +3089,20 @@
3099 3089 margin-right: 8px;
3100 3090 text-transform: uppercase;
3101 3091 }
3102 3092
3093 +:where(.wp-block-navigation-overlay-close) {
3094 + color: inherit;
3095 + font-family: inherit;
3096 + font-size: inherit;
3097 + font-style: inherit;
3098 + font-weight: inherit;
3099 + letter-spacing: inherit;
3100 + line-height: inherit;
3101 + text-transform: inherit;
3102 + border: none;
3103 +}
3104 +
3103 3105 .wp-block-navigation-overlay-close {
3104 3106 display: inline-flex;
3105 3107 align-items: center;
3106 3108 justify-content: center;
@@ -3105,9 +3107,8 @@
3105 3107 align-items: center;
3106 3108 justify-content: center;
3107 3109 gap: 0.5em;
3108 3110 padding: 0;
3109 - border: none;
3110 3111 background: transparent;
3111 3112 cursor: pointer;
3112 3113 text-decoration: none;
3113 3114 }
@@ -3177,9 +3178,9 @@
3177 3178 overflow: hidden;
3178 3179 }
3179 3180
3180 3181 :root :where(p.has-background) {
3181 - padding: 1.25em 2.375em;
3182 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3182 3183 }
3183 3184
3184 3185 :where(p.has-text-color:not(.has-link-color)) a {
3185 3186 color: inherit;
@@ -3192,11 +3193,23 @@
3192 3193
3193 3194 .waveform-player {
3194 3195 font-family: inherit;
3195 3196 color: inherit;
3196 - line-height: 1.4;
3197 + line-height: var(--waveform-line-height, 1.4);
3198 + --wfp-accent: #71717a;
3199 + --wfp-button-color: rgba(255, 255, 255, .9);
3200 + --wfp-text-color: #ffffff;
3201 + --wfp-text-secondary-color: rgba(255, 255, 255, .6);
3202 + --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
3203 + --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
3197 3204 }
3198 3205
3206 +.waveform-player.waveform-theme-light {
3207 + --wfp-button-color: rgba(0, 0, 0, .8);
3208 + --wfp-text-color: #333333;
3209 + --wfp-text-secondary-color: rgba(0, 0, 0, .6);
3210 +}
3211 +
3199 3212 .waveform-player * {
3200 3213 box-sizing: border-box;
3201 3214 }
3202 3215
@@ -3202,26 +3215,26 @@
3202 3215
3203 3216 .waveform-body {
3204 3217 display: flex;
3205 3218 flex-direction: column;
3206 - gap: 8px;
3219 + gap: var(--waveform-body-gap, 8px);
3207 3220 }
3208 3221
3209 3222 .waveform-track {
3210 3223 display: flex;
3211 3224 align-items: center;
3212 - gap: 12px;
3225 + gap: var(--waveform-track-gap, 12px);
3213 3226 position: relative;
3214 3227 }
3215 3228
3216 3229 .waveform-btn {
3217 - width: 36px;
3218 - height: 36px;
3219 - min-width: 36px;
3220 - border-radius: 50%;
3230 + width: var(--wfp-btn-size, 36px);
3231 + height: var(--wfp-btn-size, 36px);
3232 + min-width: var(--wfp-btn-size, 36px);
3233 + border-radius: var(--wfp-btn-radius, 50%);
3221 3234 border: 2px solid currentColor;
3222 3235 background: transparent;
3223 - color: inherit;
3236 + color: var(--wfp-button-color, inherit);
3224 3237 cursor: pointer;
3225 3238 display: flex;
3226 3239 align-items: center;
3227 3240 justify-content: center;
@@ -3235,8 +3248,27 @@
3235 3248 opacity: 1;
3236 3249 transform: scale(1.05);
3237 3250 }
3238 3251
3252 +.waveform-btn-minimal {
3253 + width: calc(var(--wfp-btn-size, 36px) * 1.1);
3254 + height: calc(var(--wfp-btn-size, 36px) * 1.1);
3255 + min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
3256 + border: none;
3257 + border-radius: 0;
3258 + opacity: 0.7;
3259 +}
3260 +
3261 +.waveform-btn-minimal:hover:not(:disabled) {
3262 + opacity: 1;
3263 + transform: none;
3264 +}
3265 +
3266 +.waveform-btn.waveform-btn-minimal svg {
3267 + width: calc(var(--wfp-btn-size, 36px) * 0.94);
3268 + height: calc(var(--wfp-btn-size, 36px) * 0.94);
3269 +}
3270 +
3239 3271 .waveform-btn:disabled {
3240 3272 cursor: not-allowed;
3241 3273 opacity: 0.3;
3242 3274 }
@@ -3249,14 +3281,48 @@
3249 3281 height: 100%;
3250 3282 }
3251 3283
3252 3284 .waveform-btn svg {
3253 - width: 16px;
3254 - height: 16px;
3285 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3286 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3255 3287 fill: currentColor;
3256 3288 display: block;
3257 3289 }
3258 3290
3291 +.waveform-btn-has-artwork {
3292 + --wfp-btn-size: 64px;
3293 + --wfp-btn-radius: 8px;
3294 + position: relative;
3295 + overflow: hidden;
3296 + border: none;
3297 + color: var(--wfp-btn-artwork-color);
3298 +}
3299 +
3300 +.waveform-btn > .waveform-btn-artwork {
3301 + display: block;
3302 + position: absolute;
3303 + inset: 0;
3304 + width: 100%;
3305 + height: 100%;
3306 + object-fit: cover;
3307 + pointer-events: none;
3308 + z-index: 0;
3309 +}
3310 +
3311 +.waveform-btn-has-artwork:after {
3312 + content: "";
3313 + position: absolute;
3314 + inset: 0;
3315 + background: var(--wfp-btn-artwork-scrim);
3316 + pointer-events: none;
3317 + z-index: 1;
3318 +}
3319 +
3320 +.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
3321 + position: relative;
3322 + z-index: 2;
3323 +}
3324 +
3259 3325 .waveform-icon-play svg {
3260 3326 margin-right: 1px;
3261 3327 }
3262 3328
@@ -3268,8 +3334,12 @@
3268 3334 min-width: 0;
3269 3335 width: 100%;
3270 3336 }
3271 3337
3338 +.waveform-container:focus-visible {
3339 + outline: 2px solid currentColor;
3340 +}
3341 +
3272 3342 .waveform-container canvas {
3273 3343 display: block;
3274 3344 width: 100%;
3275 3345 height: 100%;
@@ -3295,8 +3365,9 @@
3295 3365 min-width: 0;
3296 3366 }
3297 3367
3298 3368 .waveform-title {
3369 + color: var(--wfp-text-color);
3299 3370 white-space: nowrap;
3300 3371 overflow: hidden;
3301 3372 text-overflow: ellipsis;
3302 3373 font-weight: 500;
@@ -3301,9 +3372,10 @@
3301 3372 text-overflow: ellipsis;
3302 3373 font-weight: 500;
3303 3374 }
3304 3375
3305 -.waveform-subtitle {
3376 +.waveform-artist {
3377 + color: var(--wfp-text-secondary-color);
3306 3378 font-size: 11px;
3307 3379 white-space: nowrap;
3308 3380 overflow: hidden;
3309 3381 text-overflow: ellipsis;
@@ -3309,8 +3381,9 @@
3309 3381 text-overflow: ellipsis;
3310 3382 }
3311 3383
3312 3384 .waveform-time {
3385 + color: var(--wfp-text-secondary-color);
3313 3386 font-size: 11px;
3314 3387 white-space: nowrap;
3315 3388 flex-shrink: 0;
3316 3389 }
@@ -3315,8 +3388,9 @@
3315 3388 flex-shrink: 0;
3316 3389 }
3317 3390
3318 3391 .waveform-bpm {
3392 + color: var(--wfp-text-secondary-color);
3319 3393 font-size: 11px;
3320 3394 white-space: nowrap;
3321 3395 flex-shrink: 0;
3322 3396 display: inline-flex;
@@ -3372,8 +3446,14 @@
3372 3446 width: 4px;
3373 3447 z-index: 20;
3374 3448 }
3375 3449
3450 +.waveform-marker.active {
3451 + width: 4px;
3452 + background: currentColor;
3453 + z-index: 10;
3454 +}
3455 +
3376 3456 .waveform-marker-tooltip {
3377 3457 position: absolute;
3378 3458 bottom: calc(100% + 4px);
3379 3459 right: 50%;
@@ -3389,12 +3469,54 @@
3389 3469 transition: opacity 0.2s;
3390 3470 z-index: 1000;
3391 3471 }
3392 3472
3393 -.waveform-marker:hover .waveform-marker-tooltip {
3473 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3394 3474 opacity: 1;
3395 3475 }
3396 3476
3477 +.waveform-hover-time {
3478 + position: absolute;
3479 + bottom: calc(100% + 4px);
3480 + transform: translate(50%);
3481 + background: rgba(0, 0, 0, 0.9019607843);
3482 + color: #fff;
3483 + padding: 3px 7px;
3484 + border-radius: 4px;
3485 + font-size: 11px;
3486 + font-variant-numeric: tabular-nums;
3487 + white-space: nowrap;
3488 + pointer-events: none;
3489 + opacity: 0;
3490 + transition: opacity 0.15s;
3491 + z-index: 1000;
3492 +}
3493 +
3494 +.waveform-seek-handle {
3495 + position: absolute;
3496 + top: 50%;
3497 + right: 0;
3498 + width: 11px;
3499 + height: 11px;
3500 + border-radius: 50%;
3501 + background: #fff;
3502 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
3503 + transform: translate(50%, -50%) scale(0);
3504 + opacity: 0;
3505 + transition: opacity 0.12s ease, transform 0.12s ease;
3506 + pointer-events: none;
3507 + z-index: 6;
3508 +}
3509 +
3510 +.waveform-seek-handle.is-visible {
3511 + opacity: 1;
3512 + transform: translate(50%, -50%) scale(1);
3513 +}
3514 +
3515 +.waveform-seek-handle.is-active {
3516 + transform: translate(50%, -50%) scale(1.25);
3517 +}
3518 +
3397 3519 .waveform-btn:focus-visible {
3398 3520 outline: 2px solid currentColor;
3399 3521 outline-offset: 2px;
3400 3522 }
@@ -3463,15 +3585,15 @@
3463 3585 color: #fff;
3464 3586 }
3465 3587
3466 3588 .speed-option.active {
3467 - background: rgba(168, 85, 247, 0.2);
3468 - color: #a855f7;
3589 + background: rgba(255, 255, 255, 0.1607843137);
3590 + color: #fff;
3469 3591 font-weight: 600;
3470 3592 }
3471 3593
3472 3594 .waveform-player.waveform-focused {
3473 - outline: 2px solid rgba(168, 85, 247, 0.5);
3595 + outline: 2px solid var(--wfp-accent);
3474 3596 outline-offset: 2px;
3475 3597 border-radius: 4px;
3476 3598 }
3477 3599
@@ -3479,12 +3601,26 @@
3479 3601 outline: none;
3480 3602 }
3481 3603
3482 3604 .waveform-player:focus-visible {
3483 - outline: 1px solid rgba(168, 85, 247, 0.3);
3605 + outline: 1px solid var(--wfp-accent);
3484 3606 outline-offset: 1px;
3485 3607 }
3486 3608
3609 +.waveform-layout-preview .waveform-meta {
3610 + display: none !important;
3611 +}
3612 +
3613 +.waveform-layout-preview .waveform-info {
3614 + justify-content: center;
3615 +}
3616 +
3617 +.waveform-layout-preview .waveform-text {
3618 + flex: 0 1 auto;
3619 + align-items: center;
3620 + text-align: center;
3621 +}
3622 +
3487 3623 .waveform-player.waveform-focused {
3488 3624 outline: none;
3489 3625 }
3490 3626
@@ -3509,11 +3645,11 @@
3509 3645 }
3510 3646
3511 3647 @media (max-width: 480px) {
3512 3648 .waveform-btn {
3513 - width: 32px;
3514 - height: 32px;
3515 - min-width: 32px;
3649 + width: var(--wfp-btn-size, 32px);
3650 + height: var(--wfp-btn-size, 32px);
3651 + min-width: var(--wfp-btn-size, 32px);
3516 3652 }
3517 3653 .waveform-container {
3518 3654 min-height: 50px;
3519 3655 }
@@ -3519,15 +3655,21 @@
3519 3655 }
3520 3656 .waveform-info {
3521 3657 font-size: 12px;
3522 3658 }
3523 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3659 + .waveform-artist, .waveform-time, .waveform-bpm {
3524 3660 font-size: 10px;
3525 3661 }
3526 3662 }
3663 +@media (prefers-reduced-motion: reduce) {
3664 + .waveform-player *, .waveform-player *:before, .waveform-player *:after {
3665 + transition-duration: 0.01ms !important;
3666 + animation-duration: 0.01ms !important;
3667 + animation-iteration-count: 1 !important;
3668 + }
3669 +}
3527 3670 .wp-block-playlist {
3528 - overflow: hidden;
3529 - overflow: clip;
3671 + box-sizing: border-box;
3530 3672 }
3531 3673 .wp-block-playlist .wp-block-playlist__waveform-player {
3532 3674 width: 100%;
3533 3675 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3532,13 +3674,18 @@
3532 3674 width: 100%;
3533 3675 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3534 3676 position: relative;
3535 3677 }
3678 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3679 + outline: revert;
3680 + outline-offset: revert;
3681 +}
3536 3682 .wp-block-playlist .waveform-track {
3537 3683 height: 100px;
3538 3684 gap: 0;
3539 3685 }
3540 3686 .wp-block-playlist .waveform-btn {
3687 + border: none;
3541 3688 border-radius: 0;
3542 3689 border-end-start-radius: 0.125rem;
3543 3690 border-start-start-radius: 0.125rem;
3544 3691 width: 100px;
@@ -3549,14 +3696,45 @@
3549 3696 }
3550 3697 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3551 3698 transform: none;
3552 3699 }
3700 +.wp-block-playlist .waveform-btn svg {
3701 + width: 3rem;
3702 + height: 3rem;
3703 +}
3704 +.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
3705 + width: 2.625rem;
3706 + height: 2.625rem;
3707 +}
3708 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
3709 + background-image: var(--wp--playlist--play-button-artwork);
3710 + background-position: center;
3711 + background-size: cover;
3712 + color: #fff;
3713 +}
3714 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
3715 + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
3716 +}
3717 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
3718 + fill: #fff !important;
3719 +}
3553 3720 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3554 3721 margin-bottom: 0;
3555 3722 }
3556 -.wp-block-playlist .waveform-subtitle {
3723 +.wp-block-playlist .waveform-btn:focus-visible,
3724 +.wp-block-playlist .waveform-container:focus-visible {
3725 + outline: revert;
3726 + outline-offset: revert;
3727 +}
3728 +.wp-block-playlist .waveform-artist {
3557 3729 opacity: 0.7;
3558 3730 }
3731 +.wp-block-playlist .waveform-info,
3732 +.wp-block-playlist .waveform-artist,
3733 +.wp-block-playlist .waveform-title,
3734 +.wp-block-playlist .waveform-time {
3735 + font-size: inherit;
3736 +}
3559 3737 .wp-block-playlist .wp-block-playlist__tracklist {
3560 3738 margin: 0;
3561 3739 padding-right: 0;
3562 3740 list-style: none;
@@ -3603,8 +3781,17 @@
3603 3781 margin-left: var(--wp--preset--spacing--20, 0.5em);
3604 3782 font-size: 0.85em;
3605 3783 opacity: 0.7;
3606 3784 }
3785 +.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
3786 + flex: 0 0 50px;
3787 + width: 50px;
3788 + height: 50px;
3789 + margin-left: var(--wp--preset--spacing--20, 0.5em);
3790 + border: 1px solid rgba(0, 0, 0, 0.08);
3791 + box-sizing: border-box;
3792 + object-fit: cover;
3793 +}
3607 3794 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3608 3795 flex: 1 1 0;
3609 3796 min-width: 0;
3610 3797 }
@@ -3651,8 +3838,9 @@
3651 3838
3652 3839 .wp-block-post-author-biography {
3653 3840 box-sizing: border-box;
3654 3841 white-space: pre-wrap;
3842 + overflow-wrap: break-word;
3655 3843 }
3656 3844
3657 3845 :where(.wp-block-post-comments-form textarea),
3658 3846 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3701,14 +3889,8 @@
3701 3889 display: block;
3702 3890 box-sizing: border-box;
3703 3891 width: 100%;
3704 3892 }
3705 -.wp-block-post-comments-form .comment-form-author label,
3706 -.wp-block-post-comments-form .comment-form-email label,
3707 -.wp-block-post-comments-form .comment-form-url label {
3708 - display: block;
3709 - margin-bottom: 0.25em;
3710 -}
3711 3893 .wp-block-post-comments-form .comment-form-cookies-consent {
3712 3894 display: flex;
3713 3895 gap: 0.25em;
3714 3896 }
@@ -3722,8 +3904,15 @@
3722 3904 font-size: var(--wp--preset--font-size--medium, smaller);
3723 3905 margin-right: 0.5em;
3724 3906 }
3725 3907
3908 +:where(.wp-block-post-comments-form .comment-form-author label),
3909 +:where(.wp-block-post-comments-form .comment-form-email label),
3910 +:where(.wp-block-post-comments-form .comment-form-url label) {
3911 + display: block;
3912 + margin-bottom: 0.25em;
3913 +}
3914 +
3726 3915 .wp-block-post-comments-count {
3727 3916 box-sizing: border-box;
3728 3917 }
3729 3918
@@ -3825,8 +4014,11 @@
3825 4014 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3826 4015 width: 100%;
3827 4016 }
3828 4017
4018 +.wp-block-post-navigation-link {
4019 + box-sizing: border-box;
4020 +}
3829 4021 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3830 4022 display: inline-block;
3831 4023 margin-left: 1ch;
3832 4024 }
@@ -3855,13 +4047,13 @@
3855 4047 box-sizing: border-box;
3856 4048 }
3857 4049
3858 4050 .wp-block-post-title {
3859 - word-break: break-word;
4051 + word-break: normal;
4052 + overflow-wrap: anywhere;
3860 4053 box-sizing: border-box;
3861 4054 }
3862 4055 .wp-block-post-title :where(a) {
3863 - display: inline-block;
3864 4056 font-family: inherit;
3865 4057 font-size: inherit;
3866 4058 font-style: inherit;
3867 4059 font-weight: inherit;
@@ -3879,9 +4071,9 @@
3879 4071 white-space: pre-wrap;
3880 4072 }
3881 4073
3882 4074 :where(.wp-block-preformatted.has-background) {
3883 - padding: 1.25em 2.375em;
4075 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3884 4076 }
3885 4077
3886 4078 .wp-block-pullquote {
3887 4079 text-align: center;
@@ -4009,8 +4201,12 @@
4009 4201 margin-inline-start: auto;
4010 4202 margin-inline-end: auto;
4011 4203 }
4012 4204
4205 +:where(.wp-block-query-no-results) {
4206 + box-sizing: border-box;
4207 +}
4208 +
4013 4209 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4014 4210 margin-inline-start: auto;
4015 4211 }
4016 4212 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4066,9 +4262,8 @@
4066 4262 }
4067 4263
4068 4264 .wp-block-read-more {
4069 4265 display: block;
4070 - width: -moz-fit-content;
4071 4266 width: fit-content;
4072 4267 }
4073 4268 .wp-block-read-more:where(:not([style*=text-decoration])) {
4074 4269 text-decoration: none;
@@ -4149,9 +4344,9 @@
4149 4344 flex-wrap: nowrap;
4150 4345 max-width: 100%;
4151 4346 }
4152 4347
4153 -.wp-block-search__label {
4348 +:where(.wp-block-search__label) {
4154 4349 width: 100%;
4155 4350 }
4156 4351
4157 4352 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4202,11 +4397,9 @@
4202 4397 margin-left: 0;
4203 4398 min-width: 3rem;
4204 4399 border: 1px solid #949494;
4205 4400 text-decoration: unset !important;
4206 - -webkit-appearance: initial;
4207 - -moz-appearance: initial;
4208 - appearance: initial;
4401 + appearance: initial;
4209 4402 }
4210 4403
4211 4404 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4212 4405 padding: 4px;
@@ -4774,9 +4967,8 @@
4774 4967 :where(.wp-block-tab-list button) {
4775 4968 box-sizing: border-box;
4776 4969 color: inherit;
4777 4970 display: block;
4778 - width: -moz-max-content;
4779 4971 width: max-content;
4780 4972 text-decoration: none;
4781 4973 cursor: pointer;
4782 4974 flex-basis: inherit !important;
@@ -4783,10 +4975,9 @@
4783 4975 flex-grow: inherit !important;
4784 4976 position: relative;
4785 4977 border: none;
4786 4978 background: none;
4787 - -moz-appearance: none;
4788 - appearance: none;
4979 + appearance: none;
4789 4980 -webkit-appearance: none;
4790 4981 margin: 0;
4791 4982 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4792 4983 font-size: inherit;
@@ -4806,11 +4997,17 @@
4806 4997 width: 100%;
4807 4998 bottom: 0;
4808 4999 }
4809 5000
4810 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5001 +.wp-block-tab-panel:empty {
4811 5002 display: none !important;
4812 5003 }
5004 +.wp-block-tab-panel[hidden] {
5005 + box-shadow: none !important;
5006 + border: none !important;
5007 + margin-block-start: 0;
5008 + padding: 0 !important;
5009 +}
4813 5010
4814 5011 .wp-block-table {
4815 5012 overflow-x: auto;
4816 5013 }
@@ -5010,9 +5207,10 @@
5010 5207 box-sizing: border-box;
5011 5208 overflow: auto;
5012 5209 white-space: pre-wrap;
5013 5210 min-width: 1em;
5014 - word-break: break-word;
5211 + word-break: normal;
5212 + overflow-wrap: break-word;
5015 5213 }
5016 5214
5017 5215 :where(pre.wp-block-verse) {
5018 5216 font-family: inherit;
@@ -5027,10 +5225,9 @@
5027 5225 vertical-align: middle;
5028 5226 }
5029 5227 @supports (position: sticky) {
5030 5228 .wp-block-video [poster] {
5031 - -o-object-fit: cover;
5032 - object-fit: cover;
5229 + object-fit: cover;
5033 5230 }
5034 5231 }
5035 5232 .wp-block-video.aligncenter {
5036 5233 text-align: center;
@@ -5192,9 +5389,9 @@
5192 5389 overflow: hidden;
5193 5390 padding: 0;
5194 5391 position: absolute;
5195 5392 width: 1px;
5196 - word-wrap: normal !important;
5393 + overflow-wrap: normal !important;
5197 5394 word-break: normal !important;
5198 5395 }
5199 5396
5200 5397 .screen-reader-text:focus {
@@ -5303,16 +5500,12 @@
5303 5500 margin: 0 0 1em 0;
5304 5501 }
5305 5502
5306 5503 html :where(.is-position-sticky) {
5307 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5308 5504 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5309 - /* stylelint-enable length-zero-no-unit */
5310 5505 }
5311 5506
5312 5507 @media screen and (max-width: 600px) {
5313 5508 html :where(.is-position-sticky) {
5314 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5315 5509 --wp-admin--admin-bar--position-offset: 0px;
5316 - /* stylelint-enable length-zero-no-unit */
5317 5510 }
5318 5511 }