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 e620f50bbdcf
parent 407440 78e2a853d8f8
child 407501 a0014a24f1e7
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;
 }