mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-18 00:25:37 +01:00
9aaa49f5a7
It brings with a set of iterations and follow-ups to the initial package update. It also fixes a regression that happened for interactive blocks. Props gziolo, luisherranz, cbravobernal. See #60315. Built from https://develop.svn.wordpress.org/trunk@57499 git-svn-id: http://core.svn.wordpress.org/trunk@57000 1a063a9b-81f0-0310-95a4-ce76da25c4cd
258 lines
16 KiB
CSS
258 lines
16 KiB
CSS
.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);
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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%;
|
|
}
|
|
.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){
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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%;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
figure.wp-block-gallery.has-nested-images{
|
|
align-items:normal;
|
|
}
|
|
|
|
.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{
|
|
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>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 img{
|
|
display:block;
|
|
height:auto;
|
|
max-width:100% !important;
|
|
width:auto;
|
|
}
|
|
.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 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;
|
|
}
|
|
.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 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.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;
|
|
} |