1 /**

     2  * Colors

     3  */

     4 /**

     5  * Breakpoints & Media Queries

     6  */

     7 /**

     8  * SCSS Variables.

     9  *

    10  * Please use variables from this sheet to ensure consistency across the UI.

    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.

    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.

    13  */

    14 /**

    15  * Colors

    16  */

    17 /**

    18  * Fonts & basic variables.

    19  */

    20 /**

    21  * Grid System.

    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

    23  */

    24 /**

    25  * Dimensions.

    26  */

    27 /**

    28  * Shadows.

    29  */

    30 /**

    31  * Editor widths.

    32  */

    33 /**

    34  * Block & Editor UI.

    35  */

    36 /**

    37  * Block paddings.

    38  */

    39 /**

    40  * React Native specific.

    41  * These variables do not appear to be used anywhere else.

    42  */

    43 /**

    44  * Breakpoint mixins

    45  */

    46 /**

    47  * Long content fade mixin

    48  *

    49  * Creates a fading overlay to signify that the content is longer

    50  * than the space allows.

    51  */

    52 /**

    53  * Focus styles.

    54  */

    55 /**

    56  * Applies editor left position to the selector passed as argument

    57  */

    58 /**

    59  * Styles that are reused verbatim in a few places

    60  */

    61 /**

    62  * Allows users to opt-out of animations via OS-level preferences.

    63  */

    64 /**

    65  * Reset default styles for JavaScript UI based pages.

    66  * This is a WP-admin agnostic reset

    67  */

    68 /**

    69  * Reset the WP Admin page styles for Gutenberg-like pages.

    70  */

    71 .wp-block-cover-image,

    72 .wp-block-cover {

    73   position: relative;

    74   background-size: cover;

    75   background-position: center center;

    76   min-height: 430px;

    77   width: 100%;

    78   display: flex;

    79   justify-content: center;

    80   align-items: center;

    81   padding: 1em;

    82   box-sizing: border-box;

    83   /**

    84    * Set a default background color for has-background-dim _unless_ it includes another

    85    * background-color class (e.g. has-green-background-color). The presence of another

    86    * background-color class implies that another style will provide the background color

    87    * for the overlay.

    88    *

    89    * See:

    90    *   - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545

    91    *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545

    92    */

    93 }

    94 .wp-block-cover-image.has-parallax,

    95 .wp-block-cover.has-parallax {

    96   background-attachment: fixed;

    97 }

    98 @supports (-webkit-overflow-scrolling: touch) {

    99   .wp-block-cover-image.has-parallax,

   100 .wp-block-cover.has-parallax {

   101     background-attachment: scroll;

   102   }

   103 }

   104 @media (prefers-reduced-motion: reduce) {

   105   .wp-block-cover-image.has-parallax,

   106 .wp-block-cover.has-parallax {

   107     background-attachment: scroll;

   108   }

   109 }

   110 .wp-block-cover-image.is-repeated,

   111 .wp-block-cover.is-repeated {

   112   background-repeat: repeat;

   113   background-size: auto;

   114 }

   115 .wp-block-cover-image.has-background-dim:not([class*=-background-color]),

   116 .wp-block-cover.has-background-dim:not([class*=-background-color]) {

   117   background-color: #000;

   118 }

   119 .wp-block-cover-image.has-background-dim::before,

   120 .wp-block-cover.has-background-dim::before {

   121   content: "";

   122   background-color: inherit;

   123 }

   124 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,

   125 .wp-block-cover-image .wp-block-cover__gradient-background,

   126 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,

   127 .wp-block-cover .wp-block-cover__gradient-background {

   128   position: absolute;

   129   top: 0;

   130   right: 0;

   131   bottom: 0;

   132   left: 0;

   133   z-index: 1;

   134   opacity: 0.5;

   135 }

   136 .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,

   137 .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,

   138 .wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,

   139 .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background {

   140   opacity: 0.1;

   141 }

   142 .wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,

   143 .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,

   144 .wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,

   145 .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background {

   146   opacity: 0.2;

   147 }

   148 .wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,

   149 .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,

   150 .wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,

   151 .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background {

   152   opacity: 0.3;

   153 }

   154 .wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,

   155 .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,

   156 .wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,

   157 .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background {

   158   opacity: 0.4;

   159 }

   160 .wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,

   161 .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,

   162 .wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,

   163 .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background {

   164   opacity: 0.5;

   165 }

   166 .wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,

   167 .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,

   168 .wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,

   169 .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background {

   170   opacity: 0.6;

   171 }

   172 .wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,

   173 .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,

   174 .wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,

   175 .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background {

   176   opacity: 0.7;

   177 }

   178 .wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,

   179 .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,

   180 .wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,

   181 .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background {

   182   opacity: 0.8;

   183 }

   184 .wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,

   185 .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,

   186 .wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,

   187 .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background {

   188   opacity: 0.9;

   189 }

   190 .wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,

   191 .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,

   192 .wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,

   193 .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background {

   194   opacity: 1;

   195 }

   196 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,

   197 .wp-block-cover.alignleft,

   198 .wp-block-cover.alignright {

   199   max-width: 420px;

   200   width: 100%;

   201 }

   202 .wp-block-cover-image::after,

   203 .wp-block-cover::after {

   204   display: block;

   205   content: "";

   206   font-size: 0;

   207   min-height: inherit;

   208 }

   209 @supports (position: sticky) {

   210   .wp-block-cover-image::after,

   211 .wp-block-cover::after {

   212     content: none;

   213   }

   214 }

   215 .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,

   216 .wp-block-cover.aligncenter,

   217 .wp-block-cover.alignleft,

   218 .wp-block-cover.alignright {

   219   display: flex;

   220 }

   221 .wp-block-cover-image .wp-block-cover__inner-container,

   222 .wp-block-cover .wp-block-cover__inner-container {

   223   width: 100%;

   224   z-index: 1;

   225   color: #fff;

   226 }

   227 .wp-block-cover-image p:not(.has-text-color),

   228 .wp-block-cover-image h1:not(.has-text-color),

   229 .wp-block-cover-image h2:not(.has-text-color),

   230 .wp-block-cover-image h3:not(.has-text-color),

   231 .wp-block-cover-image h4:not(.has-text-color),

   232 .wp-block-cover-image h5:not(.has-text-color),

   233 .wp-block-cover-image h6:not(.has-text-color),

   234 .wp-block-cover p:not(.has-text-color),

   235 .wp-block-cover h1:not(.has-text-color),

   236 .wp-block-cover h2:not(.has-text-color),

   237 .wp-block-cover h3:not(.has-text-color),

   238 .wp-block-cover h4:not(.has-text-color),

   239 .wp-block-cover h5:not(.has-text-color),

   240 .wp-block-cover h6:not(.has-text-color) {

   241   color: inherit;

   242 }

   243 .wp-block-cover-image.is-position-top-left,

   244 .wp-block-cover.is-position-top-left {

   245   align-items: flex-start;

   246   justify-content: flex-start;

   247 }

   248 .wp-block-cover-image.is-position-top-center,

   249 .wp-block-cover.is-position-top-center {

   250   align-items: flex-start;

   251   justify-content: center;

   252 }

   253 .wp-block-cover-image.is-position-top-right,

   254 .wp-block-cover.is-position-top-right {

   255   align-items: flex-start;

   256   justify-content: flex-end;

   257 }

   258 .wp-block-cover-image.is-position-center-left,

   259 .wp-block-cover.is-position-center-left {

   260   align-items: center;

   261   justify-content: flex-start;

   262 }

   263 .wp-block-cover-image.is-position-center-center,

   264 .wp-block-cover.is-position-center-center {

   265   align-items: center;

   266   justify-content: center;

   267 }

   268 .wp-block-cover-image.is-position-center-right,

   269 .wp-block-cover.is-position-center-right {

   270   align-items: center;

   271   justify-content: flex-end;

   272 }

   273 .wp-block-cover-image.is-position-bottom-left,

   274 .wp-block-cover.is-position-bottom-left {

   275   align-items: flex-end;

   276   justify-content: flex-start;

   277 }

   278 .wp-block-cover-image.is-position-bottom-center,

   279 .wp-block-cover.is-position-bottom-center {

   280   align-items: flex-end;

   281   justify-content: center;

   282 }

   283 .wp-block-cover-image.is-position-bottom-right,

   284 .wp-block-cover.is-position-bottom-right {

   285   align-items: flex-end;

   286   justify-content: flex-end;

   287 }

   288 .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,

   289 .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {

   290   margin: 0;

   291   width: auto;

   292 }

   293 .wp-block-cover-image img.wp-block-cover__image-background,

   294 .wp-block-cover-image video.wp-block-cover__video-background,

   295 .wp-block-cover img.wp-block-cover__image-background,

   296 .wp-block-cover video.wp-block-cover__video-background {

   297   position: absolute;

   298   top: 0;

   299   right: 0;

   300   left: 0;

   301   bottom: 0;

   302   margin: 0;

   303   padding: 0;

   304   width: 100%;

   305   height: 100%;

   306   max-width: none;

   307   max-height: none;

   308   -o-object-fit: cover;

   309      object-fit: cover;

   310   outline: none;

   311   border: none;

   312   box-shadow: none;

   313 }

   314 

   315 .wp-block-cover__video-background {

   316   z-index: 0;

   317 }

   318 

   319 .wp-block-cover__image-background {

   320   z-index: 0;

   321 }

   322 

   323 section.wp-block-cover-image h2,

   324 .wp-block-cover-image-text,

   325 .wp-block-cover-text {

   326   color: #fff;

   327 }

   328 section.wp-block-cover-image h2 a,

   329 section.wp-block-cover-image h2 a:hover,

   330 section.wp-block-cover-image h2 a:focus,

   331 section.wp-block-cover-image h2 a:active,

   332 .wp-block-cover-image-text a,

   333 .wp-block-cover-image-text a:hover,

   334 .wp-block-cover-image-text a:focus,

   335 .wp-block-cover-image-text a:active,

   336 .wp-block-cover-text a,

   337 .wp-block-cover-text a:hover,

   338 .wp-block-cover-text a:focus,

   339 .wp-block-cover-text a:active {

   340   color: #fff;

   341 }

   342 

   343 .wp-block-cover-image .wp-block-cover.has-left-content {

   344   justify-content: flex-start;

   345 }

   346 .wp-block-cover-image .wp-block-cover.has-right-content {

   347   justify-content: flex-end;

   348 }

   349 

   350 section.wp-block-cover-image.has-left-content > h2,

   351 .wp-block-cover-image.has-left-content .wp-block-cover-image-text,

   352 .wp-block-cover.has-left-content .wp-block-cover-text {

   353   margin-right: 0;

   354   text-align: right;

   355 }

   356 

   357 section.wp-block-cover-image.has-right-content > h2,

   358 .wp-block-cover-image.has-right-content .wp-block-cover-image-text,

   359 .wp-block-cover.has-right-content .wp-block-cover-text {

   360   margin-left: 0;

   361   text-align: left;

   362 }

   363 

   364 section.wp-block-cover-image > h2,

   365 .wp-block-cover-image .wp-block-cover-image-text,

   366 .wp-block-cover .wp-block-cover-text {

   367   font-size: 2em;

   368   line-height: 1.25;

   369   z-index: 1;

   370   margin-bottom: 0;

   371   max-width: 840px;

   372   padding: 0.44em;

   373   text-align: center;

   374 }