1/*
2Copyright (c) 2010 The Chromium Authors. All rights reserved.
3Use of this source code is governed by a BSD-style license that can be
4found in the LICENSE file.
5*/
6html, body {
7  margin: 0;
8  width: 100%;
9  height: 100%;
10  cursor: default;
11  overflow: hidden;
12}
13
14list {
15  display: block;
16  overflow-x: hidden;
17  overflow-y: visible; /* let the container do the scrolling */
18}
19
20list > * {
21  color: hsl(0, 0%, 70%);
22  padding: 0 3px;
23  -webkit-padding-end: 20px;
24  text-decoration: none;
25  white-space: nowrap;
26}
27
28list > * > * {
29  box-sizing: border-box;
30  -webkit-padding-start: 20px;
31  background: 0 50% no-repeat;
32  overflow: hidden;
33  text-overflow: ellipsis;
34  white-space: pre; /* Don't collapse whitespace */
35}
36
37list > * > .label {
38  -webkit-transition: all .15s;
39  color: black;
40  display: inline-block; /* We need to use inline-block here due to RTL. */
41}
42
43list > * > .url {
44  display: none;
45}
46
47list > :hover > .url,
48list > [selected] > .url {
49  display: inline;
50}
51
52html[dir=rtl] list .label {
53  background-position: 100% 50%;
54}
55
56list > .folder > .label {
57  background-image: url("../../../../../app/resources/folder_closed.png");
58}
59
60/* We need to ensure that even empty labels take up space */
61list > * > .label:empty:after,
62list > * > .url:empty:after {
63  content: " ";
64  white-space: pre;
65}
66
67list > .folder > .url:empty:after {
68  content: "";
69}
70
71list > * > button {
72  -webkit-transition: opacity .15s;
73  background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
74  border: 1px solid hsl(214, 91%, 85%);
75  border-radius: 3px;
76  bottom: 1px;
77  display: none;
78  overflow: hidden;
79  padding: 0;
80  position: absolute;
81  right: 3px;
82  top: 1px;
83  width: 15px;
84}
85
86list > [selected]:hover > button,
87list > * > button[menu-shown] {
88  border-color: hsl(214, 91%, 65%);
89}
90
91list > :hover > button {
92  display: block;
93}
94
95list > * > button:hover,
96list > * > button[menu-shown] {
97  display: block;
98}
99
100html[dir=rtl] list > * > button {
101  right: auto;
102  left: 3px;
103}
104
105/*
106/* Edit mode
107*/
108
109list [editing] .label input,
110list [editing] .url input {
111  /* Do not inherit the line-height */
112  font-family: inherit;
113  font-size: inherit;
114  font-weight: inherit;
115  margin: 0;
116  -webkit-margin-start: -4px;
117  -webkit-margin-end: 4px;
118  max-width: 40%;
119  padding: 0;
120  -webkit-padding-start: 1px;
121  -webkit-padding-end: 3px;
122  text-decoration: none;
123}
124
125.tree-item [editing] input {
126  margin: 0;
127  padding: 0;
128  -webkit-margin-start: -3px;
129  -webkit-padding-end: 7px;
130}
131
132html[os=mac] .tree-label [editing] input {
133  padding-top: 1px;
134}
135
136html:not([os=mac]) list .label input,
137html:not([os=mac]) list .url input {
138  outline: none;
139}
140
141list > [editing] {
142  overflow: visible;
143}
144
145list [editing] .label,
146list [editing] .url,
147list [editing] > * {
148  overflow: visible;
149  display: inline;
150}
151
152list [editing] .url {
153  -webkit-padding-start: 10px;
154}
155
156list .url form {
157  display: inline;
158}
159
160/* end editing */
161
162html[dir=rtl] list > .folder > .label {
163  background-image: url("../../../../../app/resources/folder_closed_rtl.png");
164}
165
166html[os=mac] list > .folder > .label {
167  background-image: url("../../../../app/theme/bookmark_bar_folder_mac.png");
168}
169
170html[os=mac] .tree-label {
171  background-image: url("../../../../app/theme/bookmark_bar_folder_mac.png");
172}
173
174html[os=mac] .tree-row[selected] > .tree-label {
175  background-image: url("../../../../app/theme/bookmark_bar_folder_mac.png");
176}
177
178.main {
179  position: absolute;
180  display: -webkit-box;
181  top: 79px;
182  left: 0;
183  right: 0;
184  bottom: 0;
185}
186
187.main > * {
188  height: 100%;
189}
190
191#tree-container {
192  width: 200px;
193  /* min-width and max-width are used by the split pane. */
194  min-width: 50px;
195  max-width: 50%;
196  overflow: auto;
197  box-sizing: border-box;
198  padding: 5px;
199  -webkit-padding-start: 10px;
200}
201
202#tree {
203  min-width: 100%;
204  overflow: visible; /* let the container do the scrolling */
205  display: inline-block;
206}
207
208#list {
209  -webkit-box-flex: 1;
210  box-sizing: border-box;
211  padding: 5px;
212}
213
214.splitter {
215  width: 5px;
216  background-color: #ebeff9;
217  cursor: e-resize;
218}
219
220html[os=mac] .splitter {
221  cursor: col-resize;
222}
223
224.logo {
225  -webkit-appearance: none;
226  border: 0;
227  background: url("../images/bookmarks_section_32.png") no-repeat 50% 50%;
228  width: 32px;
229  height: 32px;
230  cursor: pointer;
231  margin: 10px;
232  float: left;
233}
234
235.header form {
236  float: left;
237  margin: 14px 2px;
238  margin-bottom: 0;
239}
240
241.header {
242  min-width: 400px;
243}
244
245html[dir=rtl] .logo,
246html[dir=rtl] .header > div,
247html[dir=rtl] .header form {
248  float: right;
249}
250
251#drop-overlay {
252  position: absolute;
253  display: none;
254  pointer-events: none;
255  border: 1px solid hsl(214, 91%, 85%);;
256  border-radius: 3px;
257  box-sizing: border-box;
258  background-color: hsla(214, 91%, 85%, .5);
259  overflow: hidden;
260  z-index: -1;
261}
262
263#drop-overlay.line {
264  border: 3px solid black;
265  border-top-color: transparent;
266  border-bottom-color: transparent;
267  background-color: black;
268  background-clip: padding-box;
269  height: 8px;
270  border-radius: 0;
271  z-index: 10;
272}
273
274.summary {
275  background-color: #ebeff9;
276  border-top: 1px solid #9cc2ef;
277  padding: 5px 10px;
278  clear: both;
279  white-space: nowrap;
280}
281
282.summary > * {
283  font-size: 100%;
284  display: inline-block;
285  margin: 0;
286}
287
288.summary button {
289  -webkit-appearance: none;
290  background: transparent;
291  border: 0;
292  font: inherit;
293  padding: 0;
294  background: -webkit-canvas(drop-down-arrow) 100% 50% no-repeat;
295  -webkit-padding-end: 11px;
296  -webkit-margin-start: 10px;
297}
298
299html[dir=rtl] .summary button {
300  background-position: 0% 50%;
301}
302