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. */
5 /* The order of z-index:
7 * - 2: drag-selection-border
12 * - 550: autocomplete-suggestions
15 * - 1000: preview thumbnail popup
16 * - 1000: overlay panel (ie. image editor)
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'],
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;
41 cursor: col-resize !important;
44 /* Outer frame of the dialog. */
46 -webkit-tap-highlight-color: transparent;
47 -webkit-user-select: none;
51 flex-direction: column;
59 input[type='button']:focus,
60 input[type='submit']:focus,
63 outline-color: rgb(77, 144, 254);
66 /* Drop opacity of selected rows to give a visual feedback on copy/cut
77 /* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */
85 z-index: 500; /* Must be below the contextmenu (600). */
89 background-color: black;
90 border: 1px solid #ccc;
92 box-sizing: border-box;
97 transition: opacity 100ms;
101 :hover > .scrollbar-vertical > .scrollbar-button,
102 .scrollbar-vertical > .scrollbar-button.scrolling {
106 .scrollbar-vertical > .scrollbar-button:hover {
110 .scrollbar-vertical > .scrollbar-button.pressed {
114 /* Main part of the dialog between header and footer. */
116 align-items: stretch;
117 background-color: white; /* Makes #drag-container invisible. */
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;
131 /* List/grid and preview are inside this container. */
133 align-items: stretch;
136 flex-direction: column;
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;
145 flex-direction: column;
153 .dialog-navigation-list-header {
154 -webkit-app-region: drag;
156 height: 48px; /* Keep in sync with #dialog-header. */
160 .dialog-navigation-list-header #app-name {
166 .dialog-navigation-list-contents {
172 .dialog-navigation-list-footer {
175 flex-direction: column;
178 /* A vertical splitter between the roots list and the file list. It is actually
179 a transparent area centered on the roots list right border.*/
187 z-index: 500; /* Must be below the contextmenu (600). */
193 flex-direction: column;
196 #navigation-list > * {
201 #navigation-list > .spacer {
205 #navigation-list > .accepts,
206 #navigation-list > [lead][selected],
207 #navigation-list > [lead],
208 #navigation-list > [selected],
209 #navigation-list > [anchor] {
210 background-color: rgb(225, 225, 225);
213 #navigation-list:focus > .accepts,
214 #navigation-list:focus > [lead][selected],
215 #navigation-list:focus > [lead],
216 #navigation-list:focus > [selected],
217 #navigation-list:focus > [anchor] {
218 background-color: rgb(66, 129, 244);
222 #navigation-list li.root-item {
226 line-height: 22px; /* To accommodate for icons. */
230 #navigation-list li.root-item > .root-label {
234 text-overflow: ellipsis;
238 #navigation-list .volume-icon {
239 background-repeat: no-repeat;
246 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
247 -webkit-box-sizing: border-box;
248 -webkit-padding-start: 20px;
249 color: rgb(100, 100, 100);
255 text-overflow: ellipsis;
265 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
271 #directory-tree .tree-row {
279 /* For rows of subitems (non-top items) */
280 #directory-tree .tree-children .tree-row {
284 #directory-tree .tree-row > .expand-icon {
288 margin: -12px -10px -13px -13px;
294 #directory-tree:focus .tree-row[selected] > .expand-icon {
295 background-image: -webkit-canvas(tree-triangle-inverted);
298 #directory-tree .tree-row > .volume-icon {
299 background-position: center 3px;
300 background-repeat: no-repeat;
306 #directory-tree .tree-row > .label {
311 text-overflow: ellipsis;
314 #directory-tree .tree-item.accepts > .tree-row,
315 #directory-tree .tree-row[lead][selected],
316 #directory-tree .tree-row[lead],
317 #directory-tree .tree-row[selected],
318 #directory-tree .tree-row[anchor] {
319 background-color: rgb(204, 204, 204);
322 #directory-tree .tree-item.accepts > .tree-row,
323 #directory-tree .tree-row[lead][selected],
324 #directory-tree .tree-row[lead],
325 #directory-tree .tree-row[selected],
326 #directory-tree .tree-row[anchor] {
327 background-color: rgb(225, 225, 225);
330 #directory-tree:focus .tree-item.accepts > .tree-row,
331 #directory-tree:focus .tree-row[lead][selected],
332 #directory-tree:focus .tree-row[lead],
333 #directory-tree:focus .tree-row[selected],
334 #directory-tree:focus .tree-row[anchor] {
335 background-color: rgb(193, 209, 232);
338 #directory-tree:focus .tree-item.accepts > .tree-row,
339 #directory-tree:focus .tree-row[lead][selected],
340 #directory-tree:focus .tree-row[lead],
341 #directory-tree:focus .tree-row[selected],
342 #directory-tree:focus .tree-row[anchor] {
343 background-color: rgb(66, 129, 244);
347 /* Make top-level items thicker and their expand-icno invisible */
348 #directory-tree > .tree-item > .tree-row {
352 #directory-tree > .tree-item > .tree-row > .expand-icon {
356 #directory-tree .tree-row > div.root-eject {
357 background: -webkit-image-set(
358 url('../images/files/ui/eject.png') 1x,
359 url('../images/files/ui/2x/eject.png') 2x) no-repeat center;
365 transition: opacity 70ms linear;
369 #directory-tree:focus .tree-row[selected] > div.root-eject {
370 background: -webkit-image-set(
371 url('../images/files/ui/eject_white.png') 1x,
372 url('../images/files/ui/2x/eject_white.png') 2x) no-repeat center;
376 #directory-tree .root-item[disabled] {
378 pointer-events: none;
381 /* Breadcrumbs and things under the title but above the list view. */
383 -webkit-app-region: drag;
390 transition: all 180ms ease;
393 .dialog-header .volume-icon {
394 -webkit-margin-start: 10px;
395 background-position: center 3px;
396 background-repeat: no-repeat;
402 .dialog-header > .spacer {
414 -webkit-app-region: no-drag;
415 background-color: #fff;
426 transition: width 0.2s ease;
430 #search-box input::-webkit-search-cancel-button {
431 -webkit-appearance: none;
434 #search-box.has-cursor input,
435 #search-box.has-text input {
440 -webkit-app-region: no-drag;
441 -webkit-margin-end: 30px;
443 background: -webkit-image-set(
444 url(../images/files/ui/search_clear.png) 1x,
445 url(../images/files/ui/2x/search_clear.png) 2x)
459 #search-box.has-cursor .clear,
460 #search-box.has-text .clear {
464 #search-box.has-text .clear {
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);
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);
484 .topbutton-bar .search-button {
485 background-image: -webkit-image-set(
486 url(../images/files/ui/search_icon_active.png) 1x,
487 url(../images/files/ui/2x/search_icon_active.png) 2x);
490 .topbutton-bar .view-button.table {
491 background-image: -webkit-image-set(
492 url('../images/files/ui/button_list_view.png') 1x,
493 url('../images/files/ui/2x/button_list_view.png') 2x);
496 .topbutton-bar .view-button.grid {
497 background-image: -webkit-image-set(
498 url('../images/files/ui/button_mosaic_view.png') 1x,
499 url('../images/files/ui/2x/button_mosaic_view.png') 2x);
502 /* Container for the detail and thumbnail list views. */
504 -webkit-transition: all 180ms ease;
505 border-top: 1px solid rgba(20, 20, 22, 0.1);
519 .dialog-middlebar-contents {
528 /* Container for the ok/cancel buttons. */
531 border-top: 1px solid rgb(225, 225, 225);
539 .progressable:not([progress]) .progress-bar,
540 .progressable:not([progress]) .preparing-label {
544 .progressable[progress] .ok,
545 .progressable[progress] #filename-input-box,
546 .progressable[progress] #preview-lines,
547 .progressable[progress] .file-type {
551 .progressable .progress-bar {
552 -webkit-margin-end: 20px;
553 -webkit-margin-start: 20px;
557 /* The container for breadcrumb elements. */
568 .breadcrumbs > [collapsed]::before {
572 .breadcrumbs > [collapsed] {
576 /* A single directory name in the list of path breadcrumbs. */
582 text-overflow: ellipsis;
586 /* The final breadcrumb, representing the current directory. */
587 #search-breadcrumbs .breadcrumb-path.breadcrumb-last {
592 /* The > arrow between breadcrumbs. */
594 .breadcrumbs .separator {
595 background-image: -webkit-image-set(
596 url('../images/files/ui/breadcrumb-separator.png') 1x,
597 url('../images/files/ui/2x/breadcrumb-separator.png') 2x);
598 background-position: center center;
599 background-repeat: no-repeat;
606 html[dir='rtl'] .breadcrumbs .separator {
607 -webkit-transform: scaleX(-1);
610 #filename-input-box input {
611 border: 1px solid #c8c8c8;
613 box-sizing: border-box;
614 height: 31px; /* border-box */
621 flex-direction: column;
627 flex-direction: column;
634 flex-direction: column;
637 #detail-table > list,
640 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
644 /* Override overflow specifying by table_list.js to use the original scroll
645 bar. crbug.com/391698 */
646 overflow: scroll !important;
649 #file-list .drag-selection-border {
650 -webkit-box-sizing: border-box;
651 background-color: rgba(255, 255, 255, 0.3);
652 border: 2px solid rgba(255, 255, 255, 0.6);
653 outline: 1px solid rgba(0, 0, 0, 0.1);
659 background: url(../images/common/spinner.svg) center/100% no-repeat;
671 background: url(../images/common/spinner.svg) center / 16px no-repeat;
682 background-color: #f0f0f0;
683 background-image: -webkit-image-set(
684 url('../images/files/ui/warning_icon_square.png') 1x,
685 url('../images/files/ui/2x/warning_icon_square.png') 2x);
686 background-position: 15px center;
687 background-repeat: no-repeat;
695 padding-left: 57px; /* Make space for the icon. */
696 transition: height 70ms linear;
699 .downloads-warning[hidden] {
700 display: flex !important; /* Overrides [hidden] for animation. */
704 @-webkit-keyframes heightAnimation {
711 /* Drive space warning banner. */
713 -webkit-animation: heightAnimation 70ms linear;
715 background-image: url(chrome://resources/images/clouds.png);
716 background-repeat: repeat-x;
717 background-size: 150px 44px;
728 .volume-warning[hidden] {
733 .volume-warning .drive-icon {
734 background-image: -webkit-image-set(
735 url('../images/files/ui/drive_logo.png') 1x,
736 url('../images/files/ui/2x/drive_logo.png') 2x);
737 background-position: center;
738 background-repeat: no-repeat;
739 background-size: 25px 22px;
745 .volume-warning .drive-text {
750 /* The cr.ui.Grid representing the detailed file list. */
753 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
757 body[type='full-page'] .thumbnail-frame > .img-container {
761 body[type='full-page'] .thumbnail-frame > .img-container,
762 body[type='full-page'] .detail-name .detail-icon {
766 .img-container > img {
767 -webkit-user-drag: none;
771 .img-container > img:not(.cached) {
772 -webkit-animation: fadeIn 250ms linear;
781 justify-content: center;
788 .thumbnail-bottom .filename-label {
792 /* Styles specific for the grid view. */
794 .thumbnail-grid .thumbnail-item {
795 -webkit-margin-start: 21px;
796 border: 3px solid transparent; /* Selection will make the border visible. */
801 .thumbnail-grid .thumbnail-frame {
802 background-color: rgb(245, 245, 245);
809 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame,
810 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame {
814 .thumbnail-grid .img-container {
819 .thumbnail-grid .thumbnail-bottom {
820 background: rgba(0, 0, 0, 0.55);
825 /* Padding counterweights negative margins of items, thus eliminating scroll
826 bar when it's not needed. Max height is set to fit 8 items before showing
828 #default-actions-list {
833 #default-actions-list > li > * {
834 background-position: 5px center;
835 background-repeat: no-repeat;
836 background-size: 16px 16px;
840 #list-container list > li[selected],
841 #list-container grid > li[selected],
842 #default-actions-list > li[selected] {
843 background-color: rgb(225, 225, 225);
846 #list-container list:focus > li[selected],
847 #list-container grid:focus > li[selected],
848 #default-actions-list:focus > li[selected] {
849 background-color: rgb(66, 129, 244);
853 #list-container list > li.accepts[selected],
854 #list-container grid > li.accepts[selected] {
855 background-color: rgb(215, 215, 215);
858 #list-container list:focus > li.accepts[selected],
859 #list-container grid:focus > li.accepts[selected] {
860 background-color: rgb(48, 125, 254);
863 #list-container list > li.accepts,
864 #list-container grid > li.accepts {
865 background-color: #f1f1f1;
868 #list-container.nohover grid > .accepts {
869 background-color: transparent;
872 #directory-tree .tree-item.accepts > .tree-row,
873 #navigation-list > .accepts,
874 #list-container list > li.accepts,
875 #list-container grid > li.accepts {
876 -webkit-animation: acceptsBlink 200ms linear 1s 3;
879 @-webkit-keyframes acceptsBlink {
881 background-color: transparent;
885 .table-row-cell .filename-label,
886 .thumbnail-item .filename-label,
887 /* Show ellipsis in cells. The name column has different structure and overrides
889 .table-row-cell > div {
892 text-overflow: ellipsis;
896 /* Text box used for renaming in the detail list. */
897 .table-row-cell input.rename {
903 outline-color: rgb(77, 144, 254);
912 .table-row-cell .filename-label,
913 .table-row-cell input.rename {
917 li[renaming=''] .filename-label {
921 /* Text box used for renaming in the thumbnail list. */
922 .thumbnail-grid input.rename {
923 -webkit-margin-start: -1px;
924 box-sizing: border-box;
929 /* The cr.ui.Table representing the detailed file list. */
934 /* Bottom pane describing current selection. */
936 -webkit-transition: background-color 150ms ease;
939 border-top: 1px solid rgba(20, 20, 22, 0.1);
946 padding: 0 10px 0 7px;
952 .preview-panel[visibility=hiding] {
953 -webkit-transform: translate(0, 5px);
955 /* Using all seems to cause preview panel and checkbox flicking issue. */
956 transition: opacity 220ms ease,
957 -webkit-transform 220ms ease;
960 .preview-panel[visibility=hidden] {
965 .preview-panel > .left,
966 .dialog-footer > .left {
973 .preview-panel > .right,
974 .dialog-footer > .right {
976 justify-content: flex-end;
979 .preview-panel .preparing-label {
980 -webkit-margin-start: 30px;
984 .preview-panel .progress-bar {
988 .preview-panel .preview-text {
992 .preview-thumbnails {
998 .preview-thumbnails > .img-container {
999 background-color: white;
1000 background-size: 35px 35px; /* For file icons. */
1001 border: 2px solid white;
1002 box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5);
1003 box-sizing: border-box;
1006 margin: 0 0 0 -25px; /* Overlapped images. */
1012 .preview-thumbnails > .popup {
1013 -webkit-transform: translate(0, 3px) scale(0.95);
1014 background-color: #f2f2f2;
1015 border: 2px solid #fff;
1017 box-shadow: 0 0 0 1px #F0F0F0,
1019 2px 2px 6px rgba(0, 0, 0, 0.2);
1023 pointer-events: none;
1025 transition: opacity 180ms ease-in 300ms,
1026 -webkit-transform 180ms ease-in 300ms;
1030 .preview-thumbnails.has-zoom:hover > .popup {
1031 -webkit-transform: translate(0, 0) scale(1.0);
1033 pointer-events: auto;
1036 @-webkit-keyframes fadeIn {
1045 .preview-thumbnails img {
1046 -webkit-animation: fadeIn 180ms ease-in-out;
1049 .preview-thumbnails > .popup > img {
1051 -webkit-user-drag: none;
1054 /* Table splitter element */
1055 .table-header-splitter {
1056 background-image: -webkit-image-set(
1057 url('../images/files/ui/vertical_separator.png') 1x,
1058 url('../images/files/ui/2x/vertical_separator.png') 2x);
1059 background-position: center;
1060 background-repeat: repeat-y;
1066 .table-header-splitter:last-child {
1070 /* Container for a table header. */
1072 box-sizing: border-box;
1077 .table-header-sort-image-desc::after {
1078 -webkit-padding-start: 13px;
1079 background-image: -webkit-image-set(
1080 url('../images/files/ui/sort_desc.png') 1x,
1081 url('../images/files/ui/2x/sort_desc.png') 2x);
1082 background-position: center center;
1083 background-repeat: no-repeat;
1090 .table-header-sort-image-asc::after {
1091 -webkit-padding-start: 13px;
1092 background-image: -webkit-image-set(
1093 url('../images/files/ui/sort_asc.png') 1x,
1094 url('../images/files/ui/2x/sort_asc.png') 2x);
1095 background-position: center center;
1096 background-repeat: no-repeat;
1103 .preview-container .table-header {
1104 border-radius: 0 4px 0 0;
1107 /* Text label in a table header. */
1108 .table-header-label {
1109 color: rgb(100, 100, 100);
1114 .table-row-cell > * {
1115 align-items: center;
1117 flex-direction: row;
1122 color: rgb(100, 100, 100);
1125 .table-row-cell > .detail-name {
1129 .table-row-cell > .detail-name {
1130 color: rgb(0, 0, 0);
1134 #list-container list:focus > [selected] .table-row-cell,
1135 #list-container list:focus > [selected] .detail-name {
1140 align-items: center;
1143 #list-container li.table-row,
1144 #default-actions-list li {
1149 /* The icon in the name column. See file_types.css for specific icons. */
1155 #detail-table .detail-icon {
1156 /* To shift the icon position. */
1160 .preview-panel .spacer {
1165 min-width: 21px; /* overrride */
1166 padding: 0; /* overrride */
1170 #delete-button::before {
1171 /* Background image should be specified in the before pseudo element because
1172 * border image fill is specified to delete-button. */
1173 background: -webkit-image-set(
1174 url(../images/files/ui/onbutton_trash.png) 1x,
1175 url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center;
1182 #delete-button[disabled] {
1186 #tasks-menu menuitem:not(.change-default) {
1187 background-position: left 10px center;
1193 min-width: 0; /* overrride */
1197 -webkit-margin-end: 10px;
1198 -webkit-margin-start: 10px;
1202 /* The selection summary text at the bottom of the preview pane. */
1206 text-overflow: ellipsis;
1207 vertical-align: middle;
1208 white-space: nowrap;
1211 .preview-summary .calculating-size {
1217 align-items: center;
1222 #filename-input-box {
1223 align-items: center;
1228 #filename-input-box input {
1233 #filename-input-box .filename-label {
1234 background-color: white;
1240 body:not([type='saveas-file']) #filename-input-box {
1246 body[type='folder'] .file,
1247 body[type='upload-folder'] .file,
1248 body[drive] .dialog-container[connection='offline'] .dim-offline {
1252 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
1254 -webkit-app-region: no-drag;
1261 z-index: 1000; /* Must be above all elements in file manager container. */
1264 /* When the overlay pane is visible hide everything else so that the tab order
1266 body[overlay-visible] > :not(.overlay-pane) {
1267 display: none !important;
1270 /* Invisible container for elements representing files while dragging. */
1275 z-index: -1; /* below .dialog-container */
1278 #drag-container .drag-contents {
1279 background-color: #fafafa;
1280 border: 1px solid #bbb;
1282 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
1284 flex-direction: row;
1288 transition: opacity 200ms ease-in;
1291 #drag-container .drag-contents.for-image {
1296 #drag-container .thumbnail-item {
1298 flex-direction: row;
1301 #drag-container .label {
1308 text-overflow: ellipsis;
1309 white-space: nowrap;
1312 menu.file-context-menu {
1313 z-index: 600; /* Must be below the overlay pane (1000). */
1316 menu.chrome-menu hr {
1322 /* transition: opacity 1000ms linear; */
1323 background-color: rgba(255, 255, 255, 0.8);
1336 /* Message panel for unmounted Drive */
1350 body[drive='mounting'] .dialog-container #unmounted-panel,
1351 body[drive='error'] .dialog-container #unmounted-panel,
1352 body[unformatted] .dialog-container #format-panel {
1356 body[drive='unmounted'] .dialog-container .filelist-panel,
1357 body[drive='mounting'] .dialog-container .filelist-panel,
1358 body[drive='error'] .dialog-container .filelist-panel,
1359 body[unformatted] .dialog-container .filelist-panel {
1360 /* Hide file list when Drive is not mounted.
1361 Use opacity to avoid manual resizing.*/
1365 #unmounted-panel > *,
1367 align-items: center;
1369 flex-direction: row;
1371 justify-content: flex-start;
1372 margin-bottom: 10px;
1375 #unmounted-panel > .loading {
1379 #unmounted-panel > .loading > .spinner-box {
1387 body[unformatted] #format-panel > .error,
1388 body[drive='mounting'] #unmounted-panel > .loading,
1389 body[drive='error'] #unmounted-panel > .error,
1390 #format-panel > #format-button,
1391 #unmounted-panel.retry-enabled > .learn-more {
1396 color: rgb(17, 85, 204);
1398 text-decoration: none;
1405 .buttonbar .tooltip,
1406 .topbutton-bar .tooltip {
1413 background: #2d2d2d;
1415 box-shadow: 1px 2px 4px #ccc;
1416 box-sizing: border-box;
1426 outline: 1px solid rgba(255, 255, 255, 0.5);
1428 pointer-events: none;
1432 white-space: nowrap;
1433 z-index: 600; /* Must be below the overlay pane (1000). */
1438 border-left: 5px solid transparent;
1439 border-right: 5px solid transparent;
1440 border-top: transparent;
1450 border-bottom: 5px solid #2d2d2d;
1454 border-bottom: 5px solid rgba(255, 255, 255, 0.5);
1457 /* Show with delay, disappear instantly */
1458 @-webkit-keyframes tooltip-show {
1461 100% { opacity: 1; }
1465 -webkit-animation-duration: 800ms;
1466 -webkit-animation-iteration-count: 1;
1467 -webkit-animation-name: tooltip-show;
1468 -webkit-animation-timing-function: linear;
1472 #no-search-results {
1480 top: 28px; /* Leave room for the file list header. */
1483 .dialog-container:not([drive-welcome='page']) #no-search-results[show] {
1487 #volume-space-info-contents {
1488 align-items: center;
1492 #volume-space-info-contents > div {
1493 -webkit-margin-start: 15px;
1498 #list-container .table-header-inner {
1502 #list-container .table-header-cell:hover {
1503 background-color: inherit;
1506 #list-container .table-header-cell:first-child {
1507 -webkit-box-sizing: border-box;
1508 -webkit-padding-start: 8px;
1511 #new-folder-button {
1516 #default-action-dialog {
1521 .drive-welcome-wrapper {
1522 /* drive_welcome.css will override it once loaded. */
1526 list.autocomplete-suggestions {
1527 -webkit-margin-before: -7px;
1528 -webkit-margin-start: -38px;
1529 background-color: rgb(250, 250, 250);
1531 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
1532 box-sizing: border-box; /* To match the width with the search box's. */
1533 color: rgb(34, 34, 34);
1538 width: 300px !important; /* This overrides the value specified by script. */
1542 list.autocomplete-suggestions > li {
1543 align-items: center;
1548 list.autocomplete-suggestions > li > div.detail-icon {
1549 -webkit-margin-end: 6px;
1550 -webkit-margin-start: 6px;
1553 list.autocomplete-suggestions > li > div.detail-text {
1556 text-overflow: ellipsis;
1559 list.autocomplete-suggestions > li > div.detail-text em {
1560 color: rgb(150, 150, 150);
1564 list.autocomplete-suggestions > li > div[search-icon] {
1565 background: -webkit-image-set(
1566 url('../images/files/ui/search_icon_active.png') 1x,
1567 url('../images/files/ui/2x/search_icon_active.png') 2x) center no-repeat;
1570 list.autocomplete-suggestions > li[selected] > div[search-icon],
1571 list.autocomplete-suggestions > li[lead] > div[search-icon] {
1572 background: -webkit-image-set(
1573 url('../images/files/ui/search_icon_white.png') 1x,
1574 url('../images/files/ui/2x/search_icon_white.png') 2x) center no-repeat;
1577 list.autocomplete-suggestions > [selected],
1578 list.autocomplete-suggestions > [lead] {
1579 background-color: rgb(66, 129, 244);
1583 list.autocomplete-suggestions > [selected] > div.detail-text em,
1584 list.autocomplete-suggestions > [lead] > div.detail-text em {
1592 #gear-menu > menuitem:not(.menuitem-button) {
1593 -webkit-margin-end: 50px;
1597 -webkit-app-region: drag;
1607 #suggest-app-dialog {
1608 background-color: #fff;
1614 #suggest-app-dialog .cr-dialog-title {
1615 /* Entire height: 44px (content-box 22px + padding 11px * 2) */
1622 #suggest-app-dialog #webview-container {
1623 border-bottom: solid 1px #bbb;
1624 border-top: solid 1px #bbb;
1628 #suggest-app-dialog.show-spinner #webview-container webview {
1629 pointer-events: none;
1632 #suggest-app-dialog:not(.show-spinner) .spinner-layer {
1636 #suggest-app-dialog .spinner-layer {
1637 background-color: rgba(255, 255, 255, 0.7);
1640 #suggest-app-dialog .cr-dialog-buttons,
1641 #suggest-app-dialog .cr-dialog-ok,
1642 #suggest-app-dialog .cr-dialog-cancel {
1646 #suggest-app-dialog .cr-dialog-text {
1647 -webkit-padding-after: 10px;
1648 -webkit-padding-before: 0;
1649 -webkit-padding-end: 20px;
1650 -webkit-padding-start: 20px;
1654 #suggest-app-dialog #buttons {
1659 #suggest-app-dialog #buttons > #webstore-button {
1660 -webkit-padding-after: 10px;
1661 -webkit-padding-before: 10px;
1662 -webkit-padding-end: 10px;
1663 -webkit-padding-start: 36px;
1664 background-image: -webkit-image-set(
1665 url('chrome://theme/IDR_WEBSTORE_ICON_16') 1x,
1666 url('chrome://theme/IDR_WEBSTORE_ICON_16@2x') 2x);
1667 background-position: 12px center;
1668 background-repeat: no-repeat;
1671 display: inline-block;
1675 .cr-dialog-frame.error-dialog-frame {
1679 .error-dialog-frame .error-dialog-img {
1680 background-image: -webkit-image-set(
1681 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC') 1x,
1682 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x') 2x);
1683 background-position: center;
1684 background-repeat: no-repeat;
1688 .error-dialog-frame .cr-dialog-cancel {
1692 .error-dialog-frame .cr-dialog-close,
1693 .error-dialog-frame .cr-dialog-title {
1697 .error-dialog-frame .cr-dialog-text {
1701 #multi-profile-share-dialog .cr-dialog-title {
1702 -webkit-margin-after: 0;
1705 #multi-profile-share-dialog .cr-dialog-text {
1710 #multi-profile-share-dialog .mail-label {
1711 padding-right: 16px;
1714 #multi-profile-share-dialog .mail-label::after {
1718 #multi-profile-share-dialog .share-line {
1722 #conflict-confirm-dialog .cr-dialog-buttons {
1723 align-items: baseline;
1727 #conflict-confirm-dialog input[type=checkbox] {
1728 -webkit-margin-start: -2px;
1732 #conflict-confirm-dialog label {
1736 /* Progress center */
1738 @-webkit-keyframes progress-center-toggle {
1739 /* Height values of each frame are set by script.
1740 * Keep the animation sync with JS. */
1748 background-color: transparent;
1749 border-top: 1px solid transparent;
1752 transition: background-color 300ms linear,
1753 border 300ms linear;
1756 #progress-center.opened {
1757 background-color: #ebebeb;
1758 border-top: 1px solid #d8d8d8;
1761 #progress-center.animated {
1762 -webkit-animation: progress-center-toggle 300ms ease-out;
1765 #progress-center-open-view {
1768 transition: opacity 300ms linear;
1771 #progress-center:not(.opened) #progress-center-open-view {
1773 pointer-events: none;
1777 #progress-center-close-view {
1779 transition: opacity 300ms linear;
1782 #progress-center.opened #progress-center-close-view {
1784 pointer-events: none;
1788 #progress-center.animated #progress-center-open-view,
1789 #progress-center.animated #progress-center-close-view {
1791 pointer-events: none;
1798 #progress-center li {
1799 -webkit-padding-end: 10px;
1801 /* This must not be margin-bottom to calculate parent's height correctly. */
1802 padding-bottom: 20px;
1805 #progress-center label {
1809 text-overflow: ellipsis;
1810 white-space: nowrap;
1813 #progress-center li.error.single label {
1814 white-space: normal;
1817 #progress-center .progress-frame {
1818 -webkit-padding-end: 10px;
1819 -webkit-padding-start: 20px;
1823 #progress-center .progress-bar {
1824 background: #d8d8d8;
1826 display: inline-block;
1833 #progress-center li.error .progress-bar,
1834 #progress-center li.quiet .progress-bar {
1838 #progress-center .progress-track {
1839 background: #787878;
1843 #progress-center .progress-track.animated {
1844 transition: width 300ms linear;
1847 #progress-center .button-frame {
1848 align-self: flex-end;
1852 #progress-center button {
1855 display: inline-block;
1861 vertical-align: middle;
1865 #progress-center li.error.single .button-frame {
1869 #progress-center button.close {
1870 -webkit-margin-end: 10px;
1871 -webkit-margin-start: auto;
1872 background: -webkit-image-set(
1873 url(../images/files/ui/process_drawer_button_opened.png) 1x,
1874 url(../images/files/ui/2x/process_drawer_button_opened.png) 2x)
1877 margin-bottom: 20px;
1880 #progress-center button.close:hover {
1881 background: -webkit-image-set(
1882 url(../images/files/ui/process_drawer_button_opened_hover.png) 1x,
1883 url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x)
1887 #progress-center button.close:active {
1888 background: -webkit-image-set(
1889 url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x,
1890 url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x)
1894 #progress-center button.open {
1895 background: -webkit-image-set(
1896 url(../images/files/ui/process_drawer_button_closed.png) 1x,
1897 url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
1901 #progress-center button.open:hover {
1902 background: -webkit-image-set(
1903 url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
1904 url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
1908 #progress-center button.open:active {
1909 background: -webkit-image-set(
1910 url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
1911 url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)
1915 #progress-center button.cancel {
1916 background: -webkit-image-set(
1917 url(../images/files/ui/close_bar.png) 1x,
1918 url(../images/files/ui/2x/close_bar.png) 2x)
1922 #progress-center-close-view:not(.single) button.cancel {
1926 #progress-center-close-view.single button.open {
1930 #progress-center li:not(.cancelable) button.cancel {
1935 pointer-events: none;