| OLD | NEW |
|---|
| (Empty) |
| 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 | |
| 3 * found in the LICENSE file. */ | |
| 4 | |
| 5 /* The order of z-index: | |
| 6 * - 2: drag-selection-border | |
| 7 * - 3: preview-panel | |
| 8 * - 500: scrollbar | |
| 9 * - 500: splitter | |
| 10 * - 525: spinner | |
| 11 * - 550: autocomplete-suggestions | |
| 12 * - 600: menus | |
| 13 * - 600: tooltip | |
| 14 * - 1000: preview thumbnail popup | |
| 15 * - 1000: overlay panel (ie. image editor) | |
| 16 */ | |
| 17 | |
| 18 /* Special attribute used in HTML to hide elements. */ | |
| 19 body[type='folder'] [invisibleif~='folder'], | |
| 20 body[type='upload-folder'] [invisibleif~='upload-folder'], | |
| 21 body[type='saveas-file'] [invisibleif~='saveas-file'], | |
| 22 body[type='open-file'] [invisibleif~='open-file'], | |
| 23 body[type='open-multi-file'] [invisibleif~='open-multi-file'], | |
| 24 body[type='full-page'] [invisibleif~='full-page'], | |
| 25 | |
| 26 body[type='folder'] [visibleif]:not([visibleif~='folder']), | |
| 27 body[type='upload-folder'] [visibleif]:not([visibleif~='upload-folder']), | |
| 28 body[type='saveas-file'] [visibleif]:not([visibleif~='saveas-file']), | |
| 29 body[type='open-file'] [visibleif]:not([visibleif~='open-file']), | |
| 30 body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']), | |
| 31 body[type='full-page'] [visibleif]:not([visibleif~='full-page']) { | |
| 32 display: none !important; | |
| 33 } | |
| 34 | |
| 35 html { | |
| 36 height: 100%; | |
| 37 } | |
| 38 | |
| 39 html.col-resize * { | |
| 40 cursor: col-resize !important; | |
| 41 } | |
| 42 | |
| 43 /* Outer frame of the dialog. */ | |
| 44 body { | |
| 45 -webkit-box-flex: 1; | |
| 46 -webkit-box-orient: vertical; | |
| 47 -webkit-tap-highlight-color: transparent; | |
| 48 -webkit-user-select: none; | |
| 49 cursor: default; | |
| 50 display: -webkit-box; | |
| 51 height: 100%; | |
| 52 margin: 0; | |
| 53 padding: 0; | |
| 54 width: 100%; | |
| 55 } | |
| 56 | |
| 57 button:focus, | |
| 58 input[type='button']:focus, | |
| 59 input[type='submit']:focus, | |
| 60 select:focus, | |
| 61 a:focus { | |
| 62 outline-color: rgb(77, 144, 254); | |
| 63 } | |
| 64 | |
| 65 /* Drop opacity of selected rows to give a visual feedback on copy/cut | |
| 66 * operation. */ | |
| 67 .blink { | |
| 68 opacity: 0.8; | |
| 69 } | |
| 70 | |
| 71 ::-webkit-scrollbar { | |
| 72 height: 0; | |
| 73 width: 0; | |
| 74 } | |
| 75 | |
| 76 /* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */ | |
| 77 .scrollbar-vertical { | |
| 78 bottom: 0; | |
| 79 position: absolute; | |
| 80 right: 0; | |
| 81 top: 0; | |
| 82 width: 10px; | |
| 83 z-index: 500; /* Must be below the contextmenu (600). */ | |
| 84 } | |
| 85 | |
| 86 .scrollbar-button { | |
| 87 background-color: black; | |
| 88 border: 1px solid #ccc; | |
| 89 border-radius: 3px; | |
| 90 box-sizing: border-box; | |
| 91 height: 50%; | |
| 92 margin-right: 2px; | |
| 93 opacity: 0; | |
| 94 position: absolute; | |
| 95 transition: opacity 100ms; | |
| 96 width: 8px; | |
| 97 } | |
| 98 | |
| 99 :hover > .scrollbar-vertical > .scrollbar-button { | |
| 100 opacity: 0.3; | |
| 101 } | |
| 102 | |
| 103 .scrollbar-vertical > .scrollbar-button:hover { | |
| 104 opacity: 0.4; | |
| 105 } | |
| 106 | |
| 107 .scrollbar-vertical > .scrollbar-button.pressed { | |
| 108 opacity: 0.5; | |
| 109 } | |
| 110 | |
| 111 /* Main part of the dialog between header and footer. */ | |
| 112 .dialog-container { | |
| 113 -webkit-box-align: stretch; | |
| 114 -webkit-box-flex: 1; | |
| 115 -webkit-box-orient: horizontal; | |
| 116 background-color: white; /* Makes #drag-container invisible. */ | |
| 117 border-radius: 2px; | |
| 118 display: -webkit-box; | |
| 119 overflow: hidden; | |
| 120 position: relative; | |
| 121 } | |
| 122 | |
| 123 /* The style applied when a modal dialog box overlap the dialog container. */ | |
| 124 .dialog-container.disable-header-drag .dialog-navigation-list-header, | |
| 125 .dialog-container.disable-header-drag .dialog-header { | |
| 126 -webkit-app-region: no-drag; | |
| 127 } | |
| 128 | |
| 129 /* List/grid and preview are inside this container. */ | |
| 130 .dialog-main { | |
| 131 -webkit-box-align: stretch; | |
| 132 -webkit-box-flex: 1; | |
| 133 -webkit-box-orient: vertical; | |
| 134 display: -webkit-box; | |
| 135 } | |
| 136 | |
| 137 /* Directory tree at the left. */ | |
| 138 .dialog-navigation-list { | |
| 139 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1); | |
| 140 -webkit-box-flex: 0; | |
| 141 -webkit-box-orient: vertical; | |
| 142 background-color: #f1f1f1; | |
| 143 display: flex; | |
| 144 flex-direction: column; | |
| 145 max-width: 40%; | |
| 146 min-width: 100px; | |
| 147 overflow: hidden; | |
| 148 position: relative; | |
| 149 width: 150px; | |
| 150 } | |
| 151 | |
| 152 .dialog-navigation-list-header { | |
| 153 -webkit-app-region: drag; | |
| 154 flex: none; | |
| 155 height: 48px; /* Keep in sync with #dialog-header. */ | |
| 156 line-height: 45px; | |
| 157 } | |
| 158 | |
| 159 .dialog-navigation-list-header #profile-badge { | |
| 160 display: inline-block; | |
| 161 height: 29px; /* Size of a profile image. */ | |
| 162 margin: 8px; | |
| 163 vertical-align: top; | |
| 164 width: 29px; /* Size of a profile image. */ | |
| 165 } | |
| 166 | |
| 167 .dialog-navigation-list-header #app-name { | |
| 168 -webkit-margin-start: 15px; | |
| 169 color: #303030; | |
| 170 font-size: 130%; | |
| 171 } | |
| 172 | |
| 173 .dialog-navigation-list-header #profile-badge:not([hidden]) + #app-name { | |
| 174 -webkit-margin-start: 0; | |
| 175 } | |
| 176 | |
| 177 .dialog-navigation-list-contents { | |
| 178 display: -webkit-box; | |
| 179 flex: 1 1 auto; | |
| 180 position: relative; | |
| 181 } | |
| 182 | |
| 183 .dialog-navigation-list-footer { | |
| 184 display: -webkit-flex; | |
| 185 flex: none; | |
| 186 flex-direction: column; | |
| 187 } | |
| 188 | |
| 189 /* A vertical splitter between the roots list and the file list. It is actually | |
| 190 a transparent area centered on the roots list right border.*/ | |
| 191 div.splitter { | |
| 192 -webkit-box-flex: 0; | |
| 193 cursor: col-resize; | |
| 194 margin-left: -3px; | |
| 195 margin-right: -3px; | |
| 196 position: relative; | |
| 197 width: 6px; | |
| 198 z-index: 500; /* Must be below the contextmenu (600). */ | |
| 199 } | |
| 200 | |
| 201 #navigation-list { | |
| 202 -webkit-box-flex: 1; | |
| 203 -webkit-box-orient: vertical; | |
| 204 display: -webkit-box; | |
| 205 } | |
| 206 | |
| 207 #navigation-list > * { | |
| 208 height: 40px; | |
| 209 padding: 0 5px; | |
| 210 } | |
| 211 | |
| 212 #navigation-list > .accepts, | |
| 213 #navigation-list > [lead][selected], | |
| 214 #navigation-list > [lead], | |
| 215 #navigation-list > [selected], | |
| 216 #navigation-list > [anchor] { | |
| 217 background-color: rgb(225, 225, 225); | |
| 218 } | |
| 219 | |
| 220 #navigation-list:focus > .accepts, | |
| 221 #navigation-list:focus > [lead][selected], | |
| 222 #navigation-list:focus > [lead], | |
| 223 #navigation-list:focus > [selected], | |
| 224 #navigation-list:focus > [anchor] { | |
| 225 background-color: rgb(66, 129, 244); | |
| 226 color: white; | |
| 227 } | |
| 228 | |
| 229 #navigation-list li.root-item { | |
| 230 -webkit-box-align: center; | |
| 231 display: -webkit-box; | |
| 232 line-height: 22px; /* To accommodate for icons. */ | |
| 233 padding-left: 11px; | |
| 234 } | |
| 235 | |
| 236 #navigation-list li.root-item > .root-label { | |
| 237 -webkit-box-flex: 1; | |
| 238 margin: 0 2px; | |
| 239 overflow: hidden; | |
| 240 text-overflow: ellipsis; | |
| 241 white-space: nowrap; | |
| 242 } | |
| 243 | |
| 244 #navigation-list .volume-icon { | |
| 245 background-position: center 2px; | |
| 246 background-repeat: no-repeat; | |
| 247 height: 24px; | |
| 248 width: 24px; | |
| 249 } | |
| 250 | |
| 251 #middlebar-header { | |
| 252 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1); | |
| 253 -webkit-box-sizing: border-box; | |
| 254 -webkit-padding-start: 20px; | |
| 255 color: rgb(100, 100, 100); | |
| 256 height: 47px; | |
| 257 line-height: 40px; | |
| 258 overflow-x: hidden; | |
| 259 position: absolute; | |
| 260 text-overflow: ellipsis; | |
| 261 width: 100%; | |
| 262 } | |
| 263 | |
| 264 #directory-tree { | |
| 265 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1); | |
| 266 bottom: 0; | |
| 267 left: 0; | |
| 268 overflow-x: hidden; | |
| 269 overflow-y: auto; | |
| 270 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ | |
| 271 position: absolute; | |
| 272 right: 0; | |
| 273 top: 47px; | |
| 274 } | |
| 275 | |
| 276 #directory-tree .tree-row { | |
| 277 cursor: pointer; | |
| 278 display: -webkit-box; | |
| 279 line-height: 29px; | |
| 280 padding: 0 3px; | |
| 281 } | |
| 282 | |
| 283 /* For rows of subitems (non-top items) */ | |
| 284 #directory-tree .tree-children .tree-row { | |
| 285 line-height: 29px; | |
| 286 } | |
| 287 | |
| 288 #directory-tree .tree-row > .expand-icon { | |
| 289 height: 37px; | |
| 290 left: 3px; | |
| 291 margin: -13px; | |
| 292 right: 3px; | |
| 293 top: 0; | |
| 294 vertical-align: middle; | |
| 295 width: 37px; | |
| 296 } | |
| 297 | |
| 298 #directory-tree:focus .tree-row[selected] > .expand-icon { | |
| 299 background-image: -webkit-canvas(tree-triangle-inverted); | |
| 300 } | |
| 301 | |
| 302 #directory-tree .tree-row > .volume-icon { | |
| 303 background-position: center 2px; | |
| 304 background-repeat: no-repeat; | |
| 305 height: 24px; | |
| 306 vertical-align: middle; | |
| 307 width: 24px; | |
| 308 } | |
| 309 | |
| 310 #directory-tree .tree-row > .label { | |
| 311 -webkit-box-flex: 1; | |
| 312 display: block; | |
| 313 margin: 0 3px; | |
| 314 overflow-x: hidden; | |
| 315 text-overflow: ellipsis; | |
| 316 } | |
| 317 | |
| 318 #directory-tree .tree-item.accepts > .tree-row, | |
| 319 #directory-tree .tree-row[lead][selected], | |
| 320 #directory-tree .tree-row[lead], | |
| 321 #directory-tree .tree-row[selected], | |
| 322 #directory-tree .tree-row[anchor] { | |
| 323 background-color: rgb(204, 204, 204); | |
| 324 } | |
| 325 | |
| 326 #directory-tree .tree-item.accepts > .tree-row, | |
| 327 #directory-tree .tree-row[lead][selected], | |
| 328 #directory-tree .tree-row[lead], | |
| 329 #directory-tree .tree-row[selected], | |
| 330 #directory-tree .tree-row[anchor] { | |
| 331 background-color: rgb(225, 225, 225); | |
| 332 } | |
| 333 | |
| 334 #directory-tree:focus .tree-item.accepts > .tree-row, | |
| 335 #directory-tree:focus .tree-row[lead][selected], | |
| 336 #directory-tree:focus .tree-row[lead], | |
| 337 #directory-tree:focus .tree-row[selected], | |
| 338 #directory-tree:focus .tree-row[anchor] { | |
| 339 background-color: rgb(193, 209, 232); | |
| 340 } | |
| 341 | |
| 342 #directory-tree:focus .tree-item.accepts > .tree-row, | |
| 343 #directory-tree:focus .tree-row[lead][selected], | |
| 344 #directory-tree:focus .tree-row[lead], | |
| 345 #directory-tree:focus .tree-row[selected], | |
| 346 #directory-tree:focus .tree-row[anchor] { | |
| 347 background-color: rgb(66, 129, 244); | |
| 348 color: white; | |
| 349 } | |
| 350 | |
| 351 #navigation-list .root-item > div.root-eject { | |
| 352 background: -webkit-image-set( | |
| 353 url('../images/files/ui/eject.png') 1x, | |
| 354 url('../images/files/ui/2x/eject.png') 2x) no-repeat center; | |
| 355 cursor: pointer; | |
| 356 height: 20px; | |
| 357 margin-right: 6px; | |
| 358 opacity: 0.7; | |
| 359 transition: opacity 70ms linear; | |
| 360 vertical-align: middle; | |
| 361 width: 20px; | |
| 362 } | |
| 363 | |
| 364 #navigation-list:focus .root-item[selected] > div.root-eject { | |
| 365 background: -webkit-image-set( | |
| 366 url('../images/files/ui/eject_white.png') 1x, | |
| 367 url('../images/files/ui/2x/eject_white.png') 2x) no-repeat center; | |
| 368 opacity: 1; | |
| 369 } | |
| 370 | |
| 371 #directory-tree .root-item[disabled] { | |
| 372 opacity: 0.5; | |
| 373 pointer-events: none; | |
| 374 } | |
| 375 | |
| 376 /* Breadcrumbs and things under the title but above the list view. */ | |
| 377 .dialog-header { | |
| 378 -webkit-app-region: drag; | |
| 379 -webkit-box-align: center; | |
| 380 -webkit-box-orient: horizontal; | |
| 381 display: flex; | |
| 382 height: 48px; | |
| 383 margin: 0; | |
| 384 transition: all 180ms ease; | |
| 385 } | |
| 386 | |
| 387 /* Search box */ | |
| 388 | |
| 389 #search-box { | |
| 390 display: flex; | |
| 391 flex: auto; | |
| 392 } | |
| 393 | |
| 394 #search-box .icon { | |
| 395 -webkit-app-region: no-drag; | |
| 396 -webkit-padding-end: 0; | |
| 397 -webkit-padding-start: 10px; | |
| 398 background: transparent -webkit-image-set( | |
| 399 url(../images/files/ui/search_icon_inactive.png) 1x, | |
| 400 url(../images/files/ui/2x/search_icon_inactive.png) 2x) | |
| 401 no-repeat center; | |
| 402 flex: none; | |
| 403 height: 32px; | |
| 404 padding-bottom: 8px; | |
| 405 padding-top: 8px; | |
| 406 width: 32px; | |
| 407 } | |
| 408 | |
| 409 #search-box .icon:hover, | |
| 410 #search-box.has-cursor .icon, | |
| 411 #search-box.has-text .icon { | |
| 412 background-image: -webkit-image-set( | |
| 413 url(../images/files/ui/search_icon_active.png) 1x, | |
| 414 url(../images/files/ui/2x/search_icon_active.png) 2x); | |
| 415 } | |
| 416 | |
| 417 #search-box .full-size { | |
| 418 flex: 1 0 0; | |
| 419 } | |
| 420 | |
| 421 #search-box input { | |
| 422 -webkit-app-region: no-drag; | |
| 423 background-color: #fff; | |
| 424 border-style: none; | |
| 425 color: #333; | |
| 426 cursor: default; | |
| 427 display: block; | |
| 428 height: 48px; | |
| 429 line-height: 1em; | |
| 430 margin: 0; | |
| 431 max-width: 100%; | |
| 432 outline: none; | |
| 433 padding: 0; | |
| 434 } | |
| 435 | |
| 436 #search-box input::-webkit-search-cancel-button { | |
| 437 -webkit-appearance: none; | |
| 438 } | |
| 439 | |
| 440 #search-box.has-cursor input, | |
| 441 #search-box.has-text input { | |
| 442 cursor: text; | |
| 443 } | |
| 444 | |
| 445 #search-box .clear { | |
| 446 -webkit-app-region: no-drag; | |
| 447 -webkit-margin-end: 30px; | |
| 448 align-self: center; | |
| 449 background: -webkit-image-set( | |
| 450 url(../images/files/ui/search_clear.png) 1x, | |
| 451 url(../images/files/ui/2x/search_clear.png) 2x) | |
| 452 no-repeat center; | |
| 453 border: none; | |
| 454 display: none; | |
| 455 flex: none; | |
| 456 height: 12px; | |
| 457 min-height: 0; | |
| 458 min-width: 0; | |
| 459 outline: none; | |
| 460 padding: 0; | |
| 461 width: 12px; | |
| 462 } | |
| 463 | |
| 464 #search-box.has-text .clear { | |
| 465 display: block; | |
| 466 } | |
| 467 | |
| 468 #search-box .clear:hover { | |
| 469 background-image: -webkit-image-set( | |
| 470 url(../images/files/ui/search_clear_hover.png) 1x, | |
| 471 url(../images/files/ui/2x/search_clear_hover.png) 2x); | |
| 472 } | |
| 473 | |
| 474 #search-box .clear:active { | |
| 475 background-image: -webkit-image-set( | |
| 476 url(../images/files/ui/search_clear_pressed.png) 1x, | |
| 477 url(../images/files/ui/2x/search_clear_pressed.png) 2x); | |
| 478 } | |
| 479 | |
| 480 .topbutton-bar { | |
| 481 flex: none; | |
| 482 } | |
| 483 | |
| 484 /* Container for the detail and thumbnail list views. */ | |
| 485 .dialog-body { | |
| 486 -webkit-box-flex: 1; | |
| 487 -webkit-transition: all 180ms ease; | |
| 488 border-top: 1px solid rgba(20, 20, 22, 0.1); | |
| 489 position: relative; | |
| 490 } | |
| 491 | |
| 492 .main-panel { | |
| 493 bottom: 0; | |
| 494 display: -webkit-box; | |
| 495 left: 0; | |
| 496 position: absolute; | |
| 497 right: 0; | |
| 498 top: 0; | |
| 499 } | |
| 500 | |
| 501 .dialog-middlebar-contents { | |
| 502 display: -webkit-box; | |
| 503 max-width: 50%; | |
| 504 min-width: 45px; | |
| 505 position: relative; | |
| 506 width: 180px; | |
| 507 } | |
| 508 | |
| 509 /* Container for the ok/cancel buttons. */ | |
| 510 .dialog-footer { | |
| 511 -webkit-box-align: center; | |
| 512 -webkit-box-orient: horizontal; | |
| 513 border-top: 1px solid rgb(225, 225, 225); | |
| 514 display: -webkit-box; | |
| 515 outline: none; | |
| 516 padding: 10px; | |
| 517 } | |
| 518 | |
| 519 .progressable:not([progress]) .progress-bar, | |
| 520 .progressable:not([progress]) .preparing-label { | |
| 521 display: none; | |
| 522 } | |
| 523 | |
| 524 .progressable[progress] .ok, | |
| 525 .progressable[progress] #filename-input-box, | |
| 526 .progressable[progress] #preview-lines, | |
| 527 .progressable[progress] .file-type { | |
| 528 display: none; | |
| 529 } | |
| 530 | |
| 531 .progressable .progress-bar { | |
| 532 -webkit-box-flex: 1; | |
| 533 -webkit-margin-end: 20px; | |
| 534 -webkit-margin-start: 20px; | |
| 535 } | |
| 536 | |
| 537 /* The container for breadcrumb elements. */ | |
| 538 .breadcrumbs { | |
| 539 -webkit-box-align: center; | |
| 540 -webkit-box-flex: 1; | |
| 541 -webkit-box-orient: horizontal; | |
| 542 display: -webkit-box; | |
| 543 line-height: 20px; | |
| 544 overflow: hidden; | |
| 545 padding-top: 1px; | |
| 546 } | |
| 547 | |
| 548 #dir-breadcrumbs { | |
| 549 -webkit-margin-end: 5px; | |
| 550 -webkit-margin-start: 10px; | |
| 551 } | |
| 552 | |
| 553 /* The icon for offline mode */ | |
| 554 .offline-icon { | |
| 555 -webkit-margin-end: 0; | |
| 556 -webkit-margin-start: 10px; | |
| 557 background-image: -webkit-image-set( | |
| 558 url('../images/files/ui/offline.png') 1x, | |
| 559 url('../images/files/ui/2x/offline.png') 2x); | |
| 560 height: 16px; | |
| 561 opacity: 0; | |
| 562 transition-duration: 200ms; | |
| 563 transition-property: opacity; | |
| 564 transition-timing-function: ease-out; | |
| 565 width: 16px; | |
| 566 } | |
| 567 | |
| 568 /* Transition for '-webkit-margin-start' (or -end) property is not working. | |
| 569 * So I added .offline-icon-space to animate 'width' property. */ | |
| 570 .offline-icon-space { | |
| 571 -webkit-margin-end: 0; | |
| 572 -webkit-margin-start: -26px; /* Clear width of .offline-icon */ | |
| 573 transition-duration: 200ms; | |
| 574 transition-property: width; | |
| 575 transition-timing-function: ease-out; | |
| 576 width: 0; | |
| 577 } | |
| 578 | |
| 579 body[drive] .dialog-container[connection='offline'] .offline-icon, | |
| 580 body[drive] .dialog-container[connection='metered'] .offline-icon { | |
| 581 opacity: 1; | |
| 582 } | |
| 583 | |
| 584 body[drive] .dialog-container[connection='offline'] .offline-icon-space, | |
| 585 body[drive] .dialog-container[connection='metered'] .offline-icon-space { | |
| 586 width: 26px; | |
| 587 } | |
| 588 | |
| 589 .breadcrumbs > [collapsed]::before { | |
| 590 content: '...'; | |
| 591 } | |
| 592 | |
| 593 .breadcrumbs > [collapsed] { | |
| 594 width: 1em; | |
| 595 } | |
| 596 | |
| 597 /* A single directory name in the list of path breadcrumbs. */ | |
| 598 .breadcrumb-path { | |
| 599 color: #969696; | |
| 600 cursor: pointer; | |
| 601 overflow: hidden; | |
| 602 text-overflow: ellipsis; | |
| 603 white-space: nowrap; | |
| 604 } | |
| 605 | |
| 606 /* The final breadcrumb, representing the current directory. */ | |
| 607 #search-breadcrumbs .breadcrumb-path.breadcrumb-last { | |
| 608 color: #141414; | |
| 609 cursor: default; | |
| 610 } | |
| 611 | |
| 612 /* The > arrow between breadcrumbs. */ | |
| 613 | |
| 614 .breadcrumbs .separator { | |
| 615 background-image: -webkit-image-set( | |
| 616 url('../images/files/ui/breadcrumb-separator.png') 1x, | |
| 617 url('../images/files/ui/2x/breadcrumb-separator.png') 2x); | |
| 618 background-position: center center; | |
| 619 background-repeat: no-repeat; | |
| 620 height: 10px; | |
| 621 overflow: hidden; | |
| 622 width: 25px; | |
| 623 } | |
| 624 | |
| 625 #filename-input-box input { | |
| 626 border: 1px solid #c8c8c8; | |
| 627 border-radius: 1px; | |
| 628 box-sizing: border-box; | |
| 629 height: 31px; /* border-box */ | |
| 630 margin-right: 30px; | |
| 631 } | |
| 632 | |
| 633 .filelist-panel { | |
| 634 -webkit-box-flex: 1; | |
| 635 -webkit-box-orient: vertical; | |
| 636 display: -webkit-box; | |
| 637 } | |
| 638 | |
| 639 #list-container { | |
| 640 -webkit-box-flex: 1; | |
| 641 -webkit-box-orient: vertical; | |
| 642 display: -webkit-box; | |
| 643 position: relative; | |
| 644 } | |
| 645 | |
| 646 #detail-table { | |
| 647 -webkit-box-flex: 1; | |
| 648 -webkit-box-orient: vertical; | |
| 649 display: -webkit-box; | |
| 650 } | |
| 651 | |
| 652 #detail-table > list, | |
| 653 .thumbnail-grid { | |
| 654 -webkit-box-flex: 1; | |
| 655 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ | |
| 656 } | |
| 657 | |
| 658 #file-list .drag-selection-border { | |
| 659 -webkit-box-sizing: border-box; | |
| 660 background-color: rgba(255, 255, 255, 0.3); | |
| 661 border: 2px solid rgba(255, 255, 255, 0.6); | |
| 662 outline: 1px solid rgba(0, 0, 0, 0.1); | |
| 663 position: absolute; | |
| 664 z-index: 2; | |
| 665 } | |
| 666 | |
| 667 .spinner { | |
| 668 background: 100% url(../images/common/spinner.svg); | |
| 669 height: 16px; | |
| 670 left: 50%; | |
| 671 margin-left: -8px; | |
| 672 margin-top: -8px; | |
| 673 opacity: 0.5; | |
| 674 position: absolute; | |
| 675 top: 50%; | |
| 676 width: 16px; | |
| 677 } | |
| 678 | |
| 679 .spinner-layer { | |
| 680 background: url(../images/common/spinner.svg) center / 16px no-repeat; | |
| 681 bottom: 0; | |
| 682 left: 0; | |
| 683 position: absolute; | |
| 684 right: 0; | |
| 685 top: 0; | |
| 686 z-index: 525; | |
| 687 } | |
| 688 | |
| 689 .downloads-warning { | |
| 690 -webkit-box-align: center; | |
| 691 -webkit-box-orient: horizontal; | |
| 692 background-color: #f0f0f0; | |
| 693 background-image: -webkit-image-set( | |
| 694 url('../images/files/ui/warning_icon_square.png') 1x, | |
| 695 url('../images/files/ui/2x/warning_icon_square.png') 2x); | |
| 696 background-position: 15px center; | |
| 697 background-repeat: no-repeat; | |
| 698 color: #666; | |
| 699 display: -webkit-box; | |
| 700 font-size: 13px; | |
| 701 height: 57px; | |
| 702 overflow: hidden; | |
| 703 padding-left: 57px; /* Make space for the icon. */ | |
| 704 transition: height 70ms linear; | |
| 705 } | |
| 706 | |
| 707 .downloads-warning[hidden] { | |
| 708 display: -webkit-box !important; /* Overrides [hidden] for animation. */ | |
| 709 height: 0; | |
| 710 } | |
| 711 | |
| 712 @-webkit-keyframes heightAnimation { | |
| 713 0% { | |
| 714 height: 0; | |
| 715 display: -webkit-box; | |
| 716 } | |
| 717 } | |
| 718 | |
| 719 /* Drive space warning banner. */ | |
| 720 .volume-warning { | |
| 721 -webkit-animation: heightAnimation 70ms linear; | |
| 722 -webkit-box-align: center; | |
| 723 -webkit-box-orient: horizontal; | |
| 724 background-image: url(chrome://resources/images/clouds.png); | |
| 725 background-repeat: repeat-x; | |
| 726 background-size: 150px 44px; | |
| 727 color: #333; | |
| 728 display: -webkit-box; | |
| 729 font-size: 13px; | |
| 730 height: 44px; | |
| 731 overflow: hidden; | |
| 732 position: relative; | |
| 733 } | |
| 734 | |
| 735 .volume-warning[hidden] { | |
| 736 border-top-width: 0; | |
| 737 height: 0; | |
| 738 } | |
| 739 | |
| 740 .volume-warning .drive-icon { | |
| 741 background-image: -webkit-image-set( | |
| 742 url('../images/files/ui/drive_logo.png') 1x, | |
| 743 url('../images/files/ui/2x/drive_logo.png') 2x); | |
| 744 background-position: center; | |
| 745 background-repeat: no-repeat; | |
| 746 background-size: 25px 22px; | |
| 747 height: 44px; | |
| 748 width: 50px; | |
| 749 } | |
| 750 | |
| 751 .volume-warning .drive-text { | |
| 752 margin-right: 11px; | |
| 753 } | |
| 754 | |
| 755 /* The cr.ui.Grid representing the detailed file list. */ | |
| 756 .thumbnail-grid { | |
| 757 overflow-y: auto; | |
| 758 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ | |
| 759 width: 100%; | |
| 760 } | |
| 761 | |
| 762 body[type='full-page'] .thumbnail-frame > .img-container { | |
| 763 position: relative; | |
| 764 } | |
| 765 | |
| 766 body[type='full-page'] .thumbnail-frame > .img-container, | |
| 767 body[type='full-page'] .detail-name .detail-icon { | |
| 768 cursor: pointer; | |
| 769 } | |
| 770 | |
| 771 .img-container > img { | |
| 772 -webkit-user-drag: none; | |
| 773 position: absolute; | |
| 774 } | |
| 775 | |
| 776 .img-container > img:not(.cached):not(.drag-thumbnail) { | |
| 777 -webkit-animation: fadeIn 250ms linear; | |
| 778 } | |
| 779 | |
| 780 .thumbnail-bottom { | |
| 781 -webkit-box-align: center; | |
| 782 -webkit-box-orient: horizontal; | |
| 783 -webkit-box-pack: center; | |
| 784 bottom: 0; | |
| 785 cursor: auto; | |
| 786 display: -webkit-box; | |
| 787 left: 0; | |
| 788 padding: 0 10px; | |
| 789 position: absolute; | |
| 790 right: 0; | |
| 791 } | |
| 792 | |
| 793 .thumbnail-bottom .filename-label { | |
| 794 -webkit-box-flex: 1; | |
| 795 } | |
| 796 | |
| 797 /* Styles specific for the grid view. */ | |
| 798 | |
| 799 .thumbnail-grid .thumbnail-item { | |
| 800 -webkit-margin-start: 21px; | |
| 801 border: 3px solid transparent; /* Selection will make the border visible. */ | |
| 802 margin-top: 20px; | |
| 803 position: relative; | |
| 804 } | |
| 805 | |
| 806 .thumbnail-grid .thumbnail-frame { | |
| 807 background-color: rgb(245, 245, 245); | |
| 808 height: 120px; | |
| 809 overflow: hidden; | |
| 810 position: relative; | |
| 811 width: 160px; | |
| 812 } | |
| 813 | |
| 814 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame, | |
| 815 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame { | |
| 816 border-color: white; | |
| 817 } | |
| 818 | |
| 819 .thumbnail-grid .img-container { | |
| 820 height: 100%; | |
| 821 width: 100%; | |
| 822 } | |
| 823 | |
| 824 .thumbnail-grid .thumbnail-bottom { | |
| 825 background: rgba(0, 0, 0, 0.55); | |
| 826 color: #fff; | |
| 827 height: 30px; | |
| 828 } | |
| 829 | |
| 830 /* Padding counterweights negative margins of items, thus eliminating scroll | |
| 831 bar when it's not needed. Max height is set to fit 8 items before showing | |
| 832 scroll bar. */ | |
| 833 #default-actions-list { | |
| 834 max-height: 328px; | |
| 835 padding: 1px 0; | |
| 836 } | |
| 837 | |
| 838 #default-actions-list > li > * { | |
| 839 background-position: 5px center; | |
| 840 background-repeat: no-repeat; | |
| 841 background-size: 16px 16px; | |
| 842 padding-left: 26px; | |
| 843 } | |
| 844 | |
| 845 #list-container list > li[selected], | |
| 846 #list-container grid > li[selected], | |
| 847 #default-actions-list > li[selected] { | |
| 848 background-color: rgb(225, 225, 225); | |
| 849 } | |
| 850 | |
| 851 #list-container list:focus > li[selected], | |
| 852 #list-container grid:focus > li[selected], | |
| 853 #default-actions-list:focus > li[selected] { | |
| 854 background-color: rgb(66, 129, 244); | |
| 855 color: white; | |
| 856 } | |
| 857 | |
| 858 #list-container list > li.accepts[selected], | |
| 859 #list-container grid > li.accepts[selected] { | |
| 860 background-color: rgb(215, 215, 215); | |
| 861 } | |
| 862 | |
| 863 #list-container list:focus > li.accepts[selected], | |
| 864 #list-container grid:focus > li.accepts[selected] { | |
| 865 background-color: rgb(48, 125, 254); | |
| 866 } | |
| 867 | |
| 868 #list-container list > li.accepts, | |
| 869 #list-container grid > li.accepts { | |
| 870 background-color: #f1f1f1; | |
| 871 } | |
| 872 | |
| 873 #list-container.nohover grid > .accepts { | |
| 874 background-color: transparent; | |
| 875 } | |
| 876 | |
| 877 #directory-tree .tree-item.accepts > .tree-row, | |
| 878 #navigation-list > .accepts, | |
| 879 #list-container list > li.accepts, | |
| 880 #list-container grid > li.accepts { | |
| 881 -webkit-animation: acceptsBlink 200ms linear 1s 3; | |
| 882 } | |
| 883 | |
| 884 @-webkit-keyframes acceptsBlink { | |
| 885 0% { | |
| 886 background-color: transparent; | |
| 887 } | |
| 888 } | |
| 889 | |
| 890 .table-row-cell .selection-label { | |
| 891 -webkit-margin-end: 10px; | |
| 892 height: 15px; | |
| 893 } | |
| 894 | |
| 895 .table-row-cell .filename-label, | |
| 896 .thumbnail-item .filename-label, | |
| 897 /* Show ellipsis in cells. The name column has different structure and overrides | |
| 898 this rule. */ | |
| 899 .table-row-cell > div { | |
| 900 display: block; | |
| 901 overflow: hidden; | |
| 902 text-overflow: ellipsis; | |
| 903 white-space: nowrap; | |
| 904 } | |
| 905 | |
| 906 /* Text box used for renaming in the detail list. */ | |
| 907 .table-row-cell input.rename { | |
| 908 border-width: 0; | |
| 909 padding: 2px 0; | |
| 910 } | |
| 911 | |
| 912 input.rename:focus { | |
| 913 outline-color: rgb(77, 144, 254); | |
| 914 } | |
| 915 | |
| 916 input.rename { | |
| 917 font: inherit; | |
| 918 line-height: 1; | |
| 919 text-align: inherit; | |
| 920 } | |
| 921 | |
| 922 .table-row-cell .filename-label, | |
| 923 .table-row-cell input.rename { | |
| 924 -webkit-box-flex: 1; | |
| 925 } | |
| 926 | |
| 927 li[renaming=''] .filename-label { | |
| 928 display: none; | |
| 929 } | |
| 930 | |
| 931 /* Text box used for renaming in the thumbnail list. */ | |
| 932 .thumbnail-grid input.rename { | |
| 933 -webkit-margin-start: -1px; | |
| 934 box-sizing: border-box; | |
| 935 height: 20px; | |
| 936 width: 114px; | |
| 937 } | |
| 938 | |
| 939 /* The cr.ui.Table representing the detailed file list. */ | |
| 940 .detail-table { | |
| 941 width: 100%; | |
| 942 } | |
| 943 | |
| 944 /* Bottom pane describing current selection. */ | |
| 945 .preview-panel { | |
| 946 -webkit-box-align: center; | |
| 947 -webkit-box-orient: horizontal; | |
| 948 -webkit-transition: background-color 150ms ease; | |
| 949 background: linear-gradient( | |
| 950 to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1)); | |
| 951 border-top: 1px solid rgba(20, 20, 22, 0.1); | |
| 952 bottom: 0; | |
| 953 display: -webkit-box; | |
| 954 height: 51px; | |
| 955 left: 0; | |
| 956 opacity: 1; | |
| 957 padding: 0 10px 0 7px; | |
| 958 position: absolute; | |
| 959 right: 0; | |
| 960 z-index: 3; | |
| 961 } | |
| 962 | |
| 963 .preview-panel[visibility=hiding] { | |
| 964 -webkit-transform: translate(0, 5px); | |
| 965 opacity: 0; | |
| 966 /* Using all seems to cause preview panel and checkbox flicking issue. */ | |
| 967 transition: opacity 220ms ease, | |
| 968 -webkit-transform 220ms ease; | |
| 969 } | |
| 970 | |
| 971 .preview-panel[visibility=hidden] { | |
| 972 display: none; | |
| 973 opacity: 0; | |
| 974 } | |
| 975 | |
| 976 .preview-panel > .left, | |
| 977 .dialog-footer > .left { | |
| 978 -webkit-box-align: center; | |
| 979 -webkit-box-flex: 1; | |
| 980 -webkit-box-orient: horizontal; | |
| 981 display: -webkit-box; | |
| 982 } | |
| 983 | |
| 984 .preview-panel > .right, | |
| 985 .dialog-footer > .right { | |
| 986 -webkit-box-pack: end; | |
| 987 } | |
| 988 | |
| 989 .preview-panel .preparing-label { | |
| 990 -webkit-margin-start: 30px; | |
| 991 } | |
| 992 | |
| 993 .preview-panel .progress-bar { | |
| 994 -webkit-box-flex: 1; | |
| 995 } | |
| 996 | |
| 997 .preview-thumbnails { | |
| 998 -webkit-box-orient: horizontal; | |
| 999 display: -webkit-box; | |
| 1000 padding-left: 25px; | |
| 1001 } | |
| 1002 | |
| 1003 .preview-thumbnails > .img-container { | |
| 1004 background-color: white; | |
| 1005 background-size: 35px 35px; /* For file icons. */ | |
| 1006 border: 2px solid white; | |
| 1007 box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5); | |
| 1008 box-sizing: border-box; | |
| 1009 cursor: pointer; | |
| 1010 height: 35px; | |
| 1011 margin: 0 0 0 -25px; /* Overlapped images. */ | |
| 1012 overflow: hidden; | |
| 1013 position: relative; | |
| 1014 width: 35px; | |
| 1015 } | |
| 1016 | |
| 1017 .preview-thumbnails > .popup { | |
| 1018 -webkit-transform: translate(0, 3px) scale(0.95); | |
| 1019 background-color: #f2f2f2; | |
| 1020 border: 2px solid #fff; | |
| 1021 bottom: 8px; | |
| 1022 box-shadow: 0 0 0 1px #F0F0F0, | |
| 1023 0 0 0 2px #D0D0D0, | |
| 1024 2px 2px 6px rgba(0, 0, 0, 0.2); | |
| 1025 display: -webkit-flex; | |
| 1026 left: -8px; | |
| 1027 opacity: 0; | |
| 1028 pointer-events: none; | |
| 1029 position: absolute; | |
| 1030 transition: opacity 180ms ease-in 300ms, | |
| 1031 -webkit-transform 180ms ease-in 300ms; | |
| 1032 z-index: 1000; | |
| 1033 } | |
| 1034 | |
| 1035 .preview-thumbnails.has-zoom:hover > .popup { | |
| 1036 -webkit-transform: translate(0, 0) scale(1.0); | |
| 1037 opacity: 1; | |
| 1038 pointer-events: auto; | |
| 1039 } | |
| 1040 | |
| 1041 @-webkit-keyframes fadeIn { | |
| 1042 from { | |
| 1043 opacity: 0; | |
| 1044 } | |
| 1045 to { | |
| 1046 opacity: 1; | |
| 1047 } | |
| 1048 } | |
| 1049 | |
| 1050 .preview-thumbnails img { | |
| 1051 -webkit-animation: fadeIn 180ms ease-in-out; | |
| 1052 } | |
| 1053 | |
| 1054 .preview-thumbnails > .popup > img { | |
| 1055 -webkit-flex: 1 1 0; | |
| 1056 -webkit-user-drag: none; | |
| 1057 } | |
| 1058 | |
| 1059 /* Table splitter element */ | |
| 1060 .table-header-splitter { | |
| 1061 background-image: -webkit-image-set( | |
| 1062 url('../images/files/ui/vertical_separator.png') 1x, | |
| 1063 url('../images/files/ui/2x/vertical_separator.png') 2x); | |
| 1064 background-position: center; | |
| 1065 background-repeat: repeat-y; | |
| 1066 height: 20px; | |
| 1067 top: 10px; | |
| 1068 width: 5px; | |
| 1069 } | |
| 1070 | |
| 1071 .table-header-splitter:last-child { | |
| 1072 display: none; | |
| 1073 } | |
| 1074 | |
| 1075 /* Container for a table header. */ | |
| 1076 .table-header { | |
| 1077 box-sizing: border-box; | |
| 1078 height: 47px; | |
| 1079 } | |
| 1080 | |
| 1081 .table-header-sort-image-desc::after { | |
| 1082 -webkit-padding-start: 13px; | |
| 1083 background-image: -webkit-image-set( | |
| 1084 url('../images/files/ui/sort_desc.png') 1x, | |
| 1085 url('../images/files/ui/2x/sort_desc.png') 2x); | |
| 1086 background-position: center center; | |
| 1087 background-repeat: no-repeat; | |
| 1088 color: #888; | |
| 1089 content: '\00a0'; | |
| 1090 position: relative; | |
| 1091 top: 1px; | |
| 1092 } | |
| 1093 | |
| 1094 .table-header-sort-image-asc::after { | |
| 1095 -webkit-padding-start: 13px; | |
| 1096 background-image: -webkit-image-set( | |
| 1097 url('../images/files/ui/sort_asc.png') 1x, | |
| 1098 url('../images/files/ui/2x/sort_asc.png') 2x); | |
| 1099 background-position: center center; | |
| 1100 background-repeat: no-repeat; | |
| 1101 color: #888; | |
| 1102 content: '\00a0'; | |
| 1103 position: relative; | |
| 1104 top: -1px; | |
| 1105 } | |
| 1106 | |
| 1107 .preview-container .table-header { | |
| 1108 border-radius: 0 4px 0 0; | |
| 1109 } | |
| 1110 | |
| 1111 /* Text label in a table header. */ | |
| 1112 .table-header-label { | |
| 1113 color: rgb(100, 100, 100); | |
| 1114 line-height: 40px; | |
| 1115 margin: 0 7px; | |
| 1116 } | |
| 1117 | |
| 1118 .table-row-cell > * { | |
| 1119 -webkit-box-align: center; | |
| 1120 -webkit-box-flex: 1; | |
| 1121 -webkit-box-orient: horizontal; | |
| 1122 padding: 0 10px; | |
| 1123 } | |
| 1124 | |
| 1125 .table-row-cell { | |
| 1126 color: rgb(100, 100, 100); | |
| 1127 } | |
| 1128 | |
| 1129 .table-row-cell > .detail-name { | |
| 1130 display: -webkit-box; | |
| 1131 } | |
| 1132 | |
| 1133 .table-row-cell > .detail-name { | |
| 1134 color: rgb(0, 0, 0); | |
| 1135 } | |
| 1136 | |
| 1137 | |
| 1138 #list-container list:focus > [selected] .table-row-cell, | |
| 1139 #list-container list:focus > [selected] .detail-name { | |
| 1140 color: white; | |
| 1141 } | |
| 1142 | |
| 1143 .table-row-cell { | |
| 1144 -webkit-box-align: center; | |
| 1145 } | |
| 1146 | |
| 1147 #list-container li.table-row, | |
| 1148 #default-actions-list li { | |
| 1149 height: 29px; | |
| 1150 line-height: 29px; | |
| 1151 } | |
| 1152 | |
| 1153 /* The icon in the name column. See file_types.css for specific icons. */ | |
| 1154 .detail-icon { | |
| 1155 height: 24px; | |
| 1156 width: 24px; | |
| 1157 } | |
| 1158 | |
| 1159 #detail-table .detail-icon { | |
| 1160 /* To shift the icon position. */ | |
| 1161 margin-bottom: 2px; | |
| 1162 } | |
| 1163 | |
| 1164 .metadata-item { | |
| 1165 -webkit-box-flex: 1; | |
| 1166 -webkit-box-orient: horizontal; | |
| 1167 -webkit-padding-start: 8px; | |
| 1168 display: -webkit-box; | |
| 1169 } | |
| 1170 | |
| 1171 .metadata-label { | |
| 1172 -webkit-margin-end: 6px; | |
| 1173 } | |
| 1174 | |
| 1175 .preview-panel .spacer { | |
| 1176 -webkit-box-flex: 1; | |
| 1177 } | |
| 1178 | |
| 1179 #delete-button { | |
| 1180 min-width: 21px; /* overrride */ | |
| 1181 padding: 0; /* overrride */ | |
| 1182 width: 21px; | |
| 1183 } | |
| 1184 | |
| 1185 #delete-button::before { | |
| 1186 /* Background image should be specified in the before pseudo element because | |
| 1187 * border image fill is specified to delete-button. */ | |
| 1188 background: -webkit-image-set( | |
| 1189 url(../images/files/ui/onbutton_trash.png) 1x, | |
| 1190 url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center; | |
| 1191 content: ''; | |
| 1192 display: block; | |
| 1193 height: 100%; | |
| 1194 width: 100%; | |
| 1195 } | |
| 1196 | |
| 1197 #delete-button[disabled] { | |
| 1198 display: none; | |
| 1199 } | |
| 1200 | |
| 1201 #tasks-menu menuitem:not(.change-default) { | |
| 1202 background-position: left 10px center; | |
| 1203 padding-left: 32px; | |
| 1204 } | |
| 1205 | |
| 1206 #share-button { | |
| 1207 display: block; | |
| 1208 min-width: 0; /* overrride */ | |
| 1209 } | |
| 1210 | |
| 1211 #preview-lines { | |
| 1212 -webkit-box-flex: 1; | |
| 1213 -webkit-margin-end: 10px; | |
| 1214 -webkit-margin-start: 10px; | |
| 1215 vertical-align: middle; | |
| 1216 } | |
| 1217 | |
| 1218 /* The selection summary text at the bottom of the preview pane. */ | |
| 1219 .preview-summary { | |
| 1220 color: #666; | |
| 1221 overflow: hidden; | |
| 1222 text-overflow: ellipsis; | |
| 1223 vertical-align: middle; | |
| 1224 white-space: nowrap; | |
| 1225 } | |
| 1226 | |
| 1227 .preview-summary .calculating-size { | |
| 1228 margin-left: 5px; | |
| 1229 opacity: 0.5; | |
| 1230 } | |
| 1231 | |
| 1232 .detail-name > * { | |
| 1233 -webkit-box-align: center; | |
| 1234 display: -webkit-box; | |
| 1235 } | |
| 1236 | |
| 1237 /* Overriding input.common[type='checkbox'] rule in common.css. */ | |
| 1238 .detail-name > input.common[type='checkbox'] { | |
| 1239 -webkit-margin-end: 4px; | |
| 1240 -webkit-margin-start: -1px; | |
| 1241 border-color: #444; | |
| 1242 } | |
| 1243 | |
| 1244 list .detail-name > .file-checkbox::before, | |
| 1245 .pin::before { | |
| 1246 /* Invisible area that reacts on mouse events. */ | |
| 1247 content: ''; | |
| 1248 display: -webkit-box; | |
| 1249 height: 38px; | |
| 1250 left: -8px; | |
| 1251 position: absolute; | |
| 1252 right: -9px; | |
| 1253 top: -14px; | |
| 1254 } | |
| 1255 | |
| 1256 #filename-input-box { | |
| 1257 -webkit-box-align: center; | |
| 1258 -webkit-box-flex: 1; | |
| 1259 display: -webkit-box; | |
| 1260 } | |
| 1261 | |
| 1262 #filename-input-box input { | |
| 1263 -webkit-box-flex: 1; | |
| 1264 display: -webkit-box; | |
| 1265 padding: 1px 2px; | |
| 1266 } | |
| 1267 | |
| 1268 #filename-input-box .filename-label { | |
| 1269 -webkit-box-orient: horizontal; | |
| 1270 background-color: white; | |
| 1271 color: #333; | |
| 1272 display: -webkit-box; | |
| 1273 padding-right: 4px; | |
| 1274 } | |
| 1275 | |
| 1276 body:not([type='saveas-file']) #filename-input-box { | |
| 1277 display: none; | |
| 1278 } | |
| 1279 | |
| 1280 /* A vertical spring. */ | |
| 1281 .vertical-spacer { | |
| 1282 -webkit-box-flex: 1; | |
| 1283 -webkit-box-orient: vertical; | |
| 1284 display: -webkit-box; | |
| 1285 } | |
| 1286 | |
| 1287 /* Dimmed items */ | |
| 1288 | |
| 1289 body[type='folder'] .file, | |
| 1290 body[type='upload-folder'] .file, | |
| 1291 body[drive] .dialog-container[connection='offline'] .dim-offline { | |
| 1292 opacity: 0.4; | |
| 1293 } | |
| 1294 | |
| 1295 /* Overlay pane covering the entire file manager window (e.g. image editor)*/ | |
| 1296 .overlay-pane { | |
| 1297 -webkit-app-region: no-drag; | |
| 1298 border: none; | |
| 1299 height: 100%; | |
| 1300 left: 0; | |
| 1301 position: absolute; | |
| 1302 top: 0; | |
| 1303 width: 100%; | |
| 1304 z-index: 1000; /* Must be above all elements in file manager container. */ | |
| 1305 } | |
| 1306 | |
| 1307 /* When the overlay pane is visible hide everything else so that the tab order | |
| 1308 is not confused. */ | |
| 1309 body[overlay-visible] > :not(.overlay-pane) { | |
| 1310 display: none !important; | |
| 1311 } | |
| 1312 | |
| 1313 /* Invisible container for elements representing files while dragging. */ | |
| 1314 #drag-container { | |
| 1315 left: 0; | |
| 1316 /* Hack for extra margins caused by setDragImage(). */ | |
| 1317 padding: 1000px 0 0 1000px; | |
| 1318 position: fixed; | |
| 1319 top: 0; | |
| 1320 z-index: -1; /* below .dialog-container */ | |
| 1321 } | |
| 1322 | |
| 1323 #drag-container .drag-contents { | |
| 1324 -webkit-box-orient: horizontal; | |
| 1325 background-color: #fafafa; | |
| 1326 border: 1px solid #bbb; | |
| 1327 border-radius: 3px; | |
| 1328 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2); | |
| 1329 display: -webkit-box; | |
| 1330 margin-bottom: 5px; | |
| 1331 padding: 6px; | |
| 1332 transition: opacity 200ms ease-in; | |
| 1333 } | |
| 1334 | |
| 1335 #drag-container .drag-contents.for-image { | |
| 1336 padding: 2px; | |
| 1337 } | |
| 1338 | |
| 1339 #drag-container .thumbnail-item { | |
| 1340 -webkit-box-orient: horizontal; | |
| 1341 display: -webkit-box; | |
| 1342 } | |
| 1343 | |
| 1344 /* When changing these properties please preserve these conditions: | |
| 1345 1. width == height (so that the rotated thumbnail does not look off-center) | |
| 1346 2. width % 8 == 0 (to minimize rounding errors in the centering code) */ | |
| 1347 #drag-container .img-container { | |
| 1348 -webkit-box-flex: 0; | |
| 1349 display: -webkit-box; | |
| 1350 height: 64px; | |
| 1351 overflow: hidden; | |
| 1352 position: relative; | |
| 1353 width: 64px; | |
| 1354 } | |
| 1355 | |
| 1356 #drag-container .label { | |
| 1357 -webkit-box-flex: 1; | |
| 1358 font-weight: bold; | |
| 1359 line-height: 24px; | |
| 1360 max-width: 320px; | |
| 1361 overflow: hidden; | |
| 1362 padding: 0 5px; | |
| 1363 text-overflow: ellipsis; | |
| 1364 white-space: nowrap; | |
| 1365 } | |
| 1366 | |
| 1367 menu.file-context-menu { | |
| 1368 z-index: 600; /* Must be below the overlay pane (1000). */ | |
| 1369 } | |
| 1370 | |
| 1371 menu.chrome-menu hr { | |
| 1372 color: transparent; | |
| 1373 font-size: 0; | |
| 1374 } | |
| 1375 | |
| 1376 div.offline { | |
| 1377 -webkit-box-pack: center; | |
| 1378 display: -webkit-box; | |
| 1379 } | |
| 1380 | |
| 1381 div.offline > * { | |
| 1382 -webkit-box-align: center; | |
| 1383 display: -webkit-box; | |
| 1384 } | |
| 1385 | |
| 1386 div.shade { | |
| 1387 /* transition: opacity 1000ms linear; */ | |
| 1388 background-color: rgba(255, 255, 255, 0.8); | |
| 1389 bottom: 0; | |
| 1390 left: 0; | |
| 1391 opacity: 0; | |
| 1392 position: absolute; | |
| 1393 right: 0; | |
| 1394 top: 0; | |
| 1395 } | |
| 1396 | |
| 1397 div.shade[fadein] { | |
| 1398 opacity: 1; | |
| 1399 } | |
| 1400 | |
| 1401 /* Message panel for unmounted Drive */ | |
| 1402 #unmounted-panel, | |
| 1403 #format-panel { | |
| 1404 bottom: 0; | |
| 1405 color: #333; | |
| 1406 display: none; | |
| 1407 left: 0; | |
| 1408 padding-left: 50px; | |
| 1409 padding-top: 20px; | |
| 1410 position: absolute; | |
| 1411 right: 0; | |
| 1412 top: 0; | |
| 1413 } | |
| 1414 | |
| 1415 body[drive='mounting'] .dialog-container #unmounted-panel, | |
| 1416 body[drive='error'] .dialog-container #unmounted-panel, | |
| 1417 body[unformatted] .dialog-container #format-panel { | |
| 1418 display: block; | |
| 1419 } | |
| 1420 | |
| 1421 body[drive='unmounted'] .dialog-container .filelist-panel, | |
| 1422 body[drive='mounting'] .dialog-container .filelist-panel, | |
| 1423 body[drive='error'] .dialog-container .filelist-panel, | |
| 1424 body[unformatted] .dialog-container .filelist-panel { | |
| 1425 /* Hide file list when Drive is not mounted. | |
| 1426 Use opacity to avoid manual resizing.*/ | |
| 1427 opacity: 0; | |
| 1428 } | |
| 1429 | |
| 1430 #unmounted-panel > *, | |
| 1431 #format-panel > * { | |
| 1432 -webkit-box-align: center; | |
| 1433 -webkit-box-orient: horizontal; | |
| 1434 -webkit-box-pack: start; | |
| 1435 display: none; | |
| 1436 height: 22px; | |
| 1437 margin-bottom: 10px; | |
| 1438 } | |
| 1439 | |
| 1440 #unmounted-panel > .loading { | |
| 1441 position: relative; | |
| 1442 } | |
| 1443 | |
| 1444 #unmounted-panel > .loading > .spinner-box { | |
| 1445 bottom: 0; | |
| 1446 position: absolute; | |
| 1447 right: 100%; | |
| 1448 top: 0; | |
| 1449 width: 40px; | |
| 1450 } | |
| 1451 | |
| 1452 body[unformatted] #format-panel > .error, | |
| 1453 body[drive='mounting'] #unmounted-panel > .loading, | |
| 1454 body[drive='error'] #unmounted-panel > .error, | |
| 1455 #format-panel > #format-button, | |
| 1456 #unmounted-panel.retry-enabled > .learn-more { | |
| 1457 display: -webkit-box; | |
| 1458 } | |
| 1459 | |
| 1460 .plain-link { | |
| 1461 color: rgb(17, 85, 204); | |
| 1462 cursor: pointer; | |
| 1463 text-decoration: none; | |
| 1464 } | |
| 1465 | |
| 1466 .buttonbar > * { | |
| 1467 position: relative; | |
| 1468 } | |
| 1469 | |
| 1470 .buttonbar .tooltip, | |
| 1471 .topbutton-bar .tooltip { | |
| 1472 right: -12px; | |
| 1473 top: 35px; | |
| 1474 } | |
| 1475 | |
| 1476 /* Tooltips */ | |
| 1477 .tooltip { | |
| 1478 background: #2d2d2d; | |
| 1479 border-radius: 0; | |
| 1480 box-shadow: 1px 2px 4px #ccc; | |
| 1481 box-sizing: border-box; | |
| 1482 color: white; | |
| 1483 display: block; | |
| 1484 font-size: 11px; | |
| 1485 font-weight: bold; | |
| 1486 height: 29px; | |
| 1487 line-height: 29px; | |
| 1488 margin-left: -20px; | |
| 1489 min-width: 50px; | |
| 1490 opacity: 0; | |
| 1491 outline: 1px solid rgba(255, 255, 255, 0.5); | |
| 1492 padding: 0 10px; | |
| 1493 pointer-events: none; | |
| 1494 position: absolute; | |
| 1495 text-align: center; | |
| 1496 top: 5px; | |
| 1497 white-space: nowrap; | |
| 1498 z-index: 600; /* Must be below the overlay pane (1000). */ | |
| 1499 } | |
| 1500 | |
| 1501 .tooltip::after, | |
| 1502 .tooltip::before { | |
| 1503 border-left: 5px solid transparent; | |
| 1504 border-right: 5px solid transparent; | |
| 1505 border-top: transparent; | |
| 1506 content: ''; | |
| 1507 display: block; | |
| 1508 margin-left: -5px; | |
| 1509 position: absolute; | |
| 1510 right: 24px; | |
| 1511 top: -5px; | |
| 1512 } | |
| 1513 | |
| 1514 .tooltip::after { | |
| 1515 border-bottom: 5px solid #2d2d2d; | |
| 1516 } | |
| 1517 | |
| 1518 .tooltip::before { | |
| 1519 border-bottom: 5px solid rgba(255, 255, 255, 0.5); | |
| 1520 } | |
| 1521 | |
| 1522 /* Show with delay, disappear instantly */ | |
| 1523 @-webkit-keyframes tooltip-show { | |
| 1524 0% { opacity: 0; } | |
| 1525 90% { opacity: 0; } | |
| 1526 100% { opacity: 1; } | |
| 1527 } | |
| 1528 | |
| 1529 :hover > .tooltip { | |
| 1530 -webkit-animation-duration: 800ms; | |
| 1531 -webkit-animation-iteration-count: 1; | |
| 1532 -webkit-animation-name: tooltip-show; | |
| 1533 -webkit-animation-timing-function: linear; | |
| 1534 opacity: 1; | |
| 1535 } | |
| 1536 | |
| 1537 #no-search-results { | |
| 1538 bottom: 0; | |
| 1539 display: none; | |
| 1540 left: 0; | |
| 1541 padding: 10px; | |
| 1542 position: absolute; | |
| 1543 right: 0; | |
| 1544 top: 28px; /* Leave room for the file list header. */ | |
| 1545 } | |
| 1546 | |
| 1547 .dialog-container:not([drive-welcome='page']) #no-search-results[show] { | |
| 1548 display: block; | |
| 1549 } | |
| 1550 | |
| 1551 #volume-space-info-contents { | |
| 1552 -webkit-box-align: center; | |
| 1553 display: -webkit-box; | |
| 1554 } | |
| 1555 | |
| 1556 #volume-space-info-contents > div { | |
| 1557 -webkit-box-flex: 1; | |
| 1558 -webkit-margin-start: 15px; | |
| 1559 display: -webkit-box; | |
| 1560 } | |
| 1561 | |
| 1562 #list-container .table-header-inner { | |
| 1563 height: 100%; | |
| 1564 } | |
| 1565 | |
| 1566 #list-container .table-header-cell:hover { | |
| 1567 background-color: inherit; | |
| 1568 } | |
| 1569 | |
| 1570 #list-container .table-header-cell:first-child { | |
| 1571 -webkit-box-sizing: border-box; | |
| 1572 -webkit-padding-start: 8px; | |
| 1573 } | |
| 1574 | |
| 1575 #new-folder-button { | |
| 1576 margin-right: 30px; | |
| 1577 } | |
| 1578 | |
| 1579 #default-action-dialog { | |
| 1580 min-width: 300px; | |
| 1581 width: auto; | |
| 1582 } | |
| 1583 | |
| 1584 .drive-welcome-wrapper { | |
| 1585 /* drive_welcome.css will override it once loaded. */ | |
| 1586 display: none; | |
| 1587 } | |
| 1588 | |
| 1589 list.autocomplete-suggestions { | |
| 1590 -webkit-margin-before: -7px; | |
| 1591 -webkit-margin-start: -38px; | |
| 1592 background-color: rgb(250, 250, 250); | |
| 1593 border-radius: 3px; | |
| 1594 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); | |
| 1595 box-sizing: border-box; /* To match the width with the search box's. */ | |
| 1596 color: rgb(34, 34, 34); | |
| 1597 overflow: hidden; | |
| 1598 padding: 5px 0; | |
| 1599 position: fixed; | |
| 1600 width: 300px !important; /* This overrides the value specified by script. */ | |
| 1601 z-index: 550; | |
| 1602 } | |
| 1603 | |
| 1604 list.autocomplete-suggestions > li { | |
| 1605 -webkit-box-align: center; | |
| 1606 display: -webkit-box; | |
| 1607 padding: 3px 0; | |
| 1608 } | |
| 1609 | |
| 1610 list.autocomplete-suggestions > li > div.detail-icon { | |
| 1611 -webkit-margin-end: 6px; | |
| 1612 -webkit-margin-start: 6px; | |
| 1613 } | |
| 1614 | |
| 1615 list.autocomplete-suggestions > li > div.detail-text { | |
| 1616 -webkit-box-flex: 1; | |
| 1617 overflow-x: hidden; | |
| 1618 text-overflow: ellipsis; | |
| 1619 } | |
| 1620 | |
| 1621 list.autocomplete-suggestions > li > div.detail-text em { | |
| 1622 color: rgb(150, 150, 150); | |
| 1623 font-style: normal; | |
| 1624 } | |
| 1625 | |
| 1626 list.autocomplete-suggestions > li > div[search-icon] { | |
| 1627 background: -webkit-image-set( | |
| 1628 url('../images/files/ui/search_icon_active.png') 1x, | |
| 1629 url('../images/files/ui/2x/search_icon_active.png') 2x) center no-repeat; | |
| 1630 } | |
| 1631 | |
| 1632 list.autocomplete-suggestions > li[selected] > div[search-icon], | |
| 1633 list.autocomplete-suggestions > li[lead] > div[search-icon] { | |
| 1634 background: -webkit-image-set( | |
| 1635 url('../images/files/ui/search_icon_white.png') 1x, | |
| 1636 url('../images/files/ui/2x/search_icon_white.png') 2x) center no-repeat; | |
| 1637 } | |
| 1638 | |
| 1639 list.autocomplete-suggestions > [selected], | |
| 1640 list.autocomplete-suggestions > [lead] { | |
| 1641 background-color: rgb(66, 129, 244); | |
| 1642 color: white; | |
| 1643 } | |
| 1644 | |
| 1645 list.autocomplete-suggestions > [selected] > div.detail-text em, | |
| 1646 list.autocomplete-suggestions > [lead] > div.detail-text em { | |
| 1647 color: white; | |
| 1648 } | |
| 1649 | |
| 1650 #gear-menu { | |
| 1651 margin-top: 8px; | |
| 1652 } | |
| 1653 | |
| 1654 #gear-menu > menuitem:not(.menuitem-button) { | |
| 1655 -webkit-margin-end: 50px; | |
| 1656 } | |
| 1657 | |
| 1658 /* View buttons in the gear menu. */ | |
| 1659 | |
| 1660 menuitem#detail-view { | |
| 1661 background-image: -webkit-image-set( | |
| 1662 url('../images/files/ui/button_list_view.png') 1x, | |
| 1663 url('../images/files/ui/2x/button_list_view.png') 2x); | |
| 1664 } | |
| 1665 | |
| 1666 menuitem#detail-view[selected]:not([disabled]), | |
| 1667 menuitem#detail-view[lead]:not([disabled]) { | |
| 1668 background-image: -webkit-image-set( | |
| 1669 url('../images/files/ui/button_list_view_white.png') 1x, | |
| 1670 url('../images/files/ui/2x/button_list_view_white.png') 2x); | |
| 1671 } | |
| 1672 | |
| 1673 menuitem#thumbnail-view { | |
| 1674 background-image: -webkit-image-set( | |
| 1675 url('../images/files/ui/button_mosaic_view.png') 1x, | |
| 1676 url('../images/files/ui/2x/button_mosaic_view.png') 2x); | |
| 1677 } | |
| 1678 | |
| 1679 menuitem#thumbnail-view[selected]:not([disabled]), | |
| 1680 menuitem#thumbnail-view[lead]:not([disabled]) { | |
| 1681 background-image: -webkit-image-set( | |
| 1682 url('../images/files/ui/button_mosaic_view_white.png') 1x, | |
| 1683 url('../images/files/ui/2x/button_mosaic_view_white.png') 2x); | |
| 1684 } | |
| 1685 | |
| 1686 #iframe-drag-area { | |
| 1687 -webkit-app-region: drag; | |
| 1688 height: 48px; | |
| 1689 left: 64px; | |
| 1690 position: absolute; | |
| 1691 right: 134px; | |
| 1692 top: 0; | |
| 1693 width: auto; | |
| 1694 z-index: 101; | |
| 1695 } | |
| 1696 | |
| 1697 #suggest-app-dialog { | |
| 1698 background-color: #fff; | |
| 1699 border: 0; | |
| 1700 padding: 0; | |
| 1701 width: auto; | |
| 1702 } | |
| 1703 | |
| 1704 #suggest-app-dialog .cr-dialog-title { | |
| 1705 /* Entire height: 44px (content-box 22px + padding 11px * 2) */ | |
| 1706 font-size: 16px; | |
| 1707 height: 22px; | |
| 1708 margin: 0; | |
| 1709 padding: 11px 18px; | |
| 1710 } | |
| 1711 | |
| 1712 #suggest-app-dialog #webview-container { | |
| 1713 border-bottom: solid 1px #bbb; | |
| 1714 border-top: solid 1px #bbb; | |
| 1715 position: relative; | |
| 1716 } | |
| 1717 | |
| 1718 #suggest-app-dialog.show-spinner #webview-container webview { | |
| 1719 pointer-events: none; | |
| 1720 } | |
| 1721 | |
| 1722 #suggest-app-dialog:not(.show-spinner) .spinner-layer { | |
| 1723 display: none; | |
| 1724 } | |
| 1725 | |
| 1726 #suggest-app-dialog .spinner-layer { | |
| 1727 background-color: rgba(255, 255, 255, 0.7); | |
| 1728 } | |
| 1729 | |
| 1730 #suggest-app-dialog .cr-dialog-buttons, | |
| 1731 #suggest-app-dialog .cr-dialog-ok, | |
| 1732 #suggest-app-dialog .cr-dialog-cancel { | |
| 1733 display: none; | |
| 1734 } | |
| 1735 | |
| 1736 #suggest-app-dialog .cr-dialog-text { | |
| 1737 -webkit-padding-after: 10px; | |
| 1738 -webkit-padding-before: 0; | |
| 1739 -webkit-padding-end: 20px; | |
| 1740 -webkit-padding-start: 20px; | |
| 1741 margin: 0; | |
| 1742 } | |
| 1743 | |
| 1744 #suggest-app-dialog #buttons { | |
| 1745 background: #eee; | |
| 1746 width: 100%; | |
| 1747 } | |
| 1748 | |
| 1749 #suggest-app-dialog #buttons > #webstore-button { | |
| 1750 -webkit-padding-after: 10px; | |
| 1751 -webkit-padding-before: 10px; | |
| 1752 -webkit-padding-end: 10px; | |
| 1753 -webkit-padding-start: 36px; | |
| 1754 background-image: -webkit-image-set( | |
| 1755 url('chrome://theme/IDR_WEBSTORE_ICON_16') 1x, | |
| 1756 url('chrome://theme/IDR_WEBSTORE_ICON_16@2x') 2x); | |
| 1757 background-position: 12px center; | |
| 1758 background-repeat: no-repeat; | |
| 1759 color: #00f; | |
| 1760 cursor: pointer; | |
| 1761 display: inline-block; | |
| 1762 height: 16px; | |
| 1763 } | |
| 1764 | |
| 1765 .cr-dialog-frame.error-dialog-frame { | |
| 1766 width: 300px; | |
| 1767 } | |
| 1768 | |
| 1769 .error-dialog-frame .error-dialog-img { | |
| 1770 background-image: -webkit-image-set( | |
| 1771 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC') 1x, | |
| 1772 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x') 2x); | |
| 1773 background-position: center; | |
| 1774 background-repeat: no-repeat; | |
| 1775 height: 40px; | |
| 1776 } | |
| 1777 | |
| 1778 .error-dialog-frame .cr-dialog-cancel { | |
| 1779 display: none; | |
| 1780 } | |
| 1781 | |
| 1782 .error-dialog-frame .cr-dialog-close, | |
| 1783 .error-dialog-frame .cr-dialog-title { | |
| 1784 display: none; | |
| 1785 } | |
| 1786 | |
| 1787 .error-dialog-frame .cr-dialog-text { | |
| 1788 text-align: center; | |
| 1789 } | |
| 1790 | |
| 1791 .cr-dialog-frame.share-dialog-frame { | |
| 1792 background-color: white; | |
| 1793 width: auto; | |
| 1794 } | |
| 1795 | |
| 1796 .share-dialog-webview-wrapper { | |
| 1797 height: 100px; | |
| 1798 margin-top: 10px; | |
| 1799 min-width: 300px; | |
| 1800 overflow: hidden; | |
| 1801 transition: height 200ms ease; | |
| 1802 } | |
| 1803 | |
| 1804 .share-dialog-webview { | |
| 1805 height: 100%; | |
| 1806 width: 100%; | |
| 1807 } | |
| 1808 | |
| 1809 .share-dialog-webview-wrapper:not(.loaded) .share-dialog-webview { | |
| 1810 visibility: hidden; | |
| 1811 } | |
| 1812 | |
| 1813 .share-dialog-frame .cr-dialog-text, | |
| 1814 .share-dialog-frame .cr-dialog-buttons { | |
| 1815 display: none; | |
| 1816 } | |
| 1817 | |
| 1818 #multi-profile-share-dialog .mail-label { | |
| 1819 padding-right: 16px; | |
| 1820 } | |
| 1821 | |
| 1822 #multi-profile-share-dialog .mail-label::after { | |
| 1823 content: ':'; | |
| 1824 } | |
| 1825 | |
| 1826 #multi-profile-share-dialog .share-line { | |
| 1827 margin: 8px 16px; | |
| 1828 } | |
| 1829 | |
| 1830 #conflict-confirm-dialog .cr-dialog-buttons { | |
| 1831 align-items: baseline; | |
| 1832 display: flex; | |
| 1833 } | |
| 1834 | |
| 1835 #conflict-confirm-dialog input[type=checkbox] { | |
| 1836 -webkit-margin-start: -2px; | |
| 1837 width: auto; | |
| 1838 } | |
| 1839 | |
| 1840 #conflict-confirm-dialog label { | |
| 1841 flex: 1 0 auto; | |
| 1842 } | |
| 1843 | |
| 1844 /* Progress center */ | |
| 1845 | |
| 1846 @-webkit-keyframes progress-center-toggle { | |
| 1847 /* Height values of each frame are set by script. | |
| 1848 * Keep the animation sync with JS. */ | |
| 1849 from { | |
| 1850 } | |
| 1851 to { | |
| 1852 } | |
| 1853 } | |
| 1854 | |
| 1855 #progress-center { | |
| 1856 background-color: transparent; | |
| 1857 border-top: 1px solid transparent; | |
| 1858 overflow: hidden; | |
| 1859 position: relative; | |
| 1860 transition: background-color 300ms linear, | |
| 1861 border 300ms linear; | |
| 1862 } | |
| 1863 | |
| 1864 #progress-center.opened { | |
| 1865 background-color: #ebebeb; | |
| 1866 border-top: 1px solid #d8d8d8; | |
| 1867 } | |
| 1868 | |
| 1869 #progress-center.animated { | |
| 1870 -webkit-animation: progress-center-toggle 300ms ease-out; | |
| 1871 } | |
| 1872 | |
| 1873 #progress-center-open-view { | |
| 1874 opacity: 1; | |
| 1875 padding-top: 10px; | |
| 1876 transition: opacity 300ms linear; | |
| 1877 } | |
| 1878 | |
| 1879 #progress-center:not(.opened) #progress-center-open-view { | |
| 1880 opacity: 0; | |
| 1881 pointer-events: none; | |
| 1882 position: absolute; | |
| 1883 } | |
| 1884 | |
| 1885 #progress-center-close-view { | |
| 1886 opacity: 1; | |
| 1887 transition: opacity 300ms linear; | |
| 1888 } | |
| 1889 | |
| 1890 #progress-center.opened #progress-center-close-view { | |
| 1891 opacity: 0; | |
| 1892 pointer-events: none; | |
| 1893 position: absolute; | |
| 1894 } | |
| 1895 | |
| 1896 #progress-center.animated #progress-center-open-view, | |
| 1897 #progress-center.animated #progress-center-close-view { | |
| 1898 left: 0; | |
| 1899 pointer-events: none; | |
| 1900 position: absolute; | |
| 1901 right: 0; | |
| 1902 top: 0; | |
| 1903 z-index: 1; | |
| 1904 } | |
| 1905 | |
| 1906 #progress-center li { | |
| 1907 -webkit-padding-end: 10px; | |
| 1908 display: flex; | |
| 1909 /* This must not be margin-bottom to calculate parent's height correctly. */ | |
| 1910 padding-bottom: 20px; | |
| 1911 } | |
| 1912 | |
| 1913 #progress-center label { | |
| 1914 color: #777; | |
| 1915 display: block; | |
| 1916 overflow: hidden; | |
| 1917 text-overflow: ellipsis; | |
| 1918 white-space: nowrap; | |
| 1919 } | |
| 1920 | |
| 1921 #progress-center li.error.single label { | |
| 1922 white-space: normal; | |
| 1923 } | |
| 1924 | |
| 1925 #progress-center .progress-frame { | |
| 1926 -webkit-padding-end: 10px; | |
| 1927 -webkit-padding-start: 20px; | |
| 1928 flex: 1 0 0; | |
| 1929 } | |
| 1930 | |
| 1931 #progress-center .progress-bar { | |
| 1932 background: #d8d8d8; | |
| 1933 border-radius: 3px; | |
| 1934 display: inline-block; | |
| 1935 height: 6px; | |
| 1936 opacity: 1; | |
| 1937 overflow: hidden; | |
| 1938 width: 100%; | |
| 1939 } | |
| 1940 | |
| 1941 #progress-center li.error .progress-bar, | |
| 1942 #progress-center li.quiet .progress-bar { | |
| 1943 display: none; | |
| 1944 } | |
| 1945 | |
| 1946 #progress-center .progress-track { | |
| 1947 background: #787878; | |
| 1948 height: 100%; | |
| 1949 } | |
| 1950 | |
| 1951 #progress-center .progress-track.animated { | |
| 1952 transition: width 300ms linear; | |
| 1953 } | |
| 1954 | |
| 1955 #progress-center .button-frame { | |
| 1956 align-self: flex-end; | |
| 1957 flex: none; | |
| 1958 } | |
| 1959 | |
| 1960 #progress-center button { | |
| 1961 border: none; | |
| 1962 cursor: pointer; | |
| 1963 display: inline-block; | |
| 1964 height: 12px; | |
| 1965 min-height: 0; | |
| 1966 min-width: 0; | |
| 1967 outline: none; | |
| 1968 padding: 0; | |
| 1969 vertical-align: middle; | |
| 1970 width: 12px; | |
| 1971 } | |
| 1972 | |
| 1973 #progress-center li.error.single .button-frame { | |
| 1974 display: none; | |
| 1975 } | |
| 1976 | |
| 1977 #progress-center button.close { | |
| 1978 -webkit-margin-end: 10px; | |
| 1979 -webkit-margin-start: auto; | |
| 1980 background: -webkit-image-set( | |
| 1981 url(../images/files/ui/process_drawer_button_opened.png) 1x, | |
| 1982 url(../images/files/ui/2x/process_drawer_button_opened.png) 2x) | |
| 1983 no-repeat; | |
| 1984 display: block; | |
| 1985 margin-bottom: 20px; | |
| 1986 } | |
| 1987 | |
| 1988 #progress-center button.close:hover { | |
| 1989 background: -webkit-image-set( | |
| 1990 url(../images/files/ui/process_drawer_button_opened_hover.png) 1x, | |
| 1991 url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x) | |
| 1992 no-repeat; | |
| 1993 } | |
| 1994 | |
| 1995 #progress-center button.close:active { | |
| 1996 background: -webkit-image-set( | |
| 1997 url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x, | |
| 1998 url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x) | |
| 1999 no-repeat; | |
| 2000 } | |
| 2001 | |
| 2002 #progress-center button.open { | |
| 2003 background: -webkit-image-set( | |
| 2004 url(../images/files/ui/process_drawer_button_closed.png) 1x, | |
| 2005 url(../images/files/ui/2x/process_drawer_button_closed.png) 2x) | |
| 2006 no-repeat; | |
| 2007 } | |
| 2008 | |
| 2009 #progress-center button.open:hover { | |
| 2010 background: -webkit-image-set( | |
| 2011 url(../images/files/ui/process_drawer_button_closed_hover.png) 1x, | |
| 2012 url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x) | |
| 2013 no-repeat; | |
| 2014 } | |
| 2015 | |
| 2016 #progress-center button.open:active { | |
| 2017 background: -webkit-image-set( | |
| 2018 url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x, | |
| 2019 url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x) | |
| 2020 no-repeat; | |
| 2021 } | |
| 2022 | |
| 2023 #progress-center button.cancel { | |
| 2024 background: -webkit-image-set( | |
| 2025 url(../images/files/ui/close_bar.png) 1x, | |
| 2026 url(../images/files/ui/2x/close_bar.png) 2x) | |
| 2027 no-repeat; | |
| 2028 } | |
| 2029 | |
| 2030 #progress-center-close-view:not(.single) button.cancel { | |
| 2031 display: none; | |
| 2032 } | |
| 2033 | |
| 2034 #progress-center-close-view.single button.open { | |
| 2035 display: none; | |
| 2036 } | |
| 2037 | |
| 2038 #progress-center li:not(.cancelable) button.cancel { | |
| 2039 visibility: hidden; | |
| 2040 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 247123002:
Move Files.app files to ui/file_manager (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src