Bug 1545757 - Fix contrast of text on 'Edit Address' dialog in dark mode. r=MattN
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 22 Apr 2019 17:57:13 +0000
changeset 470383 6c83c0002cf3fc1b8bf8f1657cb6104035e5ae3d
parent 470382 67463f3dd222b254016a8bd210d9f5e3052bf1d8
child 470384 efe40065f0ea38258a80f80b2330e63104281c51
push id35905
push userdvarga@mozilla.com
push dateTue, 23 Apr 2019 09:53:27 +0000
treeherdermozilla-central@831918f009f6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1545757
milestone68.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 1545757 - Fix contrast of text on 'Edit Address' dialog in dark mode. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D28381
browser/extensions/formautofill/skin/shared/editAddress.css
browser/extensions/formautofill/skin/shared/editDialog-shared.css
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -111,15 +111,15 @@
   resize: vertical;
 }
 
 #country-warning-message {
   box-sizing: border-box;
   font-size: 1rem;
   align-items: center;
   text-align: start;
-  color: #737373;
+  opacity: .5;
   padding-inline-start: 1em;
 }
 
 :root:not([subdialog]) #country-warning-message {
   display: none;
 }
--- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
@@ -36,32 +36,33 @@ form div {
      positioned relative to this. */
   position: relative;
   display: block;
   line-height: 1em;
 }
 
 form :-moz-any(label, div) .label-text {
   position: absolute;
-  color: GrayText;
+  opacity: .5;
   pointer-events: none;
   left: 10px;
   top: .2em;
   transition: top .2s var(--animation-easing-function),
               font-size .2s var(--animation-easing-function);
 }
 
 form :-moz-any(label, div):focus-within .label-text,
 form :-moz-any(label, div) .label-text[field-populated] {
   top: 0;
   font-size: var(--in-field-label-size);
 }
 
 form :-moz-any(input, select, textarea):focus ~ .label-text {
   color: var(--in-content-item-selected);
+  opacity: 1;
 }
 
 /* Focused error fields should get a darker text but not the blue one since it
  * doesn't look good with the red error outline. */
 form :-moz-any(input, select, textarea):focus:-moz-ui-invalid ~ .label-text {
   color: var(--in-content-text-color);
 }