OLD | NEW |
| (Empty) |
1 /* Copyright 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 html, | |
6 body { | |
7 cursor: default; | |
8 height: 100%; | |
9 margin: 0; | |
10 overflow: hidden; | |
11 width: 100%; | |
12 } | |
13 | |
14 body { | |
15 -webkit-flex-direction: column; | |
16 display: -webkit-flex; | |
17 } | |
18 | |
19 list { | |
20 display: block; | |
21 overflow-x: hidden; | |
22 overflow-y: visible; /* let the container do the scrolling */ | |
23 } | |
24 | |
25 list > * { | |
26 -webkit-padding-end: 20px; | |
27 -webkit-padding-start: 3px; | |
28 color: hsl(0, 0%, 70%); | |
29 display: -webkit-flex; | |
30 line-height: 20px; | |
31 margin: 0; | |
32 overflow: visible; | |
33 padding-bottom: 0; | |
34 padding-top: 0; | |
35 text-decoration: none; | |
36 white-space: nowrap; | |
37 } | |
38 | |
39 list > * > * { | |
40 -webkit-padding-start: 20px; | |
41 background: 0 50% no-repeat; | |
42 box-sizing: border-box; | |
43 overflow: hidden; | |
44 text-overflow: ellipsis; | |
45 white-space: pre; /* Don't collapse whitespace */ | |
46 } | |
47 | |
48 list > * > .label { | |
49 -webkit-transition: all 150ms; | |
50 color: black; | |
51 display: inline-block; /* We need to use inline-block here due to RTL. */ | |
52 } | |
53 | |
54 list > * > .url { | |
55 -webkit-flex: 1; | |
56 direction: ltr; /* URLs always read LTR */ | |
57 display: none; | |
58 /* TODO(arv): Remove min-width once bug is fixed: | |
59 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ | |
60 min-width: 0; | |
61 } | |
62 | |
63 list > :hover > .url, | |
64 list > [selected] > .url { | |
65 display: block; | |
66 } | |
67 | |
68 /* Handle proper padding for URL field in an RTL context, where field order is | |
69 * |div.url||div.label| - so we need padding at the right of URL, not at the | |
70 * left. And since url is always LTR, that is padding at the end, not the start. | |
71 */ | |
72 html[dir=rtl] .url { | |
73 -webkit-padding-end: 20px; | |
74 -webkit-padding-start: 0; | |
75 } | |
76 | |
77 html[dir=rtl] list .label { | |
78 background-position: 100% 50%; | |
79 } | |
80 | |
81 list > .folder > .label { | |
82 background-image: -webkit-image-set( | |
83 url('../../../../../ui/resources/default_100_percent/common/folder_closed.
png') 1x, | |
84 url('../../../../../ui/resources/default_200_percent/common/folder_closed.
png') 2x); | |
85 } | |
86 | |
87 /* We need to ensure that even empty labels take up space */ | |
88 list > * > .label:empty::after, | |
89 list > * > .url:empty::after { | |
90 content: ' '; | |
91 white-space: pre; | |
92 } | |
93 | |
94 list > .folder > .url:empty::after { | |
95 content: ''; | |
96 } | |
97 | |
98 list > * > button { | |
99 -webkit-transition: opacity 150ms; | |
100 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; | |
101 border: 1px solid hsl(214, 91%, 85%); | |
102 border-radius: 3px; | |
103 bottom: 1px; | |
104 display: none; | |
105 overflow: hidden; | |
106 padding: 0; | |
107 position: absolute; | |
108 right: 3px; | |
109 top: 1px; | |
110 width: 15px; | |
111 } | |
112 | |
113 list > [selected]:hover > button, | |
114 list > * > button[menu-shown] { | |
115 border-color: hsl(214, 91%, 65%); | |
116 } | |
117 | |
118 list > :hover > button { | |
119 display: block; | |
120 } | |
121 | |
122 list > * > button:hover, | |
123 list > * > button[menu-shown] { | |
124 display: block; | |
125 } | |
126 | |
127 html[dir=rtl] list > * > button { | |
128 left: 3px; | |
129 right: auto; | |
130 } | |
131 | |
132 /* Edit mode */ | |
133 | |
134 list [editing] .label input, | |
135 list [editing] .url input { | |
136 -webkit-margin-end: 4px; | |
137 -webkit-margin-start: -4px; | |
138 -webkit-padding-end: 3px; | |
139 -webkit-padding-start: 3px; | |
140 box-sizing: content-box; | |
141 font-family: inherit; | |
142 font-size: inherit; | |
143 font-weight: inherit; | |
144 /* Do not inherit the line-height. */ | |
145 line-height: normal; | |
146 margin-bottom: 0; | |
147 margin-top: 0; | |
148 min-height: 0; | |
149 text-decoration: none; | |
150 vertical-align: baseline; | |
151 } | |
152 | |
153 .tree-item [editing] input { | |
154 line-height: normal; | |
155 margin: 0; | |
156 min-height: 0; | |
157 padding: 1px 0; | |
158 } | |
159 | |
160 <if expr="is_macosx"> | |
161 list .label input, | |
162 list .url input { | |
163 outline: none; | |
164 } | |
165 </if> | |
166 | |
167 list > [editing] { | |
168 overflow: visible; | |
169 } | |
170 | |
171 list [editing] .label, | |
172 list [editing] .url, | |
173 list [editing] > * { | |
174 overflow: visible; | |
175 } | |
176 | |
177 list [editing] .url { | |
178 -webkit-padding-start: 5px; | |
179 } | |
180 | |
181 list [editing] input { | |
182 padding: 1px 0; | |
183 } | |
184 | |
185 /* end editing */ | |
186 | |
187 html[dir=rtl] list > .folder > .label { | |
188 background-image: -webkit-image-set( | |
189 url('../../../../../ui/resources/default_100_percent/common/folder_closed_
rtl.png') 1x, | |
190 url('../../../../../ui/resources/default_200_percent/common/folder_closed_
rtl.png') 2x); | |
191 } | |
192 | |
193 <if expr="is_macosx"> | |
194 list > .folder > .label, | |
195 .tree-label, | |
196 .tree-row[may-have-children] > .tree-label, | |
197 .tree-item[expanded] > .tree-row > .tree-label { | |
198 background-image: -webkit-image-set( | |
199 url('../../../../app/theme/default_100_percent/mac/bookmark_bar_folder.png
') 1x, | |
200 url('../../../../app/theme/default_200_percent/mac/bookmark_bar_folder.png
') 2x); | |
201 } | |
202 </if> | |
203 | |
204 .main { | |
205 -webkit-flex: 1; | |
206 display: -webkit-flex; | |
207 /* TODO(arv): Remove min-height once bug is fixed: | |
208 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ | |
209 min-height: 0; | |
210 } | |
211 | |
212 #tree-container { | |
213 -webkit-padding-end: 5px; | |
214 -webkit-padding-start: 10px; | |
215 box-sizing: border-box; | |
216 /* min-width and max-width are used by the split pane. */ | |
217 max-width: 50%; | |
218 min-width: 50px; | |
219 overflow: auto; | |
220 padding-bottom: 5px; | |
221 padding-top: 5px; | |
222 width: 200px; | |
223 } | |
224 | |
225 #tree { | |
226 display: inline-block; | |
227 min-width: 100%; | |
228 overflow: visible; /* let the container do the scrolling */ | |
229 } | |
230 | |
231 .tree-item > .tree-row { | |
232 line-height: 20px; | |
233 } | |
234 | |
235 .tree-row .expand-icon { | |
236 top: 2px; | |
237 } | |
238 | |
239 #list { | |
240 -webkit-flex: 1; | |
241 -webkit-padding-end: 5px; | |
242 box-sizing: border-box; | |
243 /* TODO(arv): Remove min-width once bug is fixed: | |
244 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ | |
245 min-width: 0; | |
246 padding-bottom: 5px; | |
247 padding-top: 5px; | |
248 } | |
249 | |
250 .splitter { | |
251 -webkit-border-end: 15px solid white; | |
252 -webkit-border-start: 0; | |
253 background-color: rgb(235, 239, 249); | |
254 cursor: e-resize; | |
255 width: 5px; | |
256 <if expr="is_macosx"> | |
257 cursor: col-resize; | |
258 </if> | |
259 } | |
260 | |
261 .logo { | |
262 -webkit-appearance: none; | |
263 background: url('../images/bookmarks_section_32.png') no-repeat 50% 50%; | |
264 border: 0; | |
265 cursor: pointer; | |
266 float: left; | |
267 height: 32px; | |
268 margin: 10px; | |
269 width: 32px; | |
270 } | |
271 | |
272 html:not(.focus-outline-visible) .logo:focus { | |
273 outline: none; | |
274 } | |
275 | |
276 .header form { | |
277 float: left; | |
278 margin: 14px 2px 0 2px; | |
279 width: 171px; | |
280 } | |
281 | |
282 .header { | |
283 min-width: 400px; | |
284 } | |
285 | |
286 html[dir=rtl] .logo, | |
287 html[dir=rtl] .header > div, | |
288 html[dir=rtl] .header form { | |
289 float: right; | |
290 } | |
291 | |
292 .tree-row.drag-on, | |
293 .drag-on { | |
294 background-color: hsla(214, 91%, 85%, .5); | |
295 border: 1px solid hsl(214, 91%, 85%); | |
296 border-radius: 3px; | |
297 box-sizing: border-box; | |
298 } | |
299 | |
300 .drag-above::before, | |
301 .drag-below::after { | |
302 background-clip: padding-box; | |
303 background-color: black; | |
304 border: 3px solid black; | |
305 border-bottom-color: transparent; | |
306 border-radius: 0; | |
307 border-top-color: transparent; | |
308 box-sizing: border-box; | |
309 content: ''; | |
310 display: block; | |
311 height: 8px; | |
312 left: 0; | |
313 position: absolute; | |
314 right: 0; | |
315 z-index: 10; | |
316 } | |
317 | |
318 .drag-above::before { | |
319 top: calc((8px/2 + 1px) * -1) | |
320 } | |
321 | |
322 .drag-below::after { | |
323 bottom: calc((8px/2 + 1px) * -1) | |
324 } | |
325 | |
326 list.drag-above::before { | |
327 top: 0 | |
328 } | |
329 | |
330 list > .drag-below, | |
331 list > .drag-above { | |
332 overflow : visible; | |
333 } | |
334 | |
335 .summary { | |
336 background-color: rgb(235, 239, 249); | |
337 border-top: 1px solid rgb(156, 194, 239); | |
338 clear: both; | |
339 padding: 5px 10px; | |
340 white-space: nowrap; | |
341 } | |
342 | |
343 .summary > * { | |
344 display: inline-block; | |
345 font-size: 100%; | |
346 margin: 0; | |
347 } | |
348 | |
349 .summary button { | |
350 -webkit-appearance: none; | |
351 -webkit-margin-start: 10px; | |
352 -webkit-padding-end: 11px; | |
353 -webkit-padding-start: 0; | |
354 background: transparent -webkit-canvas(drop-down-arrow) | |
355 no-repeat right center; | |
356 border: 0; | |
357 font: inherit; | |
358 padding-bottom: 0; | |
359 padding-top: 0; | |
360 } | |
361 | |
362 html[dir=rtl] .summary button { | |
363 background-position: left center; | |
364 } | |
365 | |
366 @media (pointer:coarse) { | |
367 list > *, | |
368 menu > button, | |
369 .tree-item > .tree-row { | |
370 line-height: 28px; | |
371 } | |
372 | |
373 list [editing] input, | |
374 .tree-item [editing] input { | |
375 padding: 3px 0; | |
376 } | |
377 | |
378 .tree-row .expand-icon { | |
379 top: 6px; | |
380 } | |
381 } | |
OLD | NEW |