style.css (12399B)
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 left: 0; 131 bottom: 0; 132 right: 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 left: 0; 300 right: 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-left: 0; 354 text-align: left; 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-right: 0; 361 text-align: right; 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 }