Bug 1392467 - [Onboarding] change speech bubble and overlay CTA style;r=rexboy draft
authorgasolin <gasolin@gmail.com>
Tue, 22 Aug 2017 15:03:12 +0800
changeset 655564 21a777f6257c123b12a06d463f505a5427a30672
parent 655385 db7f19e26e571ae1dd309f5d2f387b06ba670c30
child 728878 205da567be02703252e40a76315cde5810f84943
push id76921
push userbmo:gasolin@mozilla.com
push dateWed, 30 Aug 2017 06:44:25 +0000
reviewersrexboy
bugs1392467
milestone57.0a1
Bug 1392467 - [Onboarding] change speech bubble and overlay CTA style;r=rexboy MozReview-Commit-ID: 5b9lFgA7r1
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -43,32 +43,33 @@
 }
 
 #onboarding-overlay-button-icon {
   width: 36px;
   vertical-align: top;
 }
 
 #onboarding-overlay-button::after {
-  background: #5ce6e6;
-  font-size: 12px;
-  border: 1px solid #fff;
+  background: #0060df;
+  font-size: 13px;
   text-align: center;
-  color: #10404a;
+  color: #fff;
   box-sizing: content-box;
+  font-weight: 400;
   content: attr(aria-label);
   display: inline-block;
-  offset-inline-start: 39px;
-  border-radius: 22px;
-  padding: 5px 12px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  padding: 10px 16px;
   min-width: 100px;
   max-width: 140px;
   white-space: pre-line;
-  margin-inline-start: 3px;
-  margin-top: -5px;
+  margin-inline-start: 4px;
+  margin-top: -10px;
+  box-shadow: -2px 0 5px 0 rgba(74, 74, 79, 0.25);
 }
 
 #onboarding-overlay-dialog,
 .onboarding-hidden,
 #onboarding-tour-sync-page[data-login-state=logged-in] .show-on-logged-out,
 #onboarding-tour-sync-page[data-login-state=logged-out] .show-on-logged-in {
   display: none;
 }
@@ -302,24 +303,24 @@
 
 .onboarding-tour-page.onboarding-no-button > .onboarding-tour-button-container {
   display: none;
   grid-row: tour-page-end;
   grid-column: tour-page-end;
 }
 
 .onboarding-tour-action-button {
-  padding: 10px 20px;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 21px;
-  background: #0a84ff;
+  background: #0060df;
   /* With 1px transparent border, could see a border in the high-constrast mode */
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: 2px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16px;
   color: #fff;
   float: inline-end;
   margin-inline-end: 26px;
   margin-top: -32px;
 }
 
 /* Remove default dotted outline around buttons' text */
 .onboarding-tour-action-button::-moz-focus-inner,
@@ -332,22 +333,22 @@
 #onboarding-notification-action-btn:-moz-focusring,
 #onboarding-tour-list .onboarding-tour-item:focus {
   outline: 2px solid rgba(0,149,221,0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }
 
 .onboarding-tour-action-button:hover:not([disabled])  {
-  background: #0060df;
+  background: #003eaa;
   cursor: pointer;
 }
 
 .onboarding-tour-action-button:active:not([disabled]) {
-  background: #003EAA;
+  background: #002275;
 }
 
 .onboarding-tour-action-button:disabled {
   opacity: 0.5;
 }
 
 /* Tour Icons */
 #onboarding-tour-singlesearch,