mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-05 10:22:23 +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
241 lines
19 KiB
CSS
241 lines
19 KiB
CSS
.wp-block-cover,.wp-block-cover-image{
|
|
align-items:center;
|
|
background-position:50%;
|
|
box-sizing:border-box;
|
|
display:flex;
|
|
justify-content:center;
|
|
min-height:430px;
|
|
overflow-x:clip;
|
|
padding:1em;
|
|
position:relative;
|
|
}
|
|
.wp-block-cover .has-background-dim:not([class*=-background-color]),.wp-block-cover-image .has-background-dim:not([class*=-background-color]),.wp-block-cover-image.has-background-dim:not([class*=-background-color]),.wp-block-cover.has-background-dim:not([class*=-background-color]){
|
|
background-color:#000;
|
|
}
|
|
.wp-block-cover .has-background-dim.has-background-gradient,.wp-block-cover-image .has-background-dim.has-background-gradient{
|
|
background-color:initial;
|
|
}
|
|
.wp-block-cover-image.has-background-dim:before,.wp-block-cover.has-background-dim:before{
|
|
background-color:inherit;
|
|
content:"";
|
|
}
|
|
.wp-block-cover .wp-block-cover__background,.wp-block-cover .wp-block-cover__gradient-background,.wp-block-cover-image .wp-block-cover__background,.wp-block-cover-image .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim:not(.has-background-gradient):before,.wp-block-cover.has-background-dim:not(.has-background-gradient):before{
|
|
bottom:0;
|
|
left:0;
|
|
opacity:.5;
|
|
position:absolute;
|
|
right:0;
|
|
top:0;
|
|
z-index:1;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient):before{
|
|
opacity:.1;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient):before{
|
|
opacity:.2;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient):before{
|
|
opacity:.3;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient):before{
|
|
opacity:.4;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient):before{
|
|
opacity:.5;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient):before{
|
|
opacity:.6;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient):before{
|
|
opacity:.7;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient):before{
|
|
opacity:.8;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient):before{
|
|
opacity:.9;
|
|
}
|
|
.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient):before{
|
|
opacity:1;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-0,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0{
|
|
opacity:0;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-10,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-10,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10{
|
|
opacity:.1;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-20,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-20,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20{
|
|
opacity:.2;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-30,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30{
|
|
opacity:.3;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-40,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40{
|
|
opacity:.4;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-50,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50{
|
|
opacity:.5;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-60,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-60,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60{
|
|
opacity:.6;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-70,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70{
|
|
opacity:.7;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-80,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80{
|
|
opacity:.8;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-90,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-90,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90{
|
|
opacity:.9;
|
|
}
|
|
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-100,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-100,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100{
|
|
opacity:1;
|
|
}
|
|
.wp-block-cover-image.alignleft,.wp-block-cover-image.alignright,.wp-block-cover.alignleft,.wp-block-cover.alignright{
|
|
max-width:420px;
|
|
width:100%;
|
|
}
|
|
.wp-block-cover-image:after,.wp-block-cover:after{
|
|
content:"";
|
|
display:block;
|
|
font-size:0;
|
|
min-height:inherit;
|
|
}
|
|
@supports (position:sticky){
|
|
.wp-block-cover-image:after,.wp-block-cover:after{
|
|
content:none;
|
|
}
|
|
}
|
|
.wp-block-cover-image.aligncenter,.wp-block-cover-image.alignleft,.wp-block-cover-image.alignright,.wp-block-cover.aligncenter,.wp-block-cover.alignleft,.wp-block-cover.alignright{
|
|
display:flex;
|
|
}
|
|
.wp-block-cover .wp-block-cover__inner-container,.wp-block-cover-image .wp-block-cover__inner-container{
|
|
color:inherit;
|
|
width:100%;
|
|
z-index:1;
|
|
}
|
|
.wp-block-cover h1:where(:not(.has-text-color)),.wp-block-cover h2:where(:not(.has-text-color)),.wp-block-cover h3:where(:not(.has-text-color)),.wp-block-cover h4:where(:not(.has-text-color)),.wp-block-cover h5:where(:not(.has-text-color)),.wp-block-cover h6:where(:not(.has-text-color)),.wp-block-cover p:where(:not(.has-text-color)),.wp-block-cover-image h1:where(:not(.has-text-color)),.wp-block-cover-image h2:where(:not(.has-text-color)),.wp-block-cover-image h3:where(:not(.has-text-color)),.wp-block-cover-image h4:where(:not(.has-text-color)),.wp-block-cover-image h5:where(:not(.has-text-color)),.wp-block-cover-image h6:where(:not(.has-text-color)),.wp-block-cover-image p:where(:not(.has-text-color)){
|
|
color:inherit;
|
|
}
|
|
.wp-block-cover-image.is-position-top-left,.wp-block-cover.is-position-top-left{
|
|
align-items:flex-start;
|
|
justify-content:flex-start;
|
|
}
|
|
.wp-block-cover-image.is-position-top-center,.wp-block-cover.is-position-top-center{
|
|
align-items:flex-start;
|
|
justify-content:center;
|
|
}
|
|
.wp-block-cover-image.is-position-top-right,.wp-block-cover.is-position-top-right{
|
|
align-items:flex-start;
|
|
justify-content:flex-end;
|
|
}
|
|
.wp-block-cover-image.is-position-center-left,.wp-block-cover.is-position-center-left{
|
|
align-items:center;
|
|
justify-content:flex-start;
|
|
}
|
|
.wp-block-cover-image.is-position-center-center,.wp-block-cover.is-position-center-center{
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
.wp-block-cover-image.is-position-center-right,.wp-block-cover.is-position-center-right{
|
|
align-items:center;
|
|
justify-content:flex-end;
|
|
}
|
|
.wp-block-cover-image.is-position-bottom-left,.wp-block-cover.is-position-bottom-left{
|
|
align-items:flex-end;
|
|
justify-content:flex-start;
|
|
}
|
|
.wp-block-cover-image.is-position-bottom-center,.wp-block-cover.is-position-bottom-center{
|
|
align-items:flex-end;
|
|
justify-content:center;
|
|
}
|
|
.wp-block-cover-image.is-position-bottom-right,.wp-block-cover.is-position-bottom-right{
|
|
align-items:flex-end;
|
|
justify-content:flex-end;
|
|
}
|
|
.wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container{
|
|
margin:0;
|
|
}
|
|
.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container{
|
|
margin:0;
|
|
width:auto;
|
|
}
|
|
.wp-block-cover .wp-block-cover__image-background,.wp-block-cover video.wp-block-cover__video-background,.wp-block-cover-image .wp-block-cover__image-background,.wp-block-cover-image video.wp-block-cover__video-background{
|
|
border:none;
|
|
bottom:0;
|
|
box-shadow:none;
|
|
height:100%;
|
|
left:0;
|
|
margin:0;
|
|
max-height:none;
|
|
max-width:none;
|
|
object-fit:cover;
|
|
outline:none;
|
|
padding:0;
|
|
position:absolute;
|
|
right:0;
|
|
top:0;
|
|
width:100%;
|
|
}
|
|
|
|
.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{
|
|
background-attachment:fixed;
|
|
background-repeat:no-repeat;
|
|
background-size:cover;
|
|
}
|
|
@supports (-webkit-touch-callout:inherit){
|
|
.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{
|
|
background-attachment:scroll;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion:reduce){
|
|
.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{
|
|
background-attachment:scroll;
|
|
}
|
|
}
|
|
.wp-block-cover-image.is-repeated,.wp-block-cover.is-repeated,.wp-block-cover__image-background.is-repeated,video.wp-block-cover__video-background.is-repeated{
|
|
background-repeat:repeat;
|
|
background-size:auto;
|
|
}
|
|
|
|
.wp-block-cover__image-background,.wp-block-cover__video-background{
|
|
z-index:0;
|
|
}
|
|
.wp-block-cover-image-text,.wp-block-cover-image-text a,.wp-block-cover-image-text a:active,.wp-block-cover-image-text a:focus,.wp-block-cover-image-text a:hover,.wp-block-cover-text,.wp-block-cover-text a,.wp-block-cover-text a:active,.wp-block-cover-text a:focus,.wp-block-cover-text a:hover,section.wp-block-cover-image h2,section.wp-block-cover-image h2 a,section.wp-block-cover-image h2 a:active,section.wp-block-cover-image h2 a:focus,section.wp-block-cover-image h2 a:hover{
|
|
color:#fff;
|
|
}
|
|
|
|
.wp-block-cover-image .wp-block-cover.has-left-content{
|
|
justify-content:flex-start;
|
|
}
|
|
.wp-block-cover-image .wp-block-cover.has-right-content{
|
|
justify-content:flex-end;
|
|
}
|
|
|
|
.wp-block-cover-image.has-left-content .wp-block-cover-image-text,.wp-block-cover.has-left-content .wp-block-cover-text,section.wp-block-cover-image.has-left-content>h2{
|
|
margin-left:0;
|
|
text-align:left;
|
|
}
|
|
|
|
.wp-block-cover-image.has-right-content .wp-block-cover-image-text,.wp-block-cover.has-right-content .wp-block-cover-text,section.wp-block-cover-image.has-right-content>h2{
|
|
margin-right:0;
|
|
text-align:right;
|
|
}
|
|
|
|
.wp-block-cover .wp-block-cover-text,.wp-block-cover-image .wp-block-cover-image-text,section.wp-block-cover-image>h2{
|
|
font-size:2em;
|
|
line-height:1.25;
|
|
margin-bottom:0;
|
|
max-width:840px;
|
|
padding:.44em;
|
|
text-align:center;
|
|
z-index:1;
|
|
}
|
|
|
|
:where(.wp-block-cover-image:not(.has-text-color)),:where(.wp-block-cover:not(.has-text-color)){
|
|
color:#fff;
|
|
}
|
|
|
|
:where(.wp-block-cover-image.is-light:not(.has-text-color)),:where(.wp-block-cover.is-light:not(.has-text-color)){
|
|
color:#000;
|
|
} |