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 .scrollbar-vertical > .scrollbar-button.scrolling {
 101   opacity: 0.3;
 102 }
 103
 104 .scrollbar-vertical > .scrollbar-button:hover {
 105   opacity: 0.4;
 106 }
 107
 108 .scrollbar-vertical > .scrollbar-button.pressed {
 109   opacity: 0.5;
 110 }
 111
 112 /* Main part of the dialog between header and footer. */
 113 .dialog-container {
 114   -webkit-box-align: stretch;
 115   -webkit-box-flex: 1;
 116   -webkit-box-orient: horizontal;
 117   background-color: white;  /* Makes #drag-container invisible. */
 118   border-radius: 2px;
 119   display: -webkit-box;
 120   overflow: hidden;
 121   position: relative;
 122 }
 123
 124 /* The style applied when a modal dialog box overlap the dialog container. */
 125 .dialog-container.disable-header-drag .dialog-navigation-list-header,
 126 .dialog-container.disable-header-drag .dialog-header {
 127   -webkit-app-region: no-drag;
 128 }
 129
 130 /* List/grid and preview are inside this container. */
 131 .dialog-main {
 132   -webkit-box-align: stretch;
 133   -webkit-box-flex: 1;
 134   -webkit-box-orient: vertical;
 135   display: -webkit-box;
 136 }
 137
 138 /* Directory tree at the left. */
 139 .dialog-navigation-list {
 140   -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
 141   -webkit-box-flex: 0;
 142   -webkit-box-orient: vertical;
 143   background-color: #f1f1f1;
 144   display: flex;
 145   flex-direction: column;
 146   max-width: 40%;
 147   min-width: 100px;
 148   overflow: hidden;
 149   position: relative;
 150   width: 150px;
 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 #profile-badge {
 161   display: inline-block;
 162   height: 29px;  /* Size of a profile image. */
 163   margin: 8px;
 164   vertical-align: top;
 165   width: 29px;  /* Size of a profile image. */
 166 }
 167
 168 .dialog-navigation-list-header #app-name {
 169   color: #303030;
 170   font-size: 130%;
 171   margin: 0 15px;
 172 }
 173
 174 .dialog-navigation-list-header #profile-badge:not([hidden]) + #app-name {
 175   margin: 0;
 176 }
 177
 178 .dialog-navigation-list-contents {
 179   display: -webkit-box;
 180   flex: 1 1 auto;
 181   position: relative;
 182 }
 183
 184 .dialog-navigation-list-footer {
 185   display: -webkit-flex;
 186   flex: none;
 187   flex-direction: column;
 188 }
 189
 190 /* A vertical splitter between the roots list and the file list. It is actually
 191    a transparent area centered on the roots list right border.*/
 192 div.splitter {
 193   -webkit-box-flex: 0;
 194   cursor: col-resize;
 195   margin-left: -3px;
 196   margin-right: -3px;
 197   position: relative;
 198   width: 6px;
 199   z-index: 500;  /* Must be below the contextmenu (600). */
 200 }
 201
 202 #navigation-list {
 203   -webkit-box-flex: 1;
 204   -webkit-box-orient: vertical;
 205   display: -webkit-box;
 206 }
 207
 208 #navigation-list > * {
 209   height: 40px;
 210   padding: 0 5px;
 211 }
 212
 213 #navigation-list > .accepts,
 214 #navigation-list > [lead][selected],
 215 #navigation-list > [lead],
 216 #navigation-list > [selected],
 217 #navigation-list > [anchor] {
 218   background-color: rgb(225, 225, 225);
 219 }
 220
 221 #navigation-list:focus > .accepts,
 222 #navigation-list:focus > [lead][selected],
 223 #navigation-list:focus > [lead],
 224 #navigation-list:focus > [selected],
 225 #navigation-list:focus > [anchor] {
 226   background-color: rgb(66, 129, 244);
 227   color: white;
 228 }
 229
 230 #navigation-list li.root-item {
 231   -webkit-box-align: center;
 232   display: -webkit-box;
 233   line-height: 22px;  /* To accommodate for icons. */
 234   padding-left: 11px;
 235 }
 236
 237 #navigation-list li.root-item > .root-label {
 238   -webkit-box-flex: 1;
 239   margin: 0 2px;
 240   overflow: hidden;
 241   text-overflow: ellipsis;
 242   white-space: nowrap;
 243 }
 244
 245 #navigation-list .volume-icon {
 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 html[dir='rtl'] .breadcrumbs .separator {
 626   -webkit-transform: scaleX(-1);
 627 }
 628
 629 #filename-input-box input {
 630   border: 1px solid #c8c8c8;
 631   border-radius: 1px;
 632   box-sizing: border-box;
 633   height: 31px;  /* border-box */
 634   margin-right: 30px;
 635 }
 636
 637 .filelist-panel {
 638   -webkit-box-flex: 1;
 639   -webkit-box-orient: vertical;
 640   display: -webkit-box;
 641 }
 642
 643 #list-container {
 644   -webkit-box-flex: 1;
 645   -webkit-box-orient: vertical;
 646   display: -webkit-box;
 647   position: relative;
 648 }
 649
 650 #detail-table {
 651   -webkit-box-flex: 1;
 652   -webkit-box-orient: vertical;
 653   display: -webkit-box;
 654 }
 655
 656 #detail-table > list,
 657 .thumbnail-grid {
 658   -webkit-box-flex: 1;
 659   padding-bottom: 0;  /* For the preview panel. Will be overridden by JS. */
 660 }
 661
 662 #file-list .drag-selection-border {
 663   -webkit-box-sizing: border-box;
 664   background-color: rgba(255, 255, 255, 0.3);
 665   border: 2px solid rgba(255, 255, 255, 0.6);
 666   outline: 1px solid rgba(0, 0, 0, 0.1);
 667   position: absolute;
 668   z-index: 2;
 669 }
 670
 671 .spinner {
 672   background: 100% url(../images/common/spinner.svg);
 673   height: 16px;
 674   left: 50%;
 675   margin-left: -8px;
 676   margin-top: -8px;
 677   opacity: 0.5;
 678   position: absolute;
 679   top: 50%;
 680   width: 16px;
 681 }
 682
 683 .spinner-layer {
 684   background: url(../images/common/spinner.svg) center / 16px no-repeat;
 685   bottom: 0;
 686   left: 0;
 687   position: absolute;
 688   right: 0;
 689   top: 0;
 690   z-index: 525;
 691 }
 692
 693 .downloads-warning {
 694   -webkit-box-align: center;
 695   -webkit-box-orient: horizontal;
 696   background-color: #f0f0f0;
 697   background-image: -webkit-image-set(
 698     url('../images/files/ui/warning_icon_square.png') 1x,
 699     url('../images/files/ui/2x/warning_icon_square.png') 2x);
 700   background-position: 15px center;
 701   background-repeat: no-repeat;
 702   color: #666;
 703   display: -webkit-box;
 704   font-size: 13px;
 705   height: 57px;
 706   overflow: hidden;
 707   padding-left: 57px;  /* Make space for the icon. */
 708   transition: height 70ms linear;
 709 }
 710
 711 .downloads-warning[hidden] {
 712   display: -webkit-box !important;  /* Overrides [hidden] for animation. */
 713   height: 0;
 714 }
 715
 716 @-webkit-keyframes heightAnimation {
 717   0% {
 718     height: 0;
 719     display: -webkit-box;
 720   }
 721 }
 722
 723 /* Drive space warning banner. */
 724 .volume-warning {
 725   -webkit-animation: heightAnimation 70ms linear;
 726   -webkit-box-align: center;
 727   -webkit-box-orient: horizontal;
 728   background-image: url(chrome://resources/images/clouds.png);
 729   background-repeat: repeat-x;
 730   background-size: 150px 44px;
 731   color: #333;
 732   display: -webkit-box;
 733   font-size: 13px;
 734   height: 44px;
 735   overflow: hidden;
 736   position: relative;
 737 }
 738
 739 .volume-warning[hidden] {
 740   border-top-width: 0;
 741   height: 0;
 742 }
 743
 744 .volume-warning .drive-icon {
 745   background-image: -webkit-image-set(
 746     url('../images/files/ui/drive_logo.png') 1x,
 747     url('../images/files/ui/2x/drive_logo.png') 2x);
 748   background-position: center;
 749   background-repeat: no-repeat;
 750   background-size: 25px 22px;
 751   height: 44px;
 752   width: 50px;
 753 }
 754
 755 .volume-warning .drive-text {
 756   margin-right: 11px;
 757 }
 758
 759 /* The cr.ui.Grid representing the detailed file list. */
 760 .thumbnail-grid {
 761   overflow-y: auto;
 762   padding-bottom: 0;  /* For the preview panel. Will be overridden by JS. */
 763   width: 100%;
 764 }
 765
 766 body[type='full-page'] .thumbnail-frame > .img-container {
 767   position: relative;
 768 }
 769
 770 body[type='full-page'] .thumbnail-frame > .img-container,
 771 body[type='full-page'] .detail-name .detail-icon {
 772   cursor: pointer;
 773 }
 774
 775 .img-container > img {
 776   -webkit-user-drag: none;
 777   position: absolute;
 778 }
 779
 780 .img-container > img:not(.cached):not(.drag-thumbnail) {
 781   -webkit-animation: fadeIn 250ms linear;
 782 }
 783
 784 .thumbnail-bottom {
 785   -webkit-box-align: center;
 786   -webkit-box-orient: horizontal;
 787   -webkit-box-pack: center;
 788   bottom: 0;
 789   cursor: auto;
 790   display: -webkit-box;
 791   left: 0;
 792   padding: 0 10px;
 793   position: absolute;
 794   right: 0;
 795 }
 796
 797 .thumbnail-bottom .filename-label {
 798   -webkit-box-flex: 1;
 799 }
 800
 801 /* Styles specific for the grid view. */
 802
 803 .thumbnail-grid .thumbnail-item {
 804   -webkit-margin-start: 21px;
 805   border: 3px solid transparent;  /* Selection will make the border visible. */
 806   margin-top: 20px;
 807   position: relative;
 808 }
 809
 810 .thumbnail-grid .thumbnail-frame {
 811   background-color: rgb(245, 245, 245);
 812   height: 120px;
 813   overflow: hidden;
 814   position: relative;
 815   width: 160px;
 816 }
 817
 818 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame,
 819 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame {
 820   border-color: white;
 821 }
 822
 823 .thumbnail-grid .img-container {
 824   height: 100%;
 825   width: 100%;
 826 }
 827
 828 .thumbnail-grid .thumbnail-bottom {
 829   background: rgba(0, 0, 0, 0.55);
 830   color: #fff;
 831   height: 30px;
 832 }
 833
 834 /* Padding counterweights negative margins of items, thus eliminating scroll
 835    bar when it's not needed. Max height is set to fit 8 items before showing
 836    scroll bar. */
 837 #default-actions-list {
 838   max-height: 328px;
 839   padding: 1px 0;
 840 }
 841
 842 #default-actions-list > li > * {
 843   background-position: 5px center;
 844   background-repeat: no-repeat;
 845   background-size: 16px 16px;
 846   padding-left: 26px;
 847 }
 848
 849 #list-container list > li[selected],
 850 #list-container grid > li[selected],
 851 #default-actions-list > li[selected] {
 852   background-color: rgb(225, 225, 225);
 853 }
 854
 855 #list-container list:focus > li[selected],
 856 #list-container grid:focus > li[selected],
 857 #default-actions-list:focus > li[selected] {
 858   background-color: rgb(66, 129, 244);
 859   color: white;
 860 }
 861
 862 #list-container list > li.accepts[selected],
 863 #list-container grid > li.accepts[selected] {
 864   background-color: rgb(215, 215, 215);
 865 }
 866
 867 #list-container list:focus > li.accepts[selected],
 868 #list-container grid:focus > li.accepts[selected] {
 869   background-color: rgb(48, 125, 254);
 870 }
 871
 872 #list-container list > li.accepts,
 873 #list-container grid > li.accepts {
 874   background-color: #f1f1f1;
 875 }
 876
 877 #list-container.nohover grid > .accepts {
 878   background-color: transparent;
 879 }
 880
 881 #directory-tree .tree-item.accepts > .tree-row,
 882 #navigation-list > .accepts,
 883 #list-container list > li.accepts,
 884 #list-container grid > li.accepts {
 885   -webkit-animation: acceptsBlink 200ms linear 1s 3;
 886 }
 887
 888 @-webkit-keyframes acceptsBlink {
 889   0% {
 890     background-color: transparent;
 891   }
 892 }
 893
 894 .table-row-cell .selection-label {
 895   -webkit-margin-end: 10px;
 896   height: 15px;
 897 }
 898
 899 .table-row-cell .filename-label,
 900 .thumbnail-item .filename-label,
 901 /* Show ellipsis in cells. The name column has different structure and overrides
 902    this rule. */
 903 .table-row-cell > div {
 904   display: block;
 905   overflow: hidden;
 906   text-overflow: ellipsis;
 907   white-space: nowrap;
 908 }
 909
 910 /* Text box used for renaming in the detail list. */
 911 .table-row-cell input.rename {
 912   border-width: 0;
 913   padding: 2px 0;
 914 }
 915
 916 input.rename:focus {
 917   outline-color: rgb(77, 144, 254);
 918 }
 919
 920 input.rename {
 921   font: inherit;
 922   line-height: 1;
 923   text-align: inherit;
 924 }
 925
 926 .table-row-cell .filename-label,
 927 .table-row-cell input.rename {
 928   -webkit-box-flex: 1;
 929 }
 930
 931 li[renaming=''] .filename-label {
 932   display: none;
 933 }
 934
 935 /* Text box used for renaming in the thumbnail list. */
 936 .thumbnail-grid input.rename {
 937   -webkit-margin-start: -1px;
 938   box-sizing: border-box;
 939   height: 20px;
 940   width: 114px;
 941 }
 942
 943 /* The cr.ui.Table representing the detailed file list. */
 944 .detail-table {
 945   width: 100%;
 946 }
 947
 948 /* Bottom pane describing current selection. */
 949 .preview-panel {
 950   -webkit-box-align: center;
 951   -webkit-box-orient: horizontal;
 952   -webkit-transition: background-color 150ms ease;
 953   background: linear-gradient(
 954       to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
 955   border-top: 1px solid rgba(20, 20, 22, 0.1);
 956   bottom: 0;
 957   display: -webkit-box;
 958   height: 51px;
 959   left: 0;
 960   opacity: 1;
 961   padding: 0 10px 0 7px;
 962   position: absolute;
 963   right: 0;
 964   z-index: 3;
 965 }
 966
 967 .preview-panel[visibility=hiding] {
 968   -webkit-transform: translate(0, 5px);
 969   opacity: 0;
 970   /* Using all seems to cause preview panel and checkbox flicking issue. */
 971   transition: opacity 220ms ease,
 972               -webkit-transform 220ms ease;
 973 }
 974
 975 .preview-panel[visibility=hidden] {
 976   display: none;
 977   opacity: 0;
 978 }
 979
 980 .preview-panel > .left,
 981 .dialog-footer > .left {
 982   -webkit-box-align: center;
 983   -webkit-box-flex: 1;
 984   -webkit-box-orient: horizontal;
 985   display: -webkit-box;
 986 }
 987
 988 .preview-panel > .right,
 989 .dialog-footer > .right {
 990   -webkit-box-pack: end;
 991 }
 992
 993 .preview-panel .preparing-label {
 994   -webkit-margin-start: 30px;
 995 }
 996
 997 .preview-panel .progress-bar {
 998   -webkit-box-flex: 1;
 999 }
1000
1001 .preview-thumbnails {
1002   -webkit-box-orient: horizontal;
1003   display: -webkit-box;
1004   padding-left: 25px;
1005 }
1006
1007 .preview-thumbnails > .img-container {
1008   background-color: white;
1009   background-size: 35px 35px;  /* For file icons. */
1010   border: 2px solid white;
1011   box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5);
1012   box-sizing: border-box;
1013   cursor: pointer;
1014   height: 35px;
1015   margin: 0 0 0 -25px;  /* Overlapped images. */
1016   overflow: hidden;
1017   position: relative;
1018   width: 35px;
1019 }
1020
1021 .preview-thumbnails > .popup {
1022   -webkit-transform: translate(0, 3px) scale(0.95);
1023   background-color: #f2f2f2;
1024   border: 2px solid #fff;
1025   bottom: 8px;
1026   box-shadow: 0 0 0 1px #F0F0F0,
1027               0 0 0 2px #D0D0D0,
1028               2px 2px 6px rgba(0, 0, 0, 0.2);
1029   display: -webkit-flex;
1030   left: -8px;
1031   opacity: 0;
1032   pointer-events: none;
1033   position: absolute;
1034   transition: opacity 180ms ease-in 300ms,
1035               -webkit-transform 180ms ease-in 300ms;
1036   z-index: 1000;
1037 }
1038
1039 .preview-thumbnails.has-zoom:hover > .popup {
1040   -webkit-transform: translate(0, 0) scale(1.0);
1041   opacity: 1;
1042   pointer-events: auto;
1043 }
1044
1045 @-webkit-keyframes fadeIn {
1046   from {
1047     opacity: 0;
1048   }
1049   to {
1050     opacity: 1;
1051   }
1052 }
1053
1054 .preview-thumbnails img {
1055   -webkit-animation: fadeIn 180ms ease-in-out;
1056 }
1057
1058 .preview-thumbnails > .popup > img {
1059   -webkit-flex: 1 1 0;
1060   -webkit-user-drag: none;
1061 }
1062
1063 /* Table splitter element */
1064 .table-header-splitter {
1065   background-image: -webkit-image-set(
1066     url('../images/files/ui/vertical_separator.png') 1x,
1067     url('../images/files/ui/2x/vertical_separator.png') 2x);
1068   background-position: center;
1069   background-repeat: repeat-y;
1070   height: 20px;
1071   top: 10px;
1072   width: 5px;
1073 }
1074
1075 .table-header-splitter:last-child {
1076   display: none;
1077 }
1078
1079 /* Container for a table header. */
1080 .table-header {
1081   box-sizing: border-box;
1082   height: 47px;
1083 }
1084
1085 .table-header-sort-image-desc::after {
1086   -webkit-padding-start: 13px;
1087   background-image: -webkit-image-set(
1088     url('../images/files/ui/sort_desc.png') 1x,
1089     url('../images/files/ui/2x/sort_desc.png') 2x);
1090   background-position: center center;
1091   background-repeat: no-repeat;
1092   color: #888;
1093   content: '\00a0';
1094   position: relative;
1095   top: 1px;
1096 }
1097
1098 .table-header-sort-image-asc::after {
1099   -webkit-padding-start: 13px;
1100   background-image: -webkit-image-set(
1101     url('../images/files/ui/sort_asc.png') 1x,
1102     url('../images/files/ui/2x/sort_asc.png') 2x);
1103   background-position: center center;
1104   background-repeat: no-repeat;
1105   color: #888;
1106   content: '\00a0';
1107   position: relative;
1108   top: -1px;
1109 }
1110
1111 .preview-container .table-header {
1112   border-radius: 0 4px 0 0;
1113 }
1114
1115 /* Text label in a table header. */
1116 .table-header-label {
1117   color: rgb(100, 100, 100);
1118   line-height: 40px;
1119   margin: 0 7px;
1120 }
1121
1122 .table-row-cell > * {
1123   -webkit-box-align: center;
1124   -webkit-box-flex: 1;
1125   -webkit-box-orient: horizontal;
1126   padding: 0 10px;
1127 }
1128
1129 .table-row-cell {
1130   color: rgb(100, 100, 100);
1131 }
1132
1133 .table-row-cell > .detail-name {
1134   display: -webkit-box;
1135 }
1136
1137 .table-row-cell > .detail-name {
1138   color: rgb(0, 0, 0);
1139 }
1140
1141
1142 #list-container list:focus > [selected] .table-row-cell,
1143 #list-container list:focus > [selected] .detail-name {
1144   color: white;
1145 }
1146
1147 .table-row-cell {
1148   -webkit-box-align: center;
1149 }
1150
1151 #list-container li.table-row,
1152 #default-actions-list li {
1153   height: 29px;
1154   line-height: 29px;
1155 }
1156
1157 /* The icon in the name column. See file_types.css for specific icons. */
1158 .detail-icon {
1159   height: 24px;
1160   width: 24px;
1161 }
1162
1163 #detail-table .detail-icon {
1164   /* To shift the icon position. */
1165   margin-bottom: 2px;
1166 }
1167
1168 .metadata-item {
1169   -webkit-box-flex: 1;
1170   -webkit-box-orient: horizontal;
1171   -webkit-padding-start: 8px;
1172   display: -webkit-box;
1173 }
1174
1175 .metadata-label {
1176   -webkit-margin-end: 6px;
1177 }
1178
1179 .preview-panel .spacer {
1180   -webkit-box-flex: 1;
1181 }
1182
1183 #delete-button {
1184   min-width: 21px;  /* overrride */
1185   padding: 0;  /* overrride */
1186   width: 21px;
1187 }
1188
1189 #delete-button::before {
1190   /* Background image should be specified in the before pseudo element because
1191    * border image fill is specified to delete-button. */
1192   background: -webkit-image-set(
1193     url(../images/files/ui/onbutton_trash.png) 1x,
1194     url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center;
1195   content: '';
1196   display: block;
1197   height: 100%;
1198   width: 100%;
1199 }
1200
1201 #delete-button[disabled] {
1202   display: none;
1203 }
1204
1205 #tasks-menu menuitem:not(.change-default) {
1206   background-position: left 10px center;
1207   padding-left: 32px;
1208 }
1209
1210 #share-button {
1211   display: block;
1212   min-width: 0;  /* overrride */
1213 }
1214
1215 #preview-lines {
1216   -webkit-box-flex: 1;
1217   -webkit-margin-end: 10px;
1218   -webkit-margin-start: 10px;
1219   vertical-align: middle;
1220 }
1221
1222 /* The selection summary text at the bottom of the preview pane. */
1223 .preview-summary {
1224   color: #666;
1225   overflow: hidden;
1226   text-overflow: ellipsis;
1227   vertical-align: middle;
1228   white-space: nowrap;
1229 }
1230
1231 .preview-summary .calculating-size {
1232   margin-left: 5px;
1233   opacity: 0.5;
1234 }
1235
1236 .detail-name > * {
1237   -webkit-box-align: center;
1238   display: -webkit-box;
1239 }
1240
1241 /* Overriding input.common[type='checkbox'] rule in common.css. */
1242 .detail-name > input.common[type='checkbox'] {
1243   -webkit-margin-end: 4px;
1244   -webkit-margin-start: -1px;
1245   border-color: #444;
1246 }
1247
1248 list .detail-name > .file-checkbox::before,
1249 .pin::before {
1250   /* Invisible area that reacts on mouse events. */
1251   content: '';
1252   display: -webkit-box;
1253   height: 38px;
1254   left: -8px;
1255   position: absolute;
1256   right: -9px;
1257   top: -14px;
1258 }
1259
1260 #filename-input-box {
1261   -webkit-box-align: center;
1262   -webkit-box-flex: 1;
1263   display: -webkit-box;
1264 }
1265
1266 #filename-input-box input {
1267   -webkit-box-flex: 1;
1268   display: -webkit-box;
1269   padding: 1px 2px;
1270 }
1271
1272 #filename-input-box .filename-label {
1273   -webkit-box-orient: horizontal;
1274   background-color: white;
1275   color: #333;
1276   display: -webkit-box;
1277   padding-right: 4px;
1278 }
1279
1280 body:not([type='saveas-file']) #filename-input-box {
1281   display: none;
1282 }
1283
1284 /* A vertical spring. */
1285 .vertical-spacer {
1286   -webkit-box-flex: 1;
1287   -webkit-box-orient: vertical;
1288   display: -webkit-box;
1289 }
1290
1291 /* Dimmed items */
1292
1293 body[type='folder'] .file,
1294 body[type='upload-folder'] .file,
1295 body[drive] .dialog-container[connection='offline'] .dim-offline {
1296   opacity: 0.4;
1297 }
1298
1299 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
1300 .overlay-pane {
1301   -webkit-app-region: no-drag;
1302   border: none;
1303   height: 100%;
1304   left: 0;
1305   position: absolute;
1306   top: 0;
1307   width: 100%;
1308   z-index: 1000;  /* Must be above all elements in file manager container. */
1309 }
1310
1311 /* When the overlay pane is visible hide everything else so that the tab order
1312   is not confused. */
1313 body[overlay-visible] > :not(.overlay-pane) {
1314   display: none !important;
1315 }
1316
1317 /* Invisible container for elements representing files while dragging. */
1318 #drag-container {
1319   left: 0;
1320   position: fixed;
1321   top: 0;
1322   z-index: -1;  /* below .dialog-container */
1323 }
1324
1325 #drag-container .drag-contents {
1326   -webkit-box-orient: horizontal;
1327   background-color: #fafafa;
1328   border: 1px solid #bbb;
1329   border-radius: 3px;
1330   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
1331   display: -webkit-box;
1332   line-height: 0;
1333   margin-bottom: 5px;
1334   padding: 6px;
1335   transition: opacity 200ms ease-in;
1336 }
1337
1338 #drag-container .drag-contents.for-image  {
1339   padding: 2px;
1340 }
1341
1342 #drag-container .thumbnail-item {
1343   -webkit-box-orient: horizontal;
1344   display: -webkit-box;
1345 }
1346
1347 #drag-container .label {
1348   -webkit-box-flex: 1;
1349   font-weight: bold;
1350   line-height: 24px;
1351   max-width: 320px;
1352   overflow: hidden;
1353   padding: 0 5px;
1354   text-overflow: ellipsis;
1355   white-space: nowrap;
1356 }
1357
1358 menu.file-context-menu {
1359   z-index: 600;  /* Must be below the overlay pane (1000). */
1360 }
1361
1362 menu.chrome-menu hr {
1363   color: transparent;
1364   font-size: 0;
1365 }
1366
1367 div.offline {
1368   -webkit-box-pack: center;
1369   display: -webkit-box;
1370 }
1371
1372 div.offline > * {
1373   -webkit-box-align: center;
1374   display: -webkit-box;
1375 }
1376
1377 div.shade {
1378   /* transition: opacity 1000ms linear; */
1379   background-color: rgba(255, 255, 255, 0.8);
1380   bottom: 0;
1381   left: 0;
1382   opacity: 0;
1383   position: absolute;
1384   right: 0;
1385   top: 0;
1386 }
1387
1388 div.shade[fadein] {
1389   opacity: 1;
1390 }
1391
1392 /* Message panel for unmounted Drive */
1393 #unmounted-panel,
1394 #format-panel {
1395   bottom: 0;
1396   color: #333;
1397   display: none;
1398   left: 0;
1399   padding-left: 50px;
1400   padding-top: 20px;
1401   position: absolute;
1402   right: 0;
1403   top: 0;
1404 }
1405
1406 body[drive='mounting'] .dialog-container #unmounted-panel,
1407 body[drive='error'] .dialog-container #unmounted-panel,
1408 body[unformatted] .dialog-container #format-panel {
1409   display: block;
1410 }
1411
1412 body[drive='unmounted'] .dialog-container .filelist-panel,
1413 body[drive='mounting'] .dialog-container .filelist-panel,
1414 body[drive='error'] .dialog-container .filelist-panel,
1415 body[unformatted] .dialog-container .filelist-panel {
1416   /* Hide file list when Drive is not mounted.
1417      Use opacity to avoid manual resizing.*/
1418   opacity: 0;
1419 }
1420
1421 #unmounted-panel > *,
1422 #format-panel > * {
1423   -webkit-box-align: center;
1424   -webkit-box-orient: horizontal;
1425   -webkit-box-pack: start;
1426   display: none;
1427   height: 22px;
1428   margin-bottom: 10px;
1429 }
1430
1431 #unmounted-panel > .loading {
1432   position: relative;
1433 }
1434
1435 #unmounted-panel > .loading > .spinner-box {
1436   bottom: 0;
1437   position: absolute;
1438   right: 100%;
1439   top: 0;
1440   width: 40px;
1441 }
1442
1443 body[unformatted] #format-panel > .error,
1444 body[drive='mounting'] #unmounted-panel > .loading,
1445 body[drive='error'] #unmounted-panel > .error,
1446 #format-panel > #format-button,
1447 #unmounted-panel.retry-enabled > .learn-more {
1448   display: -webkit-box;
1449 }
1450
1451 .plain-link {
1452   color: rgb(17, 85, 204);
1453   cursor: pointer;
1454   text-decoration: none;
1455 }
1456
1457 .buttonbar > * {
1458   position: relative;
1459 }
1460
1461 .buttonbar .tooltip,
1462 .topbutton-bar .tooltip {
1463   right: -12px;
1464   top: 35px;
1465 }
1466
1467 /* Tooltips */
1468 .tooltip {
1469   background: #2d2d2d;
1470   border-radius: 0;
1471   box-shadow: 1px 2px 4px #ccc;
1472   box-sizing: border-box;
1473   color: white;
1474   display: block;
1475   font-size: 11px;
1476   font-weight: bold;
1477   height: 29px;
1478   line-height: 29px;
1479   margin-left: -20px;
1480   min-width: 50px;
1481   opacity: 0;
1482   outline: 1px solid rgba(255, 255, 255, 0.5);
1483   padding: 0 10px;
1484   pointer-events: none;
1485   position: absolute;
1486   text-align: center;
1487   top: 5px;
1488   white-space: nowrap;
1489   z-index: 600;  /* Must be below the overlay pane (1000). */
1490 }
1491
1492 .tooltip::after,
1493 .tooltip::before {
1494   border-left: 5px solid transparent;
1495   border-right: 5px solid transparent;
1496   border-top: transparent;
1497   content: '';
1498   display: block;
1499   margin-left: -5px;
1500   position: absolute;
1501   right: 24px;
1502   top: -5px;
1503 }
1504
1505 .tooltip::after {
1506   border-bottom: 5px solid #2d2d2d;
1507 }
1508
1509 .tooltip::before {
1510   border-bottom: 5px solid rgba(255, 255, 255, 0.5);
1511 }
1512
1513 /* Show with delay, disappear instantly */
1514 @-webkit-keyframes tooltip-show {
1515   0% { opacity: 0; }
1516   90% { opacity: 0; }
1517   100% { opacity: 1; }
1518 }
1519
1520 :hover > .tooltip {
1521   -webkit-animation-duration: 800ms;
1522   -webkit-animation-iteration-count: 1;
1523   -webkit-animation-name: tooltip-show;
1524   -webkit-animation-timing-function: linear;
1525   opacity: 1;
1526 }
1527
1528 #no-search-results {
1529   bottom: 0;
1530   display: none;
1531   left: 0;
1532   padding: 10px;
1533   position: absolute;
1534   right: 0;
1535   top: 28px;  /* Leave room for the file list header. */
1536 }
1537
1538 .dialog-container:not([drive-welcome='page']) #no-search-results[show] {
1539   display: block;
1540 }
1541
1542 #volume-space-info-contents {
1543   -webkit-box-align: center;
1544   display: -webkit-box;
1545 }
1546
1547 #volume-space-info-contents > div {
1548   -webkit-box-flex: 1;
1549   -webkit-margin-start: 15px;
1550   display: -webkit-box;
1551 }
1552
1553 #list-container .table-header-inner {
1554   height: 100%;
1555 }
1556
1557 #list-container .table-header-cell:hover {
1558   background-color: inherit;
1559 }
1560
1561 #list-container .table-header-cell:first-child {
1562   -webkit-box-sizing: border-box;
1563   -webkit-padding-start: 8px;
1564 }
1565
1566 #new-folder-button {
1567   margin-right: 30px;
1568 }
1569
1570 #default-action-dialog {
1571   min-width: 300px;
1572   width: auto;
1573 }
1574
1575 .drive-welcome-wrapper {
1576   /* drive_welcome.css will override it once loaded. */
1577   display: none;
1578 }
1579
1580 list.autocomplete-suggestions {
1581   -webkit-margin-before: -7px;
1582   -webkit-margin-start: -38px;
1583   background-color: rgb(250, 250, 250);
1584   border-radius: 3px;
1585   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
1586   box-sizing: border-box;  /* To match the width with the search box's. */
1587   color: rgb(34, 34, 34);
1588   overflow: hidden;
1589   padding: 5px 0;
1590   position: fixed;
1591   width: 300px !important; /* This overrides the value specified by script. */
1592   z-index: 550;
1593 }
1594
1595 list.autocomplete-suggestions > li {
1596   -webkit-box-align: center;
1597   display: -webkit-box;
1598   padding: 3px 0;
1599 }
1600
1601 list.autocomplete-suggestions > li > div.detail-icon {
1602   -webkit-margin-end: 6px;
1603   -webkit-margin-start: 6px;
1604 }
1605
1606 list.autocomplete-suggestions > li > div.detail-text {
1607   -webkit-box-flex: 1;
1608   overflow-x: hidden;
1609   text-overflow: ellipsis;
1610 }
1611
1612 list.autocomplete-suggestions > li > div.detail-text em {
1613   color: rgb(150, 150, 150);
1614   font-style: normal;
1615 }
1616
1617 list.autocomplete-suggestions > li > div[search-icon] {
1618   background: -webkit-image-set(
1619       url('../images/files/ui/search_icon_active.png') 1x,
1620       url('../images/files/ui/2x/search_icon_active.png') 2x) center no-repeat;
1621 }
1622
1623 list.autocomplete-suggestions > li[selected] > div[search-icon],
1624 list.autocomplete-suggestions > li[lead] > div[search-icon] {
1625   background: -webkit-image-set(
1626       url('../images/files/ui/search_icon_white.png') 1x,
1627       url('../images/files/ui/2x/search_icon_white.png') 2x) center no-repeat;
1628 }
1629
1630 list.autocomplete-suggestions > [selected],
1631 list.autocomplete-suggestions > [lead] {
1632   background-color: rgb(66, 129, 244);
1633   color: white;
1634 }
1635
1636 list.autocomplete-suggestions > [selected] > div.detail-text em,
1637 list.autocomplete-suggestions > [lead] > div.detail-text em {
1638   color: white;
1639 }
1640
1641 #gear-menu {
1642   margin-top: 8px;
1643 }
1644
1645 #gear-menu > menuitem:not(.menuitem-button) {
1646   -webkit-margin-end: 50px;
1647 }
1648
1649 /* View buttons in the gear menu. */
1650
1651 menuitem#detail-view {
1652   background-image: -webkit-image-set(
1653     url('../images/files/ui/button_list_view.png') 1x,
1654     url('../images/files/ui/2x/button_list_view.png') 2x);
1655 }
1656
1657 menuitem#detail-view[selected]:not([disabled]),
1658 menuitem#detail-view[lead]:not([disabled]) {
1659   background-image: -webkit-image-set(
1660     url('../images/files/ui/button_list_view_white.png') 1x,
1661     url('../images/files/ui/2x/button_list_view_white.png') 2x);
1662 }
1663
1664 menuitem#thumbnail-view {
1665   background-image: -webkit-image-set(
1666     url('../images/files/ui/button_mosaic_view.png') 1x,
1667     url('../images/files/ui/2x/button_mosaic_view.png') 2x);
1668 }
1669
1670 menuitem#thumbnail-view[selected]:not([disabled]),
1671 menuitem#thumbnail-view[lead]:not([disabled]) {
1672   background-image: -webkit-image-set(
1673     url('../images/files/ui/button_mosaic_view_white.png') 1x,
1674     url('../images/files/ui/2x/button_mosaic_view_white.png') 2x);
1675 }
1676
1677 #iframe-drag-area {
1678   -webkit-app-region: drag;
1679   height: 48px;
1680   left: 64px;
1681   position: absolute;
1682   right: 134px;
1683   top: 0;
1684   width: auto;
1685   z-index: 101;
1686 }
1687
1688 #suggest-app-dialog {
1689   background-color: #fff;
1690   border: 0;
1691   padding: 0;
1692   width: auto;
1693 }
1694
1695 #suggest-app-dialog .cr-dialog-title {
1696   /* Entire height: 44px (content-box 22px + padding 11px * 2) */
1697   font-size: 16px;
1698   height: 22px;
1699   margin: 0;
1700   padding: 11px 18px;
1701 }
1702
1703 #suggest-app-dialog #webview-container {
1704   border-bottom: solid 1px #bbb;
1705   border-top: solid 1px #bbb;
1706   position: relative;
1707 }
1708
1709 #suggest-app-dialog.show-spinner #webview-container webview {
1710   pointer-events: none;
1711 }
1712
1713 #suggest-app-dialog:not(.show-spinner) .spinner-layer {
1714   display: none;
1715 }
1716
1717 #suggest-app-dialog .spinner-layer {
1718   background-color: rgba(255, 255, 255, 0.7);
1719 }
1720
1721 #suggest-app-dialog .cr-dialog-buttons,
1722 #suggest-app-dialog .cr-dialog-ok,
1723 #suggest-app-dialog .cr-dialog-cancel {
1724   display: none;
1725 }
1726
1727 #suggest-app-dialog .cr-dialog-text {
1728   -webkit-padding-after: 10px;
1729   -webkit-padding-before: 0;
1730   -webkit-padding-end: 20px;
1731   -webkit-padding-start: 20px;
1732   margin: 0;
1733 }
1734
1735 #suggest-app-dialog #buttons {
1736   background: #eee;
1737   width: 100%;
1738 }
1739
1740 #suggest-app-dialog #buttons > #webstore-button {
1741   -webkit-padding-after: 10px;
1742   -webkit-padding-before: 10px;
1743   -webkit-padding-end: 10px;
1744   -webkit-padding-start: 36px;
1745   background-image: -webkit-image-set(
1746     url('chrome://theme/IDR_WEBSTORE_ICON_16') 1x,
1747     url('chrome://theme/IDR_WEBSTORE_ICON_16@2x') 2x);
1748   background-position: 12px center;
1749   background-repeat: no-repeat;
1750   color: #00f;
1751   cursor: pointer;
1752   display: inline-block;
1753   height: 16px;
1754 }
1755
1756 .cr-dialog-frame.error-dialog-frame {
1757   width: 300px;
1758 }
1759
1760 .error-dialog-frame .error-dialog-img {
1761   background-image: -webkit-image-set(
1762     url('chrome://theme/IDR_ERROR_NETWORK_GENERIC') 1x,
1763     url('chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x') 2x);
1764   background-position: center;
1765   background-repeat: no-repeat;
1766   height: 40px;
1767 }
1768
1769 .error-dialog-frame .cr-dialog-cancel {
1770   display: none;
1771 }
1772
1773 .error-dialog-frame .cr-dialog-close,
1774 .error-dialog-frame .cr-dialog-title {
1775   display: none;
1776 }
1777
1778 .error-dialog-frame .cr-dialog-text {
1779   text-align: center;
1780 }
1781
1782 .cr-dialog-frame.share-dialog-frame {
1783   background-color: white;
1784   width: auto;
1785 }
1786
1787 .share-dialog-webview-wrapper {
1788   height: 100px;
1789   margin-top: 10px;
1790   min-width: 300px;
1791   overflow: hidden;
1792   transition: height 200ms ease;
1793 }
1794
1795 .share-dialog-webview {
1796   height: 100%;
1797   width: 100%;
1798 }
1799
1800 .share-dialog-webview-wrapper:not(.loaded) .share-dialog-webview {
1801   visibility: hidden;
1802 }
1803
1804 .share-dialog-frame .cr-dialog-text,
1805 .share-dialog-frame .cr-dialog-buttons {
1806   display: none;
1807 }
1808
1809 #multi-profile-share-dialog .mail-label {
1810   padding-right: 16px;
1811 }
1812
1813 #multi-profile-share-dialog .mail-label::after {
1814   content: ':';
1815 }
1816
1817 #multi-profile-share-dialog .share-line {
1818   margin: 8px 16px;
1819 }
1820
1821 #conflict-confirm-dialog .cr-dialog-buttons {
1822   align-items: baseline;
1823   display: flex;
1824 }
1825
1826 #conflict-confirm-dialog input[type=checkbox] {
1827   -webkit-margin-start: -2px;
1828   width: auto;
1829 }
1830
1831 #conflict-confirm-dialog label {
1832   flex: 1 0 auto;
1833 }
1834
1835 /* Progress center */
1836
1837 @-webkit-keyframes progress-center-toggle {
1838   /* Height values of each frame are set by script.
1839    * Keep the animation sync with JS. */
1840   from {
1841   }
1842   to {
1843   }
1844 }
1845
1846 #progress-center {
1847   background-color: transparent;
1848   border-top: 1px solid transparent;
1849   overflow: hidden;
1850   position: relative;
1851   transition: background-color 300ms linear,
1852               border 300ms linear;
1853 }
1854
1855 #progress-center.opened {
1856   background-color: #ebebeb;
1857   border-top: 1px solid #d8d8d8;
1858 }
1859
1860 #progress-center.animated {
1861   -webkit-animation: progress-center-toggle 300ms ease-out;
1862 }
1863
1864 #progress-center-open-view {
1865   opacity: 1;
1866   padding-top: 10px;
1867   transition: opacity 300ms linear;
1868 }
1869
1870 #progress-center:not(.opened) #progress-center-open-view {
1871   opacity: 0;
1872   pointer-events: none;
1873   position: absolute;
1874 }
1875
1876 #progress-center-close-view {
1877   opacity: 1;
1878   transition: opacity 300ms linear;
1879 }
1880
1881 #progress-center.opened #progress-center-close-view {
1882   opacity: 0;
1883   pointer-events: none;
1884   position: absolute;
1885 }
1886
1887 #progress-center.animated #progress-center-open-view,
1888 #progress-center.animated #progress-center-close-view {
1889   left: 0;
1890   pointer-events: none;
1891   position: absolute;
1892   right: 0;
1893   top: 0;
1894   z-index: 1;
1895 }
1896
1897 #progress-center li {
1898   -webkit-padding-end: 10px;
1899   display: flex;
1900   /* This must not be margin-bottom to calculate parent's height correctly. */
1901   padding-bottom: 20px;
1902 }
1903
1904 #progress-center label {
1905   color: #777;
1906   display: block;
1907   overflow: hidden;
1908   text-overflow: ellipsis;
1909   white-space: nowrap;
1910 }
1911
1912 #progress-center li.error.single label {
1913   white-space: normal;
1914 }
1915
1916 #progress-center .progress-frame {
1917   -webkit-padding-end: 10px;
1918   -webkit-padding-start: 20px;
1919   flex: 1 0 0;
1920 }
1921
1922 #progress-center .progress-bar {
1923   background: #d8d8d8;
1924   border-radius: 3px;
1925   display: inline-block;
1926   height: 6px;
1927   opacity: 1;
1928   overflow: hidden;
1929   width: 100%;
1930 }
1931
1932 #progress-center li.error .progress-bar,
1933 #progress-center li.quiet .progress-bar {
1934   display: none;
1935 }
1936
1937 #progress-center .progress-track {
1938   background: #787878;
1939   height: 100%;
1940 }
1941
1942 #progress-center .progress-track.animated {
1943   transition: width 300ms linear;
1944 }
1945
1946 #progress-center .button-frame {
1947   align-self: flex-end;
1948   flex: none;
1949 }
1950
1951 #progress-center button {
1952   border: none;
1953   cursor: pointer;
1954   display: inline-block;
1955   height: 12px;
1956   min-height: 0;
1957   min-width: 0;
1958   outline: none;
1959   padding: 0;
1960   vertical-align: middle;
1961   width: 12px;
1962 }
1963
1964 #progress-center li.error.single .button-frame {
1965   display: none;
1966 }
1967
1968 #progress-center button.close {
1969   -webkit-margin-end: 10px;
1970   -webkit-margin-start: auto;
1971   background: -webkit-image-set(
1972       url(../images/files/ui/process_drawer_button_opened.png) 1x,
1973       url(../images/files/ui/2x/process_drawer_button_opened.png) 2x)
1974       no-repeat;
1975   display: block;
1976   margin-bottom: 20px;
1977 }
1978
1979 #progress-center button.close:hover {
1980   background: -webkit-image-set(
1981       url(../images/files/ui/process_drawer_button_opened_hover.png) 1x,
1982       url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x)
1983       no-repeat;
1984 }
1985
1986 #progress-center button.close:active {
1987   background: -webkit-image-set(
1988       url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x,
1989       url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x)
1990       no-repeat;
1991 }
1992
1993 #progress-center button.open {
1994   background: -webkit-image-set(
1995       url(../images/files/ui/process_drawer_button_closed.png) 1x,
1996       url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
1997       no-repeat;
1998 }
1999
2000 #progress-center button.open:hover {
2001   background: -webkit-image-set(
2002       url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
2003       url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
2004       no-repeat;
2005 }
2006
2007 #progress-center button.open:active {
2008   background: -webkit-image-set(
2009       url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
2010       url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)
2011       no-repeat;
2012 }
2013
2014 #progress-center button.cancel {
2015   background: -webkit-image-set(
2016       url(../images/files/ui/close_bar.png) 1x,
2017       url(../images/files/ui/2x/close_bar.png) 2x)
2018       no-repeat;
2019 }
2020
2021 #progress-center-close-view:not(.single) button.cancel {
2022   display: none;
2023 }
2024
2025 #progress-center-close-view.single button.open {
2026   display: none;
2027 }
2028
2029 #progress-center li:not(.cancelable) button.cancel {
2030   visibility: hidden;
2031 }