wp/wp-includes/blocks/media-text/style.css
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
--- a/wp/wp-includes/blocks/media-text/style.css	Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-includes/blocks/media-text/style.css	Fri Sep 05 18:40:08 2025 +0200
@@ -1,187 +1,88 @@
-/**
- * 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-media-text {
-  /*!rtl:begin:ignore*/
-  direction: ltr;
-  /*!rtl:end:ignore*/
-  display: grid;
-  grid-template-columns: 50% 1fr;
-  grid-template-rows: auto;
+.wp-block-media-text{
+  box-sizing:border-box;
+  direction:ltr;
+  display:grid;
+  grid-template-columns:50% 1fr;
+  grid-template-rows:auto;
 }
-.wp-block-media-text.has-media-on-the-right {
-  grid-template-columns: 1fr 50%;
+.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.is-vertically-aligned-center>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media,.wp-block-media-text>.wp-block-media-text__content,.wp-block-media-text>.wp-block-media-text__media{
+  align-self:center;
 }
 
-.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.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{
+  grid-column:1;
+  grid-row:1;
+  margin:0;
+}
+
+.wp-block-media-text>.wp-block-media-text__content{
+  direction:ltr;
+  grid-column:2;
+  grid-row:1;
+  padding:0 8%;
+  word-break:break-word;
+}
+
+.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media{
+  grid-column:2;
+  grid-row:1;
 }
 
-.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.has-media-on-the-right>.wp-block-media-text__content{
+  grid-column:1;
+  grid-row:1;
 }
 
-.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__media img,.wp-block-media-text__media video{
+  height:auto;
+  max-width:unset;
+  vertical-align:middle;
+  width:100%;
 }
 
-.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.is-image-fill>.wp-block-media-text__media{
+  background-size:cover;
+  height:100%;
+  min-height:250px;
 }
 
-.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.is-image-fill>.wp-block-media-text__media>a{
+  display:block;
+  height:100%;
 }
 
-.wp-block-media-text__media img,
-.wp-block-media-text__media video {
-  height: auto;
-  max-width: unset;
-  width: 100%;
-  vertical-align: middle;
-}
-
-.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{
+  height:1px;
+  margin:-1px;
+  overflow:hidden;
+  padding:0;
+  position:absolute;
+  width:1px;
+  clip:rect(0, 0, 0, 0);
+  border:0;
 }
-
-.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;
-}
-
-/*
-* 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;
+@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__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;
+  .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{
+    grid-column:1;
+    grid-row:2;
   }
 }
\ No newline at end of file