author | Ricky Rosario <rickyrosario@gmail.com> |
Thu, 26 Apr 2018 12:51:42 -0400 | |
changeset 415923 | a13c398c9213cee950cc214becfc4d5ea75e048b |
parent 415922 | 1b3d3412d21063418454b851af3d85943c8f7110 |
child 415924 | 3e0ca85e69704884e8ff91b0ab4cbfa517d5bbd5 |
push id | 33911 |
push user | csabou@mozilla.com |
push date | Fri, 27 Apr 2018 10:01:39 +0000 |
treeherder | mozilla-central@822936017145 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | k88hudson |
bugs | 1456496 |
milestone | 61.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
|
browser/extensions/onboarding/content/onboarding.css | file | annotate | diff | comparison | revisions |
--- 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"); } }