golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

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
This commit is contained in:
Volker E 2020-06-08 14:02:09 -07:00
parent b2f4433d39
commit 3888b4075e
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/skins.vector.styles/MenuPortal.less
View File

@ -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;

3
variables.less
View File

@ -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