Bug 1455922 - Adjust findbar style to work better on dark themes. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 29 May 2018 20:45:33 +0200
changeset 801212 51db5a12a4108b3213e3d86a3251b074148d66cd
parent 801211 e57729f03ecbb76637d20db6c655f559c81ec8f6
child 801213 5852258260e15c03a61f3b64260bde4c321efa49
push id111603
push usermozilla@kaply.com
push dateTue, 29 May 2018 22:12:07 +0000
reviewersdao
bugs1455922
milestone62.0a1
Bug 1455922 - Adjust findbar style to work better on dark themes. r=dao MozReview-Commit-ID: IGIFlJUV1V8
toolkit/themes/osx/global/findBar.css
toolkit/themes/osx/global/icons/search-textbox.svg
toolkit/themes/shared/findBar.inc.css
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -69,16 +69,19 @@ label.findbar-find-fast:-moz-lwtheme,
   .findbar-textbox,
   .findbar-find-next {
     border-radius: 10000px;
   }
 }
 
 .findbar-textbox {
   border: @roundButtonBorderWidth@ @roundButtonBorderStyle@ var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
   background-image: url("chrome://global/skin/icons/search-textbox.svg");
   background-repeat: no-repeat;
   background-position: 5px center;
   margin: 0;
   padding-inline-start: 19px;
 }
 
 .findbar-textbox[focused="true"] {
--- a/toolkit/themes/osx/global/icons/search-textbox.svg
+++ b/toolkit/themes/osx/global/icons/search-textbox.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
-  <path fill="#939393" fill-rule="evenodd" d="M11.354,10.646l-0.707.707L7.295,8A4.483,4.483,0,1,1,9,4.5,4.458,4.458,0,0,1,8,7.295ZM4.5,1A3.5,3.5,0,1,0,8,4.5,3.5,3.5,0,0,0,4.5,1Z"/>
-</svg>
\ No newline at end of file
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.354,10.646l-0.707.707L7.295,8A4.483,4.483,0,1,1,9,4.5,4.458,4.458,0,0,1,8,7.295ZM4.5,1A3.5,3.5,0,1,0,8,4.5,3.5,3.5,0,0,0,4.5,1Z"/>
+</svg>
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -69,34 +69,35 @@ findbar[noanim] {
   border-bottom-left-radius: 0;
 }
 
 .findbar-textbox[focused="true"] {
   border-color: Highlight;
 }
 
 .findbar-textbox[status="notfound"] {
-  background-color: #f66;
-  color: white;
+  background-color: rgba(255,0,57,.3);
+  color: inherit;
 }
 
 .findbar-textbox[flash="true"] {
-  background-color: yellow;
-  color: black;
+  background-color: rgba(255,233,0,.3);
+  color: inherit;
 }
 
 .findbar-textbox.minimal {
   border-radius: 2px;
 }
 
 .findbar-find-previous,
 .findbar-find-next {
   margin-inline-start: 0;
   -moz-appearance: none;
-  background: linear-gradient(rgba(255,255,255,.8) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
+  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1));
+  background-clip: padding-box;
   border: 1px solid ThreeDShadow;
   padding: 2px 5px;
   line-height: 1em;
   -moz-context-properties: fill;
   fill: currentColor;
   color: inherit;
 }