1f173de885
Pristine upstream, unpacked from the official wordpress.org tarball. https://wordpress.org/wordpress-7.1.1.tar.gz sha1 2a9d68474e8703aa3a66f80427b325e0941b6a1e (published by wordpress.org) sha256 3996fee13448ef12e07e9f0c77db2f655ffa1b7cde71c80a4965d3bf1fb956b3 This branch carries nothing but upstream releases, one commit each, and is never edited. It is the other side of the git-subtree merge that brings security releases into SiriusPress/wordpress/ — see SiriusPress/docs/upstream-merges.md.
140 lines
No EOL
3.5 KiB
CSS
140 lines
No EOL
3.5 KiB
CSS
/**
|
|
* Breakpoints & Media Queries
|
|
*/
|
|
.wp-block-media-text {
|
|
/*rtl:begin:ignore*/
|
|
direction: ltr;
|
|
/*rtl:end:ignore*/
|
|
display: grid;
|
|
grid-template-columns: 50% 1fr;
|
|
grid-template-rows: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.wp-block-media-text.has-media-on-the-right {
|
|
grid-template-columns: 1fr 50%;
|
|
}
|
|
|
|
.wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__content,
|
|
.wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__media {
|
|
align-self: start;
|
|
}
|
|
|
|
.wp-block-media-text > .wp-block-media-text__content,
|
|
.wp-block-media-text > .wp-block-media-text__media,
|
|
.wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__content,
|
|
.wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__media {
|
|
align-self: center;
|
|
}
|
|
|
|
.wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__content,
|
|
.wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__media {
|
|
align-self: end;
|
|
}
|
|
|
|
.wp-block-media-text > .wp-block-media-text__media {
|
|
/*rtl:begin:ignore*/
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
/*rtl:end:ignore*/
|
|
margin: 0;
|
|
}
|
|
|
|
.wp-block-media-text > .wp-block-media-text__content {
|
|
direction: ltr;
|
|
/*rtl:begin:ignore*/
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
/*rtl:end:ignore*/
|
|
padding: 0 8% 0 8%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
|
|
/*rtl:begin:ignore*/
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
/*rtl:end:ignore*/
|
|
}
|
|
|
|
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
|
|
/*rtl:begin:ignore*/
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
/*rtl:end:ignore*/
|
|
}
|
|
|
|
.wp-block-media-text__media a {
|
|
display: block;
|
|
}
|
|
|
|
.wp-block-media-text__media img,
|
|
.wp-block-media-text__media video {
|
|
height: auto;
|
|
max-width: unset;
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
|
|
.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
|
|
height: 100%;
|
|
min-height: 250px;
|
|
background-size: cover;
|
|
}
|
|
|
|
.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
/* Image fill for versions 8 and onwards */
|
|
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
|
|
position: relative;
|
|
height: 100%;
|
|
min-height: 250px;
|
|
}
|
|
|
|
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/*
|
|
* Here we here not able to use a mobile first CSS approach.
|
|
* Custom widths are set using inline styles, and on mobile,
|
|
* we need 100% width, so we use important to overwrite the inline style.
|
|
* If the style were set on mobile first, on desktop styles,
|
|
* we would have no way of setting the style again to the inline style.
|
|
*/
|
|
@media (max-width: 600px) {
|
|
.wp-block-media-text.is-stacked-on-mobile {
|
|
grid-template-columns: 100% !important;
|
|
}
|
|
.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
} |