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.is-placeholder {

    72   min-height: auto !important;

    73   padding: 0 !important;

    74 }

    75 .wp-block-cover.components-placeholder h2 {

    76   color: inherit;

    77 }

    78 .wp-block-cover.is-transient::before {

    79   background-color: #fff;

    80   opacity: 0.3;

    81 }

    82 .wp-block-cover .components-spinner {

    83   position: absolute;

    84   z-index: 1;

    85   top: 50%;

    86   right: 50%;

    87   transform: translate(50%, -50%);

    88   margin: 0;

    89 }

    90 .wp-block-cover .block-editor-block-list__layout {

    91   width: 100%;

    92 }

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

    94   text-align: right;

    95   margin-right: 0;

    96   margin-left: 0;

    97 }

    98 .wp-block-cover .wp-block-cover__placeholder-background-options {

    99   width: 100%;

   100 }

   101 

   102 [data-align=left] > .wp-block-cover,

   103 [data-align=right] > .wp-block-cover {

   104   max-width: 420px;

   105   width: 100%;

   106 }

   107 

   108 .block-library-cover__reset-button {

   109   margin-right: auto;

   110 }

   111 

   112 .block-library-cover__resize-container {

   113   position: absolute !important;

   114   top: 0;

   115   right: 0;

   116   left: 0;

   117   bottom: 0;

   118 }

   119 

   120 .block-library-cover__resize-container:not(.is-resizing) {

   121   height: auto !important;

   122 }

   123 

   124 .wp-block-cover > .components-drop-zone.is-active {

   125   transition: 0.2s opacity, 0.2s border;

   126 }

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

   128   .wp-block-cover > .components-drop-zone.is-active {

   129     transition-duration: 0s;

   130     transition-delay: 0s;

   131   }

   132 }

   133 .wp-block-cover > .components-drop-zone.is-dragging-over-element {

   134   background-color: transparent;

   135   border: 48px solid var(--wp-admin-theme-color);

   136 }

   137 .wp-block-cover > .components-drop-zone.is-dragging-over-element .components-drop-zone__content {

   138   transform: none;

   139 }

   140 .wp-block-cover > .components-drop-zone .components-drop-zone__content {

   141   display: flex;

   142   align-items: center;

   143   top: -36px;

   144   right: -36px;

   145   transform: none;

   146 }

   147 .wp-block-cover > .components-drop-zone .components-drop-zone__content-icon,

   148 .wp-block-cover > .components-drop-zone .components-drop-zone__content-text {

   149   display: inline;

   150 }

   151 .wp-block-cover > .components-drop-zone .components-drop-zone__content-icon {

   152   margin: 0;

   153   margin-left: 8px;

   154 }

   155 .wp-block-cover > .components-drop-zone .components-drop-zone__content-text {

   156   font-size: 13px;

   157 }

   158 

   159 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {

   160   background-attachment: scroll;

   161 }