Bug 747608 - The identity-box should have a smaller font-size and a gradient end border instead of a solid line. r=dao a=lsblakk
authorJared Wein <jwein@mozilla.com>
Sat, 12 May 2012 16:00:14 -0700
changeset 95722 eff91fd2ec87908c4ad1a3b717d6205483b834df
parent 95721 0b71fae84829949433bbff1452c2995afcd4270e
child 95723 d3b918a3d019411bb1e322af2287c0e807c1da5b
push id886
push userlsblakk@mozilla.com
push dateMon, 04 Jun 2012 19:57:52 +0000
treeherdermozilla-beta@bbd8d5efd6d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, lsblakk
bugs747608
milestone14.0a2
Bug 747608 - The identity-box should have a smaller font-size and a gradient end border instead of a solid line. r=dao a=lsblakk
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1064,16 +1064,17 @@ toolbar[iconsize="small"] #feed-button {
   opacity: 0.3;
 }
 
 /* Identity indicator */
 #identity-box {
   padding: 1px;
   margin: -1px;
   -moz-margin-end: 0;
+  font-size: .9em;
 }
 
 #identity-box:-moz-locale-dir(ltr) {
   border-top-left-radius: 2.5px;
   border-bottom-left-radius: 2.5px;
 }
 
 #identity-box:-moz-locale-dir(rtl) {
@@ -1088,19 +1089,29 @@ toolbar[iconsize="small"] #feed-button {
 
 #identity-icon-labels {
   -moz-padding-start: 2px;
   -moz-padding-end: 5px;
 }
 
 #identity-box.verifiedIdentity {
   background-color: #fff;
-  color: hsl(92,81%,16%);
-  -moz-border-end: 1px solid hsla(92,81%,16%,.2);
+  color: hsl(92,100%,30%);
   -moz-margin-end: 4px;
+  background-image: -moz-linear-gradient(hsla(92,81%,16%,0),
+                                         hsla(92,81%,16%,.2) 25%,
+                                         hsla(92,81%,16%,.2) 75%,
+                                         hsla(92,81%,16%,0));
+  background-position: right;
+  background-size: 1px;
+  background-repeat: no-repeat;
+}
+
+#identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
+  background-position: left;
 }
 
 /* Identity popup icons */
 #identity-popup-icon {
   height: 64px;
   width: 64px;
   padding: 0;
   list-style-image: url("chrome://browser/skin/identity.png");
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -975,16 +975,17 @@ toolbar[mode="icons"] #zoom-in-button {
 }
 
 #identity-box {
   -moz-margin-end: 3px;
   padding-top: 1px;
   padding-bottom: 1px;
   -moz-padding-start: 4px;
   -moz-padding-end: 0;
+  font-size: .9em;
 }
 
 #identity-box:-moz-locale-dir(ltr) {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
 
 #identity-box:-moz-locale-dir(rtl) {
@@ -1020,19 +1021,29 @@ toolbar[mode="icons"] #zoom-in-button {
   padding-left: 10.01px;
 }
 
 @conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
   padding-right: 10.01px;
 }
 
 #identity-box.verifiedIdentity {
-  color: hsl(92,100%,20%);
-  -moz-border-end: 1px solid hsla(92,81%,16%,.2);
+  color: hsl(92,100%,30%);
   -moz-padding-end: 4px;
+  background-image: -moz-linear-gradient(hsla(92,81%,16%,0),
+                                         hsla(92,81%,16%,.2) 25%,
+                                         hsla(92,81%,16%,.2) 75%,
+                                         hsla(92,81%,16%,0));
+  background-position: right;
+  background-size: 1px;
+  background-repeat: no-repeat;
+}
+
+#identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
+  background-position: left;
 }
 
 #identity-box:-moz-focusring {
   box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
               0 0 2px 2px -moz-mac-focusring;
   -moz-border-end-style: none;
   -moz-padding-end: 5px;
 }
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -1354,16 +1354,17 @@ html|*.urlbar-input:-moz-lwtheme:-moz-pl
   -moz-margin-start: 0;
   color: GrayText;
 }
 
 /* identity box */
 
 #identity-box {
   padding: 2px;
+  font-size: .9em;
 }
 
 #identity-box:-moz-locale-dir(ltr) {
   border-top-left-radius: 1.5px;
   border-bottom-left-radius: 1.5px;
 }
 
 #identity-box:-moz-locale-dir(rtl) {
@@ -1401,19 +1402,29 @@ html|*.urlbar-input:-moz-lwtheme:-moz-pl
 }
 
 @conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
   padding-right: 5.01px;
 }
 
 #identity-box.verifiedIdentity {
-  color: hsl(92,100%,20%);
-  -moz-border-end: 1px solid hsla(92,81%,16%,.2);
+  color: hsl(92,100%,30%);
   -moz-margin-end: 4px;
+  background-image: -moz-linear-gradient(hsla(92,81%,16%,0),
+                                         hsla(92,81%,16%,.2) 25%,
+                                         hsla(92,81%,16%,.2) 75%,
+                                         hsla(92,81%,16%,0));
+  background-position: right;
+  background-size: 1px;
+  background-repeat: no-repeat;
+}
+
+#identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
+  background-position: left;
 }
 
 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
   background-color: #fff;
 }
 
 #identity-box:-moz-focusring {
   outline: 1px dotted #000;