From 3888b4075ebf6e7cec19b5fd9dd827abb4c08158 Mon Sep 17 00:00:00 2001 From: Volker E Date: Mon, 8 Jun 2020 14:02:09 -0700 Subject: [PATCH] Fix portal heading border in Safari By using `rgba()` instead of `transparent` the color gradient calculation works as expected in Safari as it does in all other browsers. Also using same distance 33%/66% for gradient start and end. Bug: T254489 Change-Id: I64ec6aa51a9ea931a2351c9c7a9ffaf28c8d130b --- resources/skins.vector.styles/MenuPortal.less | 2 +- variables.less | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/skins.vector.styles/MenuPortal.less b/resources/skins.vector.styles/MenuPortal.less index 231ff00..ebe1de5 100644 --- a/resources/skins.vector.styles/MenuPortal.less +++ b/resources/skins.vector.styles/MenuPortal.less @@ -11,7 +11,7 @@ h3 { display: block; background-image: url( images/portal-separator.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25 - background-image: linear-gradient( to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+) + background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+) background-position: center bottom; background-repeat: no-repeat; background-size: 100% @border-width-base; diff --git a/variables.less b/variables.less index 92a1184..7212117 100644 --- a/variables.less +++ b/variables.less @@ -66,6 +66,9 @@ @border-color-content: #a7d7f9; // Due to darker background gradient, border needs to be darkened for aligned visual perception. @border-color-content--tabs-inactive: darken( @border-color-content, 10% ); +@border-color-portal-heading: #c8ccd1; +// Use `rgba()` notation for better Safari support, see T254489. +@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 ); @padding-content: 1em; // Navigation