1/* Copyright (c) 2012 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
5html,
6body {
7  cursor: default;
8  height: 100%;
9  margin: 0;
10  overflow: hidden;
11  width: 100%;
12}
13
14body {
15  -webkit-flex-direction: column;
16  display: -webkit-flex;
17}
18
19list {
20  display: block;
21  overflow-x: hidden;
22  overflow-y: visible; /* let the container do the scrolling */
23}
24
25list > * {
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
39list > * > * {
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
48list > * > .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
54list > * > .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
63list > :hover > .url,
64list > [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 */
72html[dir=rtl] .url {
73  -webkit-padding-end: 20px;
74  -webkit-padding-start: 0;
75}
76
77html[dir=rtl] list .label {
78  background-position: 100% 50%;
79}
80
81list > .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 */
88list > * > .label:empty::after,
89list > * > .url:empty::after {
90  content: ' ';
91  white-space: pre;
92}
93
94list > .folder > .url:empty::after {
95  content: '';
96}
97
98list > * > 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
113list > [selected]:hover > button,
114list > * > button[menu-shown] {
115  border-color: hsl(214, 91%, 65%);
116}
117
118list > :hover > button {
119  display: block;
120}
121
122list > * > button:hover,
123list > * > button[menu-shown] {
124  display: block;
125}
126
127html[dir=rtl] list > * > button {
128  left: 3px;
129  right: auto;
130}
131
132/* Edit mode */
133
134list [editing] .label input,
135list [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">
161list .label input,
162list .url input {
163  outline: none;
164}
165</if>
166
167list > [editing] {
168  overflow: visible;
169}
170
171list [editing] .label,
172list [editing] .url,
173list [editing] > * {
174  overflow: visible;
175}
176
177list [editing] .url {
178  -webkit-padding-start: 5px;
179}
180
181list [editing] input {
182  padding: 1px 0;
183}
184
185/* end editing */
186
187html[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">
194list > .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
272html: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
286html[dir=rtl] .logo,
287html[dir=rtl] .header > div,
288html[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
326list.drag-above::before {
327  top: 0
328}
329
330list > .drag-below,
331list > .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
362html[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}
382