OLD | NEW |
1 /* | 1 /* |
2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. | 2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 /* Outer frame of the dialog. */ | 7 /* Outer frame of the dialog. */ |
8 body { | 8 body { |
9 -webkit-box-flex: 1; | 9 -webkit-box-flex: 1; |
10 -webkit-box-orient: vertical; | 10 -webkit-box-orient: vertical; |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
93 background-image: -webkit-linear-gradient(top, #fff,#f6f6f6); | 93 background-image: -webkit-linear-gradient(top, #fff,#f6f6f6); |
94 border-bottom: 1px #d6d9e3 solid; | 94 border-bottom: 1px #d6d9e3 solid; |
95 color: #42506c; | 95 color: #42506c; |
96 font-size: 15px; | 96 font-size: 15px; |
97 font-weight: bold; | 97 font-weight: bold; |
98 height: 32px; | 98 height: 32px; |
99 padding-top: 8px; | 99 padding-top: 8px; |
100 padding-bottom: 8px; | 100 padding-bottom: 8px; |
101 } | 101 } |
102 | 102 |
103 /* Main part of the dialog between header and footer. */ | |
104 .dialog-container { | |
105 display: -webkit-box; | |
106 -webkit-box-orient: horizontal; | |
107 -webkit-box-align: stretch; | |
108 overflow: hidden; | |
109 -webkit-box-flex: 1; | |
110 } | |
111 | |
112 /* List/grid and preview are inside this container. */ | |
113 .dialog-main { | |
114 -webkit-box-flex: 1; | |
115 display:-webkit-box; | |
116 -webkit-box-orient: vertical; | |
117 -webkit-box-align: stretch; | |
118 } | |
119 | |
120 /* Roots list at the left. */ | |
121 .dialog-sidebar { | |
122 position: relative; | |
123 -webkit-box-flex: 0; | |
124 width: 200px; | |
125 margin-left: -200px; | |
126 background-color: rgba(240, 240, 240, 1); | |
127 margin-bottom: 15px; | |
128 margin-top: 15px; | |
129 -webkit-border-top-right-radius: 4px; | |
130 -webkit-border-top-left-radius: 4px; | |
131 -webkit-border-bottom-left-radius: 4px; | |
132 -webkit-transition: margin-left 180ms ease; | |
133 overflow: hidden; | |
134 } | |
135 | |
136 .dialog-container[sidebar] .dialog-sidebar { | |
137 margin-left: 15px; | |
138 } | |
139 | |
140 /* Roots list at the left. */ | |
141 list.roots-list { | |
142 width: 100%; | |
143 } | |
144 | |
145 list.roots-list > * { | |
146 border: none; | |
147 border-radius: 0; | |
148 line-height: 35px; | |
149 margin: 0; | |
150 padding: 0 5px; | |
151 background-color: rgba(240,240,240,1); | |
152 } | |
153 | |
154 list.roots-list > [lead], | |
155 list.roots-list > [selected], | |
156 list.roots-list > [anchor] { | |
157 background-color: hsl(214,91%,89%); | |
158 } | |
159 | |
160 list.roots-list > [lead]:hover, | |
161 list.roots-list > [selected]:hover, | |
162 list.roots-list > [anchor]:hover { | |
163 background-color: hsl(214,91%,87%); | |
164 } | |
165 | |
166 list.roots-list li.root-item { | |
167 display: -webkit-box; | |
168 -webkit-box-align: center; | |
169 -webkit-box-pack: start; | |
170 } | |
171 | |
172 li.root-item > * { | |
173 display: block; | |
174 margin-right: 5px; | |
175 } | |
176 | |
177 li.root-item > .text { | |
178 max-width: 130px; | |
179 overflow: hidden; | |
180 text-overflow: ellipsis; | |
181 white-space: nowrap; | |
182 } | |
183 | |
184 li.root-item > .spacer { | |
185 -webkit-box-flex: 1; | |
186 } | |
187 | |
188 img.root-eject { | |
189 opacity: 0.5; | |
190 cursor: pointer; | |
191 width: 15px; | |
192 height: 12px; | |
193 } | |
194 | |
195 img.root-eject:hover { | |
196 opacity: 1; | |
197 } | |
198 | |
199 /* Breadcrumbs and things under the title but above the list view. */ | 103 /* Breadcrumbs and things under the title but above the list view. */ |
200 .dialog-header { | 104 .dialog-header { |
201 -webkit-box-orient: horizontal; | 105 -webkit-box-orient: horizontal; |
202 -webkit-box-align: center; | 106 -webkit-box-align: center; |
203 display: -webkit-box; | 107 display: -webkit-box; |
204 margin-top: 15px; | 108 margin: 15px; |
205 margin-right: 15px; | |
206 margin-bottom: 4px; | 109 margin-bottom: 4px; |
207 margin-left: 15px; | 110 } |
208 -webkit-transition: all 180ms ease; | |
209 } | |
210 | 111 |
211 /* Container for the detail and thumbnail (not implemented yet) list views. */ | 112 /* Container for the detail and thumbnail (not implemented yet) list views. */ |
212 .dialog-container[sidebar] .dialog-header { | |
213 margin-left: 0; | |
214 } | |
215 | |
216 /* Close sidebar button. */ | |
217 div.close-sidebar { | |
218 cursor: pointer; | |
219 position: absolute; | |
220 right: 0; | |
221 top: 2px; | |
222 display: none; | |
223 z-index: 10; | |
224 background-color: white; | |
225 border: 1px solid rgba(200,200,200,1); | |
226 width: 13px; | |
227 height: 24px; | |
228 } | |
229 | |
230 div.close-sidebar:hover { | |
231 background-color: rgba(240,240,240,1); | |
232 } | |
233 | |
234 /* Open sidebar button. */ | |
235 div.open-sidebar { | |
236 cursor: pointer; | |
237 margin-right: 10px; | |
238 background-color: white; | |
239 width: 13px; | |
240 height: 24px; | |
241 } | |
242 | |
243 div.open-sidebar:hover { | |
244 background-color: rgba(240,240,240,1); | |
245 } | |
246 | |
247 .dialog-container[sidebar] div.open-sidebar { | |
248 display: none;; | |
249 } | |
250 | |
251 .dialog-container[sidebar] div.close-sidebar { | |
252 display: block; | |
253 } | |
254 | |
255 /* Container for the detail and thumbnail list views. */ | |
256 .dialog-body { | 113 .dialog-body { |
257 -webkit-box-orient: vertical; | 114 -webkit-box-orient: vertical; |
258 -webkit-box-flex: 1; | 115 -webkit-box-flex: 1; |
259 border: 1px #aaa solid; | 116 border: 1px #aaa solid; |
260 border-radius: 4px; | 117 border-radius: 4px; |
261 display: -webkit-box; | 118 display: -webkit-box; |
262 margin-right: 15px; | 119 margin: 15px; |
263 margin-bottom: 15px; | 120 margin-top: 0; |
264 margin-left: 15px; | |
265 overflow: hidden; | 121 overflow: hidden; |
266 -webkit-transition: all 180ms ease; | |
267 } | |
268 | |
269 .dialog-container[sidebar] .dialog-body { | |
270 -webkit-border-top-left-radius: 0; | |
271 -webkit-border-bottom-left-radius: 0; | |
272 margin-left: 0; | |
273 } | 122 } |
274 | 123 |
275 /* Container for the ok/cancel buttons. */ | 124 /* Container for the ok/cancel buttons. */ |
276 .dialog-footer { | 125 .dialog-footer { |
277 -webkit-box-orient: horizontal; | 126 -webkit-box-orient: horizontal; |
278 display: -webkit-box; | 127 display: -webkit-box; |
279 margin: 15px; | 128 margin: 15px; |
280 margin-top: 0; | 129 margin-top: 0; |
281 } | 130 } |
282 | 131 |
283 /* The container for breadcrumb elements. */ | 132 /* The container for breadcrumb elements. */ |
284 .breadcrumbs { | 133 .breadcrumbs { |
285 -webkit-box-orient: horizontal; | 134 -webkit-box-orient: horizontal; |
286 -webkit-box-flex: 1; | 135 -webkit-box-flex: 1; |
287 display: -webkit-box; | 136 display: -webkit-box; |
288 -webkit-box-align: center; | |
289 font-size: 15px; | 137 font-size: 15px; |
290 line-height: 15px; | 138 line-height: 15px; |
291 height: 18px; | 139 height: 18px; |
292 overflow: hidden; | 140 overflow: hidden; |
293 text-overflow: ellipsis; | 141 text-overflow: ellipsis; |
294 white-space: nowrap; | 142 white-space: nowrap; |
295 } | 143 } |
296 | 144 |
297 .dialog-container[sidebar] .breadcrumbs { | |
298 margin-left: 10px; | |
299 } | |
300 | |
301 /* Icon at the start of breadcrumb path. Corresponds to the root selected. */ | |
302 .breadcrumb-icon { | |
303 margin-right: 5px; | |
304 display: block; | |
305 } | |
306 | |
307 .dialog-container[sidebar] .breadcrumb-icon { | |
308 display: none; | |
309 } | |
310 | |
311 /* A single directory name in the list of path breadcrumbs. */ | 145 /* A single directory name in the list of path breadcrumbs. */ |
312 .breadcrumb-path { | 146 .breadcrumb-path { |
313 color: #265692; | 147 color: #265692; |
314 cursor: pointer; | 148 cursor: pointer; |
315 font-size: 14px; | 149 font-size: 14px; |
316 } | 150 } |
317 | 151 |
318 /* The final breadcrumb, representing the current directory. */ | 152 /* The final breadcrumb, representing the current directory. */ |
319 .breadcrumb-last { | 153 .breadcrumb-last { |
320 color: #666; | 154 color: #666; |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
369 padding: 15px; | 203 padding: 15px; |
370 } | 204 } |
371 | 205 |
372 .downloads-warning div { | 206 .downloads-warning div { |
373 display: -webkit-box; | 207 display: -webkit-box; |
374 -webkit-box-flex: 1; | 208 -webkit-box-flex: 1; |
375 } | 209 } |
376 | 210 |
377 /* The cr.ui.Grid representing the detailed file list. */ | 211 /* The cr.ui.Grid representing the detailed file list. */ |
378 .thumbnail-grid { | 212 .thumbnail-grid { |
379 width: 100%; | 213 position: absolute; |
| 214 top: 0; |
| 215 left: 0; |
| 216 border: 0; |
380 overflow-y: scroll; | 217 overflow-y: scroll; |
381 } | 218 } |
382 | 219 |
383 /* An item in the thumbnail view. */ | 220 /* An item in the thumbnail view. */ |
384 .thumbnail-item { | 221 .thumbnail-item { |
385 margin-top: 10px; | 222 margin-top: 10px; |
386 margin-left: 10px; | 223 margin-left: 10px; |
387 width: 120px; | 224 width: 120px; |
388 height: 145px; | 225 height: 145px; |
389 text-align: center; | 226 text-align: center; |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
424 } | 261 } |
425 | 262 |
426 /* Text box used for renaming in the thumbnail list. */ | 263 /* Text box used for renaming in the thumbnail list. */ |
427 .thumbnail-grid input.rename { | 264 .thumbnail-grid input.rename { |
428 -webkit-margin-start: -2px; | 265 -webkit-margin-start: -2px; |
429 position: absolute; | 266 position: absolute; |
430 } | 267 } |
431 | 268 |
432 /* The cr.ui.Table representing the detailed file list. */ | 269 /* The cr.ui.Table representing the detailed file list. */ |
433 .detail-table { | 270 .detail-table { |
434 width: 100%; | 271 position: absolute; |
| 272 top: 0; |
| 273 left: 0; |
435 border: 0; | 274 border: 0; |
436 } | 275 } |
437 | 276 |
438 /* Bottom pane describing current selection. */ | 277 /* Bottom pane describing current selection. */ |
439 .preview-panel { | 278 .preview-panel { |
440 -webkit-box-orient: horizontal; | 279 -webkit-box-orient: horizontal; |
441 display: -webkit-box; | 280 display: -webkit-box; |
442 height: 61px; | 281 height: 61px; |
443 background-color: #F0F0F0; | 282 background-color: #F0F0F0; |
444 padding: 0px 14px 0px 14px; | 283 padding: 0px 14px 0px 14px; |
(...skipping 339 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
784 /* Overlay pane covering the entire file manager window (e.g. image editor)*/ | 623 /* Overlay pane covering the entire file manager window (e.g. image editor)*/ |
785 .overlay-pane { | 624 .overlay-pane { |
786 position: absolute; | 625 position: absolute; |
787 top: 0; | 626 top: 0; |
788 left: 0; | 627 left: 0; |
789 width: 100%; | 628 width: 100%; |
790 height: 100%; | 629 height: 100%; |
791 border: none; | 630 border: none; |
792 z-index: 100; | 631 z-index: 100; |
793 } | 632 } |
OLD | NEW |