WordPress/wp-includes/blocks/image/style-rtl.css
hellofromTonya e395ce0cf6 Editor: Bugfixes npm packages updates for 6.4 RC1.
Updates for needed bugfixes in RC1:

* [https://github.com/WordPress/gutenberg/pull/55212 Image: Reimplement lightbox trigger as a minimal button in corner of image]

* [https://github.com/WordPress/gutenberg/pull/55403 [Edit Widgets] Only suppress admin notices when JS enabled.]

Follow-up to [56849], [56818], [56816].

Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb.
See #59411.
Built from https://develop.svn.wordpress.org/trunk@56961


git-svn-id: http://core.svn.wordpress.org/trunk@56472 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-10-17 16:08:23 +00:00

295 lines
7.4 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-left-style:solid;
}
.wp-block-image :where([style*=border-bottom-color]){
border-bottom-style:solid;
}
.wp-block-image :where([style*=border-left-color]){
border-right-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-left-style:solid;
}
.wp-block-image :where([style*=border-bottom-width]){
border-bottom-style:solid;
}
.wp-block-image :where([style*=border-left-width]){
border-right-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{
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
height:24px;
left:10px;
opacity:0;
padding:0;
position:absolute;
text-align:center;
top:10px;
width:24px;
z-index:100;
}
.wp-lightbox-container button:focus-visible{
outline:5px auto #212121;
outline:5px auto -webkit-focus-ring-color;
outline-offset:5px;
}
.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:#000;
border:none;
}
.wp-lightbox-overlay{
box-sizing:border-box;
cursor:zoom-out;
height:100vh;
overflow:hidden;
position:fixed;
right:0;
top:0;
visibility:hidden;
width:100vw;
z-index:100000;
}
.wp-lightbox-overlay .close-button{
align-items:center;
cursor:pointer;
display:flex;
justify-content:center;
left:calc(env(safe-area-inset-left) + 16px);
min-height:40px;
min-width:40px;
padding:0;
position:absolute;
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);
overflow:hidden;
position:absolute;
right:50%;
top:50%;
transform:translate(50%, -50%);
transform-origin:top right;
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:100% 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))*-1), 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))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
visibility:hidden;
}
}