• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
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
4 * found in the LICENSE file.
5 */
6
7/* Outer frame of the dialog. */
8body {
9  -webkit-box-flex: 1;
10  -webkit-box-orient: vertical;
11  -webkit-transition: opacity 0.07s linear;
12  -webkit-user-select: none;
13  display: -webkit-box;
14  height: 100%;
15  margin: 0;
16  opacity: 0;
17  padding: 0;
18  position: absolute;
19  width: 100%;
20}
21
22/* The top title of the dialog. */
23.dialog-title {
24  -webkit-box-sizing: border-box;
25  -webkit-padding-start: 15px;
26  background-image: -webkit-linear-gradient(top, #fff,#f6f6f6);
27  border-bottom: 1px #d6d9e3 solid;
28  color: #42506c;
29  font-size: 15px;
30  font-weight: bold;
31  height: 32px;
32  padding-top: 8px;
33  padding-bottom: 8px;
34}
35
36/* Breadcrumbs and things under the title but above the list view. */
37.dialog-header {
38  -webkit-box-orient: horizontal;
39  -webkit-box-align: center;
40  display: -webkit-box;
41  margin: 15px;
42  margin-bottom: 4px;
43}
44
45/* Container for the detail and thumbnail (not implemented yet) list views. */
46.dialog-body {
47  -webkit-box-orient: horizontal;
48  -webkit-box-flex: 1;
49  border: 1px #aaa solid;
50  border-radius: 3px;
51  display: -webkit-box;
52  margin: 15px;
53  margin-top: 0;
54}
55
56/* Container for the ok/cancel buttons. */
57.dialog-footer {
58  -webkit-box-orient: horizontal;
59  display: -webkit-box;
60  margin: 15px;
61  margin-top: 0;
62}
63
64/* The container for breadcrumb elements. */
65.breadcrumbs {
66  -webkit-box-orient: horizontal;
67  -webkit-box-flex: 1;
68  display: -webkit-box;
69  font-size: 15px;
70  line-height: 15px;
71  height: 18px;
72  overflow: hidden;
73  text-overflow: ellipsis;
74  white-space: nowrap;
75}
76
77/* A single directory name in the list of path breadcrumbs. */
78.breadcrumb-path {
79  color: #265692;
80  cursor: pointer;
81  font-size: 14px;
82}
83
84/* The final breadcrumb, representing the current directory. */
85.breadcrumb-last {
86  color: #666;
87  cursor: inherit;
88  font-weight: bold;
89}
90
91/* The > arrow between breadcrumbs. */
92.breadcrumb-spacer {
93  -webkit-margin-start: 7px;
94  -webkit-margin-end: 4px;
95  color: #aaa;
96  font-size: 12px;
97}
98
99button.detail-view > img,
100button.thumbnail-view > img {
101  position: relative;
102  top: 1px;
103}
104
105.list-container {
106  -webkit-box-orient: vertical;
107  -webkit-box-flex: 1;
108  display: -webkit-box;
109  position: relative;
110}
111
112/* The cr.ui.Grid representing the detailed file list. */
113.thumbnail-grid {
114  position: absolute;
115  top: 0;
116  left: 0;
117  border: 0;
118  overflow-y: scroll;
119}
120
121/* An item in the thumbnail view. */
122.thumbnail-item {
123  margin-top: 10px;
124  margin-left: 10px;
125  width: 120px;
126  height: 120px;
127  text-align: center;
128}
129
130.thumbnail-item > input[type="checkbox"] {
131  position: absolute;
132  top: 0;
133  left: 0;
134}
135
136.thumbnail-item > div.img-container {
137  -webkit-box-align: center;
138  -webkit-box-pack: center;
139  display: -webkit-box;
140  height: 91px;
141  margin: 2px;
142  width: 116px;
143}
144
145.thumbnail-item > div.img-container > img {
146  max-width: 110px;
147  max-height: 85px;
148}
149
150.thumbnail-item > div.filename-label {
151  overflow: hidden;
152  text-overflow: ellipsis;
153  white-space: nowrap;
154}
155
156/* Text box used for renaming in the detail list. */
157.detail-table input.rename {
158  -webkit-margin-start: -5px;
159  margin-top: 1px;
160  position: absolute;
161}
162
163/* Text box used for renaming in the thumbnail list. */
164.thumbnail-grid input.rename {
165  -webkit-margin-start: -2px;
166  position: absolute;
167}
168
169/* The cr.ui.Table representing the detailed file list. */
170.detail-table {
171  position: absolute;
172  top: 0;
173  left: 0;
174  border: 0;
175}
176
177/* The right-column 'Preview' column container. */
178.preview-container {
179  -webkit-border-start: 1px #aaa solid;
180  -webkit-box-orient: vertical;
181  display: -webkit-box;
182  width: 225px;
183}
184
185/* cr.ui.Table has a black focus border by default, which we don't want. */
186.detail-table:focus {
187  border: 0;
188}
189
190/* Table splitter element */
191.table-header-splitter {
192  -webkit-border-start: 1px #aaa solid;
193  background-color: inherit;
194  height: 20px;
195  margin-top: 4px;
196}
197
198/* Container for a table header. */
199.table-header {
200  -webkit-box-sizing: border-box;
201  border-bottom: 1px #aaa solid;
202  background-image: -webkit-linear-gradient(top, #f9f9f9, #e8e8e8);
203  height: 28px;
204}
205
206/* Text label in a table header. */
207.table-header-label {
208  margin-top: 6px;
209}
210
211/* First column has no label, so we want the sort indicator to take up the
212 * whole space.
213 */
214.table-header-cell:first-child .table-header-sort-image-desc:after,
215.table-header-cell:first-child .table-header-sort-image-asc:after {
216  -webkit-padding-start: 0;
217}
218
219/* The first child of a list cell. */
220.table-row-cell > * {
221  -webkit-margin-start: 5px;
222  -webkit-box-orient: horizontal;
223  -webkit-box-flex: 1;
224  display: -webkit-box;
225}
226
227.detail-table li.table-row .table-row-cell:first-child div {
228  margin: 0px;
229}
230
231.file-checkbox {
232  -webkit-margin-end: 0px;
233  margin-top: 5px;
234  opacity: 0.1;
235}
236
237li.thumbnail-item .file-checkbox {
238  opacity: 0;
239}
240
241li.table-row:hover .file-checkbox,
242li.thumbnail-item:hover .file-checkbox {
243  opacity: 0.5;
244}
245
246.file-checkbox:hover,
247li.table-row[selected] .file-checkbox,
248li.thumbnail-item[selected] .file-checkbox {
249  opacity: 1 !important;
250}
251
252/* Column text containers. */
253.detail-name, .detail-size, .detail-date {
254  padding-top: 2px;
255}
256
257.detail-icon-container {
258  -webkit-box-orient: horizontal;
259  -webkit-box-flex: 1;
260  -webkit-box-pack: end;
261  display: -webkit-box;
262}
263
264/* The icon in the name column. */
265.detail-icon {
266  background-image: url(../images/filetype_generic.png);
267  background-position: center;
268  background-repeat: no-repeat;
269  height: 24px;
270  width: 24px;
271}
272
273/* Icon for files in the detail list. */
274.detail-icon[iconType="audio"] {
275  background-image: url(../images/filetype_audio.png);
276}
277
278.detail-icon[iconType="doc"] {
279  background-image: url(../images/filetype_doc.png);
280}
281
282.detail-icon[iconType="folder"] {
283  background-image: url(../images/filetype_folder.png);
284}
285
286.detail-icon[iconType="html"] {
287  background-image: url(../images/filetype_html.png);
288}
289
290.detail-icon[iconType="image"] {
291  background-image: url(../images/filetype_image.png);
292}
293
294.detail-icon[iconType="pdf"] {
295  background-image: url(../images/filetype_pdf.png);
296}
297
298.detail-icon[iconType="presentation"] {
299  background-image: url(../images/filetype_presentation.png);
300}
301
302.detail-icon[iconType="spreadsheet"] {
303  background-image: url(../images/filetype_spreadsheet.png);
304}
305
306.detail-icon[iconType="text"] {
307  background-image: url(../images/filetype_text.png);
308}
309
310.detail-icon[iconType="video"] {
311  background-image: url(../images/filetype_video.png);
312}
313
314/* The filename text in the preview pane. */
315.preview-filename {
316  -webkit-margin-start: 8px;
317  color: #666;
318  font-weight: bold;
319  margin-top: 10px;
320  overflow: hidden;
321  text-overflow: ellipsis;
322  white-space: nowrap;
323}
324
325/* The preview image. */
326.preview-img {
327  margin-top: 10px;
328  max-height: 300px;
329  max-width: 190px;
330}
331
332.preview-img[src=''] {
333  visibility: hidden;
334}
335
336/* Decoration when multiple images are selected. */
337.preview-img.multiple-selected {
338  -webkit-box-shadow: 5px 5px 0 #aaa;
339}
340
341/* Checkboard background to distinguish images with alpha channels. */
342.preview-img.transparent-background {
343  /* ../images/preview-background.png */
344  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOTQAADiYBwNzaZQAAAAd0SU1FB9sDExUSAaQ/5TMAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAQ0lEQVRYw+3VsQkAMQwDQOfJRt7r9/FQ3ilDuAiBUy84UKFVVX8M0t2TenxxOQAAAAAAAAB7+ueZaQIAAAAAAIC3AQceAAfi8EmRSgAAAABJRU5ErkJggg==);
345}
346
347/* The task buttons at the bottom of the preview pane. */
348.task-buttons {
349  padding: 4px;
350  overflow-y: auto;
351}
352
353.task-button {
354  display: block;
355  width: 100%;
356  text-align: left;
357}
358
359.task-button > img {
360  position: relative;
361  top: 2px;
362  padding-after: 5px;
363  padding-right: 5px;
364}
365
366/* The selection summary text at the bottom of the preview pane. */
367.preview-summary {
368  border-top: 1px #aaa solid;
369  color: #666;
370  font-weight: bold;
371  overflow: hidden;
372  padding: 5px;
373  text-overflow: ellipsis;
374  white-space: nowrap;
375}
376
377.dialog-footer .filename-label {
378  -webkit-box-orient: horizontal;
379  color: #666;
380  display: -webkit-box;
381  font-weight: bold;
382  padding-top: 4px;
383  padding-right: 4px;
384}
385
386.filename-input {
387  -webkit-box-orient: horizontal;
388  -webkit-box-flex: 1;
389  display: -webkit-box;
390}
391
392/* A horizontal spring. */
393.horizontal-spacer {
394  -webkit-box-orient: horizontal;
395  -webkit-box-flex: 1;
396  display: -webkit-box;
397}
398
399/* A vertical spring. */
400.vertical-spacer {
401  -webkit-box-orient: vertical;
402  -webkit-box-flex: 1;
403  display: -webkit-box;
404}
405