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 +424 -244 23.4.0 → 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]),
@@ -1772,17 +1744,30 @@
1772 1744 .wp-block-icon svg {
1773 1745 box-sizing: border-box;
1774 1746 fill: currentColor;
1775 1747 }
1748 +.wp-block-icon svg.is-flip-horizontal {
1749 + transform: scaleX(-1);
1750 +}
1751 +.wp-block-icon svg.is-flip-vertical {
1752 + transform: scaleY(-1);
1753 +}
1754 +.wp-block-icon svg.is-flip-horizontal.is-flip-vertical {
1755 + transform: scaleX(-1) scaleY(-1);
1756 +}
1776 1757
1777 1758 :where(.wp-block-icon) svg {
1778 1759 width: 100%;
1779 1760 height: 100%;
1780 1761 }
1762 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1763 + vector-effect: none;
1764 +}
1781 1765
1782 1766 .wp-block-image > a,
1783 1767 .wp-block-image > figure > a {
1784 1768 display: inline-block;
1769 + color: inherit;
1785 1770 }
1786 1771 .wp-block-image img {
1787 1772 height: auto;
1788 1773 max-width: 100%;
@@ -1857,20 +1842,15 @@
1857 1842 }
1858 1843 .wp-block-image.is-style-circle-mask img {
1859 1844 border-radius: 9999px;
1860 1845 }
1861 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1846 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1862 1847 .wp-block-image.is-style-circle-mask img {
1863 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1864 - -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>');
1865 - 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>');
1866 1849 mask-mode: alpha;
1867 - -webkit-mask-repeat: no-repeat;
1868 - mask-repeat: no-repeat;
1869 - -webkit-mask-size: contain;
1870 - mask-size: contain;
1871 - -webkit-mask-position: center;
1872 - mask-position: center;
1850 + mask-repeat: no-repeat;
1851 + mask-size: contain;
1852 + mask-position: center;
1873 1853 border-radius: 0;
1874 1854 }
1875 1855 }
1876 1856
@@ -2250,49 +2230,54 @@
2250 2230 .wp-block-latest-posts.wp-block-latest-posts__list li {
2251 2231 clear: both;
2252 2232 overflow-wrap: break-word;
2253 2233 }
2254 -.wp-block-latest-posts.is-grid {
2234 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2255 2235 display: flex;
2256 2236 flex-wrap: wrap;
2257 2237 }
2258 -.wp-block-latest-posts.is-grid li {
2238 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2259 2239 margin: 0 1.25em 1.25em 0;
2260 2240 width: 100%;
2261 2241 }
2262 2242 @media (min-width: 600px) {
2263 - .wp-block-latest-posts.columns-2 li {
2243 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2264 2244 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2265 2245 }
2266 - .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) {
2267 2247 margin-right: 0;
2268 2248 }
2269 - .wp-block-latest-posts.columns-3 li {
2249 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2270 2250 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2271 2251 }
2272 - .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) {
2273 2253 margin-right: 0;
2274 2254 }
2275 - .wp-block-latest-posts.columns-4 li {
2255 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2276 2256 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2277 2257 }
2278 - .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) {
2279 2259 margin-right: 0;
2280 2260 }
2281 - .wp-block-latest-posts.columns-5 li {
2261 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2282 2262 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2283 2263 }
2284 - .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) {
2285 2265 margin-right: 0;
2286 2266 }
2287 - .wp-block-latest-posts.columns-6 li {
2267 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2288 2268 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2289 2269 }
2290 - .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) {
2291 2271 margin-right: 0;
2292 2272 }
2293 2273 }
2294 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 +}
2295 2280 :root :where(.wp-block-latest-posts.is-grid) {
2296 2281 padding: 0;
2297 2282 }
2298 2283 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2341,9 +2326,9 @@
2341 2326 box-sizing: border-box;
2342 2327 }
2343 2328
2344 2329 :root :where(.wp-block-list.has-background) {
2345 - padding: 1.25em 2.375em;
2330 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2346 2331 }
2347 2332
2348 2333 .wp-block-loginout {
2349 2334 box-sizing: border-box;
@@ -2446,9 +2431,9 @@
2446 2431 height: 1px;
2447 2432 padding: 0;
2448 2433 margin: -1px;
2449 2434 overflow: hidden;
2450 - clip: rect(0, 0, 0, 0);
2435 + clip-path: inset(50%);
2451 2436 border: 0;
2452 2437 }
2453 2438
2454 2439 /* Image fill for versions 8 and onwards */
@@ -2466,10 +2451,9 @@
2466 2451 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2467 2452 position: absolute;
2468 2453 width: 100%;
2469 2454 height: 100%;
2470 - -o-object-fit: cover;
2471 - object-fit: cover;
2455 + object-fit: cover;
2472 2456 }
2473 2457
2474 2458 /*
2475 2459 * Here we here not able to use a mobile first CSS approach.
@@ -2565,9 +2549,16 @@
2565 2549 .wp-block-navigation.is-vertical {
2566 2550 --navigation-layout-direction: column;
2567 2551 --navigation-layout-justify: initial;
2568 2552 --navigation-layout-align: flex-start;
2553 + text-align: var(--navigation-layout-text-align, inherit);
2569 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 +}
2570 2561 .wp-block-navigation.no-wrap {
2571 2562 --navigation-layout-wrap: nowrap;
2572 2563 }
2573 2564 .wp-block-navigation.items-justified-center {
@@ -2572,8 +2563,9 @@
2572 2563 }
2573 2564 .wp-block-navigation.items-justified-center {
2574 2565 --navigation-layout-justification-setting: center;
2575 2566 --navigation-layout-justify: center;
2567 + --navigation-layout-text-align: center;
2576 2568 }
2577 2569 .wp-block-navigation.items-justified-center.is-vertical {
2578 2570 --navigation-layout-align: center;
2579 2571 }
@@ -2579,8 +2571,9 @@
2579 2571 }
2580 2572 .wp-block-navigation.items-justified-right {
2581 2573 --navigation-layout-justification-setting: flex-end;
2582 2574 --navigation-layout-justify: flex-end;
2575 + --navigation-layout-text-align: end;
2583 2576 }
2584 2577 .wp-block-navigation.items-justified-right.is-vertical {
2585 2578 --navigation-layout-align: flex-end;
2586 2579 }
@@ -2651,9 +2644,9 @@
2651 2644 transform: rotate(-90deg);
2652 2645 }
2653 2646 }
2654 2647 @media (hover: hover) {
2655 - .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 {
2656 2649 visibility: visible;
2657 2650 overflow: visible;
2658 2651 opacity: 1;
2659 2652 width: auto;
@@ -2660,10 +2653,9 @@
2660 2653 height: auto;
2661 2654 min-width: 200px;
2662 2655 }
2663 2656 }
2664 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2665 -.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 {
2666 2658 visibility: visible;
2667 2659 overflow: visible;
2668 2660 opacity: 1;
2669 2661 width: auto;
@@ -2711,8 +2703,9 @@
2711 2703 position: static;
2712 2704 border: none;
2713 2705 background-color: transparent;
2714 2706 color: inherit;
2707 + box-shadow: none !important;
2715 2708 }
2716 2709
2717 2710 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2718 2711 left: 0;
@@ -2918,8 +2911,9 @@
2918 2911 display: flex;
2919 2912 flex-direction: column;
2920 2913 flex-wrap: nowrap;
2921 2914 align-items: var(--navigation-layout-justification-setting, inherit);
2915 + text-align: var(--navigation-layout-text-align, inherit);
2922 2916 }
2923 2917 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2924 2918 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2925 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2945,11 +2939,13 @@
2945 2939 gap: inherit;
2946 2940 }
2947 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 {
2948 2942 padding-top: var(--wp--style--block-gap, 2em);
2943 + text-align: inherit;
2949 2944 }
2950 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 {
2951 2946 padding: 0;
2947 + text-align: inherit;
2952 2948 }
2953 2949 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2954 2950 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2955 2951 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2963,8 +2959,11 @@
2963 2959 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2964 2960 color: inherit !important;
2965 2961 background: transparent !important;
2966 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 +}
2967 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 {
2968 2967 right: auto;
2969 2968 left: auto;
2970 2969 }
@@ -3010,9 +3009,9 @@
3010 3009 }
3011 3010
3012 3011 .wp-block-navigation__toggle_button_label {
3013 3012 font-size: 1rem;
3014 - font-weight: bold;
3013 + font-weight: 700;
3015 3014 }
3016 3015
3017 3016 .wp-block-navigation__responsive-container-open,
3018 3017 .wp-block-navigation__responsive-container-close {
@@ -3120,8 +3119,20 @@
3120 3119 margin-left: 8px;
3121 3120 text-transform: uppercase;
3122 3121 }
3123 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 +
3124 3135 .wp-block-navigation-overlay-close {
3125 3136 display: inline-flex;
3126 3137 align-items: center;
3127 3138 justify-content: center;
@@ -3126,9 +3137,8 @@
3126 3137 align-items: center;
3127 3138 justify-content: center;
3128 3139 gap: 0.5em;
3129 3140 padding: 0;
3130 - border: none;
3131 3141 background: transparent;
3132 3142 cursor: pointer;
3133 3143 text-decoration: none;
3134 3144 }
@@ -3198,9 +3208,9 @@
3198 3208 overflow: hidden;
3199 3209 }
3200 3210
3201 3211 :root :where(p.has-background) {
3202 - padding: 1.25em 2.375em;
3212 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3203 3213 }
3204 3214
3205 3215 :where(p.has-text-color:not(.has-link-color)) a {
3206 3216 color: inherit;
@@ -3213,11 +3223,23 @@
3213 3223
3214 3224 .waveform-player {
3215 3225 font-family: inherit;
3216 3226 color: inherit;
3217 - 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);
3218 3234 }
3219 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 +
3220 3242 .waveform-player * {
3221 3243 box-sizing: border-box;
3222 3244 }
3223 3245
@@ -3223,26 +3245,26 @@
3223 3245
3224 3246 .waveform-body {
3225 3247 display: flex;
3226 3248 flex-direction: column;
3227 - gap: 8px;
3249 + gap: var(--waveform-body-gap, 8px);
3228 3250 }
3229 3251
3230 3252 .waveform-track {
3231 3253 display: flex;
3232 3254 align-items: center;
3233 - gap: 12px;
3255 + gap: var(--waveform-track-gap, 12px);
3234 3256 position: relative;
3235 3257 }
3236 3258
3237 3259 .waveform-btn {
3238 - width: 36px;
3239 - height: 36px;
3240 - min-width: 36px;
3241 - 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%);
3242 3264 border: 2px solid currentColor;
3243 3265 background: transparent;
3244 - color: inherit;
3266 + color: var(--wfp-button-color, inherit);
3245 3267 cursor: pointer;
3246 3268 display: flex;
3247 3269 align-items: center;
3248 3270 justify-content: center;
@@ -3256,8 +3278,27 @@
3256 3278 opacity: 1;
3257 3279 transform: scale(1.05);
3258 3280 }
3259 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 +
3260 3301 .waveform-btn:disabled {
3261 3302 cursor: not-allowed;
3262 3303 opacity: 0.3;
3263 3304 }
@@ -3270,14 +3311,48 @@
3270 3311 height: 100%;
3271 3312 }
3272 3313
3273 3314 .waveform-btn svg {
3274 - width: 16px;
3275 - height: 16px;
3315 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3316 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3276 3317 fill: currentColor;
3277 3318 display: block;
3278 3319 }
3279 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 +
3280 3355 .waveform-icon-play svg {
3281 3356 margin-left: 1px;
3282 3357 }
3283 3358
@@ -3289,8 +3364,12 @@
3289 3364 min-width: 0;
3290 3365 width: 100%;
3291 3366 }
3292 3367
3368 +.waveform-container:focus-visible {
3369 + outline: 2px solid currentColor;
3370 +}
3371 +
3293 3372 .waveform-container canvas {
3294 3373 display: block;
3295 3374 width: 100%;
3296 3375 height: 100%;
@@ -3316,8 +3395,9 @@
3316 3395 min-width: 0;
3317 3396 }
3318 3397
3319 3398 .waveform-title {
3399 + color: var(--wfp-text-color);
3320 3400 white-space: nowrap;
3321 3401 overflow: hidden;
3322 3402 text-overflow: ellipsis;
3323 3403 font-weight: 500;
@@ -3322,9 +3402,10 @@
3322 3402 text-overflow: ellipsis;
3323 3403 font-weight: 500;
3324 3404 }
3325 3405
3326 -.waveform-subtitle {
3406 +.waveform-artist {
3407 + color: var(--wfp-text-secondary-color);
3327 3408 font-size: 11px;
3328 3409 white-space: nowrap;
3329 3410 overflow: hidden;
3330 3411 text-overflow: ellipsis;
@@ -3330,8 +3411,9 @@
3330 3411 text-overflow: ellipsis;
3331 3412 }
3332 3413
3333 3414 .waveform-time {
3415 + color: var(--wfp-text-secondary-color);
3334 3416 font-size: 11px;
3335 3417 white-space: nowrap;
3336 3418 flex-shrink: 0;
3337 3419 }
@@ -3336,8 +3418,9 @@
3336 3418 flex-shrink: 0;
3337 3419 }
3338 3420
3339 3421 .waveform-bpm {
3422 + color: var(--wfp-text-secondary-color);
3340 3423 font-size: 11px;
3341 3424 white-space: nowrap;
3342 3425 flex-shrink: 0;
3343 3426 display: inline-flex;
@@ -3393,8 +3476,14 @@
3393 3476 width: 4px;
3394 3477 z-index: 20;
3395 3478 }
3396 3479
3480 +.waveform-marker.active {
3481 + width: 4px;
3482 + background: currentColor;
3483 + z-index: 10;
3484 +}
3485 +
3397 3486 .waveform-marker-tooltip {
3398 3487 position: absolute;
3399 3488 bottom: calc(100% + 4px);
3400 3489 left: 50%;
@@ -3410,12 +3499,54 @@
3410 3499 transition: opacity 0.2s;
3411 3500 z-index: 1000;
3412 3501 }
3413 3502
3414 -.waveform-marker:hover .waveform-marker-tooltip {
3503 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3415 3504 opacity: 1;
3416 3505 }
3417 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 +
3418 3549 .waveform-btn:focus-visible {
3419 3550 outline: 2px solid currentColor;
3420 3551 outline-offset: 2px;
3421 3552 }
@@ -3484,15 +3615,15 @@
3484 3615 color: #fff;
3485 3616 }
3486 3617
3487 3618 .speed-option.active {
3488 - background: rgba(168, 85, 247, 0.2);
3489 - color: #a855f7;
3619 + background: rgba(255, 255, 255, 0.1607843137);
3620 + color: #fff;
3490 3621 font-weight: 600;
3491 3622 }
3492 3623
3493 3624 .waveform-player.waveform-focused {
3494 - outline: 2px solid rgba(168, 85, 247, 0.5);
3625 + outline: 2px solid var(--wfp-accent);
3495 3626 outline-offset: 2px;
3496 3627 border-radius: 4px;
3497 3628 }
3498 3629
@@ -3500,12 +3631,26 @@
3500 3631 outline: none;
3501 3632 }
3502 3633
3503 3634 .waveform-player:focus-visible {
3504 - outline: 1px solid rgba(168, 85, 247, 0.3);
3635 + outline: 1px solid var(--wfp-accent);
3505 3636 outline-offset: 1px;
3506 3637 }
3507 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 +
3508 3653 .waveform-player.waveform-focused {
3509 3654 outline: none;
3510 3655 }
3511 3656
@@ -3530,11 +3675,11 @@
3530 3675 }
3531 3676
3532 3677 @media (max-width: 480px) {
3533 3678 .waveform-btn {
3534 - width: 32px;
3535 - height: 32px;
3536 - 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);
3537 3682 }
3538 3683 .waveform-container {
3539 3684 min-height: 50px;
3540 3685 }
@@ -3540,15 +3685,21 @@
3540 3685 }
3541 3686 .waveform-info {
3542 3687 font-size: 12px;
3543 3688 }
3544 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3689 + .waveform-artist, .waveform-time, .waveform-bpm {
3545 3690 font-size: 10px;
3546 3691 }
3547 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 +}
3548 3700 .wp-block-playlist {
3549 - overflow: hidden;
3550 - overflow: clip;
3701 + box-sizing: border-box;
3551 3702 }
3552 3703 .wp-block-playlist .wp-block-playlist__waveform-player {
3553 3704 width: 100%;
3554 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3553,13 +3704,18 @@
3553 3704 width: 100%;
3554 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3555 3706 position: relative;
3556 3707 }
3708 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3709 + outline: revert;
3710 + outline-offset: revert;
3711 +}
3557 3712 .wp-block-playlist .waveform-track {
3558 3713 height: 100px;
3559 3714 gap: 0;
3560 3715 }
3561 3716 .wp-block-playlist .waveform-btn {
3717 + border: none;
3562 3718 border-radius: 0;
3563 3719 border-end-start-radius: 0.125rem;
3564 3720 border-start-start-radius: 0.125rem;
3565 3721 width: 100px;
@@ -3570,14 +3726,45 @@
3570 3726 }
3571 3727 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3572 3728 transform: none;
3573 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 +}
3574 3750 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3575 3751 margin-bottom: 0;
3576 3752 }
3577 -.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 {
3578 3759 opacity: 0.7;
3579 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 +}
3580 3767 .wp-block-playlist .wp-block-playlist__tracklist {
3581 3768 margin: 0;
3582 3769 padding-left: 0;
3583 3770 list-style: none;
@@ -3624,8 +3811,17 @@
3624 3811 margin-right: var(--wp--preset--spacing--20, 0.5em);
3625 3812 font-size: 0.85em;
3626 3813 opacity: 0.7;
3627 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 +}
3628 3824 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3629 3825 flex: 1 1 0;
3630 3826 min-width: 0;
3631 3827 }
@@ -3672,8 +3868,9 @@
3672 3868
3673 3869 .wp-block-post-author-biography {
3674 3870 box-sizing: border-box;
3675 3871 white-space: pre-wrap;
3872 + overflow-wrap: break-word;
3676 3873 }
3677 3874
3678 3875 :where(.wp-block-post-comments-form textarea),
3679 3876 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3722,14 +3919,8 @@
3722 3919 display: block;
3723 3920 box-sizing: border-box;
3724 3921 width: 100%;
3725 3922 }
3726 -.wp-block-post-comments-form .comment-form-author label,
3727 -.wp-block-post-comments-form .comment-form-email label,
3728 -.wp-block-post-comments-form .comment-form-url label {
3729 - display: block;
3730 - margin-bottom: 0.25em;
3731 -}
3732 3923 .wp-block-post-comments-form .comment-form-cookies-consent {
3733 3924 display: flex;
3734 3925 gap: 0.25em;
3735 3926 }
@@ -3743,8 +3934,15 @@
3743 3934 font-size: var(--wp--preset--font-size--medium, smaller);
3744 3935 margin-left: 0.5em;
3745 3936 }
3746 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 +
3747 3945 .wp-block-post-comments-count {
3748 3946 box-sizing: border-box;
3749 3947 }
3750 3948
@@ -3846,8 +4044,11 @@
3846 4044 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3847 4045 width: 100%;
3848 4046 }
3849 4047
4048 +.wp-block-post-navigation-link {
4049 + box-sizing: border-box;
4050 +}
3850 4051 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3851 4052 display: inline-block;
3852 4053 margin-right: 1ch;
3853 4054 }
@@ -3876,13 +4077,13 @@
3876 4077 box-sizing: border-box;
3877 4078 }
3878 4079
3879 4080 .wp-block-post-title {
3880 - word-break: break-word;
4081 + word-break: normal;
4082 + overflow-wrap: anywhere;
3881 4083 box-sizing: border-box;
3882 4084 }
3883 4085 .wp-block-post-title :where(a) {
3884 - display: inline-block;
3885 4086 font-family: inherit;
3886 4087 font-size: inherit;
3887 4088 font-style: inherit;
3888 4089 font-weight: inherit;
@@ -3900,9 +4101,9 @@
3900 4101 white-space: pre-wrap;
3901 4102 }
3902 4103
3903 4104 :where(.wp-block-preformatted.has-background) {
3904 - padding: 1.25em 2.375em;
4105 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3905 4106 }
3906 4107
3907 4108 .wp-block-pullquote {
3908 4109 text-align: center;
@@ -4030,8 +4231,12 @@
4030 4231 margin-inline-start: auto;
4031 4232 margin-inline-end: auto;
4032 4233 }
4033 4234
4235 +:where(.wp-block-query-no-results) {
4236 + box-sizing: border-box;
4237 +}
4238 +
4034 4239 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4035 4240 margin-inline-start: auto;
4036 4241 }
4037 4242 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4087,9 +4292,8 @@
4087 4292 }
4088 4293
4089 4294 .wp-block-read-more {
4090 4295 display: block;
4091 - width: -moz-fit-content;
4092 4296 width: fit-content;
4093 4297 }
4094 4298 .wp-block-read-more:where(:not([style*=text-decoration])) {
4095 4299 text-decoration: none;
@@ -4172,9 +4376,9 @@
4172 4376 flex-wrap: nowrap;
4173 4377 max-width: 100%;
4174 4378 }
4175 4379
4176 -.wp-block-search__label {
4380 +:where(.wp-block-search__label) {
4177 4381 width: 100%;
4178 4382 }
4179 4383
4180 4384 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4225,11 +4429,9 @@
4225 4429 margin-right: 0;
4226 4430 min-width: 3rem;
4227 4431 border: 1px solid #949494;
4228 4432 text-decoration: unset !important;
4229 - -webkit-appearance: initial;
4230 - -moz-appearance: initial;
4231 - appearance: initial;
4433 + appearance: initial;
4232 4434 }
4233 4435
4234 4436 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4235 4437 padding: 4px;
@@ -4794,13 +4996,12 @@
4794 4996 padding: 1ch 2ch;
4795 4997 text-decoration: none !important;
4796 4998 }
4797 4999
4798 -.wp-block-tab {
5000 +:where(.wp-block-tab-list button) {
4799 5001 box-sizing: border-box;
4800 5002 color: inherit;
4801 5003 display: block;
4802 - width: -moz-max-content;
4803 5004 width: max-content;
4804 5005 text-decoration: none;
4805 5006 cursor: pointer;
4806 5007 flex-basis: inherit !important;
@@ -4807,10 +5008,9 @@
4807 5008 flex-grow: inherit !important;
4808 5009 position: relative;
4809 5010 border: none;
4810 5011 background: none;
4811 - -moz-appearance: none;
4812 - appearance: none;
5012 + appearance: none;
4813 5013 -webkit-appearance: none;
4814 5014 margin: 0;
4815 5015 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4816 5016 font-size: inherit;
@@ -4820,9 +5020,9 @@
4820 5020 letter-spacing: inherit;
4821 5021 text-transform: inherit;
4822 5022 text-align: inherit;
4823 5023 }
4824 -.wp-block-tab[aria-selected=true]::before, .wp-block-tab.is-active::before {
5024 +:where(.wp-block-tab-list button)[aria-selected=true]::before {
4825 5025 content: "";
4826 5026 position: absolute;
4827 5027 border-bottom: 2px solid currentColor;
4828 5028 pointer-events: none;
@@ -4830,34 +5030,18 @@
4830 5030 width: 100%;
4831 5031 bottom: 0;
4832 5032 }
4833 5033
4834 -.wp-block-tab-panel {
4835 - max-width: 100%;
4836 - flex-basis: 100%;
4837 - flex-grow: 1;
4838 - box-sizing: border-box;
4839 -}
4840 -.wp-block-tab-panel > *:first-child {
4841 - margin-top: 0;
4842 -}
4843 -.wp-block-tab-panel > *:last-child {
4844 - margin-bottom: 0;
4845 -}
4846 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5034 +.wp-block-tab-panel:empty {
4847 5035 display: none !important;
4848 5036 }
4849 -
4850 -.wp-block-tab-panel.wp-block.has-background,
4851 -.wp-block-tab-panel:not(.wp-block).has-background {
4852 - padding: var(--wp--preset--spacing--30);
5037 +.wp-block-tab-panel[hidden] {
5038 + box-shadow: none !important;
5039 + border: none !important;
5040 + margin-block-start: 0;
5041 + padding: 0 !important;
4853 5042 }
4854 5043
4855 -.wp-block-tab-panels {
4856 - flex-grow: 1;
4857 - min-width: 0;
4858 -}
4859 -
4860 5044 .wp-block-table {
4861 5045 overflow-x: auto;
4862 5046 }
4863 5047 .wp-block-table table {
@@ -5056,9 +5240,10 @@
5056 5240 box-sizing: border-box;
5057 5241 overflow: auto;
5058 5242 white-space: pre-wrap;
5059 5243 min-width: 1em;
5060 - word-break: break-word;
5244 + word-break: normal;
5245 + overflow-wrap: break-word;
5061 5246 }
5062 5247
5063 5248 :where(pre.wp-block-verse) {
5064 5249 font-family: inherit;
@@ -5073,10 +5258,9 @@
5073 5258 vertical-align: middle;
5074 5259 }
5075 5260 @supports (position: sticky) {
5076 5261 .wp-block-video [poster] {
5077 - -o-object-fit: cover;
5078 - object-fit: cover;
5262 + object-fit: cover;
5079 5263 }
5080 5264 }
5081 5265 .wp-block-video.aligncenter {
5082 5266 text-align: center;
@@ -5240,9 +5424,9 @@
5240 5424 overflow: hidden;
5241 5425 padding: 0;
5242 5426 position: absolute;
5243 5427 width: 1px;
5244 - word-wrap: normal !important;
5428 + overflow-wrap: normal !important;
5245 5429 word-break: normal !important;
5246 5430 }
5247 5431
5248 5432 .screen-reader-text:focus {
@@ -5355,16 +5539,12 @@
5355 5539 margin: 0 0 1em 0;
5356 5540 }
5357 5541
5358 5542 html :where(.is-position-sticky) {
5359 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5360 5543 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5361 - /* stylelint-enable length-zero-no-unit */
5362 5544 }
5363 5545
5364 5546 @media screen and (max-width: 600px) {
5365 5547 html :where(.is-position-sticky) {
5366 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5367 5548 --wp-admin--admin-bar--position-offset: 0px;
5368 - /* stylelint-enable length-zero-no-unit */
5369 5549 }
5370 5550 }