Bug 1329941 - [compact layout] Increase tile title background opacity to improve legibility. r=gijs
authorDão Gottwald <dao@mozilla.com>
Tue, 10 Jan 2017 11:39:15 +0100
changeset 328630 b1bed58dbb66e44c6620f0cde392ee22da7600a2
parent 328629 2e1a0c4886c5393498627d394c4f661e6f2ea6b2
child 328631 b93a1c921f66bd42dac9f2c31f0971ba9dc993d4
push id85507
push userdgottwald@mozilla.com
push dateTue, 10 Jan 2017 10:39:28 +0000
treeherdermozilla-inbound@b1bed58dbb66 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs
bugs1329941
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1329941 - [compact layout] Increase tile title background opacity to improve legibility. r=gijs
browser/themes/shared/newtab/newTab.inc.css
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -201,53 +201,50 @@ body:not(.compact) .newtab-site[type=spo
   background-color: #F2F2F2;
   font-size: 13px;
   line-height: 30px;
   border: 1px solid #fff;
   border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
 }
 
 body.compact .newtab-title {
-  background-color: hsla(0,0%,100%,.8);
+  background-color: hsla(0,0%,100%,.85);
   font-size: 12px;
   line-height: 21px;
+  border: 1px solid hsla(0,0%,80%,.8);
+  border-top-color: hsla(0,0%,0%,.1);
+  background-clip: padding-box;
 }
 
 .newtab-title,
 .newtab-suggested {
   color: #5c5c5c;
 }
 
 body.compact .newtab-title,
 body.compact .newtab-suggested {
   color: black;
 }
 
-body.compact .newtab-title {
-  border: 1px solid hsla(0,0%,80%,.8);
-  border-top-color: hsla(0,0%,0%,.1);
-  background-clip: padding-box;
-}
-
 .newtab-suggested[active] {
   background-color: rgba(51, 51, 51, 0.95);
   border: 0;
   color: white;
 }
 
 body:not(.compact) .newtab-site:hover .newtab-title {
   color: white;
   background-color: #333;
   border-color: #333;
   border-top-color: white;
 }
 
 body.compact .newtab-site:hover .newtab-title {
   color: white;
-  background-color: hsla(0,0%,20%,.8);
+  background-color: hsla(0,0%,20%,.85);
   border-color: hsla(0,0%,0%,.8);
   border-top-color: white;
 }
 
 .newtab-site[pinned] .newtab-title {
   padding-inline-start: 24px;
 }