diff options
Diffstat (limited to 'wp-includes/blocks/image/style.css')
| -rw-r--r-- | wp-includes/blocks/image/style.css | 301 |
1 files changed, 301 insertions, 0 deletions
diff --git a/wp-includes/blocks/image/style.css b/wp-includes/blocks/image/style.css new file mode 100644 index 0000000..d06a868 --- /dev/null +++ b/wp-includes/blocks/image/style.css @@ -0,0 +1,301 @@ +.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; + } +}
\ No newline at end of file |