Restyle the findbar

This commit is contained in:
NTD 2018-04-13 12:49:13 -04:00 • committed by Roy Tam
commit 53e8bd2ac0
9 changed files with 270 additions and 361 deletions

View file

@ -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;
/* find-next button */
.findbar-find-next > .toolbarbutton-icon {
-moz-appearance: button-arrow-next;
}
.findbar-container {
padding-inline-start: 8px;
padding-top: 4px;
padding-bottom: 4px;
/* find-previous button */
.findbar-find-previous > .toolbarbutton-icon {
-moz-appearance: button-arrow-previous;
}
.findbar-closebutton {
-moz-appearance: none;
/* highlight button */
.findbar-highlight {
list-style-image: url("chrome://global/skin/icons/find.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
.findbar-highlight[disabled="true"] {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
.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;
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;
}
.findbar-find-previous:focus,
.findbar-find-next:focus {
border-color: Highlight;
box-shadow: 0 0 1px 0 Highlight inset;
}
.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;
}
.findbar-find-previous {
list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous);
border-inline-end-width: 0;
}
.findbar-find-next {
list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next);
}
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
margin: 0;
}
.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
opacity: .5;
}
.findbar-find-next:-moz-locale-dir(ltr) {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.findbar-find-next:-moz-locale-dir(rtl) {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.findbar-find-previous:focus + .findbar-find-next {
border-inline-start-width: 0;
}
.findbar-find-previous:focus {
border-inline-end-width: 1px;
}
.findbar-highlight,
.findbar-case-sensitive,
.findbar-entire-word {
margin-inline-start: 5px;
}
.findbar-find-status,
.findbar-matches {
color: GrayText;
margin: 0 !important;
margin-inline-start: 12px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
-moz-margin-start: 3px !important;
-moz-margin-end: 0 !important;
padding: 2px !important;
}
.find-status-icon[status="notfound"] {
list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
}
.find-status-icon[status="pending"] {
list-style-image: url("chrome://global/skin/icons/loading.png");
list-style-image: url("chrome://global/skin/icons/loading_16.png");
}
.findbar-textbox[status="notfound"] {
box-shadow: 0 0 0 1em #f66 inset;
color: white;
}
.findbar-textbox[flash="true"] {
box-shadow: 0 0 0 1em yellow inset;
color: black;
}
.find-status-icon[status="wrapped"] {
list-style-image: url("chrome://global/skin/icons/wrap.png");
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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)