rebase on oct-10-2023
This commit is contained in:
Rachit Bhargava
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"apiVersion": 3,
|
||||
"name": "core/image",
|
||||
"title": "Image",
|
||||
"category": "media",
|
||||
@@ -69,6 +69,12 @@
|
||||
"height": {
|
||||
"type": "number"
|
||||
},
|
||||
"aspectRatio": {
|
||||
"type": "string"
|
||||
},
|
||||
"scale": {
|
||||
"type": "string"
|
||||
},
|
||||
"sizeSlug": {
|
||||
"type": "string"
|
||||
},
|
||||
@@ -84,16 +90,20 @@
|
||||
},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"behaviors": {
|
||||
"lightbox": true
|
||||
},
|
||||
"color": {
|
||||
"__experimentalDuotone": "img, .components-placeholder",
|
||||
"text": false,
|
||||
"background": false
|
||||
},
|
||||
"filter": {
|
||||
"duotone": true
|
||||
},
|
||||
"__experimentalBorder": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true,
|
||||
"__experimentalSelector": "img, .wp-block-image__crop-area",
|
||||
"__experimentalSkipSerialization": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"color": true,
|
||||
@@ -102,6 +112,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"selectors": {
|
||||
"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
|
||||
"filter": {
|
||||
"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
|
||||
}
|
||||
},
|
||||
"styles": [
|
||||
{
|
||||
"name": "default",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
border-radius:2px;
|
||||
box-shadow:inset 0 0 0 1px #1e1e1e;
|
||||
color:#1e1e1e;
|
||||
filter:none;
|
||||
filter:none !important;
|
||||
}
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{
|
||||
opacity:0;
|
||||
@@ -95,6 +95,7 @@ figure.wp-block-image:not(.wp-block){
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{
|
||||
border:none;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-icon{
|
||||
|
||||
@@ -1 +1 @@
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=right]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none!important}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=right]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}
|
||||
@@ -4,7 +4,7 @@
|
||||
border-radius:2px;
|
||||
box-shadow:inset 0 0 0 1px #1e1e1e;
|
||||
color:#1e1e1e;
|
||||
filter:none;
|
||||
filter:none !important;
|
||||
}
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{
|
||||
opacity:0;
|
||||
@@ -95,6 +95,7 @@ figure.wp-block-image:not(.wp-block){
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{
|
||||
border:none;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-icon{
|
||||
|
||||
2
wp/wp-includes/blocks/image/editor.min.css
vendored
2
wp/wp-includes/blocks/image/editor.min.css
vendored
@@ -1 +1 @@
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=right]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}
|
||||
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none!important}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=right]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}
|
||||
@@ -1,9 +1,13 @@
|
||||
.wp-block-image img{
|
||||
box-sizing:border-box;
|
||||
height:auto;
|
||||
max-width:100%;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.wp-block-image img,.wp-block-image.has-custom-border img{
|
||||
.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{
|
||||
@@ -22,15 +26,11 @@
|
||||
}
|
||||
.wp-block-image .alignleft{
|
||||
float:left;
|
||||
margin-bottom:.5em;
|
||||
margin-left:1em;
|
||||
margin-top:.5em;
|
||||
margin:.5em 1em .5em 0;
|
||||
}
|
||||
.wp-block-image .alignright{
|
||||
float:right;
|
||||
margin-bottom:.5em;
|
||||
margin-right:1em;
|
||||
margin-top:.5em;
|
||||
margin:.5em 0 .5em 1em;
|
||||
}
|
||||
.wp-block-image .aligncenter{
|
||||
margin-left:auto;
|
||||
@@ -90,4 +90,172 @@
|
||||
|
||||
.wp-block-image figure{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container .img-container{
|
||||
position:relative;
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
background:none;
|
||||
border:none;
|
||||
cursor:zoom-in;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
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-overlay{
|
||||
height:100vh;
|
||||
overflow:hidden;
|
||||
position:fixed;
|
||||
right:0;
|
||||
top:0;
|
||||
visibility:hidden;
|
||||
width:100vw;
|
||||
z-index:100000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button{
|
||||
cursor:pointer;
|
||||
left:12.5px;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
top:12.5px;
|
||||
z-index:5000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image{
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:3000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption{
|
||||
display:none;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img{
|
||||
max-height:100%;
|
||||
max-width:100%;
|
||||
width:auto;
|
||||
}
|
||||
.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.fade.active{
|
||||
animation:turn-on-visibility .25s both;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.active img{
|
||||
animation:turn-on-visibility .3s both;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.hideanimationenabled:not(.active){
|
||||
animation:turn-off-visibility .3s both;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img{
|
||||
animation:turn-off-visibility .25s both;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom img{
|
||||
height:var(--lightbox-image-max-height);
|
||||
position:absolute;
|
||||
transform-origin:top right;
|
||||
width:var(--lightbox-image-max-width);
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active{
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .wp-block-image img{
|
||||
animation:lightbox-zoom-in .4s forwards;
|
||||
}
|
||||
@media (prefers-reduced-motion){
|
||||
.wp-lightbox-overlay.zoom.active .wp-block-image img{
|
||||
animation:turn-on-visibility .4s both;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim{
|
||||
animation:turn-on-visibility .4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img{
|
||||
animation:lightbox-zoom-out .4s forwards;
|
||||
}
|
||||
@media (prefers-reduced-motion){
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img{
|
||||
animation:turn-off-visibility .4s both;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
|
||||
animation:turn-off-visibility .4s forwards;
|
||||
}
|
||||
|
||||
html.has-lightbox-open{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
@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%{
|
||||
right:var(--lightbox-initial-left-position);
|
||||
top:var(--lightbox-initial-top-position);
|
||||
transform:scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
|
||||
}
|
||||
to{
|
||||
right:var(--lightbox-target-left-position);
|
||||
top:var(--lightbox-target-top-position);
|
||||
transform:scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out{
|
||||
0%{
|
||||
right:var(--lightbox-target-left-position);
|
||||
top:var(--lightbox-target-top-position);
|
||||
transform:scale(1);
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
right:var(--lightbox-initial-left-position);
|
||||
top:var(--lightbox-initial-top-position);
|
||||
transform:scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,9 +1,13 @@
|
||||
.wp-block-image img{
|
||||
box-sizing:border-box;
|
||||
height:auto;
|
||||
max-width:100%;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.wp-block-image img,.wp-block-image.has-custom-border img{
|
||||
.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{
|
||||
@@ -86,4 +90,172 @@
|
||||
|
||||
.wp-block-image figure{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container .img-container{
|
||||
position:relative;
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
background:none;
|
||||
border:none;
|
||||
cursor:zoom-in;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
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-overlay{
|
||||
height:100vh;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
position:fixed;
|
||||
top:0;
|
||||
visibility:hidden;
|
||||
width:100vw;
|
||||
z-index:100000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button{
|
||||
cursor:pointer;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
right:12.5px;
|
||||
top:12.5px;
|
||||
z-index:5000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image{
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:3000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption{
|
||||
display:none;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img{
|
||||
max-height:100%;
|
||||
max-width:100%;
|
||||
width:auto;
|
||||
}
|
||||
.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.fade.active{
|
||||
animation:turn-on-visibility .25s both;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.active img{
|
||||
animation:turn-on-visibility .3s both;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.hideanimationenabled:not(.active){
|
||||
animation:turn-off-visibility .3s both;
|
||||
}
|
||||
.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img{
|
||||
animation:turn-off-visibility .25s both;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom img{
|
||||
height:var(--lightbox-image-max-height);
|
||||
position:absolute;
|
||||
transform-origin:top left;
|
||||
width:var(--lightbox-image-max-width);
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active{
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .wp-block-image img{
|
||||
animation:lightbox-zoom-in .4s forwards;
|
||||
}
|
||||
@media (prefers-reduced-motion){
|
||||
.wp-lightbox-overlay.zoom.active .wp-block-image img{
|
||||
animation:turn-on-visibility .4s both;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim{
|
||||
animation:turn-on-visibility .4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img{
|
||||
animation:lightbox-zoom-out .4s forwards;
|
||||
}
|
||||
@media (prefers-reduced-motion){
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img{
|
||||
animation:turn-off-visibility .4s both;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
|
||||
animation:turn-off-visibility .4s forwards;
|
||||
}
|
||||
|
||||
html.has-lightbox-open{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
@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%{
|
||||
left:var(--lightbox-initial-left-position);
|
||||
top:var(--lightbox-initial-top-position);
|
||||
transform:scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
|
||||
}
|
||||
to{
|
||||
left:var(--lightbox-target-left-position);
|
||||
top:var(--lightbox-target-top-position);
|
||||
transform:scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out{
|
||||
0%{
|
||||
left:var(--lightbox-target-left-position);
|
||||
top:var(--lightbox-target-top-position);
|
||||
transform:scale(1);
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
left:var(--lightbox-initial-left-position);
|
||||
top:var(--lightbox-initial-top-position);
|
||||
transform:scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
|
||||
}
|
||||
}
|
||||
2
wp/wp-includes/blocks/image/style.min.css
vendored
2
wp/wp-includes/blocks/image/style.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user