| .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 :where(figcaption){ |
| margin-bottom:1em; |
| margin-top:.5em; |
| } |
| .wp-block-image.is-style-circle-mask 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; |
| } |
| } |
|
|
| :root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){ |
| border-radius:9999px; |
| } |
|
|
| .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:#5a5a5a40; |
| border:none; |
| border-radius:4px; |
| cursor:zoom-in; |
| display:flex; |
| height:20px; |
| justify-content:center; |
| left:16px; |
| opacity:0; |
| padding:0; |
| position:absolute; |
| text-align:center; |
| top:16px; |
| transition:opacity .2s ease; |
| width:20px; |
| z-index:100; |
| } |
| .wp-lightbox-container button:focus-visible{ |
| outline:3px auto #5a5a5a40; |
| 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:#5a5a5a40; |
| 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:100%; |
| 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.show-closing-animation:not(.active){ |
| animation:turn-off-visibility .35s both; |
| } |
| .wp-lightbox-overlay.show-closing-animation: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.show-closing-animation:not(.active){ |
| animation:none; |
| } |
| .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{ |
| animation:lightbox-zoom-out .4s; |
| } |
| .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{ |
| animation:none; |
| } |
| .wp-lightbox-overlay.zoom.show-closing-animation: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(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + 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(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); |
| visibility:hidden; |
| } |
| } |
