885f12d16d4f646039a3878ba7f449ecdb9bb49e
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / FindBanner.css
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .find-banner {
27     border-bottom: 1px solid var(--border-color);
28
29     position: absolute;
30     top: -22px;
31     left: 0;
32     right: 0;
33     height: 22px;
34
35     text-align: right;
36
37     white-space: nowrap;
38     overflow: hidden;
39
40     transition-property: top;
41     transition-duration: 200ms;
42     transition-timing-function: ease-in;
43
44     z-index: var(--z-index-header);
45
46     --find-banner-outer-child-margin: 8px;
47 }
48
49 .find-banner.showing {
50     top: 0;
51     transition-timing-function: ease-out;
52 }
53
54 .no-find-banner-transition:matches(.find-banner, .supports-find-banner) {
55     transition-duration: 0 !important;
56 }
57
58 .supports-find-banner {
59     transition-property: top;
60     transition-duration: 200ms;
61     transition-timing-function: ease-in;
62 }
63
64 .supports-find-banner.showing-find-banner {
65     top: 22px !important;
66     transition-timing-function: ease-out;
67 }
68
69 body[dir=ltr] .find-banner > :first-child,
70 body[dir=rtl] .find-banner > :last-child {
71     margin-left: var(--find-banner-outer-child-margin) !important;
72 }
73
74 body[dir=ltr] .find-banner > :last-child,
75 body[dir=rtl] .find-banner > :first-child {
76     margin-right: var(--find-banner-outer-child-margin) !important;
77 }
78
79 .find-banner > input[type="search"] {
80     margin-top: 1px;
81     margin-bottom: 1px;
82
83     width: 30vw;
84     min-width: 143px;
85     max-width: 210px;
86     height: 19px;
87     vertical-align: top;
88
89     -webkit-appearance: none;
90
91     outline: none;
92
93     border: 1px solid var(--border-color);
94
95     background-color: white;
96
97     --find-banner-search-box-margin-start: 6px;
98     --find-banner-search-box-margin-end: -1px;
99     --find-banner-search-box-border-radius-start: 4px;
100     --find-banner-search-box-border-radius-end: 0;
101 }
102
103 body[dir=ltr] .find-banner > input[type="search"] {
104     margin-left: var(--find-banner-search-box-margin-start);
105     margin-right: var(--find-banner-search-box-margin-end);
106
107     border-top-left-radius: var(--find-banner-search-box-border-radius-start);
108     border-bottom-left-radius: var(--find-banner-search-box-border-radius-start);
109     border-top-right-radius: var(--find-banner-search-box-border-radius-end);
110     border-bottom-right-radius: var(--find-banner-search-box-border-radius-end);
111 }
112
113 body[dir=rtl] .find-banner > input[type="search"] {
114     margin-left: var(--find-banner-search-box-margin-end);
115     margin-right: var(--find-banner-search-box-margin-start);
116
117     border-top-left-radius: var(--find-banner-search-box-border-radius-end);
118     border-bottom-left-radius: var(--find-banner-search-box-border-radius-end);
119     border-top-right-radius: var(--find-banner-search-box-border-radius-start);
120     border-bottom-right-radius: var(--find-banner-search-box-border-radius-start);
121 }
122
123 .find-banner > button {
124     margin: 1px 4px;
125
126     padding-left: 6px;
127     padding-right: 6px;
128
129     -webkit-appearance: none;
130
131     border-radius: 4px;
132     border: 1px solid var(--border-color);
133     color: var(--glyph-color);
134     background-color: var(--button-background-color);
135
136     line-height: 11px;
137
138     height: 19px;
139
140     text-align: center;
141     vertical-align: top;
142
143     outline-offset: -2px;
144 }
145
146 .find-banner > button > .glyph {
147     display: inline-block;
148
149     width: 7px;
150     height: 11px;
151 }
152
153 .find-banner > button:disabled > .glyph {
154     opacity: 0.4;
155 }
156
157 .find-banner > button:active:not(:disabled) {
158     border: 1px solid var(--border-color);
159     background-color: var(--button-background-color-pressed);
160 }
161
162 .find-banner > button.segmented {
163     margin: 1px 0;
164
165     --find-banner-previous-result-border-end: solid 1px var(--border-color);
166 }
167
168 .find-banner > button.segmented.previous-result {
169     border-radius: 0;
170 }
171
172 body[dir=ltr] .find-banner > button.segmented.previous-result {
173     border-right: var(--find-banner-previous-result-border-end);
174 }
175
176 body[dir=rtl] .find-banner > button.segmented.previous-result {
177     border-left: var(--find-banner-previous-result-border-end);
178 }
179
180 body[dir=ltr] .find-banner > button.segmented.previous-result > .glyph {
181     background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
182 }
183
184 body[dir=rtl] .find-banner > button.segmented.previous-result > .glyph {
185     background-image: url(../Images/BackForwardArrows.svg#right-arrow-normal);
186 }
187
188 body[dir=ltr] .find-banner > button.segmented.previous-result:active:not(:disabled) > .glyph {
189     background-image: url(../Images/BackForwardArrows.svg#left-arrow-active);
190 }
191
192 body[dir=rtl] .find-banner > button.segmented.previous-result:active:not(:disabled) > .glyph {
193     background-image: url(../Images/BackForwardArrows.svg#right-arrow-active);
194 }
195
196 .find-banner > button.segmented.next-result {
197     --next-result-border-style-start: none;
198     --next-result-border-radius-start: 0;
199     --next-result-glyph-margin-start: 1px;
200 }
201
202 body[dir=ltr] .find-banner > button.segmented.next-result {
203     border-top-left-radius: var(--next-result-border-radius-start);
204     border-bottom-left-radius: var(--next-result-border-radius-start);
205     border-left: var(--next-result-border-style-start);
206 }
207
208 body[dir=rtl] .find-banner > button.segmented.next-result {
209     border-top-right-radius: var(--next-result-border-radius-start);
210     border-bottom-right-radius: var(--next-result-border-radius-start);
211     border-right: var(--next-result-border-style-start);
212 }
213
214 body[dir=ltr] .find-banner > button.segmented.next-result > .glyph {
215     background-image: url(../Images/BackForwardArrows.svg#right-arrow-normal);
216     margin-left: var(--next-result-glyph-margin-start);
217 }
218
219 body[dir=rtl] .find-banner > button.segmented.next-result > .glyph {
220     background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
221     margin-right: var(--next-result-glyph-margin-start);
222 }
223
224 body[dir=ltr] .find-banner > button.segmented.next-result:active:not(:disabled) > .glyph {
225     background-image: url(../Images/BackForwardArrows.svg#right-arrow-active);
226 }
227
228 body[dir=rtl] .find-banner > button.segmented.next-result:active:not(:disabled) > .glyph {
229     background-image: url(../Images/BackForwardArrows.svg#left-arrow-active);
230 }
231
232 .find-banner > button.segmented {
233     min-width: 22px;
234     padding: 3px 6px 2px;
235 }
236
237 .find-banner > button.segmented > .glyph {
238     background-size: 7px 11px;
239     background-repeat: no-repeat;
240 }
241
242 .find-banner > label {
243     margin: 0 6px;
244     line-height: 21px;
245 }
246
247 .find-banner.console-find-banner {
248     position: relative;
249     top: auto;
250     border: 0;
251 }
252
253 body .find-banner.console-find-banner {
254     flex-wrap: nowrap;
255 }
256
257 .find-banner.console-find-banner > input[type="search"] {
258     padding-top: 0;
259     outline: none;
260     border: 1px solid var(--border-color);
261     background-color: hsla(0, 0%, 100%, 0.2);
262     background-clip: padding-box;
263
264     --console-find-banner-search-box-border-radius-start: 3px;
265     --console-find-banner-search-box-border-radius-end: 0;
266
267     --console-find-banner-search-box-decoration-margin-start: 4px;
268 }
269
270 body[dir=ltr] .find-banner.console-find-banner > input[type="search"] {
271     border-top-left-radius: var(--console-find-banner-search-box-border-radius-start);
272     border-bottom-left-radius: var(--console-find-banner-search-box-border-radius-start);
273     border-top-right-radius: var(--console-find-banner-search-box-border-radius-end);
274     border-bottom-right-radius: var(--console-find-banner-search-box-border-radius-end);
275 }
276
277 body[dir=rtl] .find-banner.console-find-banner > input[type="search"] {
278     border-top-left-radius: var(--console-find-banner-search-box-border-radius-end);
279     border-bottom-left-radius: var(--console-find-banner-search-box-border-radius-end);
280     border-top-right-radius: var(--console-find-banner-search-box-border-radius-start);
281     border-bottom-right-radius: var(--console-find-banner-search-box-border-radius-start);
282 }
283
284 .find-banner.console-find-banner > :matches(input[type="search"], button) {
285     height: 22px;
286 }
287
288 .find-banner.console-find-banner > input[type="search"]::placeholder {
289     color: hsla(0, 0%, 0%, 0.35);
290 }
291
292 body[dir=ltr] .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
293     margin-left: var(--console-find-banner-search-box-decoration-margin-start);
294 }
295
296 body[dir=rtl] .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
297     margin-right: var(--console-find-banner-search-box-decoration-margin-start);
298 }
299
300 .find-banner.console-find-banner > input[type="search"]:focus {
301     background-color: white;
302 }
303
304 /* Make the search field's background white when it is not focused and has content.
305    Needs to be a separate rule. See http://webkit.org/b/118162 */
306 .find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) {
307     background-color: white;
308 }