1 /** |
1 .wp-block-cover,.wp-block-cover-image{ |
2 * Colors |
2 align-items:center; |
3 */ |
3 background-position:50%; |
4 /** |
4 box-sizing:border-box; direction:ltr; |
5 * Breakpoints & Media Queries |
5 display:flex; |
6 */ |
6 justify-content:center; |
7 /** |
7 min-height:430px; |
8 * SCSS Variables. |
8 overflow:hidden; |
9 * |
9 overflow:clip; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 padding:1em; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 position:relative; |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 } |
13 */ |
13 .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]){ |
14 /** |
14 background-color:#000; |
15 * Colors |
15 } |
16 */ |
16 .wp-block-cover .has-background-dim.has-background-gradient,.wp-block-cover-image .has-background-dim.has-background-gradient{ |
17 /** |
17 background-color:initial; |
18 * Fonts & basic variables. |
18 } |
19 */ |
19 .wp-block-cover-image.has-background-dim:before,.wp-block-cover.has-background-dim:before{ |
20 /** |
20 background-color:inherit; |
21 * Grid System. |
21 content:""; |
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
22 } |
23 */ |
23 .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{ |
24 /** |
24 bottom:0; |
25 * Dimensions. |
25 left:0; |
26 */ |
26 opacity:.5; |
27 /** |
27 position:absolute; |
28 * Shadows. |
28 right:0; |
29 */ |
29 top:0; |
30 /** |
30 z-index:1; |
31 * Editor widths. |
31 } |
32 */ |
32 .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{ |
33 /** |
33 opacity:.1; |
34 * Block & Editor UI. |
34 } |
35 */ |
35 .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{ |
36 /** |
36 opacity:.2; |
37 * Block paddings. |
37 } |
38 */ |
38 .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{ |
39 /** |
39 opacity:.3; |
40 * React Native specific. |
40 } |
41 * These variables do not appear to be used anywhere else. |
41 .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{ |
42 */ |
42 opacity:.4; |
43 /** |
43 } |
44 * Converts a hex value into the rgb equivalent. |
44 .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{ |
45 * |
45 opacity:.5; |
46 * @param {string} hex - the hexadecimal value to convert |
46 } |
47 * @return {string} comma separated rgb values |
47 .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{ |
48 */ |
48 opacity:.6; |
49 /** |
49 } |
50 * Breakpoint mixins |
50 .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{ |
51 */ |
51 opacity:.7; |
52 /** |
52 } |
53 * Long content fade mixin |
53 .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{ |
54 * |
54 opacity:.8; |
55 * Creates a fading overlay to signify that the content is longer |
55 } |
56 * than the space allows. |
56 .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{ |
57 */ |
57 opacity:.9; |
58 /** |
58 } |
59 * Focus styles. |
59 .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{ |
60 */ |
60 opacity:1; |
61 /** |
61 } |
62 * Applies editor left position to the selector passed as argument |
62 .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{ |
63 */ |
63 opacity:0; |
64 /** |
64 } |
65 * Styles that are reused verbatim in a few places |
65 .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{ |
66 */ |
66 opacity:.1; |
67 /** |
67 } |
68 * Allows users to opt-out of animations via OS-level preferences. |
68 .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{ |
69 */ |
69 opacity:.2; |
70 /** |
70 } |
71 * Reset default styles for JavaScript UI based pages. |
71 .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{ |
72 * This is a WP-admin agnostic reset |
72 opacity:.3; |
73 */ |
73 } |
74 /** |
74 .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{ |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 opacity:.4; |
76 */ |
76 } |
77 .wp-block-cover-image, |
77 .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{ |
78 .wp-block-cover { |
78 opacity:.5; |
79 position: relative; |
79 } |
80 background-size: cover; |
80 .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{ |
81 background-position: center center; |
81 opacity:.6; |
82 min-height: 430px; |
82 } |
83 width: 100%; |
83 .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{ |
84 display: flex; |
84 opacity:.7; |
85 justify-content: center; |
85 } |
86 align-items: center; |
86 .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{ |
87 padding: 1em; |
87 opacity:.8; |
88 box-sizing: border-box; |
88 } |
89 /** |
89 .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{ |
90 * Set a default background color for has-background-dim _unless_ it includes another |
90 opacity:.9; |
91 * background-color class (e.g. has-green-background-color). The presence of another |
91 } |
92 * background-color class implies that another style will provide the background color |
92 .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{ |
93 * for the overlay. |
93 opacity:1; |
94 * |
94 } |
95 * See: |
95 .wp-block-cover-image.alignleft,.wp-block-cover-image.alignright,.wp-block-cover.alignleft,.wp-block-cover.alignright{ |
96 * - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545 |
96 max-width:420px; |
97 * - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545 |
97 width:100%; |
98 */ |
98 } |
99 } |
99 .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{ |
100 .wp-block-cover-image.has-parallax, |
100 display:flex; |
101 .wp-block-cover.has-parallax { |
101 } |
102 background-attachment: fixed; |
102 .wp-block-cover .wp-block-cover__inner-container,.wp-block-cover-image .wp-block-cover__inner-container{ |
103 } |
103 color:inherit; direction:rtl; |
104 @supports (-webkit-touch-callout: inherit) { |
104 width:100%; |
105 .wp-block-cover-image.has-parallax, |
105 z-index:1; |
106 .wp-block-cover.has-parallax { |
106 } |
107 background-attachment: scroll; |
107 .wp-block-cover-image.is-position-top-left,.wp-block-cover.is-position-top-left{ |
|
108 align-items:flex-start; |
|
109 justify-content:flex-start; |
|
110 } |
|
111 .wp-block-cover-image.is-position-top-center,.wp-block-cover.is-position-top-center{ |
|
112 align-items:flex-start; |
|
113 justify-content:center; |
|
114 } |
|
115 .wp-block-cover-image.is-position-top-right,.wp-block-cover.is-position-top-right{ |
|
116 align-items:flex-start; |
|
117 justify-content:flex-end; |
|
118 } |
|
119 .wp-block-cover-image.is-position-center-left,.wp-block-cover.is-position-center-left{ |
|
120 align-items:center; |
|
121 justify-content:flex-start; |
|
122 } |
|
123 .wp-block-cover-image.is-position-center-center,.wp-block-cover.is-position-center-center{ |
|
124 align-items:center; |
|
125 justify-content:center; |
|
126 } |
|
127 .wp-block-cover-image.is-position-center-right,.wp-block-cover.is-position-center-right{ |
|
128 align-items:center; |
|
129 justify-content:flex-end; |
|
130 } |
|
131 .wp-block-cover-image.is-position-bottom-left,.wp-block-cover.is-position-bottom-left{ |
|
132 align-items:flex-end; |
|
133 justify-content:flex-start; |
|
134 } |
|
135 .wp-block-cover-image.is-position-bottom-center,.wp-block-cover.is-position-bottom-center{ |
|
136 align-items:flex-end; |
|
137 justify-content:center; |
|
138 } |
|
139 .wp-block-cover-image.is-position-bottom-right,.wp-block-cover.is-position-bottom-right{ |
|
140 align-items:flex-end; |
|
141 justify-content:flex-end; |
|
142 } |
|
143 .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{ |
|
144 margin:0; |
|
145 } |
|
146 .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{ |
|
147 margin:0; |
|
148 width:auto; |
|
149 } |
|
150 .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{ |
|
151 border:none; |
|
152 bottom:0; |
|
153 box-shadow:none; |
|
154 height:100%; |
|
155 left:0; |
|
156 margin:0; |
|
157 max-height:none; |
|
158 max-width:none; |
|
159 object-fit:cover; |
|
160 outline:none; |
|
161 padding:0; |
|
162 position:absolute; |
|
163 right:0; |
|
164 top:0; |
|
165 width:100%; |
|
166 } |
|
167 |
|
168 .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{ |
|
169 background-attachment:fixed; |
|
170 background-repeat:no-repeat; |
|
171 background-size:cover; |
|
172 } |
|
173 @supports (-webkit-touch-callout:inherit){ |
|
174 .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{ |
|
175 background-attachment:scroll; |
108 } |
176 } |
109 } |
177 } |
110 @media (prefers-reduced-motion: reduce) { |
178 @media (prefers-reduced-motion:reduce){ |
111 .wp-block-cover-image.has-parallax, |
179 .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{ |
112 .wp-block-cover.has-parallax { |
180 background-attachment:scroll; |
113 background-attachment: scroll; |
|
114 } |
181 } |
115 } |
182 } |
116 .wp-block-cover-image.is-repeated, |
183 .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{ |
117 .wp-block-cover.is-repeated { |
184 background-repeat:repeat; |
118 background-repeat: repeat; |
185 background-size:auto; |
119 background-size: auto; |
186 } |
120 } |
187 |
121 .wp-block-cover-image.has-background-dim:not([class*=-background-color]), |
188 .wp-block-cover__image-background,.wp-block-cover__video-background{ |
122 .wp-block-cover-image .has-background-dim:not([class*=-background-color]), |
189 z-index:0; |
123 .wp-block-cover.has-background-dim:not([class*=-background-color]), |
190 } |
124 .wp-block-cover .has-background-dim:not([class*=-background-color]) { |
191 .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{ |
125 background-color: #000; |
192 color:#fff; |
126 } |
193 } |
127 .wp-block-cover-image .has-background-dim.has-background-gradient, |
194 |
128 .wp-block-cover .has-background-dim.has-background-gradient { |
195 .wp-block-cover-image .wp-block-cover.has-left-content{ |
129 background-color: transparent; |
196 justify-content:flex-start; |
130 } |
197 } |
131 .wp-block-cover-image.has-background-dim::before, |
198 .wp-block-cover-image .wp-block-cover.has-right-content{ |
132 .wp-block-cover.has-background-dim::before { |
199 justify-content:flex-end; |
133 content: ""; |
200 } |
134 background-color: inherit; |
201 |
135 } |
202 .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{ |
136 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before, |
203 margin-right:0; |
137 .wp-block-cover-image .wp-block-cover__background, |
204 text-align:right; |
138 .wp-block-cover-image .wp-block-cover__gradient-background, |
205 } |
139 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before, |
206 |
140 .wp-block-cover .wp-block-cover__background, |
207 .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{ |
141 .wp-block-cover .wp-block-cover__gradient-background { |
208 margin-left:0; |
142 position: absolute; |
209 text-align:left; |
143 top: 0; |
210 } |
144 right: 0; |
211 |
145 bottom: 0; |
212 .wp-block-cover .wp-block-cover-text,.wp-block-cover-image .wp-block-cover-image-text,section.wp-block-cover-image>h2{ |
146 left: 0; |
213 font-size:2em; |
147 z-index: 1; |
214 line-height:1.25; |
148 opacity: 0.5; |
215 margin-bottom:0; |
149 } |
216 max-width:840px; |
150 .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, |
217 padding:.44em; |
151 .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__background, |
218 text-align:center; |
152 .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background, |
219 z-index:1; |
153 .wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, |
220 } |
154 .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__background, |
221 |
155 .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background { |
222 :where(.wp-block-cover-image:not(.has-text-color)),:where(.wp-block-cover:not(.has-text-color)){ |
156 opacity: 0.1; |
223 color:#fff; |
157 } |
224 } |
158 .wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, |
225 |
159 .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__background, |
226 :where(.wp-block-cover-image.is-light:not(.has-text-color)),:where(.wp-block-cover.is-light:not(.has-text-color)){ |
160 .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background, |
227 color:#000; |
161 .wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, |
228 } |
162 .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__background, |
229 |
163 .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background { |
230 :root :where(.wp-block-cover h1:not(.has-text-color)),:root :where(.wp-block-cover h2:not(.has-text-color)),:root :where(.wp-block-cover h3:not(.has-text-color)),:root :where(.wp-block-cover h4:not(.has-text-color)),:root :where(.wp-block-cover h5:not(.has-text-color)),:root :where(.wp-block-cover h6:not(.has-text-color)),:root :where(.wp-block-cover p:not(.has-text-color)){ |
164 opacity: 0.2; |
231 color:inherit; |
165 } |
232 } |
166 .wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, |
|
167 .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__background, |
|
168 .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background, |
|
169 .wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, |
|
170 .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__background, |
|
171 .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background { |
|
172 opacity: 0.3; |
|
173 } |
|
174 .wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, |
|
175 .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__background, |
|
176 .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background, |
|
177 .wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, |
|
178 .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__background, |
|
179 .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background { |
|
180 opacity: 0.4; |
|
181 } |
|
182 .wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, |
|
183 .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__background, |
|
184 .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background, |
|
185 .wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, |
|
186 .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__background, |
|
187 .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background { |
|
188 opacity: 0.5; |
|
189 } |
|
190 .wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, |
|
191 .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__background, |
|
192 .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background, |
|
193 .wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, |
|
194 .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__background, |
|
195 .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background { |
|
196 opacity: 0.6; |
|
197 } |
|
198 .wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, |
|
199 .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__background, |
|
200 .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background, |
|
201 .wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, |
|
202 .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__background, |
|
203 .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background { |
|
204 opacity: 0.7; |
|
205 } |
|
206 .wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, |
|
207 .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__background, |
|
208 .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background, |
|
209 .wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, |
|
210 .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__background, |
|
211 .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background { |
|
212 opacity: 0.8; |
|
213 } |
|
214 .wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, |
|
215 .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__background, |
|
216 .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background, |
|
217 .wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, |
|
218 .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__background, |
|
219 .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background { |
|
220 opacity: 0.9; |
|
221 } |
|
222 .wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, |
|
223 .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__background, |
|
224 .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background, |
|
225 .wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, |
|
226 .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__background, |
|
227 .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background { |
|
228 opacity: 1; |
|
229 } |
|
230 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0, |
|
231 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-0, |
|
232 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0, |
|
233 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0 { |
|
234 opacity: 0; |
|
235 } |
|
236 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10, |
|
237 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-10, |
|
238 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10, |
|
239 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-10 { |
|
240 opacity: 0.1; |
|
241 } |
|
242 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20, |
|
243 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-20, |
|
244 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20, |
|
245 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-20 { |
|
246 opacity: 0.2; |
|
247 } |
|
248 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30, |
|
249 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-30, |
|
250 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30, |
|
251 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30 { |
|
252 opacity: 0.3; |
|
253 } |
|
254 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40, |
|
255 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-40, |
|
256 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40, |
|
257 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40 { |
|
258 opacity: 0.4; |
|
259 } |
|
260 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50, |
|
261 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-50, |
|
262 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50, |
|
263 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50 { |
|
264 opacity: 0.5; |
|
265 } |
|
266 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60, |
|
267 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-60, |
|
268 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60, |
|
269 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-60 { |
|
270 opacity: 0.6; |
|
271 } |
|
272 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70, |
|
273 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-70, |
|
274 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70, |
|
275 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70 { |
|
276 opacity: 0.7; |
|
277 } |
|
278 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80, |
|
279 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-80, |
|
280 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80, |
|
281 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80 { |
|
282 opacity: 0.8; |
|
283 } |
|
284 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90, |
|
285 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-90, |
|
286 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90, |
|
287 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-90 { |
|
288 opacity: 0.9; |
|
289 } |
|
290 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100, |
|
291 .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-100, |
|
292 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100, |
|
293 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-100 { |
|
294 opacity: 1; |
|
295 } |
|
296 .wp-block-cover-image .block-library-cover__padding-visualizer, |
|
297 .wp-block-cover .block-library-cover__padding-visualizer { |
|
298 z-index: 2; |
|
299 } |
|
300 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, |
|
301 .wp-block-cover.alignleft, |
|
302 .wp-block-cover.alignright { |
|
303 max-width: 420px; |
|
304 width: 100%; |
|
305 } |
|
306 .wp-block-cover-image::after, |
|
307 .wp-block-cover::after { |
|
308 display: block; |
|
309 content: ""; |
|
310 font-size: 0; |
|
311 min-height: inherit; |
|
312 } |
|
313 @supports (position: sticky) { |
|
314 .wp-block-cover-image::after, |
|
315 .wp-block-cover::after { |
|
316 content: none; |
|
317 } |
|
318 } |
|
319 .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, |
|
320 .wp-block-cover.aligncenter, |
|
321 .wp-block-cover.alignleft, |
|
322 .wp-block-cover.alignright { |
|
323 display: flex; |
|
324 } |
|
325 .wp-block-cover-image .wp-block-cover__inner-container, |
|
326 .wp-block-cover .wp-block-cover__inner-container { |
|
327 width: 100%; |
|
328 z-index: 1; |
|
329 color: #fff; |
|
330 } |
|
331 .wp-block-cover-image.is-light .wp-block-cover__inner-container, |
|
332 .wp-block-cover.is-light .wp-block-cover__inner-container { |
|
333 color: #000; |
|
334 } |
|
335 .wp-block-cover-image p:not(.has-text-color), |
|
336 .wp-block-cover-image h1:not(.has-text-color), |
|
337 .wp-block-cover-image h2:not(.has-text-color), |
|
338 .wp-block-cover-image h3:not(.has-text-color), |
|
339 .wp-block-cover-image h4:not(.has-text-color), |
|
340 .wp-block-cover-image h5:not(.has-text-color), |
|
341 .wp-block-cover-image h6:not(.has-text-color), |
|
342 .wp-block-cover p:not(.has-text-color), |
|
343 .wp-block-cover h1:not(.has-text-color), |
|
344 .wp-block-cover h2:not(.has-text-color), |
|
345 .wp-block-cover h3:not(.has-text-color), |
|
346 .wp-block-cover h4:not(.has-text-color), |
|
347 .wp-block-cover h5:not(.has-text-color), |
|
348 .wp-block-cover h6:not(.has-text-color) { |
|
349 color: inherit; |
|
350 } |
|
351 .wp-block-cover-image.is-position-top-left, |
|
352 .wp-block-cover.is-position-top-left { |
|
353 align-items: flex-start; |
|
354 justify-content: flex-start; |
|
355 } |
|
356 .wp-block-cover-image.is-position-top-center, |
|
357 .wp-block-cover.is-position-top-center { |
|
358 align-items: flex-start; |
|
359 justify-content: center; |
|
360 } |
|
361 .wp-block-cover-image.is-position-top-right, |
|
362 .wp-block-cover.is-position-top-right { |
|
363 align-items: flex-start; |
|
364 justify-content: flex-end; |
|
365 } |
|
366 .wp-block-cover-image.is-position-center-left, |
|
367 .wp-block-cover.is-position-center-left { |
|
368 align-items: center; |
|
369 justify-content: flex-start; |
|
370 } |
|
371 .wp-block-cover-image.is-position-center-center, |
|
372 .wp-block-cover.is-position-center-center { |
|
373 align-items: center; |
|
374 justify-content: center; |
|
375 } |
|
376 .wp-block-cover-image.is-position-center-right, |
|
377 .wp-block-cover.is-position-center-right { |
|
378 align-items: center; |
|
379 justify-content: flex-end; |
|
380 } |
|
381 .wp-block-cover-image.is-position-bottom-left, |
|
382 .wp-block-cover.is-position-bottom-left { |
|
383 align-items: flex-end; |
|
384 justify-content: flex-start; |
|
385 } |
|
386 .wp-block-cover-image.is-position-bottom-center, |
|
387 .wp-block-cover.is-position-bottom-center { |
|
388 align-items: flex-end; |
|
389 justify-content: center; |
|
390 } |
|
391 .wp-block-cover-image.is-position-bottom-right, |
|
392 .wp-block-cover.is-position-bottom-right { |
|
393 align-items: flex-end; |
|
394 justify-content: flex-end; |
|
395 } |
|
396 .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, |
|
397 .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { |
|
398 margin: 0; |
|
399 width: auto; |
|
400 } |
|
401 .wp-block-cover-image img.wp-block-cover__image-background, |
|
402 .wp-block-cover-image video.wp-block-cover__video-background, |
|
403 .wp-block-cover img.wp-block-cover__image-background, |
|
404 .wp-block-cover video.wp-block-cover__video-background { |
|
405 position: absolute; |
|
406 top: 0; |
|
407 right: 0; |
|
408 left: 0; |
|
409 bottom: 0; |
|
410 margin: 0; |
|
411 padding: 0; |
|
412 width: 100%; |
|
413 height: 100%; |
|
414 max-width: none; |
|
415 max-height: none; |
|
416 -o-object-fit: cover; |
|
417 object-fit: cover; |
|
418 outline: none; |
|
419 border: none; |
|
420 box-shadow: none; |
|
421 } |
|
422 |
|
423 .wp-block-cover__video-background { |
|
424 z-index: 0; |
|
425 } |
|
426 |
|
427 .wp-block-cover__image-background { |
|
428 z-index: 0; |
|
429 } |
|
430 |
|
431 section.wp-block-cover-image h2, |
|
432 .wp-block-cover-image-text, |
|
433 .wp-block-cover-text { |
|
434 color: #fff; |
|
435 } |
|
436 section.wp-block-cover-image h2 a, |
|
437 section.wp-block-cover-image h2 a:hover, |
|
438 section.wp-block-cover-image h2 a:focus, |
|
439 section.wp-block-cover-image h2 a:active, |
|
440 .wp-block-cover-image-text a, |
|
441 .wp-block-cover-image-text a:hover, |
|
442 .wp-block-cover-image-text a:focus, |
|
443 .wp-block-cover-image-text a:active, |
|
444 .wp-block-cover-text a, |
|
445 .wp-block-cover-text a:hover, |
|
446 .wp-block-cover-text a:focus, |
|
447 .wp-block-cover-text a:active { |
|
448 color: #fff; |
|
449 } |
|
450 |
|
451 .wp-block-cover-image .wp-block-cover.has-left-content { |
|
452 justify-content: flex-start; |
|
453 } |
|
454 .wp-block-cover-image .wp-block-cover.has-right-content { |
|
455 justify-content: flex-end; |
|
456 } |
|
457 |
|
458 section.wp-block-cover-image.has-left-content > h2, |
|
459 .wp-block-cover-image.has-left-content .wp-block-cover-image-text, |
|
460 .wp-block-cover.has-left-content .wp-block-cover-text { |
|
461 margin-right: 0; |
|
462 text-align: right; |
|
463 } |
|
464 |
|
465 section.wp-block-cover-image.has-right-content > h2, |
|
466 .wp-block-cover-image.has-right-content .wp-block-cover-image-text, |
|
467 .wp-block-cover.has-right-content .wp-block-cover-text { |
|
468 margin-left: 0; |
|
469 text-align: left; |
|
470 } |
|
471 |
|
472 section.wp-block-cover-image > h2, |
|
473 .wp-block-cover-image .wp-block-cover-image-text, |
|
474 .wp-block-cover .wp-block-cover-text { |
|
475 font-size: 2em; |
|
476 line-height: 1.25; |
|
477 z-index: 1; |
|
478 margin-bottom: 0; |
|
479 max-width: 840px; |
|
480 padding: 0.44em; |
|
481 text-align: center; |
|
482 } |
|