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. */
5 /* The order of z-index:
6 * - 2: drag-selection-bodrder
11 * - 550: autocomplete-suggestions
14 * - 1000: preview thumbnail popup
15 * - 1000: overlay panel (ie. image editor)
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'],
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;
40 cursor: col-resize !important;
43 /* Outer frame of the dialog. */
46 -webkit-box-orient: vertical;
47 -webkit-tap-highlight-color: transparent;
48 -webkit-user-select: none;
57 /* Drop opacity of selected rows to give a visual feedback on copy/cut
68 /* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */
75 z-index: 500; /* Must be below the contextmenu (600). */
79 background-color: black;
80 border: 1px solid #ccc;
82 box-sizing: border-box;
87 transition: opacity 100ms;
91 :hover > .scrollbar-vertical > .scrollbar-button {
95 .scrollbar-vertical > .scrollbar-button:hover {
99 .scrollbar-vertical > .scrollbar-button.pressed {
103 #butter-bar-container {
109 display: -webkit-box;
113 #butter-bar:not(.visible) {
117 #butter-bar .content {
118 -webkit-box-flex: 1.0;
119 -webkit-box-orient: block-axis;
120 -webkit-box-pack: end;
121 display: -webkit-box;
124 #butter-bar .actions {
125 -webkit-box-align: end;
126 -webkit-box-orient: horizontal;
127 -webkit-box-pack: end;
128 -webkit-margin-start: 6px;
129 display: -webkit-box;
132 #butter-bar .actions a {
133 color: rgb(17, 85, 204);
135 vertical-align: middle;
138 #butter-bar .actions a.x {
139 background: center center no-repeat;
140 background-image: -webkit-image-set(
141 url('../images/files/ui/close_bar.png') 1x,
142 url('../images/files/ui/2x/close_bar.png') 2x);
143 display: inline-block;
144 height: 35px; /* #butter-bar .content's min-height. */
149 #butter-bar .actions a.x:first-child {
153 #butter-bar .actions a.x {
154 margin-bottom: -14px;
157 #butter-bar .butter-message.single-line {
160 text-overflow: ellipsis;
164 /* Main part of the dialog between header and footer. */
166 -webkit-box-align: stretch;
168 -webkit-box-orient: horizontal;
169 background-color: white; /* Makes #drag-container invisible. */
171 display: -webkit-box;
176 /* The style applied when a modal dialog box overlap the dialog container. */
177 .dialog-container.disable-header-drag .dialog-navigation-list-header,
178 .dialog-container.disable-header-drag .dialog-header {
179 -webkit-app-region: no-drag;
182 /* List/grid and preview are inside this container. */
184 -webkit-box-align: stretch;
186 -webkit-box-orient: vertical;
187 display: -webkit-box;
190 /* Directory tree at the left. */
191 .dialog-navigation-list {
192 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
194 -webkit-box-orient: vertical;
195 background-color: #f1f1f1;
196 display: -webkit-box;
204 .dialog-navigation-list-header {
205 -webkit-app-region: drag;
207 display: -webkit-box;
208 height: 48px; /* Keep in sync with #dialog-header. */
212 .dialog-navigation-list-header #app-name {
213 -webkit-margin-start: 15px;
218 .dialog-navigation-list-contents {
220 display: -webkit-box;
224 .dialog-navigation-list-footer {
226 display: -webkit-flex;
227 flex-direction: column;
230 /* A vertical splitter between the roots list and the file list. It is actually
231 a transparent area centered on the roots list right border.*/
239 z-index: 500; /* Must be below the contextmenu (600). */
244 -webkit-box-orient: vertical;
245 display: -webkit-box;
248 #navigation-list > * {
253 #navigation-list > .accepts,
254 #navigation-list > [lead][selected],
255 #navigation-list > [lead],
256 #navigation-list > [selected],
257 #navigation-list > [anchor] {
258 background-color: rgb(225, 225, 225);
261 #navigation-list:focus > .accepts,
262 #navigation-list:focus > [lead][selected],
263 #navigation-list:focus > [lead],
264 #navigation-list:focus > [selected],
265 #navigation-list:focus > [anchor] {
266 background-color: rgb(66, 129, 244);
270 #navigation-list li.root-item {
271 -webkit-box-align: center;
272 display: -webkit-box;
273 line-height: 22px; /* To accomodate for icons. */
277 #navigation-list li.root-item > .root-label {
281 text-overflow: ellipsis;
285 #navigation-list .volume-icon {
286 background-position: center 2px;
287 background-repeat: no-repeat;
293 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
294 -webkit-box-sizing: border-box;
295 -webkit-padding-start: 20px;
296 color: rgb(100, 100, 100);
301 text-overflow: ellipsis;
306 -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
311 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
317 #directory-tree .tree-row {
319 display: -webkit-box;
324 /* For rows of subitems (non-top items) */
325 #directory-tree .tree-children .tree-row {
329 #directory-tree .tree-row > .expand-icon {
335 vertical-align: middle;
339 #directory-tree:focus .tree-row[selected] > .expand-icon {
340 background-image: -webkit-canvas(tree-triangle-inverted);
343 #directory-tree .tree-row > .volume-icon {
344 background-position: center 2px;
345 background-repeat: no-repeat;
347 vertical-align: middle;
351 #directory-tree .tree-row > .label {
356 text-overflow: ellipsis;
359 #directory-tree .tree-item.accepts > .tree-row,
360 #directory-tree .tree-row[lead][selected],
361 #directory-tree .tree-row[lead],
362 #directory-tree .tree-row[selected],
363 #directory-tree .tree-row[anchor] {
364 background-color: rgb(204, 204, 204);
367 #directory-tree .tree-item.accepts > .tree-row,
368 #directory-tree .tree-row[lead][selected],
369 #directory-tree .tree-row[lead],
370 #directory-tree .tree-row[selected],
371 #directory-tree .tree-row[anchor] {
372 background-color: rgb(225, 225, 225);
375 #directory-tree:focus .tree-item.accepts > .tree-row,
376 #directory-tree:focus .tree-row[lead][selected],
377 #directory-tree:focus .tree-row[lead],
378 #directory-tree:focus .tree-row[selected],
379 #directory-tree:focus .tree-row[anchor] {
380 background-color: rgb(193, 209, 232);
383 #directory-tree:focus .tree-item.accepts > .tree-row,
384 #directory-tree:focus .tree-row[lead][selected],
385 #directory-tree:focus .tree-row[lead],
386 #directory-tree:focus .tree-row[selected],
387 #directory-tree:focus .tree-row[anchor] {
388 background-color: rgb(66, 129, 244);
392 #navigation-list .root-item > div.root-eject {
393 background-image: -webkit-image-set(
394 url('../images/files/ui/eject.png') 1x,
395 url('../images/files/ui/2x/eject.png') 2x);
396 background-position: center center;
397 background-repeat: no-repeat;
402 transition: opacity 70ms linear;
403 vertical-align: middle;
407 #navigation-list:focus .root-item[selected] > div.root-eject {
408 -webkit-filter: brightness(0) invert();
412 #directory-tree .tree-row > div.root-eject:hover {
416 #directory-tree .root-item[disabled] {
418 pointer-events: none;
421 /* Breadcrumbs and things under the title but above the list view. */
423 -webkit-app-region: drag;
424 -webkit-box-align: center;
425 -webkit-box-orient: horizontal;
429 transition: all 180ms ease;
439 #search-box.too-short {
444 -webkit-app-region: no-drag;
445 -webkit-padding-end: 0;
446 -webkit-padding-start: 10px;
447 background: transparent -webkit-image-set(
448 url(../images/files/ui/search_icon_inactive.png) 1x,
449 url(../images/files/ui/2x/search_icon_inactive.png) 2x)
458 #search-box .icon:hover,
459 #search-box.has-cursor .icon,
460 #search-box.has-text .icon {
461 background-image: -webkit-image-set(
462 url(../images/files/ui/search_icon_active.png) 1x,
463 url(../images/files/ui/2x/search_icon_active.png) 2x);
466 #search-box .full-size {
471 -webkit-app-region: no-drag;
472 background-color: #fff;
485 #search-box input::-webkit-search-cancel-button {
486 -webkit-appearance: none;
489 #search-box.has-cursor input,
490 #search-box.has-text input {
495 -webkit-app-region: no-drag;
496 -webkit-margin-end: 30px;
498 background: -webkit-image-set(
499 url(../images/files/ui/search_clear.png) 1x,
500 url(../images/files/ui/2x/search_clear.png) 2x)
513 #search-box.has-text .clear {
517 #search-box .clear:hover {
518 background-image: -webkit-image-set(
519 url(../images/files/ui/search_clear_hover.png) 1x,
520 url(../images/files/ui/2x/search_clear_hover.png) 2x);
523 #search-box .clear:active {
524 background-image: -webkit-image-set(
525 url(../images/files/ui/search_clear_pressed.png) 1x,
526 url(../images/files/ui/2x/search_clear_pressed.png) 2x);
533 /* Container for the detail and thumbnail list views. */
536 -webkit-transition: all 180ms ease;
537 border-top: 1px solid rgba(20, 20, 22, 0.1);
543 display: -webkit-box;
550 .dialog-middlebar-contents {
551 display: -webkit-box;
558 /* Container for the ok/cancel buttons. */
560 -webkit-box-align: center;
561 -webkit-box-orient: horizontal;
562 border-top: 1px solid rgb(225, 225, 225);
563 display: -webkit-box;
568 .progressable:not([progress]) .progress-bar,
569 .progressable:not([progress]) .preparing-label {
573 .progressable[progress] .ok,
574 .progressable[progress] #filename-input-box,
575 .progressable[progress] #preview-lines,
576 .progressable[progress] .file-type {
580 .progressable .progress-bar {
582 -webkit-margin-end: 20px;
583 -webkit-margin-start: 20px;
586 /* The container for breadcrumb elements. */
588 -webkit-box-align: center;
590 -webkit-box-orient: horizontal;
591 display: -webkit-box;
598 -webkit-margin-end: 5px;
599 -webkit-margin-start: 10px;
602 /* The icon for offline mode */
604 -webkit-margin-end: 0;
605 -webkit-margin-start: 10px;
606 background-image: -webkit-image-set(
607 url('../images/files/ui/offline.png') 1x,
608 url('../images/files/ui/2x/offline.png') 2x);
611 transition-duration: 200ms;
612 transition-property: opacity;
613 transition-timing-function: ease-out;
617 /* Transition for '-webkit-margin-start' (or -end) property is not working.
618 * So I added .offline-icon-space to animate 'width' property. */
619 .offline-icon-space {
620 -webkit-margin-end: 0;
621 -webkit-margin-start: -26px; /* Clear width of .offline-icon */
622 transition-duration: 200ms;
623 transition-property: width;
624 transition-timing-function: ease-out;
628 body[drive] .dialog-container[connection='offline'] .offline-icon,
629 body[drive] .dialog-container[connection='metered'] .offline-icon {
633 body[drive] .dialog-container[connection='offline'] .offline-icon-space,
634 body[drive] .dialog-container[connection='metered'] .offline-icon-space {
638 .breadcrumbs > [collapsed]::before {
642 .breadcrumbs > [collapsed] {
646 /* A single directory name in the list of path breadcrumbs. */
651 text-overflow: ellipsis;
655 /* The final breadcrumb, representing the current directory. */
656 #search-breadcrumbs .breadcrumb-path.breadcrumb-last {
661 /* The > arrow between breadcrumbs. */
663 .breadcrumbs .separator {
664 background-image: -webkit-image-set(
665 url('../images/files/ui/breadcrumb-separator.png') 1x,
666 url('../images/files/ui/2x/breadcrumb-separator.png') 2x);
667 background-position: center center;
668 background-repeat: no-repeat;
674 #filename-input-box input {
675 border: 1px solid #c8c8c8;
677 box-sizing: border-box;
678 height: 31px; /* border-box */
684 -webkit-box-orient: vertical;
685 display: -webkit-box;
690 -webkit-box-orient: vertical;
691 display: -webkit-box;
697 -webkit-box-orient: vertical;
698 display: -webkit-box;
701 #detail-table > list,
704 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
707 #file-list .drag-selection-border {
708 -webkit-box-sizing: border-box;
709 background-color: rgba(255, 255, 255, 0.3);
710 border: 2px solid rgba(255, 255, 255, 0.6);
711 outline: 1px solid rgba(0, 0, 0, 0.1);
717 background: 100% url(../images/common/spinner.svg);
729 background: url(../images/common/spinner.svg) center / 16px no-repeat;
739 -webkit-box-align: center;
740 -webkit-box-orient: horizontal;
741 background-color: #f0f0f0;
742 background-image: -webkit-image-set(
743 url('../images/files/ui/warning_icon_square.png') 1x,
744 url('../images/files/ui/2x/warning_icon_square.png') 2x);
745 background-position: 15px center;
746 background-repeat: no-repeat;
748 display: -webkit-box;
752 padding-left: 57px; /* Make space for the icon. */
753 transition: height 70ms linear;
756 .downloads-warning[hidden] {
757 display: -webkit-box !important; /* Overrides [hidden] for animation. */
761 @-webkit-keyframes heightAnimation {
764 display: -webkit-box;
768 /* Drive space warning banner. */
770 -webkit-animation: heightAnimation 70ms linear;
771 -webkit-box-align: center;
772 -webkit-box-orient: horizontal;
773 background-image: url(chrome://resources/images/clouds.png);
774 background-repeat: repeat-x;
775 background-size: 150px 44px;
777 display: -webkit-box;
784 .volume-warning[hidden] {
789 .volume-warning .drive-icon {
790 background-image: -webkit-image-set(
791 url('../images/files/ui/drive_logo.png') 1x,
792 url('../images/files/ui/2x/drive_logo.png') 2x);
793 background-position: center;
794 background-repeat: no-repeat;
795 background-size: 25px 22px;
800 .volume-warning .drive-text {
804 /* The cr.ui.Grid representing the detailed file list. */
807 padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */
811 body[type='full-page'] .thumbnail-frame > .img-container {
815 body[type='full-page'] .thumbnail-frame > .img-container,
816 body[type='full-page'] .detail-name .detail-icon {
820 .img-container > img {
821 -webkit-user-drag: none;
825 .img-container > img:not(.cached):not(.drag-thumbnail) {
826 -webkit-animation: fadeIn 250ms linear;
830 -webkit-box-align: center;
831 -webkit-box-orient: horizontal;
832 -webkit-box-pack: center;
835 display: -webkit-box;
842 .thumbnail-bottom .filename-label {
846 /* Styles specific for the grid view. */
848 .thumbnail-grid .thumbnail-item {
849 -webkit-margin-start: 21px;
850 border: 3px solid transparent; /* Selection will make the border visible. */
855 .thumbnail-grid .thumbnail-frame {
856 background-color: rgb(245, 245, 245);
863 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame,
864 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame {
868 .thumbnail-grid .img-container {
873 .thumbnail-grid .thumbnail-bottom {
874 background: rgba(0, 0, 0, 0.55);
879 /* Padding counterweights negative margins of items, thus eliminating scroll
880 bar when it's not needed. Max height is set to fit 8 items before showing
882 #default-actions-list {
887 #default-actions-list > li > * {
888 background-position: 5px center;
889 background-repeat: no-repeat;
890 background-size: 16px 16px;
894 #list-container list > li[selected],
895 #list-container grid > li[selected],
896 #default-actions-list > li[selected] {
897 background-color: rgb(225, 225, 225);
900 #list-container list:focus > li[selected],
901 #list-container grid:focus > li[selected],
902 #default-actions-list:focus > li[selected] {
903 background-color: rgb(66, 129, 244);
907 #list-container list > li.accepts[selected],
908 #list-container grid > li.accepts[selected] {
909 background-color: rgb(215, 215, 215);
912 #list-container list:focus > li.accepts[selected],
913 #list-container grid:focus > li.accepts[selected] {
914 background-color: rgb(48, 125, 254);
917 #list-container list > li.accepts,
918 #list-container grid > li.accepts {
919 background-color: #f1f1f1;
922 #list-container.nohover grid > .accepts {
923 background-color: transparent;
926 #directory-tree .tree-item.accepts > .tree-row,
927 #navigation-list > .accepts,
928 #list-container list > li.accepts,
929 #list-container grid > li.accepts {
930 -webkit-animation: acceptsBlink 200ms linear 1s 3;
933 @-webkit-keyframes acceptsBlink {
935 background-color: transparent;
939 .table-row-cell .selection-label {
940 -webkit-margin-end: 10px;
944 .table-row-cell .filename-label,
945 .thumbnail-item .filename-label,
946 /* Show ellipsis in cells. The name column has different structure and overrides
948 .table-row-cell > div {
951 text-overflow: ellipsis;
955 /* Text box used for renaming in the detail list. */
956 .table-row-cell input.rename {
962 outline-color: rgb(77, 144, 254);
971 .table-row-cell .filename-label,
972 .table-row-cell input.rename {
976 [renaming] > .filename-label {
980 /* Text box used for renaming in the thumbnail list. */
981 .thumbnail-grid input.rename {
982 -webkit-margin-start: -1px;
983 box-sizing: border-box;
988 /* The cr.ui.Table representing the detailed file list. */
993 /* Bottom pane describing current selection. */
995 -webkit-box-align: center;
996 -webkit-box-orient: horizontal;
997 -webkit-transition: background-color 150ms ease;
998 background: linear-gradient(
999 to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
1000 border-top: 1px solid rgba(20, 20, 22, 0.1);
1002 display: -webkit-box;
1006 padding: 0 10px 0 7px;
1012 .preview-panel[visibility=hiding] {
1013 /* Using all seems to cause preview panel and checkbox flicking issue. */
1014 -webkit-transform: translate(0, 5px);
1016 transition: opacity 220ms ease;
1019 .preview-panel[visibility=hidden] {
1024 .preview-panel > .left,
1025 .dialog-footer > .left {
1026 -webkit-box-align: center;
1027 -webkit-box-flex: 1;
1028 -webkit-box-orient: horizontal;
1029 display: -webkit-box;
1032 .preview-panel > .right,
1033 .dialog-footer > .right {
1034 -webkit-box-pack: end;
1037 .preview-panel .preparing-label {
1038 -webkit-margin-start: 30px;
1041 .preview-panel .progress-bar {
1042 -webkit-box-flex: 1;
1045 .preview-thumbnails {
1046 -webkit-box-orient: horizontal;
1047 display: -webkit-box;
1051 .preview-thumbnails > .img-container {
1052 background-color: white;
1053 background-size: 35px 35px; /* For file icons. */
1054 border: 2px solid white;
1055 box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5);
1056 box-sizing: border-box;
1059 margin: 0 0 0 -25px; /* Overlapped images. */
1065 .preview-thumbnails > .popup {
1066 -webkit-transform: translate(0, 3px) scale(0.95);
1067 background-color: #f2f2f2;
1068 border: 2px solid #fff;
1070 box-shadow: 0 0 0 1px #F0F0F0,
1072 2px 2px 6px rgba(0, 0, 0, 0.2);
1073 display: -webkit-flex;
1076 pointer-events: none;
1078 transition: opacity 180ms ease-in 300ms,
1079 -webkit-transform 180ms ease-in 300ms;
1083 .preview-thumbnails.has-zoom:hover > .popup {
1084 -webkit-transform: translate(0, 0) scale(1.0);
1086 pointer-events: auto;
1089 @-webkit-keyframes fadeIn {
1098 .preview-thumbnails img {
1099 -webkit-animation: fadeIn 180ms ease-in-out;
1102 .preview-thumbnails > .popup > img {
1103 -webkit-flex: 1 1 0;
1104 -webkit-user-drag: none;
1107 /* Table splitter element */
1108 .table-header-splitter {
1109 background-image: -webkit-image-set(
1110 url('../images/files/ui/vertical_separator.png') 1x,
1111 url('../images/files/ui/2x/vertical_separator.png') 2x);
1112 background-position: center;
1113 background-repeat: repeat-y;
1119 .table-header-splitter:last-child {
1123 /* Container for a table header. */
1125 box-sizing: border-box;
1129 .table-header-sort-image-desc::after {
1130 -webkit-padding-start: 13px;
1131 background-image: -webkit-image-set(
1132 url('../images/files/ui/sort_desc.png') 1x,
1133 url('../images/files/ui/2x/sort_desc.png') 2x);
1134 background-position: center center;
1135 background-repeat: no-repeat;
1142 .table-header-sort-image-asc::after {
1143 -webkit-padding-start: 13px;
1144 background-image: -webkit-image-set(
1145 url('../images/files/ui/sort_asc.png') 1x,
1146 url('../images/files/ui/2x/sort_asc.png') 2x);
1147 background-position: center center;
1148 background-repeat: no-repeat;
1155 .preview-container .table-header {
1156 border-radius: 0 4px 0 0;
1159 /* Text label in a table header. */
1160 .table-header-label {
1161 color: rgb(100, 100, 100);
1166 .table-row-cell > * {
1167 -webkit-box-align: center;
1168 -webkit-box-flex: 1;
1169 -webkit-box-orient: horizontal;
1174 color: rgb(100, 100, 100);
1177 .table-row-cell > .detail-name {
1178 display: -webkit-box;
1181 .table-row-cell > .detail-name {
1182 color: rgb(0, 0, 0);
1186 #list-container list:focus > [selected] .table-row-cell,
1187 #list-container list:focus > [selected] .detail-name {
1192 -webkit-box-align: center;
1196 -webkit-margin-end: 0;
1197 -webkit-margin-start: 0;
1202 #select-all-checkbox {
1203 -webkit-margin-end: 13px;
1204 -webkit-margin-start: 3px;
1207 vertical-align: middle;
1210 #list-container .table-header #select-all-checkbox,
1211 #list-container li.table-row .file-checkbox {
1212 -webkit-appearance: none;
1213 background-image: -webkit-image-set(
1214 url('../images/files/ui/select_checkbox.png') 1x,
1215 url('../images/files/ui/2x/select_checkbox.png') 2x);
1216 background-position: center;
1217 background-repeat: no-repeat;
1223 #list-container li.table-row .file-checkbox {
1224 vertical-align: top;
1227 #list-container .table-header #select-all-checkbox::after,
1228 #list-container li.table-row .file-checkbox::after {
1232 #list-container .table-header #select-all-checkbox:checked,
1233 #list-container li.table-row .file-checkbox:checked {
1234 background-image: -webkit-image-set(
1235 url('../images/files/ui/select_checkbox_checked.png') 1x,
1236 url('../images/files/ui/2x/select_checkbox_checked.png') 2x);
1239 #list-container .table-header #select-all-checkbox:checked,
1240 #list-container list li.table-row[selected] .file-checkbox {
1241 -webkit-filter: brightness(0) opacity(40%);
1244 #list-container list:focus li.table-row[selected] .file-checkbox {
1245 -webkit-filter: brightness(0) invert();
1248 #list-container li.table-row,
1249 #default-actions-list li {
1254 /* The icon in the name column. See file_types.css for specific icons. */
1260 #detail-table .detail-icon {
1261 /* To shift the icon position. */
1266 -webkit-box-flex: 1;
1267 -webkit-box-orient: horizontal;
1268 -webkit-padding-start: 8px;
1269 display: -webkit-box;
1273 -webkit-margin-end: 6px;
1276 .preview-panel .spacer {
1277 -webkit-box-flex: 1;
1281 min-width: 21px; /* overrride */
1282 padding: 0; /* overrride */
1286 #delete-button::before {
1287 /* Background image should be specified in the before pseudo element because
1288 * border image fill is specified to delete-button. */
1289 background: -webkit-image-set(
1290 url(../images/files/ui/onbutton_trash.png) 1x,
1291 url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center;
1298 #delete-button[disabled] {
1302 #tasks-menu menuitem:not(.change-default) {
1303 background-position: left 10px center;
1309 min-width: 0; /* overrride */
1313 -webkit-box-flex: 1;
1314 -webkit-margin-end: 10px;
1315 -webkit-margin-start: 10px;
1316 vertical-align: middle;
1319 /* The selection summary text at the bottom of the preview pane. */
1323 text-overflow: ellipsis;
1324 vertical-align: middle;
1325 white-space: nowrap;
1328 .preview-summary .calculating-size {
1334 -webkit-box-align: center;
1335 display: -webkit-box;
1338 /* Overriding input.common[type='checkbox'] rule in common.css. */
1339 .detail-name > input.common[type='checkbox'] {
1340 -webkit-margin-end: 4px;
1341 -webkit-margin-start: -1px;
1345 list .detail-name > .file-checkbox::before,
1347 /* Invisible area that reacts on mouse events. */
1349 display: -webkit-box;
1357 #filename-input-box {
1358 -webkit-box-align: center;
1359 -webkit-box-flex: 1;
1360 display: -webkit-box;
1363 #filename-input-box input {
1364 -webkit-box-flex: 1;
1365 display: -webkit-box;
1369 #filename-input-box .filename-label {
1370 -webkit-box-orient: horizontal;
1371 background-color: white;
1373 display: -webkit-box;
1377 body:not([type='saveas-file']) #filename-input-box {
1381 /* A vertical spring. */
1383 -webkit-box-flex: 1;
1384 -webkit-box-orient: vertical;
1385 display: -webkit-box;
1390 body[type='folder'] .file,
1391 body[type='upload-folder'] .file,
1392 body[drive] .dialog-container[connection='offline'] .dim-offline {
1396 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
1398 -webkit-app-region: no-drag;
1405 z-index: 1000; /* Must be above all elements in file manager container. */
1408 /* When the overlay pane is visible hide everything else so that the tab order
1410 body[overlay-visible] > :not(.overlay-pane) {
1411 display: none !important;
1414 /* Invisible container for elements representing files while dragging. */
1417 /* Hack for extra margins caused by setDragImage(). */
1418 padding: 1000px 0 0 1000px;
1421 z-index: -1; /* below .dialog-container */
1424 #drag-container .drag-contents {
1425 -webkit-box-orient: horizontal;
1426 background-color: #fafafa;
1427 border: 1px solid #bbb;
1429 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
1430 display: -webkit-box;
1433 transition: opacity 200ms ease-in;
1436 #drag-container .drag-contents.for-image {
1440 #drag-container .thumbnail-item {
1441 -webkit-box-orient: horizontal;
1442 display: -webkit-box;
1445 /* When changing these properties please preserve these conditions:
1446 1. width == height (so that the rotated thumbnail does not look off-center)
1447 2. width % 8 == 0 (to minimize rounding errors in the centering code) */
1448 #drag-container .img-container {
1449 -webkit-box-flex: 0;
1450 display: -webkit-box;
1457 #drag-container .label {
1458 -webkit-box-flex: 1;
1464 text-overflow: ellipsis;
1465 white-space: nowrap;
1468 menu.file-context-menu {
1469 z-index: 600; /* Must be below the overlay pane (1000). */
1472 menu.chrome-menu hr {
1478 -webkit-box-pack: center;
1479 display: -webkit-box;
1483 -webkit-box-align: center;
1484 display: -webkit-box;
1488 /* transition: opacity 1000ms linear; */
1489 background-color: rgba(255, 255, 255, 0.8);
1502 /* Message panel for unmounted Drive */
1516 body[drive='mounting'] .dialog-container #unmounted-panel,
1517 body[drive='error'] .dialog-container #unmounted-panel,
1518 body[unformatted] .dialog-container #format-panel {
1522 body[drive='unmounted'] .dialog-container .filelist-panel,
1523 body[drive='mounting'] .dialog-container .filelist-panel,
1524 body[drive='error'] .dialog-container .filelist-panel,
1525 body[unformatted] .dialog-container .filelist-panel {
1526 /* Hide file list when Drive is not mounted.
1527 Use opacity to avoid manual resizing.*/
1531 #unmounted-panel > *,
1533 -webkit-box-align: center;
1534 -webkit-box-orient: horizontal;
1535 -webkit-box-pack: start;
1538 margin-bottom: 10px;
1541 #unmounted-panel > .loading {
1545 #unmounted-panel > .loading > .spinner-box {
1553 body[unformatted] #format-panel > .error,
1554 body[drive='mounting'] #unmounted-panel > .loading,
1555 body[drive='error'] #unmounted-panel > .error,
1556 #format-panel > #format-button,
1557 #unmounted-panel.retry-enabled > .learn-more {
1558 display: -webkit-box;
1562 color: rgb(17, 85, 204);
1564 text-decoration: none;
1571 .buttonbar .tooltip,
1572 .topbutton-bar .tooltip {
1579 background: #2d2d2d;
1581 box-shadow: 1px 2px 4px #ccc;
1582 box-sizing: border-box;
1592 outline: 1px solid rgba(255, 255, 255, 0.5);
1594 pointer-events: none;
1598 white-space: nowrap;
1599 z-index: 600; /* Must be below the overlay pane (1000). */
1604 border-left: 5px solid transparent;
1605 border-right: 5px solid transparent;
1606 border-top: transparent;
1616 border-bottom: 5px solid #2d2d2d;
1620 border-bottom: 5px solid rgba(255, 255, 255, 0.5);
1623 /* Show with delay, disappear instantly */
1624 @-webkit-keyframes tooltip-show {
1627 100% { opacity: 1; }
1631 -webkit-animation-duration: 800ms;
1632 -webkit-animation-iteration-count: 1;
1633 -webkit-animation-name: tooltip-show;
1634 -webkit-animation-timing-function: linear;
1638 #no-search-results {
1645 top: 28px; /* Leave room for the file list header. */
1648 .dialog-container:not([drive-welcome='page']) #no-search-results[show] {
1652 #volume-space-info-contents {
1653 -webkit-box-align: center;
1654 display: -webkit-box;
1657 #volume-space-info-contents > div {
1658 -webkit-box-flex: 1;
1659 -webkit-margin-start: 15px;
1660 display: -webkit-box;
1663 #list-container .table-header-inner {
1667 #list-container .table-header-cell:hover {
1668 background-color: inherit;
1671 #list-container .table-header-cell:first-child {
1672 -webkit-box-sizing: border-box;
1673 -webkit-padding-start: 8px;
1677 outline-color: rgb(77, 144, 254);
1680 #new-folder-button {
1684 #default-action-dialog {
1689 .drive-welcome-wrapper {
1690 /* drive_welcome.css will override it once loaded. */
1694 list.autocomplete-suggestions {
1695 -webkit-margin-before: -7px;
1696 -webkit-margin-start: -38px;
1697 background-color: rgb(250, 250, 250);
1699 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
1700 box-sizing: border-box; /* To match the width with the search box's. */
1701 color: rgb(34, 34, 34);
1705 width: 300px !important; /* This overrides the value specified by script. */
1709 list.autocomplete-suggestions > li {
1710 -webkit-box-align: center;
1711 display: -webkit-box;
1715 list.autocomplete-suggestions > li > div.detail-icon {
1716 -webkit-margin-end: 6px;
1717 -webkit-margin-start: 6px;
1720 list.autocomplete-suggestions > li > div.detail-text {
1721 -webkit-box-flex: 1;
1723 text-overflow: ellipsis;
1726 list.autocomplete-suggestions > li > div.detail-text em {
1727 color: rgb(150, 150, 150);
1731 list.autocomplete-suggestions > li > div[search-icon] {
1732 background: -webkit-image-set(
1733 url('../images/files/ui/search_icon_active.png') 1x,
1734 url('../images/files/ui/2x/search_icon_active.png') 2x);
1735 background-position: center;
1736 background-repeat: no-repeat;
1739 list.autocomplete-suggestions > li[selected] > div[search-icon],
1740 list.autocomplete-suggestions > li[lead] > div[search-icon] {
1741 -webkit-filter: brightness(0) invert();
1744 list.autocomplete-suggestions > [selected],
1745 list.autocomplete-suggestions > [lead] {
1746 background-color: rgb(66, 129, 244);
1750 list.autocomplete-suggestions > [selected] > div.detail-text em,
1751 list.autocomplete-suggestions > [lead] > div.detail-text em {
1759 #gear-menu > menuitem:not(.menuitem-button) {
1763 /* View buttons in the gear menu. */
1765 menuitem#detail-view {
1766 background-image: -webkit-image-set(
1767 url('../images/files/ui/button_list_view.png') 1x,
1768 url('../images/files/ui/2x/button_list_view.png') 2x);
1771 menuitem#detail-view[selected]:not([disabled]),
1772 menuitem#detail-view[lead]:not([disabled]) {
1773 background-image: -webkit-image-set(
1774 url('../images/files/ui/button_list_view_white.png') 1x,
1775 url('../images/files/ui/2x/button_list_view_white.png') 2x);
1778 menuitem#thumbnail-view {
1779 background-image: -webkit-image-set(
1780 url('../images/files/ui/button_mosaic_view.png') 1x,
1781 url('../images/files/ui/2x/button_mosaic_view.png') 2x);
1784 menuitem#thumbnail-view[selected]:not([disabled]),
1785 menuitem#thumbnail-view[lead]:not([disabled]) {
1786 background-image: -webkit-image-set(
1787 url('../images/files/ui/button_mosaic_view_white.png') 1x,
1788 url('../images/files/ui/2x/button_mosaic_view_white.png') 2x);
1792 -webkit-app-region: drag;
1802 #suggest-app-dialog {
1803 background-color: #fff;
1809 #suggest-app-dialog .cr-dialog-title {
1810 /* Entire height: 44px (content-box 22px + padding 11px * 2) */
1817 #suggest-app-dialog #webview-container {
1818 border-bottom: solid 1px #bbb;
1819 border-top: solid 1px #bbb;
1823 #suggest-app-dialog.show-spinner #webview-container webview {
1824 pointer-events: none;
1827 #suggest-app-dialog:not(.show-spinner) .spinner-layer {
1831 #suggest-app-dialog .spinner-layer {
1832 background-color: rgba(255, 255, 255, 0.7);
1833 top: 45px; /* Title: 44px, border: 1px */
1836 #suggest-app-dialog .cr-dialog-buttons,
1837 #suggest-app-dialog .cr-dialog-ok,
1838 #suggest-app-dialog .cr-dialog-cancel {
1842 #suggest-app-dialog .cr-dialog-text {
1843 -webkit-padding-after: 10px;
1844 -webkit-padding-before: 0;
1845 -webkit-padding-end: 20px;
1846 -webkit-padding-start: 20px;
1850 #suggest-app-dialog #buttons {
1855 #suggest-app-dialog #buttons > #webstore-button {
1856 -webkit-padding-after: 10px;
1857 -webkit-padding-before: 10px;
1858 -webkit-padding-end: 10px;
1859 -webkit-padding-start: 36px;
1860 background-image: -webkit-image-set(
1861 url('chrome://theme/IDR_WEBSTORE_ICON_16') 1x,
1862 url('chrome://theme/IDR_WEBSTORE_ICON_16@2x') 2x);
1863 background-position: 12px center;
1864 background-repeat: no-repeat;
1867 display: inline-block;
1871 .cr-dialog-frame.error-dialog-frame {
1875 .error-dialog-frame .error-dialog-img {
1876 background-image: -webkit-image-set(
1877 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC') 1x,
1878 url('chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x') 2x);
1879 background-position: center;
1880 background-repeat: no-repeat;
1884 .error-dialog-frame .cr-dialog-cancel {
1888 .error-dialog-frame .cr-dialog-close,
1889 .error-dialog-frame .cr-dialog-title {
1893 .error-dialog-frame .cr-dialog-text {
1897 .cr-dialog-frame.share-dialog-frame {
1898 background-color: white;
1902 .share-dialog-webview-wrapper {
1907 transition: height 200ms ease;
1910 .share-dialog-webview {
1915 .share-dialog-webview-wrapper:not(.loaded) .share-dialog-webview {
1919 .share-dialog-frame .cr-dialog-text,
1920 .share-dialog-frame .cr-dialog-buttons {
1924 #conflict-confirm-dialog .apply-all-line {
1929 #conflict-confirm-dialog input {
1933 /* Progress center */
1936 background: transparent;
1937 border-top: 1px solid transparent;
1938 display: -webkit-flex;
1939 flex-direction: column;
1940 /* TODO(hirono): Set the height by scripts. */
1944 transition: height 300ms ease-out,
1945 background 300ms linear,
1946 border 300ms linear;
1950 #progress-center.opened {
1951 /* TODO(hirono): Set the height by scripts. */
1955 #progress-center-open-view,
1956 #progress-center-close-view {
1964 #progress-center-open-view {
1965 background: #ebebeb;
1966 border-top: 1px solid #d8d8d8;
1969 transition: opacity 300ms linear;
1972 #progress-center:not(.opened) #progress-center-open-view {
1974 pointer-events: none;
1977 #progress-center li {
1978 -webkit-padding-end: 10px;
1979 -webkit-padding-start: 20px;
1983 margin-bottom: 20px;
1986 #progress-center label {
1992 text-overflow: ellipsis;
1993 white-space: nowrap;
1996 #progress-center .progress-frame {
1997 align-items: center;
2002 #progress-center li.error .progress-bar,
2003 #progress-center li.canceled .progress-bar {
2007 #progress-center .progress-bar {
2008 -webkit-margin-end: 24px;
2009 background: #d8d8d8;
2017 #progress-center.opened li.closed-item .progress-bar {
2021 #progress-center .progress-track {
2022 background: #787878;
2024 transition: width 300ms linear;
2027 #progress-center button {
2041 #progress-center button.toggle {
2042 background: -webkit-image-set(
2043 url(../images/files/ui/process_drawer_button_opened.png) 1x,
2044 url(../images/files/ui/2x/process_drawer_button_opened.png) 2x)
2048 transition: bottom 300ms ease-out;
2052 #progress-center button.toggle:hover {
2053 background: -webkit-image-set(
2054 url(../images/files/ui/process_drawer_button_opened_hover.png) 1x,
2055 url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x)
2059 #progress-center button.toggle:active {
2060 background: -webkit-image-set(
2061 url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x,
2062 url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x)
2067 * If the progress center only one item,
2068 * toggle button turned into cancel button the item.
2070 #progress-center-close-view.single button.toggle,
2071 #progress-center button.cancel {
2072 background: -webkit-image-set(
2073 url(../images/files/ui/close_bar.png) 1x,
2074 url(../images/files/ui/2x/close_bar.png) 2x)
2078 #progress-center-close-view.single li:not(.cancelable) button.toggle,
2079 #progress-center li:not(.cancelable) button.cancel {
2083 #progress-center.opened button.toggle {
2084 background: -webkit-image-set(
2085 url(../images/files/ui/process_drawer_button_closed.png) 1x,
2086 url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
2089 * This offset is for aliginig the position of toggle button in both open and
2090 * close view. The value euals to:
2091 * label height 17px + label bottom margin 4px -
2092 * top border width 1px - required margin in the open view 10px.
2097 #progress-center.opened button.toggle:hover {
2098 background: -webkit-image-set(
2099 url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
2100 url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
2104 #progress-center.opened button.toggle:active {
2105 background: -webkit-image-set(
2106 url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
2107 url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)