Bug 1222414 - Convert hardcoded colors in add-on manager to CSS variables. r=jaws, ntim
authorraymond <concept_ray@hotmail.com>
Thu, 08 Mar 2018 09:00:51 -0500
changeset 407505 e620f50bbdcf
parent 407504 78e2a853d8f8
child 407506 a0014a24f1e7
push id33605
push usercsabou@mozilla.com
push dateSat, 10 Mar 2018 21:49:30 +0000
treeherdermozilla-central@e0eacfc97568 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, ntim
bugs1222414
milestone60.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 1222414 - Convert hardcoded colors in add-on manager to CSS variables. r=jaws, ntim
toolkit/themes/shared/extensions/extensions.inc.css
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -110,17 +110,17 @@
 }
 
 .alert {
   -moz-box-align: center;
   padding: 10px;
   color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
-  background-color: #ebebeb;
+  background-color: var(--in-content-box-background-hover);
   text-align: center;
 }
 
 .alert .alert-title {
   font-weight: bold;
   font-size: 200%;
   margin-bottom: 15px;
 }
@@ -258,17 +258,17 @@ button.warning {
   padding-right: 10px;
   padding-left: 10px;
 }
 
 #header-utils-btn:not([disabled="true"]):active:hover,
 #header-utils-btn[open="true"] {
   padding-bottom: 0px;
   padding-top: 0px;
-  background-color: #dadada;
+  background-color: var(--in-content-box-background-active);
 }
 
 .header-button {
   -moz-appearance: none;
   border: 1px solid;
   border-radius: 2px;
 }
 
@@ -305,17 +305,17 @@ button.warning {
 
 .sorter .button-box {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .sorter[checkState="1"],
 .sorter[checkState="2"] {
-  background-color: #ebebeb;
+  background-color: var(--in-content-box-background-hover);
   box-shadow: 0 -4px 0 0 var(--in-content-border-highlight) inset;
 }
 
 .sorter .button-icon {
   margin-inline-start: 6px;
 }
 
 
@@ -366,17 +366,17 @@ button.warning {
   border: 1px dotted transparent;
 }
 
 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
   border-color: var(--in-content-border-focus);
 }
 
 .addon {
-  color: #444;
+  color: var(--in-content-text-color);
   border-bottom: 1px solid var(--in-content-box-border-color);
   padding: 5px;
   background-origin: border-box;
 }
 
 .addon:not(:only-child):last-child {
   border-bottom-width: 0;
 }
@@ -731,35 +731,35 @@ button.warning {
 }
 
 #detail-fulldesc {
   margin-top: 1em;
 }
 
 #detail-contributions {
   border-radius: 2px;
-  border: 1px solid #D2DBE8;
+  border: 1px solid var(--in-content-box-border-color);
   margin-bottom: 2em;
   padding: 1em;
-  background-color: #F3F7FB;
+  background-color: var(--in-content-box-background);
 }
 
 #detail-contrib-description {
   font-style: italic;
   margin-bottom: 1em;
-  color: #373D48;
+  color: var(--in-content-text-color);
 }
 
 #detail-contrib-suggested {
   color: grey;
   font-weight: bold;
 }
 
 #detail-contrib-btn {
-  color: #FFF;
+  color: var(--in-content-selected-text);
   text-shadow: none;
   border: 1px solid transparent;
   list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
   background-color: var(--in-content-primary-button-background);
 }
 
 #detail-contrib-btn .button-icon {
   margin-inline-end: 5px;
@@ -967,51 +967,51 @@ button.warning {
   display: block !important;
 }
 
 button.button-link {
   -moz-appearance: none;
   background: transparent;
   border: none;
   box-shadow: none;
-  color: #0095dd;
+  color: var(--in-content-link-color);
   cursor: pointer;
   min-width: 0;
   min-height: 20px;
   margin: 0 6px;
 }
 
 button.button-link:hover {
   background-color: transparent;
-  color: #178ce5;
+  color: var(--in-content-link-color-hover);
   text-decoration: underline;
 }
 
 /* Needed to override normal button style from inContent.css */
 button.button-link:not([disabled="true"]):active:hover {
   background-color: transparent;
   color: #0A84FF;
   text-decoration: none;
 }
 
 .addon-control.replacement {
-  background-color: #0a84ff;
-  border-color: #0a84ff;
-  color: #fff;
+  background-color: var(--in-content-primary-button-background);
+  border-color: var(--in-content-primary-button-background);
+  color: var(--in-content-selected-text);
 }
 
 .addon-control.replacement:active,
 .addon-control.replacement:hover {
-  background-color: #0060df;
-  border-color: #0060df;
+  background-color: var(--in-content-primary-button-hover);
+  border-color: var(--in-content-primary-button-hover);
 }
 
 .addon-control.replacement:active:hover {
-  background-color: #003eaa;
-  border-color: #003eaa;
+  background-color: var(--in-content-primary-button-active);
+  border-color: var(--in-content-primary-button-active);
 }
 
 /*** telemetry experiments ***/
 
 #detail-experiment-container {
   font-size: 80%;
   margin-bottom: 1em;
 }