diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/image/style.css --- a/wp/wp-includes/blocks/image/style.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/image/style.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,161 +1,275 @@ -/** - * Colors - */ -/** - * Breakpoints & Media Queries - */ -/** - * SCSS Variables. - * - * Please use variables from this sheet to ensure consistency across the UI. - * Don't add to this sheet unless you're pretty sure the value will be reused in many places. - * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. - */ -/** - * Colors - */ -/** - * Fonts & basic variables. - */ -/** - * Grid System. - * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ - */ -/** - * Dimensions. - */ -/** - * Shadows. - */ -/** - * Editor widths. - */ -/** - * Block & Editor UI. - */ -/** - * Block paddings. - */ -/** - * React Native specific. - * These variables do not appear to be used anywhere else. - */ -/** -* Converts a hex value into the rgb equivalent. -* -* @param {string} hex - the hexadecimal value to convert -* @return {string} comma separated rgb values -*/ -/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * Focus styles. - */ -/** - * Applies editor left position to the selector passed as argument - */ -/** - * Styles that are reused verbatim in a few places - */ -/** - * Allows users to opt-out of animations via OS-level preferences. - */ -/** - * Reset default styles for JavaScript UI based pages. - * This is a WP-admin agnostic reset - */ -/** - * Reset the WP Admin page styles for Gutenberg-like pages. - */ -.wp-block-image { - margin: 0 0 1em 0; +.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 img { - height: auto; - max-width: 100%; - vertical-align: bottom; +.wp-block-image .alignleft{ + float:left; + margin:.5em 1em .5em 0; } -.wp-block-image:not(.is-style-rounded) > a, -.wp-block-image:not(.is-style-rounded) img { - border-radius: inherit; -} -.wp-block-image.aligncenter { - text-align: center; -} -.wp-block-image.alignfull img, .wp-block-image.alignwide img { - height: auto; - width: 100%; +.wp-block-image .alignright{ + float:right; + margin:.5em 0 .5em 1em; } -.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter, -.wp-block-image .alignleft, -.wp-block-image .alignright, -.wp-block-image .aligncenter { - display: table; +.wp-block-image .aligncenter{ + margin-left:auto; + margin-right:auto; } -.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, -.wp-block-image .aligncenter > figcaption { - display: table-caption; - caption-side: bottom; -} -.wp-block-image .alignleft { - /*rtl:ignore*/ - float: left; - /*rtl:ignore*/ - margin-left: 0; - margin-right: 1em; - margin-top: 0.5em; - margin-bottom: 0.5em; +.wp-block-image :where(figcaption){ + margin-bottom:1em; + margin-top:.5em; } -.wp-block-image .alignright { - /*rtl:ignore*/ - float: right; - /*rtl:ignore*/ - margin-right: 0; - margin-left: 1em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} -.wp-block-image .aligncenter { - margin-left: auto; - margin-right: auto; -} -.wp-block-image figcaption { - margin-top: 0.5em; - margin-bottom: 1em; +.wp-block-image.is-style-circle-mask img{ + border-radius:9999px; } -.wp-block-image.is-style-rounded img, -.wp-block-image .is-style-rounded img { - border-radius: 9999px; -} -.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 { - /* stylelint-disable */ - -webkit-mask-image: url('data:image/svg+xml;utf8,'); - mask-image: url('data:image/svg+xml;utf8,'); - /* stylelint-enable */ - mask-mode: alpha; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-position: center; - mask-position: center; - border-radius: 0; +@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,'); + mask-image:url('data:image/svg+xml;utf8,'); + 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 figure { - margin: 0; +: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; + opacity:0; + padding:0; + position:absolute; + right:16px; + 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; + left:0; + overflow:hidden; + position:fixed; + top:0; + visibility:hidden; + width:100%; + z-index:100000; +} +.wp-lightbox-overlay .close-button{ + align-items:center; + cursor:pointer; + display:flex; + justify-content:center; + min-height:40px; + min-width:40px; + padding:0; + position:absolute; + right:calc(env(safe-area-inset-right) + 16px); + 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); + left:50%; + overflow:hidden; + position:absolute; + top:50%; + transform:translate(-50%, -50%); + transform-origin:top left; + 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:0 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)), 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)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); + visibility:hidden; + } } \ No newline at end of file