Bug 1379558 - Button style in onboarding should follow photon button style;r=mossop,rexboy
MozReview-Commit-ID: JNXUvOPJDjO
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -173,25 +173,16 @@
height: 40px;
width: 80%;
padding: 7px;
}
#onboarding-tour-sync-page form > #onboarding-tour-sync-button {
padding: 10px 20px;
min-width: 40%;
- font-size: 15px;
- font-weight: normal;
- line-height: 20px;
- background: #0d96ff;
- border: none;
- border-radius: 3px;
- color: #fff;
- box-shadow: 0 1px 0 rgba(0,0,0,0.23);
- cursor: pointer;
margin: 15px 0;
float: none;
}
/* Onboarding tour pages */
.onboarding-tour-page {
grid-row: page-start / footer-end;
grid-column: page-start;
@@ -256,29 +247,38 @@
grid-column: tour-page-end;
}
.onboarding-tour-action-button {
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
line-height: 21px;
- background: #0d96ff;
+ background: #0a84ff;
border: none;
- border-radius: 3px;
+ border-radius: 0;
color: #fff;
- box-shadow: 0 1px 0 rgba(0,0,0,0.23);
- cursor: pointer;
float: inline-end;
margin-inline-end: 26px;
margin-top: -32px;
}
-.onboarding-tour-action-button:active {
- background: #0881dd;
+.onboarding-tour-action-button:hover:not([disabled="true"]) ,
+#onboarding-notification-action-btn:hover {
+ background: #0060df;
+ cursor: pointer;
+}
+
+.onboarding-tour-action-button:active:not([disabled="true"]),
+#onboarding-notification-action-btn:active {
+ background: #003EAA;
+}
+
+.onboarding-tour-action-button:disabled {
+ opacity: 0.5;
}
/* Tour Icons */
#onboarding-tour-search {
background-image: url("img/icons_search.svg");
}
#onboarding-tour-search.onboarding-active,
@@ -429,23 +429,22 @@
#onboarding-notification-tour-icon {
width: 64px;
height: 64px;
background-size: 64px;
background-repeat: no-repeat;
}
#onboarding-notification-action-btn {
- background: #0d96ff;
+ background: #0a84ff;
border: none;
- border-radius: 3px;
+ border-radius: 0;
padding: 10px 20px;
font-size: 14px;
color: #fff;
- box-shadow: 0 1px 0 rgba(0,0,0,0.23);
}
@media all and (max-width: 960px) {
#onboarding-notification-icon {
display: none;
}
}
@media all and (max-width: 720px) {