[ 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    -webkit-backdrop-filter:blur(16px) saturate(180%);
  97            backdrop-filter:blur(16px) saturate(180%);
  98    background-color:#5a5a5a40;
  99    border:none;
 100    border-radius:4px;
 101    cursor:zoom-in;
 102    display:flex;
 103    height:20px;
 104    justify-content:center;
 105    opacity:0;
 106    padding:0;
 107    position:absolute;
 108    right:16px;
 109    text-align:center;
 110    top:16px;
 111    width:20px;
 112    z-index:100;
 113  }
 114  @media not (prefers-reduced-motion){
 115    .wp-lightbox-container button{
 116      transition:opacity .2s ease;
 117    }
 118  }
 119  .wp-lightbox-container button:focus-visible{
 120    outline:3px auto #5a5a5a40;
 121    outline:3px auto -webkit-focus-ring-color;
 122    outline-offset:3px;
 123  }
 124  .wp-lightbox-container button:hover{
 125    cursor:pointer;
 126    opacity:1;
 127  }
 128  .wp-lightbox-container button:focus{
 129    opacity:1;
 130  }
 131  .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
 132    background-color:#5a5a5a40;
 133    border:none;
 134  }
 135  
 136  .wp-lightbox-overlay{
 137    box-sizing:border-box;
 138    cursor:zoom-out;
 139    height:100vh;
 140    left:0;
 141    overflow:hidden;
 142    position:fixed;
 143    top:0;
 144    visibility:hidden;
 145    width:100%;
 146    z-index:100000;
 147  }
 148  .wp-lightbox-overlay .close-button{
 149    align-items:center;
 150    cursor:pointer;
 151    display:flex;
 152    justify-content:center;
 153    min-height:40px;
 154    min-width:40px;
 155    padding:0;
 156    position:absolute;
 157    right:calc(env(safe-area-inset-right) + 16px);
 158    top:calc(env(safe-area-inset-top) + 16px);
 159    z-index:5000000;
 160  }
 161  .wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
 162    background:none;
 163    border:none;
 164  }
 165  .wp-lightbox-overlay .lightbox-image-container{
 166    height:var(--wp--lightbox-container-height);
 167    left:50%;
 168    overflow:hidden;
 169    position:absolute;
 170    top:50%;
 171    transform:translate(-50%, -50%);
 172    transform-origin:top left;
 173    width:var(--wp--lightbox-container-width);
 174    z-index:9999999999;
 175  }
 176  .wp-lightbox-overlay .wp-block-image{
 177    align-items:center;
 178    box-sizing:border-box;
 179    display:flex;
 180    height:100%;
 181    justify-content:center;
 182    margin:0;
 183    position:relative;
 184    transform-origin:0 0;
 185    width:100%;
 186    z-index:3000000;
 187  }
 188  .wp-lightbox-overlay .wp-block-image img{
 189    height:var(--wp--lightbox-image-height);
 190    min-height:var(--wp--lightbox-image-height);
 191    min-width:var(--wp--lightbox-image-width);
 192    width:var(--wp--lightbox-image-width);
 193  }
 194  .wp-lightbox-overlay .wp-block-image figcaption{
 195    display:none;
 196  }
 197  .wp-lightbox-overlay button{
 198    background:none;
 199    border:none;
 200  }
 201  .wp-lightbox-overlay .scrim{
 202    background-color:#fff;
 203    height:100%;
 204    opacity:.9;
 205    position:absolute;
 206    width:100%;
 207    z-index:2000000;
 208  }
 209  .wp-lightbox-overlay.active{
 210    visibility:visible;
 211  }
 212  @media not (prefers-reduced-motion){
 213    .wp-lightbox-overlay.active{
 214      animation:turn-on-visibility .25s both;
 215    }
 216    .wp-lightbox-overlay.active img{
 217      animation:turn-on-visibility .35s both;
 218    }
 219    .wp-lightbox-overlay.show-closing-animation:not(.active){
 220      animation:turn-off-visibility .35s both;
 221    }
 222    .wp-lightbox-overlay.show-closing-animation:not(.active) img{
 223      animation:turn-off-visibility .25s both;
 224    }
 225    .wp-lightbox-overlay.zoom.active{
 226      animation:none;
 227      opacity:1;
 228      visibility:visible;
 229    }
 230    .wp-lightbox-overlay.zoom.active .lightbox-image-container{
 231      animation:lightbox-zoom-in .4s;
 232    }
 233    .wp-lightbox-overlay.zoom.active .lightbox-image-container img{
 234      animation:none;
 235    }
 236    .wp-lightbox-overlay.zoom.active .scrim{
 237      animation:turn-on-visibility .4s forwards;
 238    }
 239    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
 240      animation:none;
 241    }
 242    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
 243      animation:lightbox-zoom-out .4s;
 244    }
 245    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
 246      animation:none;
 247    }
 248    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
 249      animation:turn-off-visibility .4s forwards;
 250    }
 251  }
 252  
 253  @keyframes show-content-image{
 254    0%{
 255      visibility:hidden;
 256    }
 257    99%{
 258      visibility:hidden;
 259    }
 260    to{
 261      visibility:visible;
 262    }
 263  }
 264  @keyframes turn-on-visibility{
 265    0%{
 266      opacity:0;
 267    }
 268    to{
 269      opacity:1;
 270    }
 271  }
 272  @keyframes turn-off-visibility{
 273    0%{
 274      opacity:1;
 275      visibility:visible;
 276    }
 277    99%{
 278      opacity:0;
 279      visibility:visible;
 280    }
 281    to{
 282      opacity:0;
 283      visibility:hidden;
 284    }
 285  }
 286  @keyframes lightbox-zoom-in{
 287    0%{
 288      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));
 289    }
 290    to{
 291      transform:translate(-50%, -50%) scale(1);
 292    }
 293  }
 294  @keyframes lightbox-zoom-out{
 295    0%{
 296      transform:translate(-50%, -50%) scale(1);
 297      visibility:visible;
 298    }
 299    99%{
 300      visibility:visible;
 301    }
 302    to{
 303      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));
 304      visibility:hidden;
 305    }
 306  }


Generated : Sat Feb 22 08:20:01 2025 Cross-referenced by PHPXref