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

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