Bug 1512187 - Update preferences spotlight color. r=jaws
authorErica Wright <ewright@mozilla.com>
Tue, 11 Dec 2018 15:31:28 +0000
changeset 450094 59a0f0a43a1277088a1f6246bf503ec9ecdca8fa
parent 449957 aee6c9dbb430598724cab97d8e8c601cfe54e4b9
child 450095 cb9676e832d228ea052c1e91108d4ffcd69af847
push id35190
push userccoroiu@mozilla.com
push dateWed, 12 Dec 2018 05:10:47 +0000
treeherdermozilla-central@5bcbe5232a26 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1512187
milestone66.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 1512187 - Update preferences spotlight color. r=jaws Change the coloring of the spotlight, and add a fadeout Differential Revision: https://phabricator.services.mozilla.com/D13822
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -104,22 +104,32 @@ button > hbox > label {
 
 .accessory-button {
   height: 30px;
   min-width: 150px;
   margin: 4px 0;
 }
 
 .spotlight {
-  background-color: rgba(0,200,215,0.3);
+  background-color: var(--blue-40-a10);
+  outline: var(--blue-60) 1px dotted;
+  -moz-outline-radius: 2px;
+  animation: fade-out 0.5s ease-out 2s forwards;
   /* Show the border to spotlight the components in high-contrast mode. */
   border: 1px solid transparent;
   border-radius: 2px;
 }
 
+@keyframes fade-out {
+  100% {
+    background-color: transparent;
+    outline-color: transparent;
+   }
+}
+
 [data-subcategory] {
   margin-left: -4px;
   margin-right: -4px;
   padding-left: 4px;
   padding-right: 4px;
 }
 
 .ac-site-icon {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -44,16 +44,18 @@
   --in-content-button-background-active: var(--grey-90-a30);
   --in-content-primary-button-background: var(--blue-60);
   --in-content-primary-button-background-hover: var(--blue-70);
   --in-content-primary-button-background-active: var(--blue-80);
   --in-content-table-background: #ebebeb;
   --in-content-table-border-dark-color: #d1d1d1;
   --in-content-table-header-background: #0a84ff;
 
+  --blue-40: #45a1ff;
+  --blue-40-a10: rgb(69, 161, 255, 0.1);
   --blue-50: #0a84ff;
   --blue-50-a30: rgba(10, 132, 255, 0.3);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-60: #4a4a4f;