|
|
- .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{
- 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;
- 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 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;
- 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;
- }
- }
|