OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 <include src="../search_header.css"> | 5 <include src="../search_header.css"> |
6 | 6 |
7 html, | 7 html, |
8 body { | 8 body { |
9 cursor: default; | 9 cursor: default; |
10 height: 100%; | 10 height: 100%; |
(...skipping 26 matching lines...) Expand all Loading... |
37 text-decoration: none; | 37 text-decoration: none; |
38 white-space: nowrap; | 38 white-space: nowrap; |
39 } | 39 } |
40 | 40 |
41 list > * > * { | 41 list > * > * { |
42 -webkit-padding-start: 20px; | 42 -webkit-padding-start: 20px; |
43 background: 0 50% no-repeat; | 43 background: 0 50% no-repeat; |
44 box-sizing: border-box; | 44 box-sizing: border-box; |
45 overflow: hidden; | 45 overflow: hidden; |
46 text-overflow: ellipsis; | 46 text-overflow: ellipsis; |
47 white-space: pre; /* Don't collapse whitespace */ | 47 white-space: pre; |
48 } | 48 } |
49 | 49 |
50 list > * > .label { | 50 list .label { |
51 -webkit-transition: all 150ms; | |
52 color: black; | 51 color: black; |
53 display: inline-block; /* We need to use inline-block here due to RTL. */ | 52 display: inline-block; /* Makes the image start-align in RTL. */ |
54 } | 53 } |
55 | 54 |
56 list > * > .url { | 55 html[dir=rtl] list .label { |
57 direction: ltr; /* URLs always read LTR */ | 56 background-position: 100% 50%; |
| 57 } |
| 58 |
| 59 <if expr="is_macosx"> |
| 60 list > .folder > .label, |
| 61 .tree-label, |
| 62 .tree-row[may-have-children] > .tree-label, |
| 63 .tree-item[expanded] > .tree-row > .tree-label { |
| 64 background-image: -webkit-image-set( |
| 65 url(../../../../app/theme/default_100_percent/mac/bookmark_bar_folder.png)
1x, |
| 66 url(../../../../app/theme/default_200_percent/mac/bookmark_bar_folder.png)
2x); |
| 67 } |
| 68 </if> |
| 69 |
| 70 <if expr="not is_macosx"> |
| 71 list > .folder > .label { |
| 72 background-image: -webkit-image-set( |
| 73 url(../../../../../ui/resources/default_100_percent/common/folder_closed.p
ng) 1x, |
| 74 url(../../../../../ui/resources/default_200_percent/common/folder_closed.p
ng) 2x); |
| 75 } |
| 76 |
| 77 html[dir=rtl] list > .folder > .label { |
| 78 background-image: -webkit-image-set( |
| 79 url(../../../../../ui/resources/default_100_percent/common/folder_closed_r
tl.png) 1x, |
| 80 url(../../../../../ui/resources/default_200_percent/common/folder_closed_r
tl.png) 2x); |
| 81 } |
| 82 </if> |
| 83 |
| 84 /* We need to ensure that even empty labels take up space, or the row could be |
| 85 * the wrong height. */ |
| 86 list .label:empty::after { |
| 87 content: ' '; |
| 88 white-space: pre; |
| 89 } |
| 90 |
| 91 list .url { |
| 92 direction: ltr; |
58 display: none; | 93 display: none; |
59 flex: 1; | 94 flex: 1; |
60 } | 95 } |
61 | 96 |
62 list > :hover > .url, | 97 list > :hover > .url, |
63 list > [selected] > .url { | 98 list > [selected] > .url { |
64 display: block; | 99 display: block; |
65 } | 100 } |
66 | 101 |
67 /* Handle proper padding for URL field in an RTL context, where field order is | 102 /* Handle proper padding for URL field in an RTL context, where field order is |
68 * |div.url||div.label| - so we need padding at the right of URL, not at the | 103 * |div.url||div.label| - so we need padding at the right of URL, not at the |
69 * left. And since url is always LTR, that is padding at the end, not the start. | 104 * left. And since url is always LTR, that is padding at the end, not the start. |
70 */ | 105 */ |
71 html[dir=rtl] .url { | 106 html[dir=rtl] list .url { |
72 -webkit-padding-end: 20px; | 107 -webkit-padding-end: 20px; |
73 -webkit-padding-start: 0; | 108 -webkit-padding-start: 0; |
74 text-align: right; | 109 text-align: right; |
75 } | 110 } |
76 | 111 |
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.p
ng) 1x, | |
84 url(../../../../../ui/resources/default_200_percent/common/folder_closed.p
ng) 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 { | 112 list > * > button { |
99 -webkit-transition: opacity 150ms; | 113 -webkit-transition: opacity 150ms; |
100 background: #fff no-repeat center center; | 114 background: #fff no-repeat center center; |
101 border: 1px solid hsl(214, 91%, 85%); | 115 border: 1px solid hsl(214, 91%, 85%); |
102 border-radius: 3px; | 116 border-radius: 3px; |
103 bottom: 1px; | 117 bottom: 1px; |
104 display: none; | 118 display: none; |
105 overflow: hidden; | 119 overflow: hidden; |
106 padding: 0; | 120 padding: 0; |
107 position: absolute; | 121 position: absolute; |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 list [editing] .url { | 191 list [editing] .url { |
178 -webkit-padding-start: 5px; | 192 -webkit-padding-start: 5px; |
179 } | 193 } |
180 | 194 |
181 list [editing] input { | 195 list [editing] input { |
182 padding: 1px 0; | 196 padding: 1px 0; |
183 } | 197 } |
184 | 198 |
185 /* end editing */ | 199 /* end editing */ |
186 | 200 |
187 html[dir=rtl] list > .folder > .label { | |
188 background-image: -webkit-image-set( | |
189 url(../../../../../ui/resources/default_100_percent/common/folder_closed_r
tl.png) 1x, | |
190 url(../../../../../ui/resources/default_200_percent/common/folder_closed_r
tl.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 { | 201 .main { |
205 border-top: 1px solid rgb(156, 194, 239); | 202 border-top: 1px solid rgb(156, 194, 239); |
206 display: flex; | 203 display: flex; |
207 flex: 1; | 204 flex: 1; |
208 min-height: 0; | 205 min-height: 0; |
209 } | 206 } |
210 | 207 |
211 .pane, | 208 .pane, |
212 .splitter { | 209 .splitter { |
213 display: flex; | 210 display: flex; |
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
383 | 380 |
384 list [editing] input, | 381 list [editing] input, |
385 .tree-item [editing] input { | 382 .tree-item [editing] input { |
386 padding: 3px 0; | 383 padding: 3px 0; |
387 } | 384 } |
388 | 385 |
389 .tree-row .expand-icon { | 386 .tree-row .expand-icon { |
390 top: 6px; | 387 top: 6px; |
391 } | 388 } |
392 } | 389 } |
OLD | NEW |