Project

General

Profile

0001-misc-add-IE11-support-for-page-pictures-30496.patch

Frédéric Péters, 08 Feb 2019 04:05 PM

Download (2.55 KB)

View differences:

Subject: [PATCH] misc: add IE11 support for page pictures (#30496)

 static/includes/_nav.scss          | 24 ++++++++++++------------
 static/saint-chamond/_custom.scss  |  6 ++----
 templates/combo/page_template.html | 10 ++++++++++
 3 files changed, 24 insertions(+), 16 deletions(-)
static/includes/_nav.scss
458 458
}
459 459

  
460 460
@if $nav-after-image == true {
461
	@supports (background-image: var(--page-picture)) {
462
		body.has-picture nav::after {
463
			content: "";
464
			display: block;
465
			width: 100%;
466
			height: $nav-after-image-height;
467
			background: transparent center center no-repeat;
468
			background-image: var(--page-picture);
469
			background-size: cover;
470
			position: relative;
471
			top: -0.5rem;
472
		}
461
	body.has-picture nav::after {
462
		content: "";
463
		display: block;
464
		width: 100%;
465
		height: $nav-after-image-height;
466
		background-color: transparent;
467
		background-image: var(--page-picture);
468
		background-position: center center;
469
		background-repeat: no-repeat;
470
		background-size: cover;
471
		position: relative;
472
		top: -0.5rem;
473 473
	}
474 474
}
static/saint-chamond/_custom.scss
258 258
}
259 259

  
260 260
@media screen and (max-width: $nav-mobile-limit) {
261
	@supports (background-image: var(--page-picture)) {
262
		body.has-picture nav::after {
263
			height: 200px;
264
		}
261
	body.has-picture nav::after {
262
		height: 200px;
265 263
	}
266 264
}
templates/combo/page_template.html
35 35
:root {
36 36
  --page-picture: url("{{site_base}}{{page.picture.url}}");
37 37
}
38
{% block msie_css_page_picture %}
39
{# IE11 doesn't support CSS variable and supports() API, so we set it here and
40
   themes that do need a different CSS will have to redefine the
41
   msie_css_page_picture block. #}
42
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
43
  body.has-picture nav::after {
44
    background-image: url("{{site_base}}{{page.picture.url}}");
45
  }
46
}
47
{% endblock %}
38 48
</style>
39 49
{% endif %}
40 50
{% endblock %}
41
-