[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/blocks/image/ -> style.css (source)

   1  .wp-block-image>a,.wp-block-image>figure>a{
   2    display:inline-block;
   3  }
   4  .wp-block-image img{
   5    box-sizing:border-box;
   6    height:auto;
   7    max-width:100%;
   8    vertical-align:bottom;
   9  }
  10  @media not (prefers-reduced-motion){
  11    .wp-block-image img.hide{
  12      visibility:hidden;
  13    }
  14    .wp-block-image img.show{
  15      animation:show-content-image .4s;
  16    }
  17  }
  18  .wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
  19    border-radius:inherit;
  20  }
  21  .wp-block-image.has-custom-border img{
  22    box-sizing:border-box;
  23  }
  24  .wp-block-image.aligncenter{
  25    text-align:center;
  26  }
  27  .wp-block-image.alignfull>a,.wp-block-image.alignwide>a{
  28    width:100%;
  29  }
  30  .wp-block-image.alignfull img,.wp-block-image.alignwide img{
  31    height:auto;
  32    width:100%;
  33  }
  34  .wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
  35    display:table;
  36  }
  37  .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{
  38    caption-side:bottom;
  39    display:table-caption;
  40  }
  41  .wp-block-image .alignleft{
  42    float:left;
  43    margin:.5em 1em .5em 0;
  44  }
  45  .wp-block-image .alignright{
  46    float:right;
  47    margin:.5em 0 .5em 1em;
  48  }
  49  .wp-block-image .aligncenter{
  50    margin-left:auto;
  51    margin-right:auto;
  52  }
  53  .wp-block-image :where(figcaption){
  54    margin-bottom:1em;
  55    margin-top:.5em;
  56  }
  57  .wp-block-image.is-style-circle-mask img{
  58    border-radius:9999px;
  59  }
  60  @supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
  61    .wp-block-image.is-style-circle-mask img{
  62      border-radius:0;
  63      -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>');
  64              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>');
  65      mask-mode:alpha;
  66      -webkit-mask-position:center;
  67              mask-position:center;
  68      -webkit-mask-repeat:no-repeat;
  69              mask-repeat:no-repeat;
  70      -webkit-mask-size:contain;
  71              mask-size:contain;
  72    }
  73  }
  74  
  75  :root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){
  76    border-radius:9999px;
  77  }
  78  
  79  .wp-block-image figure{
  80    margin:0;
  81  }
  82  
  83  .wp-lightbox-container{
  84    display:flex;
  85    flex-direction:column;
  86    position:relative;
  87  }
  88  .wp-lightbox-container img{
  89    cursor:zoom-in;
  90  }
  91  .wp-lightbox-container img:hover+button{
  92    opacity:1;
  93  }
  94  .wp-lightbox-container button{
  95    align-items:center;
  96    backdrop-filter:blur(16px) saturate(180%);
  97    background-color:#5a5a5a40;
  98    border:none;
  99    border-radius:4px;
 100    cursor:zoom-in;
 101    display:flex;
 102    height:20px;
 103    justify-content:center;
 104    opacity:0;
 105    padding:0;
 106    position:absolute;
 107    right:16px;
 108    text-align:center;
 109    top:16px;
 110    width:20px;
 111    z-index:100;
 112  }
 113  @media not (prefers-reduced-motion){
 114    .wp-lightbox-container button{
 115      transition:opacity .2s ease;
 116    }
 117  }
 118  .wp-lightbox-container button:focus-visible{
 119    outline:3px auto #5a5a5a40;
 120    outline:3px auto -webkit-focus-ring-color;
 121    outline-offset:3px;
 122  }
 123  .wp-lightbox-container button:hover{
 124    cursor:pointer;
 125    opacity:1;
 126  }
 127  .wp-lightbox-container button:focus{
 128    opacity:1;
 129  }
 130  .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
 131    background-color:#5a5a5a40;
 132    border:none;
 133  }
 134  
 135  .wp-lightbox-overlay{
 136    box-sizing:border-box;
 137    cursor:zoom-out;
 138    height:100vh;
 139    left:0;
 140    overflow:hidden;
 141    position:fixed;
 142    top:0;
 143    visibility:hidden;
 144    width:100%;
 145    z-index:100000;
 146  }
 147  .wp-lightbox-overlay .close-button{
 148    align-items:center;
 149    cursor:pointer;
 150    display:flex;
 151    justify-content:center;
 152    min-height:40px;
 153    min-width:40px;
 154    padding:0;
 155    position:absolute;
 156    right:calc(env(safe-area-inset-right) + 16px);
 157    top:calc(env(safe-area-inset-top) + 16px);
 158    z-index:5000000;
 159  }
 160  .wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
 161    background:none;
 162    border:none;
 163  }
 164  .wp-lightbox-overlay .lightbox-image-container{
 165    height:var(--wp--lightbox-container-height);
 166    left:50%;
 167    overflow:hidden;
 168    position:absolute;
 169    top:50%;
 170    transform:translate(-50%, -50%);
 171    transform-origin:top left;
 172    width:var(--wp--lightbox-container-width);
 173    z-index:9999999999;
 174  }
 175  .wp-lightbox-overlay .wp-block-image{
 176    align-items:center;
 177    box-sizing:border-box;
 178    display:flex;
 179    height:100%;
 180    justify-content:center;
 181    margin:0;
 182    position:relative;
 183    transform-origin:0 0;
 184    width:100%;
 185    z-index:3000000;
 186  }
 187  .wp-lightbox-overlay .wp-block-image img{
 188    height:var(--wp--lightbox-image-height);
 189    min-height:var(--wp--lightbox-image-height);
 190    min-width:var(--wp--lightbox-image-width);
 191    width:var(--wp--lightbox-image-width);
 192  }
 193  .wp-lightbox-overlay .wp-block-image figcaption{
 194    display:none;
 195  }
 196  .wp-lightbox-overlay button{
 197    background:none;
 198    border:none;
 199  }
 200  .wp-lightbox-overlay .scrim{
 201    background-color:#fff;
 202    height:100%;
 203    opacity:.9;
 204    position:absolute;
 205    width:100%;
 206    z-index:2000000;
 207  }
 208  .wp-lightbox-overlay.active{
 209    visibility:visible;
 210  }
 211  @media not (prefers-reduced-motion){
 212    .wp-lightbox-overlay.active{
 213      animation:turn-on-visibility .25s both;
 214    }
 215    .wp-lightbox-overlay.active img{
 216      animation:turn-on-visibility .35s both;
 217    }
 218    .wp-lightbox-overlay.show-closing-animation:not(.active){
 219      animation:turn-off-visibility .35s both;
 220    }
 221    .wp-lightbox-overlay.show-closing-animation:not(.active) img{
 222      animation:turn-off-visibility .25s both;
 223    }
 224    .wp-lightbox-overlay.zoom.active{
 225      animation:none;
 226      opacity:1;
 227      visibility:visible;
 228    }
 229    .wp-lightbox-overlay.zoom.active .lightbox-image-container{
 230      animation:lightbox-zoom-in .4s;
 231    }
 232    .wp-lightbox-overlay.zoom.active .lightbox-image-container img{
 233      animation:none;
 234    }
 235    .wp-lightbox-overlay.zoom.active .scrim{
 236      animation:turn-on-visibility .4s forwards;
 237    }
 238    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
 239      animation:none;
 240    }
 241    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
 242      animation:lightbox-zoom-out .4s;
 243    }
 244    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
 245      animation:none;
 246    }
 247    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
 248      animation:turn-off-visibility .4s forwards;
 249    }
 250  }
 251  
 252  @keyframes show-content-image{
 253    0%{
 254      visibility:hidden;
 255    }
 256    99%{
 257      visibility:hidden;
 258    }
 259    to{
 260      visibility:visible;
 261    }
 262  }
 263  @keyframes turn-on-visibility{
 264    0%{
 265      opacity:0;
 266    }
 267    to{
 268      opacity:1;
 269    }
 270  }
 271  @keyframes turn-off-visibility{
 272    0%{
 273      opacity:1;
 274      visibility:visible;
 275    }
 276    99%{
 277      opacity:0;
 278      visibility:visible;
 279    }
 280    to{
 281      opacity:0;
 282      visibility:hidden;
 283    }
 284  }
 285  @keyframes lightbox-zoom-in{
 286    0%{
 287      transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 288    }
 289    to{
 290      transform:translate(-50%, -50%) scale(1);
 291    }
 292  }
 293  @keyframes lightbox-zoom-out{
 294    0%{
 295      transform:translate(-50%, -50%) scale(1);
 296      visibility:visible;
 297    }
 298    99%{
 299      visibility:visible;
 300    }
 301    to{
 302      transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 303      visibility:hidden;
 304    }
 305  }


Generated : Wed Oct 22 08:20:04 2025 Cross-referenced by PHPXref