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. */ 8 body { 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 99 button.detail-view > img, 100 button.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 237 li.thumbnail-item .file-checkbox { 238 opacity: 0; 239 } 240 241 li.table-row:hover .file-checkbox, 242 li.thumbnail-item:hover .file-checkbox { 243 opacity: 0.5; 244 } 245 246 .file-checkbox:hover, 247 li.table-row[selected] .file-checkbox, 248 li.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