diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/gallery/style.css --- a/wp/wp-includes/blocks/gallery/style.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/gallery/style.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,392 +1,258 @@ -/** - * 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-gallery:not(.has-nested-images), -.blocks-gallery-grid:not(.has-nested-images) { - display: flex; - flex-wrap: wrap; - list-style-type: none; - padding: 0; - margin: 0; +.blocks-gallery-grid:not(.has-nested-images),.wp-block-gallery:not(.has-nested-images){ + display:flex; + flex-wrap:wrap; + list-style-type:none; + margin:0; + padding:0; +} +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item{ + display:flex; + flex-direction:column; + flex-grow:1; + justify-content:center; + margin:0 1em 1em 0; + position:relative; + width:calc(50% - 1em); } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item { - margin: 0 1em 1em 0; - display: flex; - flex-grow: 1; - flex-direction: column; - justify-content: center; - position: relative; - width: calc(50% - 1em); -} -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even), -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even), -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even), -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even) { - margin-right: 0; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n){ + margin-right:0; } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure { - margin: 0; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: flex-start; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure{ + align-items:flex-end; + display:flex; + height:100%; + justify-content:flex-start; + margin:0; } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img { - display: block; - max-width: 100%; - height: auto; - width: auto; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img{ + display:block; + height:auto; + max-width:100%; + width:auto; } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption { - position: absolute; - bottom: 0; - width: 100%; - max-height: 100%; - overflow: auto; - padding: 3em 0.77em 0.7em; - color: #fff; - text-align: center; - font-size: 0.8em; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); - box-sizing: border-box; - margin: 0; - z-index: 2; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption{ + background:linear-gradient(0deg, #000000b3, #0000004d 70%, #0000); + bottom:0; + box-sizing:border-box; + color:#fff; + font-size:.8em; + margin:0; + max-height:100%; + overflow:auto; + padding:3em .77em .7em; + position:absolute; + text-align:center; + width:100%; + z-index:2; } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img { - display: inline; -} -.wp-block-gallery:not(.has-nested-images) figcaption, -.blocks-gallery-grid:not(.has-nested-images) figcaption { - flex-grow: 1; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img{ + display:inline; } -.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a, -.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image img, .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item a, -.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img, -.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a, -.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img, -.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a, -.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img { - width: 100%; - height: 100%; - flex: 1; - -o-object-fit: cover; - object-fit: cover; +.blocks-gallery-grid:not(.has-nested-images) figcaption,.wp-block-gallery:not(.has-nested-images) figcaption{ + flex-grow:1; +} +.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image img,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item a,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img{ + flex:1; + height:100%; + object-fit:cover; + width:100%; } -.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item { - width: 100%; - margin-right: 0; +.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item{ + margin-right:0; + width:100%; } -@media (min-width: 600px) { - .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item { - width: calc(33.3333333333% - 0.6666666667em); - margin-right: 1em; - } - .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item { - width: calc(25% - 0.75em); - margin-right: 1em; +@media (min-width:600px){ + .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item{ + margin-right:1em; + width:calc(33.33333% - .66667em); } - .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item { - width: calc(20% - 0.8em); - margin-right: 1em; - } - .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item { - width: calc(16.6666666667% - 0.8333333333em); - margin-right: 1em; + .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item{ + margin-right:1em; + width:calc(25% - .75em); } - .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item { - width: calc(14.2857142857% - 0.8571428571em); - margin-right: 1em; - } - .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item, -.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image, -.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item { - width: calc(12.5% - 0.875em); - margin-right: 1em; - } - .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n), -.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n), -.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) { - margin-right: 0; + .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item{ + margin-right:1em; + width:calc(20% - .8em); } - .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n), -.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n), -.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) { - margin-right: 0; - } - .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n), -.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n), -.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) { - margin-right: 0; - } - .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n), -.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n), -.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) { - margin-right: 0; + .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item{ + margin-right:1em; + width:calc(16.66667% - .83333em); } - .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n), -.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n), -.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) { - margin-right: 0; - } - .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n), -.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n), -.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) { - margin-right: 0; + .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item{ + margin-right:1em; + width:calc(14.28571% - .85714em); } - .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n), -.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n), -.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) { - margin-right: 0; + .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item{ + margin-right:1em; + width:calc(12.5% - .875em); } - .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n), -.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n), -.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) { - margin-right: 0; + .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n),.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),.wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n){ + margin-right:0; } } -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child, -.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child, -.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child { - margin-right: 0; +.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child{ + margin-right:0; } -.wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright, -.blocks-gallery-grid:not(.has-nested-images).alignleft, -.blocks-gallery-grid:not(.has-nested-images).alignright { - max-width: 420px; - width: 100%; +.blocks-gallery-grid:not(.has-nested-images).alignleft,.blocks-gallery-grid:not(.has-nested-images).alignright,.wp-block-gallery:not(.has-nested-images).alignleft,.wp-block-gallery:not(.has-nested-images).alignright{ + max-width:420px; + width:100%; } -.wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure, -.blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure { - justify-content: center; +.blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure{ + justify-content:center; } -.wp-block-gallery:not(.is-cropped) .blocks-gallery-item { - align-self: flex-start; +.wp-block-gallery:not(.is-cropped) .blocks-gallery-item{ + align-self:flex-start; } -figure.wp-block-gallery.has-nested-images { - align-items: normal; +figure.wp-block-gallery.has-nested-images{ + align-items:normal; } -.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { - width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) / 2)); - margin: 0; -} -.wp-block-gallery.has-nested-images figure.wp-block-image { - display: flex; - flex-grow: 1; - justify-content: center; - position: relative; - flex-direction: column; - max-width: 100%; -} -.wp-block-gallery.has-nested-images figure.wp-block-image > div, -.wp-block-gallery.has-nested-images figure.wp-block-image > a { - margin: 0; - flex-direction: column; - flex-grow: 1; -} -.wp-block-gallery.has-nested-images figure.wp-block-image img { - display: block; - height: auto; - max-width: 100% !important; - width: auto; +.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){ + margin:0; + width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2); } -.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { - background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); - bottom: 0; - color: #fff; - font-size: 13px; - left: 0; - margin-bottom: 0; - max-height: 60%; - overflow: auto; - padding: 0 8px 8px; - position: absolute; - text-align: center; - width: 100%; - box-sizing: border-box; +.wp-block-gallery.has-nested-images figure.wp-block-image{ + box-sizing:border-box; + display:flex; + flex-direction:column; + flex-grow:1; + justify-content:center; + max-width:100%; + position:relative; } -.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img { - display: inline; +.wp-block-gallery.has-nested-images figure.wp-block-image>a,.wp-block-gallery.has-nested-images figure.wp-block-image>div{ + flex-direction:column; + flex-grow:1; + margin:0; } -.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a { - color: inherit; -} -.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div, -.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a { - flex: 1 1 auto; +.wp-block-gallery.has-nested-images figure.wp-block-image img{ + display:block; + height:auto; + max-width:100% !important; + width:auto; } -.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption { - flex: initial; - background: none; - color: inherit; - margin: 0; - padding: 10px 10px 9px; - position: relative; -} -.wp-block-gallery.has-nested-images figcaption { - flex-grow: 1; - flex-basis: 100%; - text-align: center; -} -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) { - margin-top: 0; - margin-bottom: auto; -} -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) { - align-self: inherit; -} -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone), -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a { - display: flex; -} -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { - width: 100%; - flex: 1 0 0%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ + background:linear-gradient(0deg, #000000b3, #0000004d 70%, #0000); + bottom:0; + box-sizing:border-box; + color:#fff; + font-size:13px; + left:0; + margin-bottom:0; + max-height:60%; + overflow:auto; + padding:0 8px 8px; + position:absolute; + scrollbar-color:#0000 #0000; + scrollbar-gutter:stable both-edges; + scrollbar-width:thin; + text-align:center; + width:100%; + will-change:transform; } -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { - width: 100%; +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar{ + height:12px; + width:12px; +} +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track{ + background-color:initial; } -@media (min-width: 600px) { - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { - width: calc(33.3333333333% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667)); - } - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { - width: calc(25% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.75)); - } - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) { - width: calc(20% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8)); - } - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { - width: calc(16.6666666667% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333)); - } - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) { - width: calc(14.2857142857% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571)); - } - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) { - width: calc(12.5% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.875)); - } - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { - width: calc(33.33% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667)); - } - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), -.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { - width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.5)); - } - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { - width: 100%; +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb{ + background-clip:padding-box; + background-color:initial; + border:3px solid #0000; + border-radius:8px; +} +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb{ + background-color:#fffc; +} +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover{ + scrollbar-color:#fffc #0000; +} +@media (hover:none){ + .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ + scrollbar-color:#fffc #0000; } } -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright { - max-width: 420px; - width: 100%; +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img{ + display:inline; +} +.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a{ + color:inherit; +} +.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img{ + box-sizing:border-box; +} +.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>a,.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>div,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>a,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>div{ + flex:1 1 auto; +} +.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border figcaption,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption{ + background:none; + color:inherit; + flex:initial; + margin:0; + padding:10px 10px 9px; + position:relative; +} +.wp-block-gallery.has-nested-images figcaption{ + flex-basis:100%; + flex-grow:1; + text-align:center; +} +.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image){ + margin-bottom:auto; + margin-top:0; +} +.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image){ + align-self:inherit; +} +.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>div:not(.components-drop-zone){ + display:flex; } -.wp-block-gallery.has-nested-images.aligncenter { - justify-content: center; +.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{ + flex:1 0 0%; + height:100%; + object-fit:cover; + width:100%; +} +.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image){ + width:100%; +} +@media (min-width:600px){ + .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image){ + width:calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667); + } + .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image){ + width:calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75); + } + .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image){ + width:calc(20% - var(--wp--style--unstable-gallery-gap, 16px)*.8); + } + .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image){ + width:calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333); + } + .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image){ + width:calc(14.28571% - var(--wp--style--unstable-gallery-gap, 16px)*.85714); + } + .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image){ + width:calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px)*.875); + } + .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){ + width:calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667); + } + .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image){ + width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5); + } + .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child{ + width:100%; + } +} +.wp-block-gallery.has-nested-images.alignleft,.wp-block-gallery.has-nested-images.alignright{ + max-width:420px; + width:100%; +} +.wp-block-gallery.has-nested-images.aligncenter{ + justify-content:center; } \ No newline at end of file