mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-16 23:55:12 +01:00
a95a0b32b5
This update includes the following fixes reported after RC3: * Regression: [https://github.com/WordPress/gutenberg/pull/55858 Fixes patterns not working anymore as a post template for custom post types]. Scenario: When creating a new post for any custom post type registered with its "template" argument set to a pattern. For this scenario, the pattern template no longer renders in the post editor or the frontend with 6.4, whereas it did render properly in 6.3.2. This package update resolves the console error raised: {{{ Uncaught TypeError: select(...).getCurrentTheme() is undefined }}} which restores the rendering of the pattern template. * Regression: [https://github.com/WordPress/gutenberg/pull/55859 Fixes positioning and styles for the new lightbox's trigger] introduced in 6.4. Follow up to [57048], [57034], [56987], [56961], [56849], [56818], [56816]. Props renathoc, rajinsharwar, richtabor, joen, mikachan, hellofromTonya. Fixes #59411. Built from https://develop.svn.wordpress.org/trunk@57063 git-svn-id: http://core.svn.wordpress.org/trunk@56574 1a063a9b-81f0-0310-95a4-ce76da25c4cd
301 lines
7.7 KiB
CSS
301 lines
7.7 KiB
CSS
.wp-block-image img{
|
|
box-sizing:border-box;
|
|
height:auto;
|
|
max-width:100%;
|
|
vertical-align:bottom;
|
|
}
|
|
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
|
|
border-radius:inherit;
|
|
}
|
|
.wp-block-image.has-custom-border img{
|
|
box-sizing:border-box;
|
|
}
|
|
.wp-block-image.aligncenter{
|
|
text-align:center;
|
|
}
|
|
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
|
|
height:auto;
|
|
width:100%;
|
|
}
|
|
.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
|
|
display:table;
|
|
}
|
|
.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{
|
|
caption-side:bottom;
|
|
display:table-caption;
|
|
}
|
|
.wp-block-image .alignleft{
|
|
float:left;
|
|
margin:.5em 1em .5em 0;
|
|
}
|
|
.wp-block-image .alignright{
|
|
float:right;
|
|
margin:.5em 0 .5em 1em;
|
|
}
|
|
.wp-block-image .aligncenter{
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
.wp-block-image figcaption{
|
|
margin-bottom:1em;
|
|
margin-top:.5em;
|
|
}
|
|
.wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{
|
|
border-radius:9999px;
|
|
}
|
|
@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
|
|
.wp-block-image.is-style-circle-mask img{
|
|
border-radius:0;
|
|
-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>');
|
|
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>');
|
|
mask-mode:alpha;
|
|
-webkit-mask-position:center;
|
|
mask-position:center;
|
|
-webkit-mask-repeat:no-repeat;
|
|
mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
mask-size:contain;
|
|
}
|
|
}
|
|
.wp-block-image :where(.has-border-color){
|
|
border-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-top-color]){
|
|
border-top-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-right-color]){
|
|
border-right-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-bottom-color]){
|
|
border-bottom-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-left-color]){
|
|
border-left-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-width]){
|
|
border-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-top-width]){
|
|
border-top-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-right-width]){
|
|
border-right-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-bottom-width]){
|
|
border-bottom-style:solid;
|
|
}
|
|
.wp-block-image :where([style*=border-left-width]){
|
|
border-left-style:solid;
|
|
}
|
|
|
|
.wp-block-image figure{
|
|
margin:0;
|
|
}
|
|
|
|
.wp-lightbox-container{
|
|
display:flex;
|
|
flex-direction:column;
|
|
position:relative;
|
|
}
|
|
.wp-lightbox-container img{
|
|
cursor:zoom-in;
|
|
}
|
|
.wp-lightbox-container img:hover+button{
|
|
opacity:1;
|
|
}
|
|
.wp-lightbox-container button{
|
|
align-items:center;
|
|
-webkit-backdrop-filter:blur(16px) saturate(180%);
|
|
backdrop-filter:blur(16px) saturate(180%);
|
|
background-color:rgba(90,90,90,.25);
|
|
border:none;
|
|
border-radius:4px;
|
|
cursor:zoom-in;
|
|
display:flex;
|
|
height:20px;
|
|
justify-content:center;
|
|
opacity:0;
|
|
padding:0;
|
|
position:absolute;
|
|
right:16px;
|
|
text-align:center;
|
|
top:16px;
|
|
transition:opacity .2s ease;
|
|
width:20px;
|
|
z-index:100;
|
|
}
|
|
.wp-lightbox-container button:focus-visible{
|
|
outline:3px auto rgba(90,90,90,.25);
|
|
outline:3px auto -webkit-focus-ring-color;
|
|
outline-offset:3px;
|
|
}
|
|
.wp-lightbox-container button:hover{
|
|
cursor:pointer;
|
|
opacity:1;
|
|
}
|
|
.wp-lightbox-container button:focus{
|
|
opacity:1;
|
|
}
|
|
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
|
|
background-color:rgba(90,90,90,.25);
|
|
border:none;
|
|
}
|
|
|
|
.wp-lightbox-overlay{
|
|
box-sizing:border-box;
|
|
cursor:zoom-out;
|
|
height:100vh;
|
|
left:0;
|
|
overflow:hidden;
|
|
position:fixed;
|
|
top:0;
|
|
visibility:hidden;
|
|
width:100vw;
|
|
z-index:100000;
|
|
}
|
|
.wp-lightbox-overlay .close-button{
|
|
align-items:center;
|
|
cursor:pointer;
|
|
display:flex;
|
|
justify-content:center;
|
|
min-height:40px;
|
|
min-width:40px;
|
|
padding:0;
|
|
position:absolute;
|
|
right:calc(env(safe-area-inset-right) + 16px);
|
|
top:calc(env(safe-area-inset-top) + 16px);
|
|
z-index:5000000;
|
|
}
|
|
.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
|
|
background:none;
|
|
border:none;
|
|
}
|
|
.wp-lightbox-overlay .lightbox-image-container{
|
|
height:var(--wp--lightbox-container-height);
|
|
left:50%;
|
|
overflow:hidden;
|
|
position:absolute;
|
|
top:50%;
|
|
transform:translate(-50%, -50%);
|
|
transform-origin:top left;
|
|
width:var(--wp--lightbox-container-width);
|
|
z-index:9999999999;
|
|
}
|
|
.wp-lightbox-overlay .wp-block-image{
|
|
align-items:center;
|
|
box-sizing:border-box;
|
|
display:flex;
|
|
height:100%;
|
|
justify-content:center;
|
|
margin:0;
|
|
position:relative;
|
|
transform-origin:0 0;
|
|
width:100%;
|
|
z-index:3000000;
|
|
}
|
|
.wp-lightbox-overlay .wp-block-image img{
|
|
height:var(--wp--lightbox-image-height);
|
|
min-height:var(--wp--lightbox-image-height);
|
|
min-width:var(--wp--lightbox-image-width);
|
|
width:var(--wp--lightbox-image-width);
|
|
}
|
|
.wp-lightbox-overlay .wp-block-image figcaption{
|
|
display:none;
|
|
}
|
|
.wp-lightbox-overlay button{
|
|
background:none;
|
|
border:none;
|
|
}
|
|
.wp-lightbox-overlay .scrim{
|
|
background-color:#fff;
|
|
height:100%;
|
|
opacity:.9;
|
|
position:absolute;
|
|
width:100%;
|
|
z-index:2000000;
|
|
}
|
|
.wp-lightbox-overlay.active{
|
|
animation:turn-on-visibility .25s both;
|
|
visibility:visible;
|
|
}
|
|
.wp-lightbox-overlay.active img{
|
|
animation:turn-on-visibility .35s both;
|
|
}
|
|
.wp-lightbox-overlay.hideanimationenabled:not(.active){
|
|
animation:turn-off-visibility .35s both;
|
|
}
|
|
.wp-lightbox-overlay.hideanimationenabled:not(.active) img{
|
|
animation:turn-off-visibility .25s both;
|
|
}
|
|
@media (prefers-reduced-motion:no-preference){
|
|
.wp-lightbox-overlay.zoom.active{
|
|
animation:none;
|
|
opacity:1;
|
|
visibility:visible;
|
|
}
|
|
.wp-lightbox-overlay.zoom.active .lightbox-image-container{
|
|
animation:lightbox-zoom-in .4s;
|
|
}
|
|
.wp-lightbox-overlay.zoom.active .lightbox-image-container img{
|
|
animation:none;
|
|
}
|
|
.wp-lightbox-overlay.zoom.active .scrim{
|
|
animation:turn-on-visibility .4s forwards;
|
|
}
|
|
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active){
|
|
animation:none;
|
|
}
|
|
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container{
|
|
animation:lightbox-zoom-out .4s;
|
|
}
|
|
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container img{
|
|
animation:none;
|
|
}
|
|
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
|
|
animation:turn-off-visibility .4s forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes turn-on-visibility{
|
|
0%{
|
|
opacity:0;
|
|
}
|
|
to{
|
|
opacity:1;
|
|
}
|
|
}
|
|
@keyframes turn-off-visibility{
|
|
0%{
|
|
opacity:1;
|
|
visibility:visible;
|
|
}
|
|
99%{
|
|
opacity:0;
|
|
visibility:visible;
|
|
}
|
|
to{
|
|
opacity:0;
|
|
visibility:hidden;
|
|
}
|
|
}
|
|
@keyframes lightbox-zoom-in{
|
|
0%{
|
|
transform:translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
|
}
|
|
to{
|
|
transform:translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
@keyframes lightbox-zoom-out{
|
|
0%{
|
|
transform:translate(-50%, -50%) scale(1);
|
|
visibility:visible;
|
|
}
|
|
99%{
|
|
visibility:visible;
|
|
}
|
|
to{
|
|
transform:translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
|
visibility:hidden;
|
|
}
|
|
} |