Bug 1392467 - [Onboarding] change speech bubble and overlay CTA style;r=rexboy
MozReview-Commit-ID: 5b9lFgA7r1
--- 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,