PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.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 12.6.0 All 403 releases
← All changes | build/styles/block-library/style.css +131 -361 23.6.2 → 22.7.0 View file →
@@ -57,9 +57,10 @@
57 57 align-items: center;
58 58 justify-content: center;
59 59 }
60 60
61 -.wp-block-accordion-panel[hidden] {
61 +.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
62 + display: none;
62 63 margin-block-start: 0;
63 64 }
64 65
65 66 .wp-block-archives {
@@ -150,14 +151,8 @@
150 151 /**
151 152 * Focus styles.
152 153 */
153 154 /**
154 - * Standard focus rings for the WordPress Design System.
155 - *
156 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
157 - * e.g. `&:focus { @include outset-ring__focus(); }`.
158 - */
159 -/**
160 155 * Applies editor left position to the selector passed as argument
161 156 */
162 157 /**
163 158 * Styles that are reused verbatim in a few places
@@ -205,9 +200,9 @@
205 200 display: flex;
206 201 align-items: center;
207 202 }
208 203 .wp-block-breadcrumbs li:not(:last-child)::after {
209 - content: var(--separator, "/")/"";
204 + content: var(--separator, "/");
210 205 margin: 0 0.5em;
211 206 opacity: 0.7;
212 207 }
213 208 .wp-block-breadcrumbs span {
@@ -434,9 +429,9 @@
434 429 .wp-block-code code {
435 430 display: block;
436 431 font-family: inherit;
437 432 overflow-wrap: break-word;
438 - white-space: break-spaces;
433 + white-space: pre-wrap;
439 434 /*!rtl:begin:ignore*/
440 435 direction: ltr;
441 436 text-align: initial;
442 437 /*!rtl:end:ignore*/
@@ -688,9 +683,8 @@
688 683 }
689 684 .wp-block-comment-template.aligncenter {
690 685 margin-left: auto;
691 686 margin-right: auto;
692 - width: -moz-fit-content;
693 687 width: fit-content;
694 688 }
695 689 .wp-block-comment-template.alignright {
696 690 float: right;
@@ -1012,10 +1006,9 @@
1012 1006 width: 100%;
1013 1007 height: 100%;
1014 1008 max-width: none;
1015 1009 max-height: none;
1016 - -o-object-fit: cover;
1017 - object-fit: cover;
1010 + object-fit: cover;
1018 1011 outline: none;
1019 1012 border: none;
1020 1013 box-shadow: none;
1021 1014 }
@@ -1327,9 +1320,8 @@
1327 1320 margin-bottom: 0.5em;
1328 1321 }
1329 1322 .wp-block-form-input__label:has(input[type=checkbox]) {
1330 1323 flex-direction: row;
1331 - width: -moz-fit-content;
1332 1324 width: fit-content;
1333 1325 }
1334 1326 .wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
1335 1327 margin: 0;
@@ -1339,9 +1331,8 @@
1339 1331 flex-direction: row-reverse;
1340 1332 }
1341 1333
1342 1334 .wp-block-form-input__label-content {
1343 - width: -moz-fit-content;
1344 1335 width: fit-content;
1345 1336 }
1346 1337
1347 1338 :where(.wp-block-form-input__input) {
@@ -1442,10 +1433,9 @@
1442 1433 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
1443 1434 width: 100%;
1444 1435 height: 100%;
1445 1436 flex: 1;
1446 - -o-object-fit: cover;
1447 - object-fit: cover;
1437 + object-fit: cover;
1448 1438 }
1449 1439 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
1450 1440 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
1451 1441 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
@@ -1688,10 +1678,9 @@
1688 1678 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
1689 1679 width: 100%;
1690 1680 flex: 1 0 0%;
1691 1681 height: 100%;
1692 - -o-object-fit: cover;
1693 - object-fit: cover;
1682 + object-fit: cover;
1694 1683 }
1695 1684 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
1696 1685 width: 100%;
1697 1686 }
@@ -1777,17 +1766,8 @@
1777 1766 .wp-block-icon svg {
1778 1767 box-sizing: border-box;
1779 1768 fill: currentColor;
1780 1769 }
1781 -.wp-block-icon svg.is-flip-horizontal {
1782 - transform: scaleX(-1);
1783 -}
1784 -.wp-block-icon svg.is-flip-vertical {
1785 - transform: scaleY(-1);
1786 -}
1787 -.wp-block-icon svg.is-flip-horizontal.is-flip-vertical {
1788 - transform: scaleX(-1) scaleY(-1);
1789 -}
1790 1770
1791 1771 :where(.wp-block-icon) svg {
1792 1772 width: 100%;
1793 1773 height: 100%;
@@ -1873,8 +1853,9 @@
1873 1853 border-radius: 9999px;
1874 1854 }
1875 1855 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1876 1856 .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. */
1877 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>');
1878 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>');
1879 1860 mask-mode: alpha;
1880 1861 -webkit-mask-repeat: no-repeat;
@@ -2185,12 +2166,8 @@
2185 2166 visibility: hidden;
2186 2167 transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
2187 2168 }
2188 2169 }
2189 -:where(.wp-block-latest-comments) {
2190 - padding-left: 0;
2191 -}
2192 -
2193 2170 ol.wp-block-latest-comments {
2194 2171 margin-left: 0;
2195 2172 box-sizing: border-box;
2196 2173 }
@@ -2207,8 +2184,12 @@
2207 2184 .has-excerpts :where(.wp-block-latest-comments:not([style*=line-height])) {
2208 2185 line-height: 1.5;
2209 2186 }
2210 2187
2188 +.wp-block-latest-comments .wp-block-latest-comments {
2189 + padding-left: 0;
2190 +}
2191 +
2211 2192 .wp-block-latest-comments__comment {
2212 2193 list-style: none;
2213 2194 margin-bottom: 1em;
2214 2195 }
@@ -2263,54 +2244,49 @@
2263 2244 .wp-block-latest-posts.wp-block-latest-posts__list li {
2264 2245 clear: both;
2265 2246 overflow-wrap: break-word;
2266 2247 }
2267 -.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2248 +.wp-block-latest-posts.is-grid {
2268 2249 display: flex;
2269 2250 flex-wrap: wrap;
2270 2251 }
2271 -.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2252 +.wp-block-latest-posts.is-grid li {
2272 2253 margin: 0 1.25em 1.25em 0;
2273 2254 width: 100%;
2274 2255 }
2275 2256 @media (min-width: 600px) {
2276 - .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2257 + .wp-block-latest-posts.columns-2 li {
2277 2258 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2278 2259 }
2279 - .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
2260 + .wp-block-latest-posts.columns-2 li:nth-child(2n) {
2280 2261 margin-right: 0;
2281 2262 }
2282 - .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2263 + .wp-block-latest-posts.columns-3 li {
2283 2264 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2284 2265 }
2285 - .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
2266 + .wp-block-latest-posts.columns-3 li:nth-child(3n) {
2286 2267 margin-right: 0;
2287 2268 }
2288 - .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2269 + .wp-block-latest-posts.columns-4 li {
2289 2270 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2290 2271 }
2291 - .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
2272 + .wp-block-latest-posts.columns-4 li:nth-child(4n) {
2292 2273 margin-right: 0;
2293 2274 }
2294 - .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2275 + .wp-block-latest-posts.columns-5 li {
2295 2276 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2296 2277 }
2297 - .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
2278 + .wp-block-latest-posts.columns-5 li:nth-child(5n) {
2298 2279 margin-right: 0;
2299 2280 }
2300 - .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2281 + .wp-block-latest-posts.columns-6 li {
2301 2282 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2302 2283 }
2303 - .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
2284 + .wp-block-latest-posts.columns-6 li:nth-child(6n) {
2304 2285 margin-right: 0;
2305 2286 }
2306 2287 }
2307 2288
2308 -@media (max-width: 600px) {
2309 - .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
2310 - grid-template-columns: 1fr;
2311 - }
2312 -}
2313 2289 :root :where(.wp-block-latest-posts.is-grid) {
2314 2290 padding: 0;
2315 2291 }
2316 2292 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2484,10 +2460,9 @@
2484 2460 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2485 2461 position: absolute;
2486 2462 width: 100%;
2487 2463 height: 100%;
2488 - -o-object-fit: cover;
2489 - object-fit: cover;
2464 + object-fit: cover;
2490 2465 }
2491 2466
2492 2467 /*
2493 2468 * Here we here not able to use a mobile first CSS approach.
@@ -2520,8 +2495,9 @@
2520 2495 }
2521 2496 .wp-block-navigation ul,
2522 2497 .wp-block-navigation ul li {
2523 2498 list-style: none;
2499 + padding: 0;
2524 2500 }
2525 2501 .wp-block-navigation .wp-block-navigation-item {
2526 2502 background-color: inherit;
2527 2503 display: flex;
@@ -2606,12 +2582,8 @@
2606 2582 --navigation-layout-justification-setting: space-between;
2607 2583 --navigation-layout-justify: space-between;
2608 2584 }
2609 2585
2610 -:where(.wp-block-navigation) ul li {
2611 - padding: 0;
2612 -}
2613 -
2614 2586 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
2615 2587 background-color: inherit;
2616 2588 color: inherit;
2617 2589 position: absolute;
@@ -2668,19 +2640,9 @@
2668 2640 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
2669 2641 transform: rotate(-90deg);
2670 2642 }
2671 2643 }
2672 -@media (hover: hover) {
2673 - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
2674 - visibility: visible;
2675 - overflow: visible;
2676 - opacity: 1;
2677 - width: auto;
2678 - height: auto;
2679 - min-width: 200px;
2680 - }
2681 -}
2682 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2644 +.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2683 2645 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2684 2646 visibility: visible;
2685 2647 overflow: visible;
2686 2648 opacity: 1;
@@ -2998,12 +2960,8 @@
2998 2960 }
2999 2961 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
3000 2962 display: block;
3001 2963 }
3002 -.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
3003 - right: auto;
3004 - left: 0;
3005 -}
3006 2964 @media (min-width: 600px) {
3007 2965 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
3008 2966 display: block;
3009 2967 width: 100%;
@@ -3143,9 +3101,9 @@
3143 3101 display: inline-flex;
3144 3102 align-items: center;
3145 3103 justify-content: center;
3146 3104 gap: 0.5em;
3147 - padding: 0;
3105 + padding: 0.5em;
3148 3106 border: none;
3149 3107 background: transparent;
3150 3108 cursor: pointer;
3151 3109 text-decoration: none;
@@ -3153,10 +3111,10 @@
3153 3111 .wp-block-navigation-overlay-close:focus {
3154 3112 outline-offset: 2px;
3155 3113 }
3156 3114 .wp-block-navigation-overlay-close svg {
3157 - width: 24px;
3158 - height: 24px;
3115 + width: 1.5em;
3116 + height: 1.5em;
3159 3117 fill: currentColor;
3160 3118 display: block;
3161 3119 flex-shrink: 0;
3162 3120 }
@@ -3231,23 +3189,11 @@
3231 3189
3232 3190 .waveform-player {
3233 3191 font-family: inherit;
3234 3192 color: inherit;
3235 - line-height: var(--waveform-line-height, 1.4);
3236 - --wfp-accent: #71717a;
3237 - --wfp-button-color: rgba(255, 255, 255, .9);
3238 - --wfp-text-color: #ffffff;
3239 - --wfp-text-secondary-color: rgba(255, 255, 255, .6);
3240 - --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
3241 - --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
3193 + line-height: 1.4;
3242 3194 }
3243 3195
3244 -.waveform-player.waveform-theme-light {
3245 - --wfp-button-color: rgba(0, 0, 0, .8);
3246 - --wfp-text-color: #333333;
3247 - --wfp-text-secondary-color: rgba(0, 0, 0, .6);
3248 -}
3249 -
3250 3196 .waveform-player * {
3251 3197 box-sizing: border-box;
3252 3198 }
3253 3199
@@ -3253,26 +3199,26 @@
3253 3199
3254 3200 .waveform-body {
3255 3201 display: flex;
3256 3202 flex-direction: column;
3257 - gap: var(--waveform-body-gap, 8px);
3203 + gap: 8px;
3258 3204 }
3259 3205
3260 3206 .waveform-track {
3261 3207 display: flex;
3262 3208 align-items: center;
3263 - gap: var(--waveform-track-gap, 12px);
3209 + gap: 12px;
3264 3210 position: relative;
3265 3211 }
3266 3212
3267 3213 .waveform-btn {
3268 - width: var(--wfp-btn-size, 36px);
3269 - height: var(--wfp-btn-size, 36px);
3270 - min-width: var(--wfp-btn-size, 36px);
3271 - border-radius: var(--wfp-btn-radius, 50%);
3214 + width: 36px;
3215 + height: 36px;
3216 + min-width: 36px;
3217 + border-radius: 50%;
3272 3218 border: 2px solid currentColor;
3273 3219 background: transparent;
3274 - color: var(--wfp-button-color, inherit);
3220 + color: inherit;
3275 3221 cursor: pointer;
3276 3222 display: flex;
3277 3223 align-items: center;
3278 3224 justify-content: center;
@@ -3286,27 +3232,8 @@
3286 3232 opacity: 1;
3287 3233 transform: scale(1.05);
3288 3234 }
3289 3235
3290 -.waveform-btn-minimal {
3291 - width: calc(var(--wfp-btn-size, 36px) * 1.1);
3292 - height: calc(var(--wfp-btn-size, 36px) * 1.1);
3293 - min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
3294 - border: none;
3295 - border-radius: 0;
3296 - opacity: 0.7;
3297 -}
3298 -
3299 -.waveform-btn-minimal:hover:not(:disabled) {
3300 - opacity: 1;
3301 - transform: none;
3302 -}
3303 -
3304 -.waveform-btn.waveform-btn-minimal svg {
3305 - width: calc(var(--wfp-btn-size, 36px) * 0.94);
3306 - height: calc(var(--wfp-btn-size, 36px) * 0.94);
3307 -}
3308 -
3309 3236 .waveform-btn:disabled {
3310 3237 cursor: not-allowed;
3311 3238 opacity: 0.3;
3312 3239 }
@@ -3319,49 +3246,14 @@
3319 3246 height: 100%;
3320 3247 }
3321 3248
3322 3249 .waveform-btn svg {
3323 - width: calc(var(--wfp-btn-size, 36px) * 0.45);
3324 - height: calc(var(--wfp-btn-size, 36px) * 0.45);
3250 + width: 16px;
3251 + height: 16px;
3325 3252 fill: currentColor;
3326 3253 display: block;
3327 3254 }
3328 3255
3329 -.waveform-btn-has-artwork {
3330 - --wfp-btn-size: 64px;
3331 - --wfp-btn-radius: 8px;
3332 - position: relative;
3333 - overflow: hidden;
3334 - border: none;
3335 - color: var(--wfp-btn-artwork-color);
3336 -}
3337 -
3338 -.waveform-btn > .waveform-btn-artwork {
3339 - display: block;
3340 - position: absolute;
3341 - inset: 0;
3342 - width: 100%;
3343 - height: 100%;
3344 - -o-object-fit: cover;
3345 - object-fit: cover;
3346 - pointer-events: none;
3347 - z-index: 0;
3348 -}
3349 -
3350 -.waveform-btn-has-artwork:after {
3351 - content: "";
3352 - position: absolute;
3353 - inset: 0;
3354 - background: var(--wfp-btn-artwork-scrim);
3355 - pointer-events: none;
3356 - z-index: 1;
3357 -}
3358 -
3359 -.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
3360 - position: relative;
3361 - z-index: 2;
3362 -}
3363 -
3364 3256 .waveform-icon-play svg {
3365 3257 margin-left: 1px;
3366 3258 }
3367 3259
@@ -3373,12 +3265,8 @@
3373 3265 min-width: 0;
3374 3266 width: 100%;
3375 3267 }
3376 3268
3377 -.waveform-container:focus-visible {
3378 - outline: 2px solid currentColor;
3379 -}
3380 -
3381 3269 .waveform-container canvas {
3382 3270 display: block;
3383 3271 width: 100%;
3384 3272 height: 100%;
@@ -3404,9 +3292,8 @@
3404 3292 min-width: 0;
3405 3293 }
3406 3294
3407 3295 .waveform-title {
3408 - color: var(--wfp-text-color);
3409 3296 white-space: nowrap;
3410 3297 overflow: hidden;
3411 3298 text-overflow: ellipsis;
3412 3299 font-weight: 500;
@@ -3411,10 +3298,9 @@
3411 3298 text-overflow: ellipsis;
3412 3299 font-weight: 500;
3413 3300 }
3414 3301
3415 -.waveform-artist {
3416 - color: var(--wfp-text-secondary-color);
3302 +.waveform-subtitle {
3417 3303 font-size: 11px;
3418 3304 white-space: nowrap;
3419 3305 overflow: hidden;
3420 3306 text-overflow: ellipsis;
@@ -3420,9 +3306,8 @@
3420 3306 text-overflow: ellipsis;
3421 3307 }
3422 3308
3423 3309 .waveform-time {
3424 - color: var(--wfp-text-secondary-color);
3425 3310 font-size: 11px;
3426 3311 white-space: nowrap;
3427 3312 flex-shrink: 0;
3428 3313 }
@@ -3427,9 +3312,8 @@
3427 3312 flex-shrink: 0;
3428 3313 }
3429 3314
3430 3315 .waveform-bpm {
3431 - color: var(--wfp-text-secondary-color);
3432 3316 font-size: 11px;
3433 3317 white-space: nowrap;
3434 3318 flex-shrink: 0;
3435 3319 display: inline-flex;
@@ -3485,14 +3369,8 @@
3485 3369 width: 4px;
3486 3370 z-index: 20;
3487 3371 }
3488 3372
3489 -.waveform-marker.active {
3490 - width: 4px;
3491 - background: currentColor;
3492 - z-index: 10;
3493 -}
3494 -
3495 3373 .waveform-marker-tooltip {
3496 3374 position: absolute;
3497 3375 bottom: calc(100% + 4px);
3498 3376 left: 50%;
@@ -3508,54 +3386,12 @@
3508 3386 transition: opacity 0.2s;
3509 3387 z-index: 1000;
3510 3388 }
3511 3389
3512 -.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3390 +.waveform-marker:hover .waveform-marker-tooltip {
3513 3391 opacity: 1;
3514 3392 }
3515 3393
3516 -.waveform-hover-time {
3517 - position: absolute;
3518 - bottom: calc(100% + 4px);
3519 - transform: translate(-50%);
3520 - background: rgba(0, 0, 0, 0.9019607843);
3521 - color: #fff;
3522 - padding: 3px 7px;
3523 - border-radius: 4px;
3524 - font-size: 11px;
3525 - font-variant-numeric: tabular-nums;
3526 - white-space: nowrap;
3527 - pointer-events: none;
3528 - opacity: 0;
3529 - transition: opacity 0.15s;
3530 - z-index: 1000;
3531 -}
3532 -
3533 -.waveform-seek-handle {
3534 - position: absolute;
3535 - top: 50%;
3536 - left: 0;
3537 - width: 11px;
3538 - height: 11px;
3539 - border-radius: 50%;
3540 - background: #fff;
3541 - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
3542 - transform: translate(-50%, -50%) scale(0);
3543 - opacity: 0;
3544 - transition: opacity 0.12s ease, transform 0.12s ease;
3545 - pointer-events: none;
3546 - z-index: 6;
3547 -}
3548 -
3549 -.waveform-seek-handle.is-visible {
3550 - opacity: 1;
3551 - transform: translate(-50%, -50%) scale(1);
3552 -}
3553 -
3554 -.waveform-seek-handle.is-active {
3555 - transform: translate(-50%, -50%) scale(1.25);
3556 -}
3557 -
3558 3394 .waveform-btn:focus-visible {
3559 3395 outline: 2px solid currentColor;
3560 3396 outline-offset: 2px;
3561 3397 }
@@ -3624,15 +3460,15 @@
3624 3460 color: #fff;
3625 3461 }
3626 3462
3627 3463 .speed-option.active {
3628 - background: rgba(255, 255, 255, 0.1607843137);
3629 - color: #fff;
3464 + background: rgba(168, 85, 247, 0.2);
3465 + color: #a855f7;
3630 3466 font-weight: 600;
3631 3467 }
3632 3468
3633 3469 .waveform-player.waveform-focused {
3634 - outline: 2px solid var(--wfp-accent);
3470 + outline: 2px solid rgba(168, 85, 247, 0.5);
3635 3471 outline-offset: 2px;
3636 3472 border-radius: 4px;
3637 3473 }
3638 3474
@@ -3640,26 +3476,12 @@
3640 3476 outline: none;
3641 3477 }
3642 3478
3643 3479 .waveform-player:focus-visible {
3644 - outline: 1px solid var(--wfp-accent);
3480 + outline: 1px solid rgba(168, 85, 247, 0.3);
3645 3481 outline-offset: 1px;
3646 3482 }
3647 3483
3648 -.waveform-layout-preview .waveform-meta {
3649 - display: none !important;
3650 -}
3651 -
3652 -.waveform-layout-preview .waveform-info {
3653 - justify-content: center;
3654 -}
3655 -
3656 -.waveform-layout-preview .waveform-text {
3657 - flex: 0 1 auto;
3658 - align-items: center;
3659 - text-align: center;
3660 -}
3661 -
3662 3484 .waveform-player.waveform-focused {
3663 3485 outline: none;
3664 3486 }
3665 3487
@@ -3684,11 +3506,11 @@
3684 3506 }
3685 3507
3686 3508 @media (max-width: 480px) {
3687 3509 .waveform-btn {
3688 - width: var(--wfp-btn-size, 32px);
3689 - height: var(--wfp-btn-size, 32px);
3690 - min-width: var(--wfp-btn-size, 32px);
3510 + width: 32px;
3511 + height: 32px;
3512 + min-width: 32px;
3691 3513 }
3692 3514 .waveform-container {
3693 3515 min-height: 50px;
3694 3516 }
@@ -3694,37 +3516,22 @@
3694 3516 }
3695 3517 .waveform-info {
3696 3518 font-size: 12px;
3697 3519 }
3698 - .waveform-artist, .waveform-time, .waveform-bpm {
3520 + .waveform-subtitle, .waveform-time, .waveform-bpm {
3699 3521 font-size: 10px;
3700 3522 }
3701 3523 }
3702 -@media (prefers-reduced-motion: reduce) {
3703 - .waveform-player *, .waveform-player *:before, .waveform-player *:after {
3704 - transition-duration: 0.01ms !important;
3705 - animation-duration: 0.01ms !important;
3706 - animation-iteration-count: 1 !important;
3707 - }
3708 -}
3709 -.wp-block-playlist {
3710 - box-sizing: border-box;
3711 -}
3712 3524 .wp-block-playlist .wp-block-playlist__waveform-player {
3713 3525 width: 100%;
3714 3526 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3715 3527 position: relative;
3716 3528 }
3717 -.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3718 - outline: revert;
3719 - outline-offset: revert;
3720 -}
3721 3529 .wp-block-playlist .waveform-track {
3722 3530 height: 100px;
3723 3531 gap: 0;
3724 3532 }
3725 3533 .wp-block-playlist .waveform-btn {
3726 - border: none;
3727 3534 border-radius: 0;
3728 3535 border-end-start-radius: 0.125rem;
3729 3536 border-start-start-radius: 0.125rem;
3730 3537 width: 100px;
@@ -3735,45 +3542,14 @@
3735 3542 }
3736 3543 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3737 3544 transform: none;
3738 3545 }
3739 -.wp-block-playlist .waveform-btn svg {
3740 - width: 3rem;
3741 - height: 3rem;
3742 -}
3743 -.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
3744 - width: 2.625rem;
3745 - height: 2.625rem;
3746 -}
3747 -.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
3748 - background-image: var(--wp--playlist--play-button-artwork);
3749 - background-position: center;
3750 - background-size: cover;
3751 - color: #fff;
3752 -}
3753 -.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
3754 - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
3755 -}
3756 -.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
3757 - fill: #fff !important;
3758 -}
3759 3546 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3760 3547 margin-bottom: 0;
3761 3548 }
3762 -.wp-block-playlist .waveform-btn:focus-visible,
3763 -.wp-block-playlist .waveform-container:focus-visible {
3764 - outline: revert;
3765 - outline-offset: revert;
3766 -}
3767 -.wp-block-playlist .waveform-artist {
3549 +.wp-block-playlist .waveform-subtitle {
3768 3550 opacity: 0.7;
3769 3551 }
3770 -.wp-block-playlist .waveform-info,
3771 -.wp-block-playlist .waveform-artist,
3772 -.wp-block-playlist .waveform-title,
3773 -.wp-block-playlist .waveform-time {
3774 - font-size: inherit;
3775 -}
3776 3552 .wp-block-playlist .wp-block-playlist__tracklist {
3777 3553 margin: 0;
3778 3554 padding-left: 0;
3779 3555 list-style: none;
@@ -3783,11 +3559,8 @@
3783 3559 }
3784 3560 .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-artist-is-hidden .wp-block-playlist-track__artist {
3785 3561 display: none;
3786 3562 }
3787 -.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-length-is-hidden .wp-block-playlist-track__length {
3788 - display: none;
3789 -}
3790 3563 .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-show-numbers {
3791 3564 counter-reset: playlist-track;
3792 3565 }
3793 3566
@@ -3820,18 +3593,8 @@
3820 3593 margin-right: var(--wp--preset--spacing--20, 0.5em);
3821 3594 font-size: 0.85em;
3822 3595 opacity: 0.7;
3823 3596 }
3824 -.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
3825 - flex: 0 0 50px;
3826 - width: 50px;
3827 - height: 50px;
3828 - margin-right: var(--wp--preset--spacing--20, 0.5em);
3829 - border: 1px solid rgba(0, 0, 0, 0.08);
3830 - box-sizing: border-box;
3831 - -o-object-fit: cover;
3832 - object-fit: cover;
3833 -}
3834 3597 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3835 3598 flex: 1 1 0;
3836 3599 min-width: 0;
3837 3600 }
@@ -3877,9 +3640,8 @@
3877 3640 }
3878 3641
3879 3642 .wp-block-post-author-biography {
3880 3643 box-sizing: border-box;
3881 - white-space: pre-wrap;
3882 3644 }
3883 3645
3884 3646 :where(.wp-block-post-comments-form textarea),
3885 3647 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -4212,9 +3974,9 @@
4212 3974 }
4213 3975 }
4214 3976
4215 3977 @media (max-width: 600px) {
4216 - .wp-block-post-template-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
3978 + .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
4217 3979 grid-template-columns: 1fr;
4218 3980 }
4219 3981 }
4220 3982 .wp-block-post-template-is-layout-constrained > li > .alignright,
@@ -4293,9 +4055,8 @@
4293 4055 }
4294 4056
4295 4057 .wp-block-read-more {
4296 4058 display: block;
4297 - width: -moz-fit-content;
4298 4059 width: fit-content;
4299 4060 }
4300 4061 .wp-block-read-more:where(:not([style*=text-decoration])) {
4301 4062 text-decoration: none;
@@ -4431,11 +4192,9 @@
4431 4192 margin-right: 0;
4432 4193 min-width: 3rem;
4433 4194 border: 1px solid #949494;
4434 4195 text-decoration: unset !important;
4435 - -webkit-appearance: initial;
4436 - -moz-appearance: initial;
4437 - appearance: initial;
4196 + appearance: initial;
4438 4197 }
4439 4198
4440 4199 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4441 4200 padding: 4px;
@@ -5000,48 +4759,34 @@
5000 4759 padding: 1ch 2ch;
5001 4760 text-decoration: none !important;
5002 4761 }
5003 4762
5004 -:where(.wp-block-tab-list button) {
4763 +.wp-block-tab {
4764 + max-width: 100%;
4765 + flex-basis: 100%;
4766 + flex-grow: 1;
5005 4767 box-sizing: border-box;
5006 - color: inherit;
5007 - display: block;
5008 - width: -moz-max-content;
5009 - width: max-content;
5010 - text-decoration: none;
5011 - cursor: pointer;
5012 - flex-basis: inherit !important;
5013 - flex-grow: inherit !important;
5014 - position: relative;
5015 - border: none;
5016 - background: none;
5017 - -moz-appearance: none;
5018 - appearance: none;
5019 - -webkit-appearance: none;
5020 - margin: 0;
5021 - padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
5022 - font-size: inherit;
5023 - font-family: inherit;
5024 - font-weight: inherit;
5025 - line-height: inherit;
5026 - letter-spacing: inherit;
5027 - text-transform: inherit;
5028 - text-align: inherit;
5029 4768 }
5030 -:where(.wp-block-tab-list button)[aria-selected=true]::before {
5031 - content: "";
5032 - position: absolute;
5033 - border-bottom: 2px solid currentColor;
5034 - pointer-events: none;
5035 - left: 0;
5036 - width: 100%;
5037 - bottom: 0;
4769 +.wp-block-tab > *:first-child {
4770 + margin-top: 0;
5038 4771 }
4772 +.wp-block-tab > *:last-child {
4773 + margin-bottom: 0;
4774 +}
4775 +.wp-block-tab[hidden], .wp-block-tab:empty {
4776 + display: none !important;
4777 +}
5039 4778
5040 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5041 - display: none !important;
4779 +.wp-block-tab.wp-block.has-background,
4780 +.wp-block-tab:not(.wp-block).has-background {
4781 + padding: var(--wp--preset--spacing--30);
5042 4782 }
5043 4783
4784 +.wp-block-tab-panel {
4785 + flex-grow: 1;
4786 + min-width: 0;
4787 +}
4788 +
5044 4789 .wp-block-table {
5045 4790 overflow-x: auto;
5046 4791 }
5047 4792 .wp-block-table table {
@@ -5180,9 +4925,52 @@
5180 4925
5181 4926 .wp-block-tabs {
5182 4927 box-sizing: border-box;
5183 4928 }
4929 +.wp-block-tabs .wp-block-tabs__title {
4930 + display: none;
4931 +}
5184 4932
4933 +.wp-block-tabs-menu {
4934 + display: flex;
4935 + align-items: flex-end;
4936 + min-width: fit-content;
4937 + border-bottom-width: 1px;
4938 + border-bottom-style: solid;
4939 + border-bottom-color: #000;
4940 +}
4941 +
4942 +.wp-block-tabs-menu-item {
4943 + box-sizing: border-box;
4944 + color: inherit;
4945 + display: block;
4946 + width: max-content;
4947 + text-decoration: none;
4948 + cursor: pointer;
4949 + flex-basis: inherit !important;
4950 + flex-grow: inherit !important;
4951 + border: none;
4952 + background: none;
4953 + appearance: none;
4954 + -webkit-appearance: none;
4955 + margin: 0;
4956 + padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4957 + font-size: inherit;
4958 + font-family: inherit;
4959 + font-weight: inherit;
4960 + line-height: inherit;
4961 + letter-spacing: inherit;
4962 + text-transform: inherit;
4963 + text-align: inherit;
4964 +}
4965 +.wp-block-tabs-menu-item:focus-visible {
4966 + outline-offset: 2px;
4967 +}
4968 +.wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
4969 + background-color: #000;
4970 + color: #fff;
4971 +}
4972 +
5185 4973 .wp-block-term-count {
5186 4974 box-sizing: border-box;
5187 4975 }
5188 4976
@@ -5257,10 +5045,9 @@
5257 5045 vertical-align: middle;
5258 5046 }
5259 5047 @supports (position: sticky) {
5260 5048 .wp-block-video [poster] {
5261 - -o-object-fit: cover;
5262 - object-fit: cover;
5049 + object-fit: cover;
5263 5050 }
5264 5051 }
5265 5052 .wp-block-video.aligncenter {
5266 5053 text-align: center;
@@ -5425,9 +5212,8 @@
5425 5212 padding: 0;
5426 5213 position: absolute;
5427 5214 width: 1px;
5428 5215 word-wrap: normal !important;
5429 - word-break: normal !important;
5430 5216 }
5431 5217
5432 5218 .screen-reader-text:focus {
5433 5219 background-color: #ddd;
@@ -5459,68 +5245,48 @@
5459 5245 html :where(.has-border-color) {
5460 5246 border-style: solid;
5461 5247 }
5462 5248
5463 -html :where([style^=border-color],
5464 -[style*=";border-color"],
5465 -[style*="; border-color"]) {
5249 +html :where([style*=border-color]) {
5466 5250 border-style: solid;
5467 5251 }
5468 5252
5469 -html :where([style^=border-top-color],
5470 -[style*=";border-top-color"],
5471 -[style*="; border-top-color"]) {
5253 +html :where([style*=border-top-color]) {
5472 5254 border-top-style: solid;
5473 5255 }
5474 5256
5475 -html :where([style^=border-right-color],
5476 -[style*=";border-right-color"],
5477 -[style*="; border-right-color"]) {
5257 +html :where([style*=border-right-color]) {
5478 5258 /*rtl:ignore*/
5479 5259 border-right-style: solid;
5480 5260 }
5481 5261
5482 -html :where([style^=border-bottom-color],
5483 -[style*=";border-bottom-color"],
5484 -[style*="; border-bottom-color"]) {
5262 +html :where([style*=border-bottom-color]) {
5485 5263 border-bottom-style: solid;
5486 5264 }
5487 5265
5488 -html :where([style^=border-left-color],
5489 -[style*=";border-left-color"],
5490 -[style*="; border-left-color"]) {
5266 +html :where([style*=border-left-color]) {
5491 5267 /*rtl:ignore*/
5492 5268 border-left-style: solid;
5493 5269 }
5494 5270
5495 -html :where([style^=border-width],
5496 -[style*=";border-width"],
5497 -[style*="; border-width"]) {
5271 +html :where([style*=border-width]) {
5498 5272 border-style: solid;
5499 5273 }
5500 5274
5501 -html :where([style^=border-top-width],
5502 -[style*=";border-top-width"],
5503 -[style*="; border-top-width"]) {
5275 +html :where([style*=border-top-width]) {
5504 5276 border-top-style: solid;
5505 5277 }
5506 5278
5507 -html :where([style^=border-right-width],
5508 -[style*=";border-right-width"],
5509 -[style*="; border-right-width"]) {
5279 +html :where([style*=border-right-width]) {
5510 5280 /*rtl:ignore*/
5511 5281 border-right-style: solid;
5512 5282 }
5513 5283
5514 -html :where([style^=border-bottom-width],
5515 -[style*=";border-bottom-width"],
5516 -[style*="; border-bottom-width"]) {
5284 +html :where([style*=border-bottom-width]) {
5517 5285 border-bottom-style: solid;
5518 5286 }
5519 5287
5520 -html :where([style^=border-left-width],
5521 -[style*=";border-left-width"],
5522 -[style*="; border-left-width"]) {
5288 +html :where([style*=border-left-width]) {
5523 5289 /*rtl:ignore*/
5524 5290 border-left-style: solid;
5525 5291 }
5526 5292
@@ -5539,12 +5305,16 @@
5539 5305 margin: 0 0 1em 0;
5540 5306 }
5541 5307
5542 5308 html :where(.is-position-sticky) {
5309 + /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5543 5310 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5311 + /* stylelint-enable length-zero-no-unit */
5544 5312 }
5545 5313
5546 5314 @media screen and (max-width: 600px) {
5547 5315 html :where(.is-position-sticky) {
5316 + /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5548 5317 --wp-admin--admin-bar--position-offset: 0px;
5318 + /* stylelint-enable length-zero-no-unit */
5549 5319 }
5550 5320 }