Page MenuHomePhorge
Create Task
Maniphest T164

Aurora skin uses data URIs for gradients instead of using CSS gradients
Open, NormalPublic
Actions

Description

They should be using CSS gradients instead. So far, the ones that I found that use data URIs currently are: #head, #foot, #full-search. There's probably some more that I'm unaware of.

Event Timeline

SamanthaNguyen created this task.Jan 14 2017, 8:09 PM
jack added a comment.Jan 15 2017, 1:51 PM

There are four gradient-* images in /skins/Aurora/resources/images, and four respective CSS rules in /skins/Aurora/resources/aurora.css which use 'em:

  • gradient-body.png (CSS rule which uses this: #content-inner)
  • gradient-footer.png (CSS rule: #foot)
  • gradient-header.png (CSS rule: #head)
  • gradient-input.png (CSS rule: #full-search)

(As a slight factual correction: yes, the end-user gets served data URIs by ResourceLoader. However the source CSS file — /skins/Aurora/resources/aurora.css — uses the ResourceLoader /* @embed */ technique instead of directly embedding a data URI. In practise this doesn't matter much unless you're a developer working with these files. I know of one notable MediaWiki-based site where the developers do embed direct data URIs into the .css files and I think it's somewhat confusing, but that's just my $0.02 on this.)

SamanthaNguyen added a subscriber: isarra.Feb 2 2017, 5:12 AM

Any thoughts on this @isarra? btw, here's the gradients that I managed to create after converting them to CSS (the #head and #foot needs borders but the gradients can be modified again to keep the psuedo-border, or we can also use the border property too)

aurora.css
#head {
	background: #737373;
	background: -moz-linear-gradient( top, #737373 0%, #2a2a2a 100% );
	background: -webkit-linear-gradient( top, #737373 0%, #2a2a2a 100% );
	background: linear-gradient( to bottom, #737373 0%, #2a2a2a 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#737373', endColorstr='#2a2a2a', GradientType=0 );
}

#content-inner {
	background: #f4f4f4;
	background: -moz-linear-gradient( top, #f4f4f4 0%, #e6e6e6 100% );
	background: -webkit-linear-gradient( top, #f4f4f4 0%, #e6e6e6 100% );
	background: linear-gradient( to bottom, #f4f4f4 0%, #e6e6e6 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e6e6e6', GradientType=0 );
}

#foot {
	background: #555555;
	background: -moz-linear-gradient( top, #555555 0%, #282828 100% );
	background: -webkit-linear-gradient( top, #555555 0%, #282828 100% );
	background: linear-gradient( to bottom, #555555 0%, #282828 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#282828', GradientType=0 );
	border-top: 1px solid #636363;
}

#full-search {
	background: #125a8f;
	background: -moz-linear-gradient( top, #125a8f 0%, #156cac 100% );
	background: -webkit-linear-gradient( top, #125a8f 0%, #156cac 100% );
	background: linear-gradient( to bottom, #125a8f 0%, #156cac 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125a8f', endColorstr='#156cac', GradientType=0 );
}
lewiscawte triaged this task as Normal priority.Mar 13 2017, 1:45 PM