Bug 1456496 - dark theme for onboarding snippets r=k88hudson
authorRicky Rosario <rickyrosario@gmail.com>
Thu, 26 Apr 2018 12:51:42 -0400
changeset 415923 a13c398c9213cee950cc214becfc4d5ea75e048b
parent 415922 1b3d3412d21063418454b851af3d85943c8f7110
child 415924 3e0ca85e69704884e8ff91b0ab4cbfa517d5bbd5
push id33911
push usercsabou@mozilla.com
push dateFri, 27 Apr 2018 10:01:39 +0000
treeherdermozilla-central@822936017145 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersk88hudson
bugs1456496
milestone61.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 1456496 - dark theme for onboarding snippets r=k88hudson MozReview-Commit-ID: CqprUlxd2IZ
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -127,17 +127,17 @@
   background: none;
   padding: 0;
  }
 
 .onboarding-close-btn::before {
   content: url("chrome://global/skin/icons/close.svg");
   -moz-context-properties: fill, fill-opacity;
   fill-opacity: 0;
-  fill: currentColor;
+  fill: var(--newtab-icon-primary-color, currentColor);
 }
 
 .onboarding-close-btn:-moz-any(:hover, :active, :focus, :-moz-focusring)::before {
   fill-opacity: 0.1;
 }
 
 #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
   width: 960px;
@@ -461,26 +461,26 @@ a#onboarding-tour-screenshots-button,
 a#onboarding-tour-screenshots-button:hover,
 a#onboarding-tour-screenshots-button:visited {
   color: #fff;
   text-decoration: none;
 }
 
 /* Tour Notifications */
 #onboarding-notification-bar {
-  --onboarding-notification-bar-background-color: rgba(255, 255, 255, 0.97);
   position: fixed;
   z-index: 20998; /* We want this always under #onboarding-overlay */
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100px;
   min-width: 640px;
-  background: var(--onboarding-notification-bar-background-color);
-  border-top: 2px solid #e9e9e9;
+  background: var(--newtab-snippets-background-color, rgba(255, 255, 255, 0.97));
+  border-top: 1px solid var(--newtab-snippets-hairline-color, #e9e9e9);
+  box-shadow: 0 -1px 4px 0 rgba(12, 12, 13, 0.1);
   transition: transform 0.8s;
   transform: translateY(122px);
 }
 
 #onboarding-notification-bar.onboarding-opened {
   transition: none;
   transform: translateY(0px);
 }
@@ -500,41 +500,40 @@ a#onboarding-tour-screenshots-button:vis
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
 #onboarding-notification-body {
   width: 500px;
   margin: 0 18px;
-  color: #0c0c0d;
+  color: var(--newtab-text-primary-color, #0c0c0d);
   display: inline-block;
   max-height: 120px;
   overflow: auto;
   padding: 15px 0;
   box-sizing: border-box;
 }
 
 #onboarding-notification-body * {
   font-size: 12px;
   font-weight: normal;
   margin-top: 5px;
 }
 
 #onboarding-notification-tour-title {
   margin: 0;
   font-weight: bold;
-  color: var(--onboarding-notification-tour-title-color);
+  color: var(--newtab-text-primary-color, #0f1126);
   font-size: 14px;
-  --onboarding-notification-tour-title-color: #0f1126;
 }
 
 #onboarding-notification-tour-title::before {
   content: "";
-  background-color: var(--onboarding-notification-tour-title-color);
+  background-color: var(--newtab-text-primary-color, #0f1126);
   mask-repeat: no-repeat;
   mask-size: 14px;
   height: 16px;
   width: 16px;
   float: inline-start;
   margin-top: 2px;
   margin-inline-end: 2px;
 }
@@ -564,13 +563,27 @@ a#onboarding-tour-screenshots-button:vis
   background-color: #ebebeb;
   cursor: pointer;
 }
 
 .onboarding-action-button:active {
   background-color: #dadada;
 }
 
+#onboarding-notification-bar .onboarding-action-button {
+  background-color: var(--newtab-button-secondary-color);
+  border-color: var(--newtab-border-primary-color);
+  border-radius: 4px;
+  color: var(--newtab-text-primary-color);
+}
+
+#onboarding-notification-bar .onboarding-action-button:hover,
+#onboarding-notification-bar .onboarding-action-button:active {
+  background-color: var(--newtab-button-secondary-color);
+  box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
+  transition: box-shadow 150ms;
+}
+
 @media (min-resolution: 2dppx) {
   #onboarding-notification-tour-icon {
     background-image: url("chrome://branding/content/icon128.png");
   }
 }