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 407441 e620f50bbdcfe0d8ca5f328a88fb253bd909a9bf
parent 407440 78e2a853d8f8837db876b58a9cd2b6b87bda1de0
child 407501 a0014a24f1e72bb1746cb9975068953d1f3451e2
push id100695
push userntim.bugs@gmail.com
push dateSat, 10 Mar 2018 10:10:10 +0000
treeherdermozilla-inbound@e620f50bbdcf [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;
 }