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


Generated : Thu Nov 21 08:20:01 2024 Cross-referenced by PHPXref