src/ui/file_manager/file_manager/foreground/css/file_manager.css

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