From 4f82d4067af9e65dbfd33f3a8b445affddc7ced4 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 13 Apr 2018 12:49:13 -0400 Subject: Restyle the findbar --- toolkit/themes/linux/global/findBar.css | 151 ++++++++--------------------- toolkit/themes/linux/global/icons/find.png | Bin 0 -> 1498 bytes toolkit/themes/linux/global/jar.mn | 1 + 3 files changed, 41 insertions(+), 111 deletions(-) create mode 100644 toolkit/themes/linux/global/icons/find.png (limited to 'toolkit/themes/linux') diff --git a/toolkit/themes/linux/global/findBar.css b/toolkit/themes/linux/global/findBar.css index f04911402..e3e2ad086 100644 --- a/toolkit/themes/linux/global/findBar.css +++ b/toolkit/themes/linux/global/findBar.css @@ -7,6 +7,7 @@ findbar { border-top: 2px solid; -moz-border-top-colors: ThreeDShadow ThreeDHighlight; + padding-bottom: 1px; min-width: 1px; transition-property: margin-bottom, opacity, visibility; transition-duration: 150ms, 150ms, 0s; @@ -22,138 +23,66 @@ findbar[hidden] { transition-delay: 0s, 0s, 150ms; } -findbar[noanim] { - transition-duration: 0s !important; - transition-delay: 0s !important; -} - -.findbar-container { - padding-inline-start: 8px; - padding-top: 4px; - padding-bottom: 4px; -} - -.findbar-closebutton { - -moz-appearance: none; - width: 16px; - height: 16px; - margin: 0 8px; -} - -/* Search field */ - -.findbar-textbox { - -moz-appearance: none; - border: 1px solid ThreeDShadow; - box-shadow: 0 0 1px 0 ThreeDShadow inset; - margin: 0; - padding: 5px; - width: 14em; -} - -.findbar-textbox:-moz-locale-dir(ltr) { - border-radius: 3px 0 0 3px; - border-right-width: 0; -} - -.findbar-textbox:-moz-locale-dir(rtl) { - border-radius: 0 3px 3px 0; - border-left-width: 0; -} - -.findbar-textbox[focused="true"] { - border-color: Highlight; - box-shadow: 0 0 1px 0 Highlight inset; -} - -.findbar-textbox[status="notfound"] { - background-color: #f66; - color: white; -} - -.findbar-textbox[flash="true"] { - background-color: yellow; - color: black; -} - -.findbar-textbox.minimal { - border-width: 1px; - border-radius: 3px; -} - -.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)); - border: 1px solid ThreeDShadow; - padding: 5px 9px; - line-height: 1em; -} +/* find-next button */ -.findbar-find-previous:focus, -.findbar-find-next:focus { - border-color: Highlight; - box-shadow: 0 0 1px 0 Highlight inset; +.findbar-find-next > .toolbarbutton-icon { + -moz-appearance: button-arrow-next; } -.findbar-find-previous:not([disabled]):active, -.findbar-find-next:not([disabled]):active { - background: rgba(23,50,76,.2); - border: 1px solid ThreeDShadow; - box-shadow: 0 1px 2px rgba(10,31,51,.2) inset; -} +/* find-previous button */ -.findbar-find-previous { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous); - border-inline-end-width: 0; +.findbar-find-previous > .toolbarbutton-icon { + -moz-appearance: button-arrow-previous; } -.findbar-find-next { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next); -} +/* highlight button */ -.findbar-find-previous > .toolbarbutton-icon, -.findbar-find-next > .toolbarbutton-icon { - margin: 0; +.findbar-highlight { + list-style-image: url("chrome://global/skin/icons/find.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); } -.findbar-find-previous[disabled="true"] > .toolbarbutton-icon, -.findbar-find-next[disabled="true"] > .toolbarbutton-icon { - opacity: .5; +.findbar-highlight[disabled="true"] { + -moz-image-region: rect(16px, 16px, 32px, 0px); } -.findbar-find-next:-moz-locale-dir(ltr) { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; +.find-status-icon { + list-style-image: none; + margin-top: 2px; + margin-bottom: 0; + -moz-margin-start: 12px; + -moz-margin-end: 0; + width: 16px; + height: 16px; } -.findbar-find-next:-moz-locale-dir(rtl) { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; +.findbar-find-status, +.findbar-matches { + margin-top: 0 !important; + margin-bottom: 0 !important; + -moz-margin-start: 3px !important; + -moz-margin-end: 0 !important; + padding: 2px !important; } -.findbar-find-previous:focus + .findbar-find-next { - border-inline-start-width: 0; +.find-status-icon[status="notfound"] { + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu"); } -.findbar-find-previous:focus { - border-inline-end-width: 1px; +.find-status-icon[status="pending"] { + list-style-image: url("chrome://global/skin/icons/loading_16.png"); } -.findbar-highlight, -.findbar-case-sensitive, -.findbar-entire-word { - margin-inline-start: 5px; +.findbar-textbox[status="notfound"] { + box-shadow: 0 0 0 1em #f66 inset; + color: white; } -.findbar-find-status, -.findbar-matches { - color: GrayText; - margin: 0 !important; - margin-inline-start: 12px !important; +.findbar-textbox[flash="true"] { + box-shadow: 0 0 0 1em yellow inset; + color: black; } -.find-status-icon[status="pending"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); +.find-status-icon[status="wrapped"] { + list-style-image: url("chrome://global/skin/icons/wrap.png"); } diff --git a/toolkit/themes/linux/global/icons/find.png b/toolkit/themes/linux/global/icons/find.png new file mode 100644 index 000000000..cceed403e Binary files /dev/null and b/toolkit/themes/linux/global/icons/find.png differ diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index 5bde219fd..c9b579112 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -43,6 +43,7 @@ toolkit.jar: skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png) skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png) skin/classic/global/icons/close.svg (icons/close.svg) + skin/classic/global/icons/find.png (icons/find.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) -- cgit v1.2.3