| @@ -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 | |
| @@ -1011,8 +1022,14 @@ | ||
| 1011 | 1022 | outline: none; |
| 1012 | 1023 | border: none; |
| 1013 | 1024 | box-shadow: none; |
| 1014 | 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 | +} | |
| 1015 | 1032 | .wp-block-cover-image .wp-block-cover__embed-background, |
| 1016 | 1033 | .wp-block-cover .wp-block-cover__embed-background { |
| 1017 | 1034 | position: absolute; |
| 1018 | 1035 | top: 0; |
| @@ -1303,55 +1320,8 @@ | ||
| 1303 | 1320 | opacity: 0.85; |
| 1304 | 1321 | text-decoration: none; |
| 1305 | 1322 | } |
| 1306 | 1323 | |
| 1307 | -.wp-block-form-input__label { | |
| 1308 | - width: 100%; | |
| 1309 | - display: flex; | |
| 1310 | - flex-direction: column; | |
| 1311 | - gap: 0.25em; | |
| 1312 | - margin-bottom: 0.5em; | |
| 1313 | -} | |
| 1314 | -.wp-block-form-input__label.is-label-inline { | |
| 1315 | - flex-direction: row; | |
| 1316 | - gap: 0.5em; | |
| 1317 | - align-items: center; | |
| 1318 | -} | |
| 1319 | -.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content { | |
| 1320 | - margin-bottom: 0.5em; | |
| 1321 | -} | |
| 1322 | -.wp-block-form-input__label:has(input[type=checkbox]) { | |
| 1323 | - flex-direction: row; | |
| 1324 | - width: fit-content; | |
| 1325 | -} | |
| 1326 | -.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content { | |
| 1327 | - margin: 0; | |
| 1328 | -} | |
| 1329 | -.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) { | |
| 1330 | - /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */ | |
| 1331 | - flex-direction: row-reverse; | |
| 1332 | -} | |
| 1333 | - | |
| 1334 | -.wp-block-form-input__label-content { | |
| 1335 | - width: fit-content; | |
| 1336 | -} | |
| 1337 | - | |
| 1338 | -:where(.wp-block-form-input__input) { | |
| 1339 | - padding: 0 0.5em; | |
| 1340 | - font-size: 1em; | |
| 1341 | - margin-bottom: 0.5em; | |
| 1342 | -} | |
| 1343 | -: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] { | |
| 1344 | - min-height: 2em; | |
| 1345 | - line-height: 2; | |
| 1346 | - border-width: 1px; | |
| 1347 | - border-style: solid; | |
| 1348 | -} | |
| 1349 | - | |
| 1350 | -textarea.wp-block-form-input__input { | |
| 1351 | - min-height: 10em; | |
| 1352 | -} | |
| 1353 | - | |
| 1354 | 1324 | .wp-block-gallery:not(.has-nested-images), |
| 1355 | 1325 | .blocks-gallery-grid:not(.has-nested-images) { |
| 1356 | 1326 | display: flex; |
| 1357 | 1327 | flex-wrap: wrap; |
| @@ -1540,37 +1510,104 @@ | ||
| 1540 | 1510 | .wp-block-gallery:not(.is-cropped) .blocks-gallery-item { |
| 1541 | 1511 | align-self: flex-start; |
| 1542 | 1512 | } |
| 1543 | 1513 | |
| 1544 | -figure.wp-block-gallery.has-nested-images { | |
| 1514 | +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) { | |
| 1545 | 1515 | align-items: normal; |
| 1546 | 1516 | } |
| 1547 | 1517 | |
| 1548 | -.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) { | |
| 1549 | 1519 | width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2); |
| 1550 | 1520 | margin: 0; |
| 1551 | 1521 | } |
| 1552 | -.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 { | |
| 1553 | 1523 | display: flex; |
| 1554 | 1524 | flex-grow: 1; |
| 1555 | 1525 | justify-content: center; |
| 1556 | - position: relative; | |
| 1557 | 1526 | flex-direction: column; |
| 1558 | 1527 | max-width: 100%; |
| 1559 | 1528 | box-sizing: border-box; |
| 1560 | 1529 | } |
| 1561 | -.wp-block-gallery.has-nested-images figure.wp-block-image > div, | |
| 1562 | -.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 { | |
| 1563 | 1532 | margin: 0; |
| 1564 | 1533 | flex-direction: column; |
| 1565 | 1534 | flex-grow: 1; |
| 1566 | 1535 | } |
| 1567 | -.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 { | |
| 1568 | 1537 | display: block; |
| 1569 | 1538 | height: auto; |
| 1570 | 1539 | max-width: 100% !important; |
| 1571 | 1540 | width: auto; |
| 1572 | 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 | +} | |
| 1573 | 1610 | .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before, |
| 1574 | 1611 | .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { |
| 1575 | 1612 | position: absolute; |
| 1576 | 1613 | bottom: 0; |
| @@ -1583,10 +1620,9 @@ | ||
| 1583 | 1620 | height: 100%; |
| 1584 | 1621 | max-height: 3em; |
| 1585 | 1622 | pointer-events: none; |
| 1586 | 1623 | backdrop-filter: blur(3px); |
| 1587 | - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 1588 | - mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 1624 | + mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 1589 | 1625 | } |
| 1590 | 1626 | .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { |
| 1591 | 1627 | color: #fff; |
| 1592 | 1628 | text-shadow: 0 0 1.5px #000; |
| @@ -1657,71 +1693,13 @@ | ||
| 1657 | 1693 | } |
| 1658 | 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 { |
| 1659 | 1695 | content: none; |
| 1660 | 1696 | } |
| 1661 | -.wp-block-gallery.has-nested-images figcaption { | |
| 1662 | - flex-grow: 1; | |
| 1663 | - flex-basis: 100%; | |
| 1697 | + | |
| 1698 | +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption { | |
| 1699 | + grid-column: 1/-1; | |
| 1664 | 1700 | text-align: center; |
| 1665 | 1701 | } |
| 1666 | -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) { | |
| 1667 | - margin-top: 0; | |
| 1668 | - margin-bottom: auto; | |
| 1669 | -} | |
| 1670 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) { | |
| 1671 | - align-self: inherit; | |
| 1672 | -} | |
| 1673 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone), | |
| 1674 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a { | |
| 1675 | - display: flex; | |
| 1676 | -} | |
| 1677 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, | |
| 1678 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { | |
| 1679 | - width: 100%; | |
| 1680 | - flex: 1 0 0%; | |
| 1681 | - height: 100%; | |
| 1682 | - object-fit: cover; | |
| 1683 | -} | |
| 1684 | -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { | |
| 1685 | - width: 100%; | |
| 1686 | -} | |
| 1687 | -@media (min-width: 600px) { | |
| 1688 | - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { | |
| 1689 | - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); | |
| 1690 | - } | |
| 1691 | - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { | |
| 1692 | - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75); | |
| 1693 | - } | |
| 1694 | - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) { | |
| 1695 | - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8); | |
| 1696 | - } | |
| 1697 | - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { | |
| 1698 | - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333); | |
| 1699 | - } | |
| 1700 | - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) { | |
| 1701 | - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571); | |
| 1702 | - } | |
| 1703 | - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) { | |
| 1704 | - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875); | |
| 1705 | - } | |
| 1706 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { | |
| 1707 | - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); | |
| 1708 | - } | |
| 1709 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), | |
| 1710 | - .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) { | |
| 1711 | - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); | |
| 1712 | - } | |
| 1713 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { | |
| 1714 | - width: 100%; | |
| 1715 | - } | |
| 1716 | -} | |
| 1717 | -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright { | |
| 1718 | - max-width: 420px; | |
| 1719 | - width: 100%; | |
| 1720 | -} | |
| 1721 | -.wp-block-gallery.has-nested-images.aligncenter { | |
| 1722 | - justify-content: center; | |
| 1723 | -} | |
| 1724 | 1702 | |
| 1725 | 1703 | .wp-block-group { |
| 1726 | 1704 | box-sizing: border-box; |
| 1727 | 1705 | } |
| @@ -1735,9 +1713,9 @@ | ||
| 1735 | 1713 | h3:where(.wp-block-heading).has-background, |
| 1736 | 1714 | h4:where(.wp-block-heading).has-background, |
| 1737 | 1715 | h5:where(.wp-block-heading).has-background, |
| 1738 | 1716 | h6:where(.wp-block-heading).has-background { |
| 1739 | - padding: 1.25em 2.375em; | |
| 1717 | + padding: var(--wp--style--block-background-padding, 1.25em 2.375em); | |
| 1740 | 1718 | } |
| 1741 | 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]), |
| 1742 | 1720 | h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), |
| 1743 | 1721 | h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]), |
| @@ -1766,17 +1744,30 @@ | ||
| 1766 | 1744 | .wp-block-icon svg { |
| 1767 | 1745 | box-sizing: border-box; |
| 1768 | 1746 | fill: currentColor; |
| 1769 | 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 | +} | |
| 1770 | 1757 | |
| 1771 | 1758 | :where(.wp-block-icon) svg { |
| 1772 | 1759 | width: 100%; |
| 1773 | 1760 | height: 100%; |
| 1774 | 1761 | } |
| 1762 | +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) { | |
| 1763 | + vector-effect: none; | |
| 1764 | +} | |
| 1775 | 1765 | |
| 1776 | 1766 | .wp-block-image > a, |
| 1777 | 1767 | .wp-block-image > figure > a { |
| 1778 | 1768 | display: inline-block; |
| 1769 | + color: inherit; | |
| 1779 | 1770 | } |
| 1780 | 1771 | .wp-block-image img { |
| 1781 | 1772 | height: auto; |
| 1782 | 1773 | max-width: 100%; |
| @@ -1851,20 +1842,15 @@ | ||
| 1851 | 1842 | } |
| 1852 | 1843 | .wp-block-image.is-style-circle-mask img { |
| 1853 | 1844 | border-radius: 9999px; |
| 1854 | 1845 | } |
| 1855 | -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) { | |
| 1846 | +@supports (mask-image: none) or (-webkit-mask-image: none) { | |
| 1856 | 1847 | .wp-block-image.is-style-circle-mask img { |
| 1857 | - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */ | |
| 1858 | - -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>'); | |
| 1859 | - 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>'); | |
| 1860 | 1849 | mask-mode: alpha; |
| 1861 | - -webkit-mask-repeat: no-repeat; | |
| 1862 | - mask-repeat: no-repeat; | |
| 1863 | - -webkit-mask-size: contain; | |
| 1864 | - mask-size: contain; | |
| 1865 | - -webkit-mask-position: center; | |
| 1866 | - mask-position: center; | |
| 1850 | + mask-repeat: no-repeat; | |
| 1851 | + mask-size: contain; | |
| 1852 | + mask-position: center; | |
| 1867 | 1853 | border-radius: 0; |
| 1868 | 1854 | } |
| 1869 | 1855 | } |
| 1870 | 1856 | |
| @@ -2244,49 +2230,54 @@ | ||
| 2244 | 2230 | .wp-block-latest-posts.wp-block-latest-posts__list li { |
| 2245 | 2231 | clear: both; |
| 2246 | 2232 | overflow-wrap: break-word; |
| 2247 | 2233 | } |
| 2248 | -.wp-block-latest-posts.is-grid { | |
| 2234 | +.wp-block-latest-posts.is-grid:not(.is-layout-grid) { | |
| 2249 | 2235 | display: flex; |
| 2250 | 2236 | flex-wrap: wrap; |
| 2251 | 2237 | } |
| 2252 | -.wp-block-latest-posts.is-grid li { | |
| 2238 | +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li { | |
| 2253 | 2239 | margin: 0 1.25em 1.25em 0; |
| 2254 | 2240 | width: 100%; |
| 2255 | 2241 | } |
| 2256 | 2242 | @media (min-width: 600px) { |
| 2257 | - .wp-block-latest-posts.columns-2 li { | |
| 2243 | + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li { | |
| 2258 | 2244 | width: calc(100% / 2 - 1.25em + 1.25em / 2); |
| 2259 | 2245 | } |
| 2260 | - .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) { | |
| 2261 | 2247 | margin-right: 0; |
| 2262 | 2248 | } |
| 2263 | - .wp-block-latest-posts.columns-3 li { | |
| 2249 | + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li { | |
| 2264 | 2250 | width: calc(100% / 3 - 1.25em + 1.25em / 3); |
| 2265 | 2251 | } |
| 2266 | - .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) { | |
| 2267 | 2253 | margin-right: 0; |
| 2268 | 2254 | } |
| 2269 | - .wp-block-latest-posts.columns-4 li { | |
| 2255 | + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li { | |
| 2270 | 2256 | width: calc(100% / 4 - 1.25em + 1.25em / 4); |
| 2271 | 2257 | } |
| 2272 | - .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) { | |
| 2273 | 2259 | margin-right: 0; |
| 2274 | 2260 | } |
| 2275 | - .wp-block-latest-posts.columns-5 li { | |
| 2261 | + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li { | |
| 2276 | 2262 | width: calc(100% / 5 - 1.25em + 1.25em / 5); |
| 2277 | 2263 | } |
| 2278 | - .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) { | |
| 2279 | 2265 | margin-right: 0; |
| 2280 | 2266 | } |
| 2281 | - .wp-block-latest-posts.columns-6 li { | |
| 2267 | + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li { | |
| 2282 | 2268 | width: calc(100% / 6 - 1.25em + 1.25em / 6); |
| 2283 | 2269 | } |
| 2284 | - .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) { | |
| 2285 | 2271 | margin-right: 0; |
| 2286 | 2272 | } |
| 2287 | 2273 | } |
| 2288 | 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 | +} | |
| 2289 | 2280 | :root :where(.wp-block-latest-posts.is-grid) { |
| 2290 | 2281 | padding: 0; |
| 2291 | 2282 | } |
| 2292 | 2283 | :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) { |
| @@ -2335,9 +2326,9 @@ | ||
| 2335 | 2326 | box-sizing: border-box; |
| 2336 | 2327 | } |
| 2337 | 2328 | |
| 2338 | 2329 | :root :where(.wp-block-list.has-background) { |
| 2339 | - padding: 1.25em 2.375em; | |
| 2330 | + padding: var(--wp--style--block-background-padding, 1.25em 2.375em); | |
| 2340 | 2331 | } |
| 2341 | 2332 | |
| 2342 | 2333 | .wp-block-loginout { |
| 2343 | 2334 | box-sizing: border-box; |
| @@ -2440,9 +2431,9 @@ | ||
| 2440 | 2431 | height: 1px; |
| 2441 | 2432 | padding: 0; |
| 2442 | 2433 | margin: -1px; |
| 2443 | 2434 | overflow: hidden; |
| 2444 | - clip: rect(0, 0, 0, 0); | |
| 2435 | + clip-path: inset(50%); | |
| 2445 | 2436 | border: 0; |
| 2446 | 2437 | } |
| 2447 | 2438 | |
| 2448 | 2439 | /* Image fill for versions 8 and onwards */ |
| @@ -2558,9 +2549,16 @@ | ||
| 2558 | 2549 | .wp-block-navigation.is-vertical { |
| 2559 | 2550 | --navigation-layout-direction: column; |
| 2560 | 2551 | --navigation-layout-justify: initial; |
| 2561 | 2552 | --navigation-layout-align: flex-start; |
| 2553 | + text-align: var(--navigation-layout-text-align, inherit); | |
| 2562 | 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 | +} | |
| 2563 | 2561 | .wp-block-navigation.no-wrap { |
| 2564 | 2562 | --navigation-layout-wrap: nowrap; |
| 2565 | 2563 | } |
| 2566 | 2564 | .wp-block-navigation.items-justified-center { |
| @@ -2565,8 +2563,9 @@ | ||
| 2565 | 2563 | } |
| 2566 | 2564 | .wp-block-navigation.items-justified-center { |
| 2567 | 2565 | --navigation-layout-justification-setting: center; |
| 2568 | 2566 | --navigation-layout-justify: center; |
| 2567 | + --navigation-layout-text-align: center; | |
| 2569 | 2568 | } |
| 2570 | 2569 | .wp-block-navigation.items-justified-center.is-vertical { |
| 2571 | 2570 | --navigation-layout-align: center; |
| 2572 | 2571 | } |
| @@ -2572,8 +2571,9 @@ | ||
| 2572 | 2571 | } |
| 2573 | 2572 | .wp-block-navigation.items-justified-right { |
| 2574 | 2573 | --navigation-layout-justification-setting: flex-end; |
| 2575 | 2574 | --navigation-layout-justify: flex-end; |
| 2575 | + --navigation-layout-text-align: end; | |
| 2576 | 2576 | } |
| 2577 | 2577 | .wp-block-navigation.items-justified-right.is-vertical { |
| 2578 | 2578 | --navigation-layout-align: flex-end; |
| 2579 | 2579 | } |
| @@ -2644,9 +2644,9 @@ | ||
| 2644 | 2644 | transform: rotate(-90deg); |
| 2645 | 2645 | } |
| 2646 | 2646 | } |
| 2647 | 2647 | @media (hover: hover) { |
| 2648 | - .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 { | |
| 2649 | 2649 | visibility: visible; |
| 2650 | 2650 | overflow: visible; |
| 2651 | 2651 | opacity: 1; |
| 2652 | 2652 | width: auto; |
| @@ -2653,10 +2653,9 @@ | ||
| 2653 | 2653 | height: auto; |
| 2654 | 2654 | min-width: 200px; |
| 2655 | 2655 | } |
| 2656 | 2656 | } |
| 2657 | -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, | |
| 2658 | -.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 { | |
| 2659 | 2658 | visibility: visible; |
| 2660 | 2659 | overflow: visible; |
| 2661 | 2660 | opacity: 1; |
| 2662 | 2661 | width: auto; |
| @@ -2704,8 +2703,9 @@ | ||
| 2704 | 2703 | position: static; |
| 2705 | 2704 | border: none; |
| 2706 | 2705 | background-color: transparent; |
| 2707 | 2706 | color: inherit; |
| 2707 | + box-shadow: none !important; | |
| 2708 | 2708 | } |
| 2709 | 2709 | |
| 2710 | 2710 | .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { |
| 2711 | 2711 | left: 0; |
| @@ -2911,8 +2911,9 @@ | ||
| 2911 | 2911 | display: flex; |
| 2912 | 2912 | flex-direction: column; |
| 2913 | 2913 | flex-wrap: nowrap; |
| 2914 | 2914 | align-items: var(--navigation-layout-justification-setting, inherit); |
| 2915 | + text-align: var(--navigation-layout-text-align, inherit); | |
| 2915 | 2916 | } |
| 2916 | 2917 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content, |
| 2917 | 2918 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list, |
| 2918 | 2919 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { |
| @@ -2938,11 +2939,13 @@ | ||
| 2938 | 2939 | gap: inherit; |
| 2939 | 2940 | } |
| 2940 | 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 { |
| 2941 | 2942 | padding-top: var(--wp--style--block-gap, 2em); |
| 2943 | + text-align: inherit; | |
| 2942 | 2944 | } |
| 2943 | 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 { |
| 2944 | 2946 | padding: 0; |
| 2947 | + text-align: inherit; | |
| 2945 | 2948 | } |
| 2946 | 2949 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, |
| 2947 | 2950 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, |
| 2948 | 2951 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list { |
| @@ -2956,8 +2959,11 @@ | ||
| 2956 | 2959 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list { |
| 2957 | 2960 | color: inherit !important; |
| 2958 | 2961 | background: transparent !important; |
| 2959 | 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 | +} | |
| 2960 | 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 { |
| 2961 | 2967 | right: auto; |
| 2962 | 2968 | left: auto; |
| 2963 | 2969 | } |
| @@ -3003,9 +3009,9 @@ | ||
| 3003 | 3009 | } |
| 3004 | 3010 | |
| 3005 | 3011 | .wp-block-navigation__toggle_button_label { |
| 3006 | 3012 | font-size: 1rem; |
| 3007 | - font-weight: bold; | |
| 3013 | + font-weight: 700; | |
| 3008 | 3014 | } |
| 3009 | 3015 | |
| 3010 | 3016 | .wp-block-navigation__responsive-container-open, |
| 3011 | 3017 | .wp-block-navigation__responsive-container-close { |
| @@ -3113,8 +3119,20 @@ | ||
| 3113 | 3119 | margin-left: 8px; |
| 3114 | 3120 | text-transform: uppercase; |
| 3115 | 3121 | } |
| 3116 | 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 | + | |
| 3117 | 3135 | .wp-block-navigation-overlay-close { |
| 3118 | 3136 | display: inline-flex; |
| 3119 | 3137 | align-items: center; |
| 3120 | 3138 | justify-content: center; |
| @@ -3119,9 +3137,8 @@ | ||
| 3119 | 3137 | align-items: center; |
| 3120 | 3138 | justify-content: center; |
| 3121 | 3139 | gap: 0.5em; |
| 3122 | 3140 | padding: 0; |
| 3123 | - border: none; | |
| 3124 | 3141 | background: transparent; |
| 3125 | 3142 | cursor: pointer; |
| 3126 | 3143 | text-decoration: none; |
| 3127 | 3144 | } |
| @@ -3191,9 +3208,9 @@ | ||
| 3191 | 3208 | overflow: hidden; |
| 3192 | 3209 | } |
| 3193 | 3210 | |
| 3194 | 3211 | :root :where(p.has-background) { |
| 3195 | - padding: 1.25em 2.375em; | |
| 3212 | + padding: var(--wp--style--block-background-padding, 1.25em 2.375em); | |
| 3196 | 3213 | } |
| 3197 | 3214 | |
| 3198 | 3215 | :where(p.has-text-color:not(.has-link-color)) a { |
| 3199 | 3216 | color: inherit; |
| @@ -3206,11 +3223,23 @@ | ||
| 3206 | 3223 | |
| 3207 | 3224 | .waveform-player { |
| 3208 | 3225 | font-family: inherit; |
| 3209 | 3226 | color: inherit; |
| 3210 | - 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); | |
| 3211 | 3234 | } |
| 3212 | 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 | + | |
| 3213 | 3242 | .waveform-player * { |
| 3214 | 3243 | box-sizing: border-box; |
| 3215 | 3244 | } |
| 3216 | 3245 | |
| @@ -3216,26 +3245,26 @@ | ||
| 3216 | 3245 | |
| 3217 | 3246 | .waveform-body { |
| 3218 | 3247 | display: flex; |
| 3219 | 3248 | flex-direction: column; |
| 3220 | - gap: 8px; | |
| 3249 | + gap: var(--waveform-body-gap, 8px); | |
| 3221 | 3250 | } |
| 3222 | 3251 | |
| 3223 | 3252 | .waveform-track { |
| 3224 | 3253 | display: flex; |
| 3225 | 3254 | align-items: center; |
| 3226 | - gap: 12px; | |
| 3255 | + gap: var(--waveform-track-gap, 12px); | |
| 3227 | 3256 | position: relative; |
| 3228 | 3257 | } |
| 3229 | 3258 | |
| 3230 | 3259 | .waveform-btn { |
| 3231 | - width: 36px; | |
| 3232 | - height: 36px; | |
| 3233 | - min-width: 36px; | |
| 3234 | - 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%); | |
| 3235 | 3264 | border: 2px solid currentColor; |
| 3236 | 3265 | background: transparent; |
| 3237 | - color: inherit; | |
| 3266 | + color: var(--wfp-button-color, inherit); | |
| 3238 | 3267 | cursor: pointer; |
| 3239 | 3268 | display: flex; |
| 3240 | 3269 | align-items: center; |
| 3241 | 3270 | justify-content: center; |
| @@ -3249,8 +3278,27 @@ | ||
| 3249 | 3278 | opacity: 1; |
| 3250 | 3279 | transform: scale(1.05); |
| 3251 | 3280 | } |
| 3252 | 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 | + | |
| 3253 | 3301 | .waveform-btn:disabled { |
| 3254 | 3302 | cursor: not-allowed; |
| 3255 | 3303 | opacity: 0.3; |
| 3256 | 3304 | } |
| @@ -3263,14 +3311,48 @@ | ||
| 3263 | 3311 | height: 100%; |
| 3264 | 3312 | } |
| 3265 | 3313 | |
| 3266 | 3314 | .waveform-btn svg { |
| 3267 | - width: 16px; | |
| 3268 | - height: 16px; | |
| 3315 | + width: calc(var(--wfp-btn-size, 36px) * 0.45); | |
| 3316 | + height: calc(var(--wfp-btn-size, 36px) * 0.45); | |
| 3269 | 3317 | fill: currentColor; |
| 3270 | 3318 | display: block; |
| 3271 | 3319 | } |
| 3272 | 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 | + | |
| 3273 | 3355 | .waveform-icon-play svg { |
| 3274 | 3356 | margin-left: 1px; |
| 3275 | 3357 | } |
| 3276 | 3358 | |
| @@ -3282,8 +3364,12 @@ | ||
| 3282 | 3364 | min-width: 0; |
| 3283 | 3365 | width: 100%; |
| 3284 | 3366 | } |
| 3285 | 3367 | |
| 3368 | +.waveform-container:focus-visible { | |
| 3369 | + outline: 2px solid currentColor; | |
| 3370 | +} | |
| 3371 | + | |
| 3286 | 3372 | .waveform-container canvas { |
| 3287 | 3373 | display: block; |
| 3288 | 3374 | width: 100%; |
| 3289 | 3375 | height: 100%; |
| @@ -3309,8 +3395,9 @@ | ||
| 3309 | 3395 | min-width: 0; |
| 3310 | 3396 | } |
| 3311 | 3397 | |
| 3312 | 3398 | .waveform-title { |
| 3399 | + color: var(--wfp-text-color); | |
| 3313 | 3400 | white-space: nowrap; |
| 3314 | 3401 | overflow: hidden; |
| 3315 | 3402 | text-overflow: ellipsis; |
| 3316 | 3403 | font-weight: 500; |
| @@ -3315,9 +3402,10 @@ | ||
| 3315 | 3402 | text-overflow: ellipsis; |
| 3316 | 3403 | font-weight: 500; |
| 3317 | 3404 | } |
| 3318 | 3405 | |
| 3319 | -.waveform-subtitle { | |
| 3406 | +.waveform-artist { | |
| 3407 | + color: var(--wfp-text-secondary-color); | |
| 3320 | 3408 | font-size: 11px; |
| 3321 | 3409 | white-space: nowrap; |
| 3322 | 3410 | overflow: hidden; |
| 3323 | 3411 | text-overflow: ellipsis; |
| @@ -3323,8 +3411,9 @@ | ||
| 3323 | 3411 | text-overflow: ellipsis; |
| 3324 | 3412 | } |
| 3325 | 3413 | |
| 3326 | 3414 | .waveform-time { |
| 3415 | + color: var(--wfp-text-secondary-color); | |
| 3327 | 3416 | font-size: 11px; |
| 3328 | 3417 | white-space: nowrap; |
| 3329 | 3418 | flex-shrink: 0; |
| 3330 | 3419 | } |
| @@ -3329,8 +3418,9 @@ | ||
| 3329 | 3418 | flex-shrink: 0; |
| 3330 | 3419 | } |
| 3331 | 3420 | |
| 3332 | 3421 | .waveform-bpm { |
| 3422 | + color: var(--wfp-text-secondary-color); | |
| 3333 | 3423 | font-size: 11px; |
| 3334 | 3424 | white-space: nowrap; |
| 3335 | 3425 | flex-shrink: 0; |
| 3336 | 3426 | display: inline-flex; |
| @@ -3386,8 +3476,14 @@ | ||
| 3386 | 3476 | width: 4px; |
| 3387 | 3477 | z-index: 20; |
| 3388 | 3478 | } |
| 3389 | 3479 | |
| 3480 | +.waveform-marker.active { | |
| 3481 | + width: 4px; | |
| 3482 | + background: currentColor; | |
| 3483 | + z-index: 10; | |
| 3484 | +} | |
| 3485 | + | |
| 3390 | 3486 | .waveform-marker-tooltip { |
| 3391 | 3487 | position: absolute; |
| 3392 | 3488 | bottom: calc(100% + 4px); |
| 3393 | 3489 | left: 50%; |
| @@ -3403,12 +3499,54 @@ | ||
| 3403 | 3499 | transition: opacity 0.2s; |
| 3404 | 3500 | z-index: 1000; |
| 3405 | 3501 | } |
| 3406 | 3502 | |
| 3407 | -.waveform-marker:hover .waveform-marker-tooltip { | |
| 3503 | +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip { | |
| 3408 | 3504 | opacity: 1; |
| 3409 | 3505 | } |
| 3410 | 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 | + | |
| 3411 | 3549 | .waveform-btn:focus-visible { |
| 3412 | 3550 | outline: 2px solid currentColor; |
| 3413 | 3551 | outline-offset: 2px; |
| 3414 | 3552 | } |
| @@ -3477,15 +3615,15 @@ | ||
| 3477 | 3615 | color: #fff; |
| 3478 | 3616 | } |
| 3479 | 3617 | |
| 3480 | 3618 | .speed-option.active { |
| 3481 | - background: rgba(168, 85, 247, 0.2); | |
| 3482 | - color: #a855f7; | |
| 3619 | + background: rgba(255, 255, 255, 0.1607843137); | |
| 3620 | + color: #fff; | |
| 3483 | 3621 | font-weight: 600; |
| 3484 | 3622 | } |
| 3485 | 3623 | |
| 3486 | 3624 | .waveform-player.waveform-focused { |
| 3487 | - outline: 2px solid rgba(168, 85, 247, 0.5); | |
| 3625 | + outline: 2px solid var(--wfp-accent); | |
| 3488 | 3626 | outline-offset: 2px; |
| 3489 | 3627 | border-radius: 4px; |
| 3490 | 3628 | } |
| 3491 | 3629 | |
| @@ -3493,12 +3631,26 @@ | ||
| 3493 | 3631 | outline: none; |
| 3494 | 3632 | } |
| 3495 | 3633 | |
| 3496 | 3634 | .waveform-player:focus-visible { |
| 3497 | - outline: 1px solid rgba(168, 85, 247, 0.3); | |
| 3635 | + outline: 1px solid var(--wfp-accent); | |
| 3498 | 3636 | outline-offset: 1px; |
| 3499 | 3637 | } |
| 3500 | 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 | + | |
| 3501 | 3653 | .waveform-player.waveform-focused { |
| 3502 | 3654 | outline: none; |
| 3503 | 3655 | } |
| 3504 | 3656 | |
| @@ -3523,11 +3675,11 @@ | ||
| 3523 | 3675 | } |
| 3524 | 3676 | |
| 3525 | 3677 | @media (max-width: 480px) { |
| 3526 | 3678 | .waveform-btn { |
| 3527 | - width: 32px; | |
| 3528 | - height: 32px; | |
| 3529 | - 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); | |
| 3530 | 3682 | } |
| 3531 | 3683 | .waveform-container { |
| 3532 | 3684 | min-height: 50px; |
| 3533 | 3685 | } |
| @@ -3533,15 +3685,21 @@ | ||
| 3533 | 3685 | } |
| 3534 | 3686 | .waveform-info { |
| 3535 | 3687 | font-size: 12px; |
| 3536 | 3688 | } |
| 3537 | - .waveform-subtitle, .waveform-time, .waveform-bpm { | |
| 3689 | + .waveform-artist, .waveform-time, .waveform-bpm { | |
| 3538 | 3690 | font-size: 10px; |
| 3539 | 3691 | } |
| 3540 | 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 | +} | |
| 3541 | 3700 | .wp-block-playlist { |
| 3542 | - overflow: hidden; | |
| 3543 | - overflow: clip; | |
| 3701 | + box-sizing: border-box; | |
| 3544 | 3702 | } |
| 3545 | 3703 | .wp-block-playlist .wp-block-playlist__waveform-player { |
| 3546 | 3704 | width: 100%; |
| 3547 | 3705 | margin: var(--wp--preset--spacing--20, 0.625em) 0; |
| @@ -3546,13 +3704,18 @@ | ||
| 3546 | 3704 | width: 100%; |
| 3547 | 3705 | margin: var(--wp--preset--spacing--20, 0.625em) 0; |
| 3548 | 3706 | position: relative; |
| 3549 | 3707 | } |
| 3708 | +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible { | |
| 3709 | + outline: revert; | |
| 3710 | + outline-offset: revert; | |
| 3711 | +} | |
| 3550 | 3712 | .wp-block-playlist .waveform-track { |
| 3551 | 3713 | height: 100px; |
| 3552 | 3714 | gap: 0; |
| 3553 | 3715 | } |
| 3554 | 3716 | .wp-block-playlist .waveform-btn { |
| 3717 | + border: none; | |
| 3555 | 3718 | border-radius: 0; |
| 3556 | 3719 | border-end-start-radius: 0.125rem; |
| 3557 | 3720 | border-start-start-radius: 0.125rem; |
| 3558 | 3721 | width: 100px; |
| @@ -3563,14 +3726,45 @@ | ||
| 3563 | 3726 | } |
| 3564 | 3727 | .wp-block-playlist .waveform-btn:hover:not(:disabled) { |
| 3565 | 3728 | transform: none; |
| 3566 | 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 | +} | |
| 3567 | 3750 | .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn { |
| 3568 | 3751 | margin-bottom: 0; |
| 3569 | 3752 | } |
| 3570 | -.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 { | |
| 3571 | 3759 | opacity: 0.7; |
| 3572 | 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 | +} | |
| 3573 | 3767 | .wp-block-playlist .wp-block-playlist__tracklist { |
| 3574 | 3768 | margin: 0; |
| 3575 | 3769 | padding-left: 0; |
| 3576 | 3770 | list-style: none; |
| @@ -3580,8 +3774,11 @@ | ||
| 3580 | 3774 | } |
| 3581 | 3775 | .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-artist-is-hidden .wp-block-playlist-track__artist { |
| 3582 | 3776 | display: none; |
| 3583 | 3777 | } |
| 3778 | +.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-length-is-hidden .wp-block-playlist-track__length { | |
| 3779 | + display: none; | |
| 3780 | +} | |
| 3584 | 3781 | .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-show-numbers { |
| 3585 | 3782 | counter-reset: playlist-track; |
| 3586 | 3783 | } |
| 3587 | 3784 | |
| @@ -3614,8 +3811,17 @@ | ||
| 3614 | 3811 | margin-right: var(--wp--preset--spacing--20, 0.5em); |
| 3615 | 3812 | font-size: 0.85em; |
| 3616 | 3813 | opacity: 0.7; |
| 3617 | 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 | +} | |
| 3618 | 3824 | .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content { |
| 3619 | 3825 | flex: 1 1 0; |
| 3620 | 3826 | min-width: 0; |
| 3621 | 3827 | } |
| @@ -3662,8 +3868,9 @@ | ||
| 3662 | 3868 | |
| 3663 | 3869 | .wp-block-post-author-biography { |
| 3664 | 3870 | box-sizing: border-box; |
| 3665 | 3871 | white-space: pre-wrap; |
| 3872 | + overflow-wrap: break-word; | |
| 3666 | 3873 | } |
| 3667 | 3874 | |
| 3668 | 3875 | :where(.wp-block-post-comments-form textarea), |
| 3669 | 3876 | :where(.wp-block-post-comments-form input:not([type=submit])) { |
| @@ -3712,14 +3919,8 @@ | ||
| 3712 | 3919 | display: block; |
| 3713 | 3920 | box-sizing: border-box; |
| 3714 | 3921 | width: 100%; |
| 3715 | 3922 | } |
| 3716 | -.wp-block-post-comments-form .comment-form-author label, | |
| 3717 | -.wp-block-post-comments-form .comment-form-email label, | |
| 3718 | -.wp-block-post-comments-form .comment-form-url label { | |
| 3719 | - display: block; | |
| 3720 | - margin-bottom: 0.25em; | |
| 3721 | -} | |
| 3722 | 3923 | .wp-block-post-comments-form .comment-form-cookies-consent { |
| 3723 | 3924 | display: flex; |
| 3724 | 3925 | gap: 0.25em; |
| 3725 | 3926 | } |
| @@ -3733,8 +3934,15 @@ | ||
| 3733 | 3934 | font-size: var(--wp--preset--font-size--medium, smaller); |
| 3734 | 3935 | margin-left: 0.5em; |
| 3735 | 3936 | } |
| 3736 | 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 | + | |
| 3737 | 3945 | .wp-block-post-comments-count { |
| 3738 | 3946 | box-sizing: border-box; |
| 3739 | 3947 | } |
| 3740 | 3948 | |
| @@ -3836,8 +4044,11 @@ | ||
| 3836 | 4044 | .wp-block-post-featured-image:where(.alignleft, .alignright) { |
| 3837 | 4045 | width: 100%; |
| 3838 | 4046 | } |
| 3839 | 4047 | |
| 4048 | +.wp-block-post-navigation-link { | |
| 4049 | + box-sizing: border-box; | |
| 4050 | +} | |
| 3840 | 4051 | .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous { |
| 3841 | 4052 | display: inline-block; |
| 3842 | 4053 | margin-right: 1ch; |
| 3843 | 4054 | } |
| @@ -3866,13 +4077,13 @@ | ||
| 3866 | 4077 | box-sizing: border-box; |
| 3867 | 4078 | } |
| 3868 | 4079 | |
| 3869 | 4080 | .wp-block-post-title { |
| 3870 | - word-break: break-word; | |
| 4081 | + word-break: normal; | |
| 4082 | + overflow-wrap: anywhere; | |
| 3871 | 4083 | box-sizing: border-box; |
| 3872 | 4084 | } |
| 3873 | 4085 | .wp-block-post-title :where(a) { |
| 3874 | - display: inline-block; | |
| 3875 | 4086 | font-family: inherit; |
| 3876 | 4087 | font-size: inherit; |
| 3877 | 4088 | font-style: inherit; |
| 3878 | 4089 | font-weight: inherit; |
| @@ -3890,9 +4101,9 @@ | ||
| 3890 | 4101 | white-space: pre-wrap; |
| 3891 | 4102 | } |
| 3892 | 4103 | |
| 3893 | 4104 | :where(.wp-block-preformatted.has-background) { |
| 3894 | - padding: 1.25em 2.375em; | |
| 4105 | + padding: var(--wp--style--block-background-padding, 1.25em 2.375em); | |
| 3895 | 4106 | } |
| 3896 | 4107 | |
| 3897 | 4108 | .wp-block-pullquote { |
| 3898 | 4109 | text-align: center; |
| @@ -4020,8 +4231,12 @@ | ||
| 4020 | 4231 | margin-inline-start: auto; |
| 4021 | 4232 | margin-inline-end: auto; |
| 4022 | 4233 | } |
| 4023 | 4234 | |
| 4235 | +:where(.wp-block-query-no-results) { | |
| 4236 | + box-sizing: border-box; | |
| 4237 | +} | |
| 4238 | + | |
| 4024 | 4239 | .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type { |
| 4025 | 4240 | margin-inline-start: auto; |
| 4026 | 4241 | } |
| 4027 | 4242 | .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child { |
| @@ -4161,9 +4376,9 @@ | ||
| 4161 | 4376 | flex-wrap: nowrap; |
| 4162 | 4377 | max-width: 100%; |
| 4163 | 4378 | } |
| 4164 | 4379 | |
| 4165 | -.wp-block-search__label { | |
| 4380 | +:where(.wp-block-search__label) { | |
| 4166 | 4381 | width: 100%; |
| 4167 | 4382 | } |
| 4168 | 4383 | |
| 4169 | 4384 | .wp-block-search.wp-block-search__button-only .wp-block-search__button { |
| @@ -4781,9 +4996,9 @@ | ||
| 4781 | 4996 | padding: 1ch 2ch; |
| 4782 | 4997 | text-decoration: none !important; |
| 4783 | 4998 | } |
| 4784 | 4999 | |
| 4785 | -.wp-block-tab { | |
| 5000 | +:where(.wp-block-tab-list button) { | |
| 4786 | 5001 | box-sizing: border-box; |
| 4787 | 5002 | color: inherit; |
| 4788 | 5003 | display: block; |
| 4789 | 5004 | width: max-content; |
| @@ -4805,9 +5020,9 @@ | ||
| 4805 | 5020 | letter-spacing: inherit; |
| 4806 | 5021 | text-transform: inherit; |
| 4807 | 5022 | text-align: inherit; |
| 4808 | 5023 | } |
| 4809 | -.wp-block-tab[aria-selected=true]::before, .wp-block-tab.is-active::before { | |
| 5024 | +:where(.wp-block-tab-list button)[aria-selected=true]::before { | |
| 4810 | 5025 | content: ""; |
| 4811 | 5026 | position: absolute; |
| 4812 | 5027 | border-bottom: 2px solid currentColor; |
| 4813 | 5028 | pointer-events: none; |
| @@ -4815,34 +5030,18 @@ | ||
| 4815 | 5030 | width: 100%; |
| 4816 | 5031 | bottom: 0; |
| 4817 | 5032 | } |
| 4818 | 5033 | |
| 4819 | -.wp-block-tab-panel { | |
| 4820 | - max-width: 100%; | |
| 4821 | - flex-basis: 100%; | |
| 4822 | - flex-grow: 1; | |
| 4823 | - box-sizing: border-box; | |
| 4824 | -} | |
| 4825 | -.wp-block-tab-panel > *:first-child { | |
| 4826 | - margin-top: 0; | |
| 4827 | -} | |
| 4828 | -.wp-block-tab-panel > *:last-child { | |
| 4829 | - margin-bottom: 0; | |
| 4830 | -} | |
| 4831 | -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty { | |
| 5034 | +.wp-block-tab-panel:empty { | |
| 4832 | 5035 | display: none !important; |
| 4833 | 5036 | } |
| 4834 | - | |
| 4835 | -.wp-block-tab-panel.wp-block.has-background, | |
| 4836 | -.wp-block-tab-panel:not(.wp-block).has-background { | |
| 4837 | - 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; | |
| 4838 | 5042 | } |
| 4839 | 5043 | |
| 4840 | -.wp-block-tab-panels { | |
| 4841 | - flex-grow: 1; | |
| 4842 | - min-width: 0; | |
| 4843 | -} | |
| 4844 | - | |
| 4845 | 5044 | .wp-block-table { |
| 4846 | 5045 | overflow-x: auto; |
| 4847 | 5046 | } |
| 4848 | 5047 | .wp-block-table table { |
| @@ -5041,9 +5240,10 @@ | ||
| 5041 | 5240 | box-sizing: border-box; |
| 5042 | 5241 | overflow: auto; |
| 5043 | 5242 | white-space: pre-wrap; |
| 5044 | 5243 | min-width: 1em; |
| 5045 | - word-break: break-word; | |
| 5244 | + word-break: normal; | |
| 5245 | + overflow-wrap: break-word; | |
| 5046 | 5246 | } |
| 5047 | 5247 | |
| 5048 | 5248 | :where(pre.wp-block-verse) { |
| 5049 | 5249 | font-family: inherit; |
| @@ -5224,9 +5424,9 @@ | ||
| 5224 | 5424 | overflow: hidden; |
| 5225 | 5425 | padding: 0; |
| 5226 | 5426 | position: absolute; |
| 5227 | 5427 | width: 1px; |
| 5228 | - word-wrap: normal !important; | |
| 5428 | + overflow-wrap: normal !important; | |
| 5229 | 5429 | word-break: normal !important; |
| 5230 | 5430 | } |
| 5231 | 5431 | |
| 5232 | 5432 | .screen-reader-text:focus { |
| @@ -5259,48 +5459,68 @@ | ||
| 5259 | 5459 | html :where(.has-border-color) { |
| 5260 | 5460 | border-style: solid; |
| 5261 | 5461 | } |
| 5262 | 5462 | |
| 5263 | -html :where([style*=border-color]) { | |
| 5463 | +html :where([style^=border-color], | |
| 5464 | +[style*=";border-color"], | |
| 5465 | +[style*="; border-color"]) { | |
| 5264 | 5466 | border-style: solid; |
| 5265 | 5467 | } |
| 5266 | 5468 | |
| 5267 | -html :where([style*=border-top-color]) { | |
| 5469 | +html :where([style^=border-top-color], | |
| 5470 | +[style*=";border-top-color"], | |
| 5471 | +[style*="; border-top-color"]) { | |
| 5268 | 5472 | border-top-style: solid; |
| 5269 | 5473 | } |
| 5270 | 5474 | |
| 5271 | -html :where([style*=border-right-color]) { | |
| 5475 | +html :where([style^=border-right-color], | |
| 5476 | +[style*=";border-right-color"], | |
| 5477 | +[style*="; border-right-color"]) { | |
| 5272 | 5478 | /*rtl:ignore*/ |
| 5273 | 5479 | border-right-style: solid; |
| 5274 | 5480 | } |
| 5275 | 5481 | |
| 5276 | -html :where([style*=border-bottom-color]) { | |
| 5482 | +html :where([style^=border-bottom-color], | |
| 5483 | +[style*=";border-bottom-color"], | |
| 5484 | +[style*="; border-bottom-color"]) { | |
| 5277 | 5485 | border-bottom-style: solid; |
| 5278 | 5486 | } |
| 5279 | 5487 | |
| 5280 | -html :where([style*=border-left-color]) { | |
| 5488 | +html :where([style^=border-left-color], | |
| 5489 | +[style*=";border-left-color"], | |
| 5490 | +[style*="; border-left-color"]) { | |
| 5281 | 5491 | /*rtl:ignore*/ |
| 5282 | 5492 | border-left-style: solid; |
| 5283 | 5493 | } |
| 5284 | 5494 | |
| 5285 | -html :where([style*=border-width]) { | |
| 5495 | +html :where([style^=border-width], | |
| 5496 | +[style*=";border-width"], | |
| 5497 | +[style*="; border-width"]) { | |
| 5286 | 5498 | border-style: solid; |
| 5287 | 5499 | } |
| 5288 | 5500 | |
| 5289 | -html :where([style*=border-top-width]) { | |
| 5501 | +html :where([style^=border-top-width], | |
| 5502 | +[style*=";border-top-width"], | |
| 5503 | +[style*="; border-top-width"]) { | |
| 5290 | 5504 | border-top-style: solid; |
| 5291 | 5505 | } |
| 5292 | 5506 | |
| 5293 | -html :where([style*=border-right-width]) { | |
| 5507 | +html :where([style^=border-right-width], | |
| 5508 | +[style*=";border-right-width"], | |
| 5509 | +[style*="; border-right-width"]) { | |
| 5294 | 5510 | /*rtl:ignore*/ |
| 5295 | 5511 | border-right-style: solid; |
| 5296 | 5512 | } |
| 5297 | 5513 | |
| 5298 | -html :where([style*=border-bottom-width]) { | |
| 5514 | +html :where([style^=border-bottom-width], | |
| 5515 | +[style*=";border-bottom-width"], | |
| 5516 | +[style*="; border-bottom-width"]) { | |
| 5299 | 5517 | border-bottom-style: solid; |
| 5300 | 5518 | } |
| 5301 | 5519 | |
| 5302 | -html :where([style*=border-left-width]) { | |
| 5520 | +html :where([style^=border-left-width], | |
| 5521 | +[style*=";border-left-width"], | |
| 5522 | +[style*="; border-left-width"]) { | |
| 5303 | 5523 | /*rtl:ignore*/ |
| 5304 | 5524 | border-left-style: solid; |
| 5305 | 5525 | } |
| 5306 | 5526 | |
| @@ -5319,16 +5539,12 @@ | ||
| 5319 | 5539 | margin: 0 0 1em 0; |
| 5320 | 5540 | } |
| 5321 | 5541 | |
| 5322 | 5542 | html :where(.is-position-sticky) { |
| 5323 | - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */ | |
| 5324 | 5543 | --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); |
| 5325 | - /* stylelint-enable length-zero-no-unit */ | |
| 5326 | 5544 | } |
| 5327 | 5545 | |
| 5328 | 5546 | @media screen and (max-width: 600px) { |
| 5329 | 5547 | html :where(.is-position-sticky) { |
| 5330 | - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */ | |
| 5331 | 5548 | --wp-admin--admin-bar--position-offset: 0px; |
| 5332 | - /* stylelint-enable length-zero-no-unit */ | |
| 5333 | 5549 | } |
| 5334 | 5550 | } |
