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

   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 }