OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2013 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 /* This file contains styles specific to Android and iOS. */ | |
6 | |
7 html:not(.focus-outline-visible) :focus { | |
8 outline: none; | |
9 } | |
10 | |
11 html { | |
12 height: 100%; | |
13 } | |
14 | |
15 body { | |
16 background-color: rgba(0, 0, 0, .05); | |
17 color: rgb(76, 76, 76); | |
18 font-size: initial; | |
19 height: 100%; | |
20 margin: 0; | |
21 } | |
22 | |
23 .page { | |
24 -webkit-flex-flow: column; | |
25 display: -webkit-flex; | |
26 height: 100%; | |
27 } | |
28 | |
29 #scrolling-container { | |
30 -webkit-flex: auto; /* Container should take up extra vertical space. */ | |
31 -webkit-overflow-scrolling: touch; | |
32 overflow-y: auto; | |
33 } | |
34 | |
35 h1 { | |
36 color: rgb(34, 34, 34); | |
37 font-weight: bold; | |
38 margin-bottom: 12px; | |
39 } | |
40 | |
41 #top-container, | |
42 #results-display { | |
43 margin: 0; | |
44 } | |
45 | |
46 #top-container, | |
47 #results-display, | |
48 #results-pagination { | |
49 max-width: none; | |
50 } | |
51 | |
52 h1, | |
53 h3, | |
54 #notification-bar, | |
55 #search-field, | |
56 .entry-box, | |
57 #loading-spinner { | |
58 padding-left: 16px; | |
59 padding-right: 16px; | |
60 } | |
61 | |
62 h3 { | |
63 background: rgb(245, 245, 245); | |
64 color: rgb(138, 138, 138); | |
65 font-size: 14px; | |
66 height: 30px; | |
67 line-height: 30px; | |
68 margin-top: 0; | |
69 overflow: hidden; | |
70 text-overflow: ellipsis; | |
71 white-space: nowrap; | |
72 } | |
73 | |
74 #search-field { | |
75 -webkit-padding-start: 64px; | |
76 background-image: | |
77 url(../../../../ui/webui/resources/images/2x/search.png); | |
78 background-position: 16px center; | |
79 background-repeat: no-repeat; | |
80 background-size: 32px; | |
81 border: 0; | |
82 display: block; | |
83 line-height: 1.5; | |
84 margin-top: 16px; | |
85 width: 100%; | |
86 } | |
87 | |
88 html[dir='rtl'] #search-field { | |
89 background-position: right 16px center; | |
90 } | |
91 | |
92 #notification-bar { | |
93 color: rgb(138, 138, 138); | |
94 font-size: 14px; | |
95 line-height: 1.5; | |
96 } | |
97 | |
98 #notification-bar span { | |
99 /* On desktop, notification spans are displayed as separate paragraphs. | |
100 On mobile, join them into a single paragraph. */ | |
101 display: inline; | |
102 } | |
103 | |
104 #top-container.overflow #notification-bar { | |
105 float: none; | |
106 margin: 0; | |
107 padding-bottom: 0; | |
108 padding-top: 0; | |
109 } | |
110 | |
111 #remove-selected, | |
112 #search-button, | |
113 .gap { | |
114 display: none; | |
115 } | |
116 | |
117 .entry-box { | |
118 -webkit-padding-end: 0; | |
119 } | |
120 | |
121 button.remove-entry { | |
122 background: url(../../../../ui/webui/resources/images/2x/x-thin.png) | |
123 no-repeat center center; | |
124 background-size: 13px; | |
125 border: 0; | |
126 box-sizing: border-box; | |
127 height: 100%; | |
128 min-width: 45px; | |
129 opacity: 0.7; | |
130 padding: 0 16px; | |
131 vertical-align: top; | |
132 width: 45px; | |
133 } | |
134 | |
135 button.remove-entry:active { | |
136 opacity: 1.0; | |
137 } | |
138 | |
139 .entry { | |
140 background-color: white; | |
141 } | |
142 | |
143 .entry-box { | |
144 margin-bottom: 0; | |
145 margin-top: 0; | |
146 padding-bottom: 0; | |
147 } | |
148 | |
149 h3, | |
150 .entry, | |
151 #search-field { | |
152 border-bottom: 1px solid rgb(220, 220, 220); | |
153 border-top: 1px solid rgb(220, 220, 220); | |
154 margin-bottom: -1px; | |
155 overflow: hidden; | |
156 } | |
157 | |
158 .entry-box, | |
159 #search-field, | |
160 #results-pagination button { | |
161 height: 60px; | |
162 } | |
163 | |
164 .entry-box-container { | |
165 display: block; | |
166 } | |
167 | |
168 input { | |
169 border-radius: 0; | |
170 } | |
171 | |
172 #clear-browsing-data { | |
173 /* Style it like a native Android button. */ | |
174 background-color: rgb(221, 221, 221); | |
175 border: 0; | |
176 border-radius: 0; | |
177 border-top: 1px solid rgb(198, 198, 198); | |
178 box-shadow: none; | |
179 font-size: 75%; | |
180 font-weight: bold; | |
181 height: 46px; | |
182 margin: 0; | |
183 min-height: 46px; | |
184 text-shadow: none; | |
185 text-transform: uppercase; | |
186 width: 100%; | |
187 } | |
188 | |
189 .day-results, | |
190 .search-results { | |
191 margin: 0; | |
192 } | |
193 | |
194 /* Fade out the entry-box, rather than its parent node, so that the dividing | |
195 line between entries doesn't fade out. */ | |
196 .entry.fade-out .entry-box { | |
197 opacity: 1; | |
198 transition: opacity 200ms; | |
199 } | |
200 | |
201 .entry.fade-out { | |
202 opacity: 1; | |
203 } | |
204 | |
205 .entry.fade-out .entry-box { | |
206 opacity: 0; | |
207 } | |
208 | |
209 .entry input[type=checkbox] { | |
210 display: none; | |
211 } | |
212 | |
213 .entry .visit-entry { | |
214 -webkit-flex: auto; | |
215 -webkit-flex-flow: column; | |
216 -webkit-padding-start: 16px; | |
217 line-height: 1.3; | |
218 } | |
219 | |
220 .entry .visit-entry.blocked-indicator { | |
221 line-height: 2; | |
222 } | |
223 | |
224 .entry .visit-entry :-webkit-any(a, .domain) { | |
225 display: block; | |
226 margin-left: 0; | |
227 margin-right: 0; | |
228 min-width: 0; | |
229 overflow: hidden; | |
230 padding-left: 0; | |
231 padding-right: 0; | |
232 text-overflow: ellipsis; | |
233 white-space: nowrap; | |
234 } | |
235 | |
236 .entry .visit-entry.blocked-indicator a { | |
237 display: inline; | |
238 } | |
239 | |
240 .favicon { | |
241 background-size: 32px; | |
242 height: 32px; | |
243 width: 32px; | |
244 } | |
245 | |
246 .fallback-favicon { | |
247 border-radius: 2px; | |
248 color: white; | |
249 font: bold 20px/32px sans-serif; | |
250 text-align: center; | |
251 } | |
252 | |
253 .entry .domain { | |
254 font-size: 14px; | |
255 } | |
256 | |
257 #older-button { | |
258 -webkit-padding-end: 16px; | |
259 } | |
260 | |
261 #newest-button { | |
262 -webkit-padding-start: 16px; | |
263 } | |
264 | |
265 #loading-spinner { | |
266 margin-top: 16px; | |
267 } | |
268 | |
269 <if expr="is_ios"> | |
270 /* iOS does not support the latest flexbox syntax, only the 2009 working draft | |
271 syntax (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/). */ | |
272 .entry-box, | |
273 .site-domain-wrapper { | |
274 -wekbit-box-align: center; | |
275 display: -webkit-box; | |
276 } | |
277 | |
278 .entry .visit-entry { | |
279 -webkit-box-flex: 1; | |
280 -webkit-box-orient: vertical; | |
281 -webkit-box-pack: center; | |
282 display: -webkit-box; | |
283 } | |
284 | |
285 #scrolling-container { | |
286 bottom: 46px; | |
287 left: 0; | |
288 position: fixed; | |
289 right: 0; | |
290 top: 0; | |
291 } | |
292 | |
293 #clear-browsing-data { | |
294 bottom: 0; | |
295 position: fixed; | |
296 } | |
297 </if> | |
298 | |
299 .entry .bookmark-section { | |
300 display: none; | |
301 } | |
302 | |
303 .entry .time { | |
304 line-height: 60px; | |
305 min-width: 90px; | |
306 text-align: inherit; | |
307 width: 90px; | |
308 } | |
309 | |
310 @media only screen and (max-width:600px) { | |
311 | |
312 /* Omit the time on very small screens. */ | |
313 .entry .time { | |
314 display: none; | |
315 } | |
316 | |
317 } /* @media only screen and (max-width:600px) */ | |
318 | |
319 @media only screen and (min-width:720px) { | |
320 | |
321 h3, | |
322 .entry, | |
323 #search-field { | |
324 border: 1px solid rgb(220, 220, 220); | |
325 } | |
326 | |
327 h3 { | |
328 margin-top: 30px; | |
329 } | |
330 | |
331 #scrolling-container { | |
332 padding-bottom: 30px; | |
333 } | |
334 | |
335 #scrolling-container > * { | |
336 margin-left: auto; | |
337 margin-right: auto; | |
338 max-width: 718px; | |
339 } | |
340 | |
341 h1, | |
342 #notification-bar, | |
343 #loading-spinner { | |
344 padding-left: 0; | |
345 padding-right: 0; | |
346 } | |
347 | |
348 } /* @media only screen and (max-width:720px) */ | |
349 | |
350 <if expr="is_ios"> | |
351 .ios-keyboard-visible #clear-browsing-data { | |
352 display: none; | |
353 } | |
354 | |
355 .ios-keyboard-visible #scrolling-container { | |
356 /* Should be 0, but that breaks scrolling -- see crbug.com/292715. */ | |
357 bottom: -1px; | |
358 } | |
359 | |
360 #results-header:empty { | |
361 display: none; | |
362 } | |
363 </if> /* is_ios */ | |
OLD | NEW |