Files Next: Enable resource remapping for Jelly
Changes the webUI resource loading code to look for file names with a
'_gm3' at the end of their basename and sets the loading id map to point
to them instead of the original resource name (gated behind Jelly flag).
Bug: b/242932747
Change-Id: I9e7dae71a757e4e42052b2c874609b703805aae4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3868434
Reviewed-by: Wenbo Jie <wenbojie@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1042448}
diff --git a/ui/file_manager/file_manager/BUILD.gn b/ui/file_manager/file_manager/BUILD.gn
index 3278816..764af65 100644
--- a/ui/file_manager/file_manager/BUILD.gn
+++ b/ui/file_manager/file_manager/BUILD.gn
@@ -47,6 +47,7 @@
"foreground/css/combobutton.css",
"foreground/css/common.css",
"foreground/css/file_manager.css",
+ "foreground/css/file_manager_gm3.css",
"foreground/css/file_status.css",
"foreground/css/file_types.css",
"foreground/css/list.css",
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css b/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css
new file mode 100644
index 0000000..e9675f8c
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css
@@ -0,0 +1,2669 @@
+/* Copyright (c) 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* Special attribute used in HTML to hide elements. */
+body:not([type]) [visibleif] {
+ display: none;
+}
+
+body[type='folder'] [invisibleif~='folder'],
+body[type='upload-folder'] [invisibleif~='upload-folder'],
+body[type='saveas-file'] [invisibleif~='saveas-file'],
+body[type='open-file'] [invisibleif~='open-file'],
+body[type='open-multi-file'] [invisibleif~='open-multi-file'],
+body[type='full-page'] [invisibleif~='full-page'],
+
+body[type='folder'] [visibleif]:not([visibleif~='folder']),
+body[type='upload-folder'] [visibleif]:not([visibleif~='upload-folder']),
+body[type='saveas-file'] [visibleif]:not([visibleif~='saveas-file']),
+body[type='open-file'] [visibleif]:not([visibleif~='open-file']),
+body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']),
+body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
+ display: none !important;
+}
+
+html {
+ height: 100%;
+ overflow: hidden;
+}
+
+html.col-resize * {
+ cursor: col-resize !important;
+}
+
+/* Outer frame of the dialog. */
+body {
+ -webkit-tap-highlight-color: transparent;
+ cursor: default;
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+ font-size: 13px;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ user-select: none;
+ width: 100%;
+}
+
+/* Drop opacity of selected rows to give a visual feedback on copy/cut
+ * operation. */
+.blink {
+ opacity: 0.8;
+}
+
+/* Main part of the dialog between header and footer. */
+.dialog-container {
+ align-items: stretch;
+ background-color: var(--cros-bg-color);
+ display: flex;
+ flex: auto;
+ flex-direction: row;
+ overflow: hidden;
+ position: relative;
+}
+
+/* List and grid are inside this container. */
+.dialog-main {
+ align-items: stretch;
+ background-color: inherit;
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+}
+
+/* Directory tree at the left. */
+.dialog-navigation-list {
+ background-color: inherit;
+ border-inline-end: none;
+ display: flex;
+ flex: none;
+ flex-direction: column;
+ max-width: 40%;
+ min-width: 105px;
+ overflow: auto;
+ position: relative;
+ width: 240px;
+}
+
+.dialog-navigation-list-contents {
+ display: flex;
+ flex: 1 1 auto;
+ margin-top: 8px;
+ position: relative;
+}
+
+#directory-tree {
+ bottom: 0;
+ flex: none;
+ left: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: absolute; /* TODO(adanilo): crbug.com/212268 still needed? */
+ right: 0;
+ top: 0;
+}
+
+html.col-resize #directory-tree,
+html.breadcrumb-elider-expanded #directory-tree {
+ overflow-y: hidden;
+}
+
+#directory-tree .tree-item[section-start]::before {
+ border-bottom: 1px solid var(--cros-separator-color);
+ content: '';
+ display: block;
+ margin: 8px 0;
+ width: 100%;
+}
+
+#directory-tree .tree-row {
+ cursor: pointer;
+ height: auto;
+ padding: 4px 0;
+}
+
+#directory-tree .tree-row > .file-row {
+ align-items: center;
+ border: 2px solid transparent;
+ border-inline-start-width: 0 !important;
+ border-radius: 0 20px 20px 0;
+ box-sizing: border-box;
+ color: var(--cros-text-color-primary);
+ display: flex;
+ height: 32px;
+ margin-inline-end: 6px;
+}
+
+html[dir='rtl'] #directory-tree .tree-row > .file-row {
+ border-radius: 20px 0 0 20px;
+}
+
+#directory-tree .tree-row > .expand-icon {
+ flex: none;
+ height: 36px;
+ left: 3px;
+ margin: -12px -2px;
+ right: 3px;
+ top: 0;
+ width: 36px;
+}
+
+#directory-tree .tree-row > .file-row > .expand-icon {
+ box-sizing: border-box;
+ flex: none;
+ height: 32px;
+ padding: 6px;
+ width: 32px;
+}
+
+#directory-tree .tree-row > .item-icon {
+ flex: none;
+ height: 16px;
+ width: 16px;
+}
+
+#directory-tree .tree-row > .file-row > .item-icon {
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-icon-color-primary);
+ background-image: none;
+ flex: none;
+ height: 20px;
+ left: -4px;
+ position: relative;
+ right: -4px;
+ width: 20px;
+}
+
+#directory-tree .tree-row[active] > .file-row > .item-icon {
+ background-color: var(--cros-icon-color-selection);
+}
+
+#directory-tree .tree-row > .file-row > .item-icon[style*='background-image'] {
+ background-color: transparent;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+}
+
+#directory-tree .tree-row > .label {
+ display: block;
+ flex: auto;
+ font-weight: 500;
+ margin: 0 6px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#directory-tree .tree-row > .file-row > .label {
+ display: block;
+ flex: auto;
+ font-weight: 500;
+ margin: 0 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#directory-tree .tree-row .rename-placeholder {
+ flex: auto;
+ font-weight: 500;
+}
+
+#directory-tree .tree-row > .rename-placeholder {
+ display: block;
+ margin: 0 6px;
+}
+
+#directory-tree .tree-row .rename-placeholder > input {
+ width: 100%;
+}
+
+#directory-tree [renaming] .root-eject {
+ display: none;
+}
+
+#directory-tree [renaming] > .tree-row > .label,
+#directory-tree [renaming] > .tree-row > .file-row > .label {
+ display: none;
+}
+
+#directory-tree .tree-row > input {
+ display: none;
+ margin: 0 6px;
+ overflow: hidden;
+}
+
+#directory-tree .tree-row > .file-row > input {
+ display: none;
+ margin: 0 10px;
+ overflow: hidden;
+}
+
+#directory-tree [renaming] > .tree-row > input,
+#directory-tree [renaming] > .tree-row > .file-row > input {
+ display: block;
+}
+
+html:not(.col-resize) #directory-tree
+ .tree-row:not([active]):not([selected]):hover > .file-row {
+ background-color: var(--cros-ripple-color);
+}
+
+html.pointer-active #directory-tree
+ .tree-row:not([active]):not([selected]) > .file-row:active {
+ background-color: var(--cros-ripple-color);
+}
+
+html.pointer-active #directory-tree
+ .tree-row:not([active]):not([selected]):hover > .file-row:not(:active) {
+ background-color: unset;
+}
+
+html.pointer-active #directory-tree :not(:active) {
+ cursor: default;
+}
+
+html.drag-drop-active #directory-tree .tree-item.denies > .tree-row > .file-row {
+ background-color: var(--cros-highlight-color-error);
+}
+
+html.drag-drop-active #directory-tree .tree-item.accepts > .tree-row > .file-row {
+ background-color: var(--cros-ripple-color);
+}
+
+html.focus-outline-visible #directory-tree:focus .tree-row[selected] > .file-row {
+ border: 2px solid var(--cros-focus-ring-color);
+}
+
+#directory-tree .tree-row[active] > .file-row {
+ background-color: var(--cros-highlight-color);
+ color: var(--cros-text-color-selection);
+}
+
+#directory-tree .tree-row > .align-right-icon {
+ --iron-icon-height: 16px;
+ --iron-icon-width: 16px;
+ border-style: none;
+ flex: none;
+ height: 40px;
+ position: relative;
+ width: 40px;
+ z-index: 1;
+}
+
+#directory-tree .tree-row > .file-row > .align-right-icon {
+ --iron-icon-height: 20px;
+ --iron-icon-width: 20px;
+ border-radius: 16px;
+ border-style: none;
+ box-sizing: border-box;
+ flex: none;
+ height: 32px;
+ left: 1px;
+ position: relative;
+ right: 1px;
+ width: 32px;
+ z-index: 1;
+}
+
+#directory-tree .tree-row > .external-link-icon iron-icon {
+ padding: 12px;
+}
+
+#directory-tree .tree-row > .file-row > .external-link-icon iron-icon {
+ padding: 6px;
+}
+
+#directory-tree .tree-row > .root-eject {
+ --text-color: currentColor;
+ min-width: 40px;
+ padding: 12px;
+}
+
+#directory-tree .tree-row > .file-row > .root-eject {
+ --text-color: currentColor;
+ --hover-bg-color: var(--cros-ripple-color);
+ min-width: 32px;
+ padding: 0;
+}
+
+html.col-resize #directory-tree .tree-row > .root-eject:hover {
+ --hover-bg-color: none;
+}
+
+html.col-resize #directory-tree .tree-row > .file-row > .root-eject:hover {
+ --hover-bg-color: none;
+}
+
+#directory-tree .tree-row > .root-eject:focus {
+ outline: 1px auto var(--cros-focus-ring-color);
+}
+
+#directory-tree .tree-row > .file-row > .root-eject:focus {
+ border: 1px solid var(--cros-focus-ring-color);
+}
+
+#directory-tree .tree-row > .root-eject:active {
+ border-radius: 20px;
+ outline-width: 0;
+}
+
+#directory-tree .tree-row > .file-row > .root-eject:active {
+ --ink-color: var(--cros-ripple-color);
+ border-width: 0;
+}
+
+#directory-tree .root-item[disabled] {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+/* A vertical splitter between the directory tree and the file list. It is
+ a transparent area centered on the directory tree right border. */
+div.splitter {
+ align-items: center;
+ cursor: col-resize;
+ display: flex;
+ flex: none;
+ justify-content: center;
+ margin: 0;
+ margin-inline-end: calc(16px - 6px);
+ position: relative;
+ width: 32px;
+ z-index: 500; /* Must be below the contextmenu (600). */
+}
+
+div.splitter .splitter-button {
+ --hover-bg-color: var(--cros-ripple-color);
+ --ink-color: var(--cros-ripple-color);
+ --ripple-opacity: 100%;
+ border: none;
+ border-radius: 50%;
+ cursor: col-resize;
+ height: 32px;
+ min-width: 32px;
+ padding: 0;
+ width: 32px;
+}
+
+html.pointer-active div.splitter:not(.splitter-active):hover {
+ cursor: default;
+}
+
+html.col-resize div.splitter:not(.splitter-active) .splitter-button:hover {
+ --hover-bg-color: none;
+}
+
+html.pointer-active div.splitter:not(.splitter-active) .splitter-button:not(:active):hover {
+ --hover-bg-color: none;
+ cursor: default;
+}
+
+div.splitter.splitter-active .splitter-button:active:not(:hover) {
+ background-color: var(--cros-ripple-color);
+}
+
+div.splitter.splitter-active .splitter-button:not(:active) {
+ background-color: var(--cros-icon-button-pressed-color);
+}
+
+div.splitter .splitter-button .icon {
+ -webkit-mask-image: url(../images/common/dragger.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ /* TODO(crbug.com/1268206): the icon is not in disabled state */
+ background-color: var(--cros-icon-color-disabled);
+ height: 20px;
+ padding: 6px;
+ width: 20px;
+}
+
+html.pointer-active div.splitter:not(.splitter-active) .splitter-button:not(:active):hover .icon {
+ cursor: default;
+}
+
+/* Breadcrumbs and things under the title but above the list view. */
+.dialog-header {
+ align-items: center;
+ background: none;
+ border-bottom: 1px solid var(--cros-separator-color);
+ box-sizing: border-box;
+ color: var(--cros-text-color-secondary);
+ display: flex;
+ flex: none;
+ flex-direction: row;
+ font-size: 14px;
+ height: 57px;
+ overflow: hidden;
+ transition: background 220ms ease;
+}
+
+body.check-select .dialog-header {
+ border-bottom: 1px solid var(--cros-separator-color);
+ border-top: 1px solid transparent;
+ color: var(--cros-text-color-prominent);
+}
+
+/* Display a border during check-select mode if we're in a dialog. (This
+ can only happen in an open-multi-file dialog). */
+body[type='open-multi-file'].check-select .dialog-header {
+ border-top: 1px solid var(--cros-bg-color);
+}
+
+.dialog-header > .spacer {
+ flex: auto;
+}
+
+.dialog-header cr-button,
+.dialog-header button {
+ --active-bg: var(--cros-ripple-color);
+ --hover-bg-color: var(--cros-ripple-color);
+ --ink-color: var(--cros-ripple-color);
+ --ripple-opacity: 100%;
+ --text-color: currentColor;
+ border: 2px solid transparent;
+ border-radius: 18px;
+ box-sizing: border-box;
+ color: var(--cros-text-color-primary);
+ cursor: pointer;
+ height: 36px;
+ margin: 0 6px;
+ min-width: 36px;
+ padding: 0;
+ position: relative;
+ text-transform: uppercase;
+ z-index: 1;
+}
+
+html.pointer-active .dialog-header.files-ng cr-button:not(:active):hover {
+ background-color: unset;
+ cursor: default;
+}
+
+.dialog-header.files-ng cr-button::after {
+ content: '';
+ height: 48px;
+ position: absolute;
+ width: 48px;
+}
+
+.dialog-header.files-ng button[menu-shown] {
+ background: var(--cros-icon-button-pressed-color);
+}
+
+.dialog-header.files-ng button:not([menu-shown]):not(:active):hover {
+ background-color: var(--cros-ripple-color);
+}
+
+html.pointer-active .dialog-header.files-ng button:not([menu-shown]):not(:active):hover {
+ background-color: unset;
+ cursor: default;
+}
+
+.dialog-header.files-ng button:active {
+ background: var(--cros-icon-button-pressed-color);
+}
+
+html.focus-outline-visible .dialog-header.files-ng cr-button:not(:active):focus,
+html.focus-outline-visible .dialog-header.files-ng button:not(:active):focus {
+ border: 2px solid var(--cros-focus-ring-color);
+}
+
+.dialog-header files-ripple,
+.dialog-header files-toggle-ripple {
+ display: none;
+}
+
+body.check-select button,
+body.check-select button:hover {
+ color: var(--cros-text-color-primary);
+}
+
+body.check-select .dialog-header button paper-ripple {
+ color: var(--cros-text-color-primary);
+}
+
+/** Avoid highlighting if element doesn't have focus by tab (tabindex=-1)
+ * or if focusing during mouse click event ":active" pseudo-selector. */
+html.focus-outline-visible .dialog-header
+ .menu-button:focus:not([tabindex='-1']):not(:active) {
+ background-color: transparent;
+}
+
+body.check-select .dialog-header
+ .menu-button:focus:not([tabindex='-1']):not(:active) {
+ background-color: var(--cros-ripple-color);
+}
+
+.dialog-header iron-icon,
+.dialog-header .icon {
+ height: 16px;
+ width: 16px;
+}
+
+.dialog-header cr-button {
+ line-height: 32px;
+ padding: 0 8px;
+}
+
+.dialog-header button.icon-button {
+ -webkit-app-region: no-drag;
+ background-color: transparent;
+ background-image: none;
+ background-position: center;
+ background-repeat: no-repeat;
+ box-shadow: none;
+ outline: none;
+ position: relative;
+}
+
+.dialog-header button.icon-button > iron-icon {
+ margin: 8px;
+}
+
+.dialog-header button.icon-button > files-toggle-ripple {
+ height: 28px;
+ left: 2px;
+ top: 2px;
+ width: 28px;
+}
+
+html[dir='rtl'] .dialog-header button.icon-button > files-toggle-ripple {
+ left: auto;
+ right: 2px;
+}
+
+.dialog-header button.icon-button > .icon,
+.dialog-header cr-button.icon-button > .icon {
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 48px;
+ left: 0;
+ margin-inline-end: -8px;
+ margin-inline-start: -8px;
+ margin-top: -8px;
+ position: absolute;
+ top: 0;
+ width: 48px;
+}
+
+.dialog-header.files-ng #tasks {
+ border-radius: 4px;
+ height: 32px;
+ padding: 0 12px;
+}
+
+.dialog-header.files-ng cr-button > .icon,
+.dialog-header.files-ng button > .icon,
+.dialog-header.files-ng #search-box .clear,
+.dialog-header.files-ng #read-only-icon {
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: currentColor;
+ background-image: none;
+}
+
+.dialog-header #search-wrapper {
+ display: flex;
+}
+
+.dialog-header.files-ng #search-wrapper {
+ align-items: center;
+ border-radius: 4px;
+ height: 40px;
+ transition: background-color 200ms ease;
+}
+
+.dialog-header.files-ng #search-wrapper.has-cursor,
+.dialog-header.files-ng #search-wrapper.has-text,
+.dialog-header.files-ng #search-wrapper.hide-pending {
+ background-color: var(--cros-textfield-background-color);
+ margin-inline-end: 16px;
+}
+
+.dialog-header #search-box cr-input {
+ --cr-input-background-color: transparent;
+ --cr-input-border-radius: 0;
+ --cr-input-error-display: none;
+ --cr-input-padding-end: 20px;
+ --cr-input-padding-start: 0;
+ display: inline-block;
+ transition: width 200ms ease;
+ vertical-align: middle;
+ width: 0;
+}
+
+.dialog-header.files-ng #search-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/search.svg);
+}
+
+.dialog-header.files-ng #sharesheet-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/share_ng.svg);
+}
+
+.dialog-header.files-ng #delete-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
+}
+
+body.check-select .dialog-header #delete-button > .icon {
+ background-image: url(../images/files/ui/delete.svg);
+}
+
+.dialog-header #move-to-trash-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
+}
+
+.dialog-header #restore-from-trash-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/restore.svg);
+}
+
+.dialog-header.files-ng #refresh-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/refresh.svg);
+}
+
+.dialog-header.files-ng #view-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/view_list.svg);
+}
+
+body.check-select #view-button {
+ display: none;
+}
+
+.dialog-header.files-ng #view-button.thumbnail > .icon {
+ -webkit-mask-image: url(../images/files/ui/view_thumbnail.svg);
+}
+
+body.check-select #view-button.thumbnail {
+ display: none;
+}
+
+.dialog-header.files-ng #sort-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/sorting_ng.svg);
+}
+
+body.check-select #sort-button {
+ display: none;
+}
+
+.dialog-header.files-ng #gear-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
+}
+body.check-select #gear-button {
+ display: none;
+}
+
+.dialog-header.files-ng #selection-menu-button > .icon {
+ -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
+}
+
+body:not(.check-select) #selection-menu-button {
+ display: none;
+}
+
+.cloud-import-combo-button {
+ position: relative;
+}
+
+.cloud-import-combo-button > .buttons {
+ display: flex;
+}
+
+.cloud-import-combo-button > .buttons > #cloud-import-button {
+ margin: 0;
+}
+
+.cloud-import-combo-button > .buttons > #cloud-import-details-button {
+ margin-inline-end: 0;
+}
+
+#cloud-import-details-button {
+ margin-inline-start: -10px;
+ width: 24px;
+}
+
+#cloud-import-details-button iron-icon {
+ margin: 8px 4px;
+}
+
+#cloud-import-details {
+ background-color: var(--cros-bg-color-elevation-3);
+ border-radius: 12px;
+ box-shadow: var(--cros-elevation-3-shadow);
+ line-height: 1.5em;
+ position: absolute;
+ top: 42px; /* Positioned just overlapping the top of the toolbar */
+ transition: all 200ms ease;
+ width: 270px;
+ z-index: 550;
+}
+
+/* These horizontal positions for #cloud-import-details are fallback value.
+ Usually, these positions are calculated based on the position of dropdown.
+ These fallback values will be used when the cloud import panel is shown
+ before the toolbar buttons are fully laid out. */
+html[dir='ltr'] #cloud-import-details {
+ right: 148px; /* Positioned in relation to the cloud-import toolbar button */
+}
+
+html[dir='rtl'] #cloud-import-details {
+ left: 148px; /* Positioned in relation to the cloud-import toolbar button */
+}
+
+#cloud-import-details.hidden {
+ opacity: 0;
+ transform: translateY(-10px);
+}
+
+#cloud-import-details .banner {
+ background-color: var(--cros-color-prominent);
+ border-radius: 12px 12px 0 0;
+ color: var(--cros-button-label-color-primary);
+ padding: 20px;
+}
+
+#cloud-import-details .banner .title {
+ font-family: 'Google Sans';
+ font-size: 122%;
+ font-weight: 500;
+ margin-bottom: 5px;
+}
+
+#cloud-import-details .main {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+}
+
+#cloud-import-details .status {
+ display: flex;
+ flex-direction: row;
+ margin-top: .2em;
+}
+
+#cloud-import-details .status iron-icon {
+ --iron-icon-fill-color: var(--cros-icon-color-primary);
+ display: block;
+ height: 16px;
+ opacity: .6;
+ width: 16px;
+}
+
+#cloud-import-details .status .content {
+ color: var(--cros-text-color-secondary);
+ flex: 1;
+ padding-inline-start: 10px;
+}
+
+#cloud-import-details .status .content::first-line {
+ color: var(--cros-text-color-primary);
+ font-size: 110%;
+}
+
+#cloud-import-details .status a[is='action-link'] {
+ color: var(--cros-link-color);
+}
+
+#cloud-import-details .progress {
+ background-color: var(--cros-highlight-color);
+ border-radius: 2px;
+ height: 4px;
+ margin-top: 14px;
+ width: 100%;
+}
+
+#cloud-import-details .progress .value {
+ background-color: var(--cros-icon-color-prominent);
+ border-radius: 2px;
+ height: 4px;
+ transition: width 100ms linear;
+ width: 0;
+}
+
+#cloud-import-details cr-button {
+ --active-bg: transparent;
+ --active-shadow:
+ 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
+ --active-shadow-action:
+ 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
+ --bg-action: var(--cros-button-background-color-primary);
+ --border-color: var(--cros-button-stroke-color-secondary);
+ --disabled-bg-action:
+ var(--cros-button-background-color-primary-disabled);
+ --disabled-bg: var(--cros-button-background-color-primary-disabled);
+ --disabled-border-color:
+ var(--cros-button-stroke-color-secondary-disabled);
+ --disabled-text-color: var(--cros-button-label-color-secondary-disabled);
+ --hover-bg-action:
+ var(--cros-button-background-color-primary-hover-preblended);
+ --hover-bg-color: var(--cros-button-background-color-secondary-hover);
+ --hover-border-color: var(--cros-button-stroke-color-secondary-hover);
+ --ink-color: var(--cros-button-ripple-color-secondary);
+ --ripple-opacity-action: var(--cros-button-primary-ripple-opacity);
+ --ripple-opacity: var(--cros-button-secondary-ripple-opacity);
+ --text-color-action: var(--cros-button-label-color-primary);
+ --text-color: var(--cros-button-label-color-secondary);
+ align-self: flex-end;
+ box-shadow: none;
+ font-weight: 500;
+ margin-top: 20px;
+ padding: 0;
+ text-transform: uppercase;
+}
+
+#cloud-import-details cr-button.action-button {
+ --ink-color: var(--cros-button-ripple-color-primary);
+}
+
+#cloud-import-details cr-button.cancel-button {
+ /* no margin needed because the cancel button is in a new row */
+ margin-inline-end: 0;
+}
+
+#files-selected-label {
+ display: none;
+ font-weight: 500;
+}
+
+body.files-ng #files-selected-label {
+ margin-inline-start: 8px;
+}
+
+body.check-select #files-selected-label {
+ display: block;
+}
+
+#cancel-selection-button {
+ --ink-color: var(--cros-ripple-color);
+ border: none;
+ box-shadow: none;
+ color: currentColor;
+ display: flex;
+ text-transform: none;
+}
+
+/* TODO(adanilo) document the calc() reason. */
+body.files-ng #cancel-selection-button {
+ border: 2px solid transparent;
+ margin-inline-start: calc(10px + 1px);
+ width: 36px;
+}
+
+html.focus-outline-visible body.files-ng #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
+ border: 2px solid var(--cros-icon-color-prominent);
+}
+
+body.files-ng #cancel-selection-button > span#cancel-selection-label {
+ display: none;
+}
+
+body.files-ng #cancel-selection-button .icon-arrow-back {
+ -webkit-mask-image: url(../images/files/ui/list_check.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-icon-color-prominent);
+ flex: none;
+ height: 20px;
+ width: 20px;
+}
+
+#cancel-selection-button-wrapper {
+ display: none;
+}
+
+#cancel-selection-button > iron-icon {
+ margin-inline-end: 6px;
+}
+
+#cancel-selection-label {
+ flex: auto;
+ line-height: 31px;
+ overflow: hidden;
+ padding-top: 1px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+body.check-select #cancel-selection-button-wrapper {
+ display: block;
+}
+
+/* Search button */
+body.check-select #search-button {
+ display: none;
+}
+
+/* Search box */
+#search-box {
+ display: flex;
+ flex: none;
+ font-size: 14px;
+}
+
+.dialog-header.files-ng #search-box cr-input {
+ --cr-input-border-bottom: transparent;
+ --cr-input-color: var(--cros-text-color-primary);
+ --cr-input-focus-color: transparent;
+ --cr-input-placeholder-color: var(--cros-text-color-secondary);
+}
+
+.dialog-header.files-ng #search-box cr-input::part(input) {
+ caret-color: var(--cr-input-color);
+}
+
+body.check-select #search-box {
+ display: none;
+}
+
+.dialog-header.files-ng #search-box.has-cursor,
+.dialog-header.files-ng #search-box.has-text,
+.dialog-header.files-ng #search-box.hide-pending {
+ margin-inline-end: 6px;
+}
+
+.dialog-header.files-ng #search-box.has-cursor cr-input,
+.dialog-header.files-ng #search-box.has-text cr-input,
+.dialog-header.files-ng #search-box.hide-pending cr-input {
+ --cr-input-width: calc(288px - 74px);
+ width: calc(288px - 54px);
+}
+
+#search-box .clear {
+ cursor: pointer;
+ display: none;
+ margin: 0;
+ min-width: 0;
+ position: absolute;
+ right: 0;
+ visibility: hidden;
+}
+
+.dialog-header.files-ng #search-box .clear {
+ background: none;
+ height: 36px;
+ width: 36px;
+}
+
+html:not(.pointer-active) .dialog-header.files-ng #search-box .clear:hover {
+ background-color: var(--cros-ripple-color);
+}
+
+.dialog-header.files-ng #search-box .clear > .icon {
+ -webkit-mask-image: url(../images/files/ui/search_clear_filled.svg);
+}
+
+html[dir='rtl'] #search-box .clear {
+ left: 0;
+ right: auto;
+}
+
+.dialog-header.files-ng #search-box.has-cursor .clear,
+.dialog-header.files-ng #search-box.has-text .clear {
+ display: flex;
+}
+
+#search-box.has-text .clear {
+ visibility: visible;
+}
+
+/* Pinned file toggle */
+.dialog-header.files-ng #pinned-toggle-wrapper {
+ display: flex;
+ flex: none;
+}
+
+.dialog-header.files-ng #pinned-toggle-label {
+ color: var(--cros-text-color-primary);
+ margin-inline-end: 16px;
+ margin-inline-start: 12px;
+}
+
+.dialog-header.files-ng cr-toggle {
+ --cr-toggle-checked-bar-color: var(--cros-switch-track-color-active);
+ /* bar color above already defines the opacity, so use 100% here */
+ --cr-toggle-checked-bar-opacity: 100%;
+ --cr-toggle-checked-button-color: var(--cros-switch-knob-color-active);
+ --cr-toggle-checked-ripple-color: var(--cros-focus-aura-color);
+ --cr-toggle-unchecked-bar-color: var(--cros-switch-track-color-inactive);
+ --cr-toggle-unchecked-button-color: var(--cros-switch-knob-color-inactive);
+ --cr-toggle-unchecked-ripple-color: var(--cros-ripple-color);
+ --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
+ --cr-toggle-ripple-diameter: 32px;
+}
+
+/* only show the ripple ring for tab navigation */
+html.focus-outline-visible .dialog-header.files-ng cr-toggle:focus {
+ --cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
+}
+
+/* Container for the detail and thumbnail list views. */
+.dialog-body {
+ flex: auto;
+ position: relative;
+ transition: all 180ms ease;
+}
+
+.main-panel {
+ bottom: 0;
+ display: flex;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.dialog-middlebar-contents {
+ display: flex;
+ flex: none;
+ max-width: 50%;
+ min-width: 45px;
+ position: relative;
+ width: 180px;
+}
+
+/* Container for the ok/cancel buttons. */
+.dialog-footer {
+ align-items: center;
+ background-color: var(--cros-bg-color);
+ border-top: 1px solid var(--cros-separator-color);
+ display: flex;
+ flex: none;
+ flex-direction: row;
+ outline: none;
+ padding: 16px 24px;
+}
+
+.dialog-footer #filename-input-box {
+ margin-inline-end: 16px;
+ margin-inline-start: 16px;
+ max-width: 320px;
+ min-width: 123px;
+}
+
+.dialog-footer cr-input {
+ --cr-input-background-color: var(--cros-textfield-background-color);
+ --cr-input-border-radius: 0;
+ --cr-input-color: var(--cros-textfield-input-color);
+ --cr-input-error-color: var(--cros-textfield-label-color-error);
+ --cr-input-error-display: none;
+ --cr-input-focus-color: var(--cros-textfield-label-color-focus);
+ --cr-input-min-height: 32px;
+ width: 100%;
+}
+
+.dialog-footer .buttonbar {
+ display: flex;
+ height: 32px;
+}
+
+/* Copy style from paper-button for buttons on the footer. */
+.dialog-footer button {
+ border: 0;
+ border-image: none;
+ border-radius: 4px;
+ box-sizing: border-box;
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ padding: 1px 16px;
+ position: relative;
+ text-align: center;
+ user-select: none;
+ z-index: 0;
+}
+
+.dialog-footer button[disabled] {
+ cursor: auto;
+ pointer-events: none;
+}
+
+.dialog-footer button {
+ font-weight: 500;
+}
+
+.dialog-footer button:hover {
+ border-image: none; /* Overrides the definition of common.css. */
+}
+
+.dialog-footer cr-button,
+.dialog-footer button {
+ height: 32px;
+ margin: 0 4px;
+ min-width: 92px;
+}
+
+.dialog-footer cr-button[disabled],
+.dialog-footer cr-button[disabled]:hover,
+.dialog-footer button[disabled],
+.dialog-footer button[disabled]:hover {
+ background-color:
+ var(--cros-button-background-color-primary-disabled);
+ color: var(--cros-button-label-color-primary-disabled);
+}
+
+.dialog-footer .primary {
+ background-color: var(--cros-button-background-color-primary);
+ color: var(--cros-button-label-color-primary);
+}
+
+.dialog-footer .primary:hover {
+ background: var(--cros-button-background-color-primary-hover-preblended);
+}
+
+.dialog-footer .primary paper-ripple {
+ --paper-ripple-opacity: var(--cros-button-primary-ripple-opacity);
+ color: var(--cros-button-ripple-color-primary);
+}
+
+.dialog-footer .primary:active {
+ box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
+}
+
+.dialog-footer .secondary {
+ background: transparent;
+ border: 1px solid var(--cros-button-stroke-color-secondary);
+ color: var(--cros-button-label-color-secondary);
+ margin-inline-end: 8px;
+}
+
+.dialog-footer .secondary:hover {
+ background: var(--cros-button-background-color-secondary-hover);
+ border: 1px solid var(--cros-button-stroke-color-secondary-hover);
+}
+
+.dialog-footer .secondary paper-ripple {
+ --paper-ripple-opacity: var(--cros-button-secondary-ripple-opacity);
+ color: var(--cros-button-ripple-color-secondary);
+}
+
+.dialog-footer .secondary:active {
+ box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
+}
+
+.dialog-footer .select {
+ background-color: var(--cros-textfield-background-color);
+ border: 0;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-inline-start: 16px;
+ max-width: 152px;
+ min-height: 32px;
+ min-width: 104px;
+ outline: none;
+ padding: 0 36px 0 16px;
+ position: relative;
+}
+
+.dialog-footer .select::after {
+ -webkit-mask-image: url(../images/files/ui/sort_desc.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-icon-color-primary);
+ content: '';
+ height: 32px;
+ position: absolute;
+ right: 0;
+ width: 32px;
+}
+
+.dialog-footer div.select:not(:active):focus {
+ box-shadow: 0 0 0 2px var(--cros-focus-ring-color);
+}
+
+.dialog-footer div.select > span {
+ color: var(--cros-text-color-primary);
+ display: inline-block;
+ line-height: 32px;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.dialog-footer div.select > div.options {
+ background-color: var(--cros-bg-color-elevation-2);
+ border-radius: 4px;
+ bottom: calc(100% + 2px);
+ box-shadow: var(--cros-elevation-2-shadow);
+ left: 0;
+ min-width: max-content;
+ padding: 8px 0;
+ position: absolute;
+ right: 0;
+ z-index: 550;
+}
+
+.dialog-footer div.select > div.options:not([expanded]) {
+ display: none;
+}
+
+.dialog-footer div.select > div.options option {
+ color: var(--cros-menu-label-color);
+ line-height: 32px;
+ min-height: 32px;
+ padding: 0 12px 0 16px;
+ vertical-align: middle;
+}
+
+.dialog-footer div.select > div.options option:hover,
+.dialog-footer div.select > div.options:not(:hover) option.selected {
+ background-color: var(--cros-menu-item-background-hover);
+}
+
+.dialog-footer select:hover {
+ border-image: none;
+}
+
+html.focus-outline-visible .dialog-footer .primary:focus,
+html.focus-outline-visible .dialog-footer .secondary:focus,
+html.focus-outline-visible .dialog-footer select:focus,
+html.focus-outline-visible #cloud-import-details cr-button:focus {
+ outline: 2px solid var(--cros-focus-ring-color);
+ outline-offset: 2px;
+}
+
+.progressable:not([progress]) .progress-bar,
+.progressable:not([progress]) .preparing-label {
+ display: none;
+}
+
+.progressable[progress] .ok,
+.progressable[progress] #filename-input-box,
+.progressable[progress] .file-type {
+ display: none;
+}
+
+.progressable .preparing-label {
+ margin-inline-start: 20px;
+}
+
+.progressable .progress-bar {
+ flex: auto;
+ margin-inline-end: 20px;
+ margin-inline-start: 20px;
+}
+
+/* The container for breadcrumb elements. */
+.breadcrumbs {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+}
+
+body.check-select .breadcrumbs {
+ display: none;
+}
+
+/* The toolbar indicator that means the current directory is read only. */
+#read-only-indicator {
+ align-items: center;
+ background-color: var(--cros-highlight-color-hover);
+ border-radius: 16px;
+ display: flex;
+ flex: none;
+ height: 32px;
+ margin-inline-start: 12px;
+ padding: 0 16px;
+ padding-inline: 16px 12px;
+}
+
+body.check-select #read-only-indicator {
+ display: none;
+}
+
+.dialog-header.files-ng #read-only-icon {
+ -webkit-mask-image: url(../images/files/ui/visibility_ng.svg);
+ background-color: var(--cros-icon-color-secondary);
+ height: 20px;
+ margin-inline-end: 8px;
+ width: 20px;
+}
+
+#read-only-label {
+ flex: none;
+ font-size: 13px;
+ font-weight: 500;
+}
+
+.filelist-panel {
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+ min-width: 0;
+}
+
+#list-container {
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+ min-height: 0;
+ position: relative;
+}
+
+#empty-folder {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+#empty-folder > .image {
+ --empty-folder-svg-dot-color: var(--cros-illustration-color-1-shade-1);
+ --empty-folder-svg-file-color: var(--cros-illustration-secondary-color);
+ --empty-folder-svg-ellipse-color: var(--cros-illustration-color-1);
+ --empty-folder-svg-folder-color: var(--cros-illustration-color-1-shade-2);
+ margin-top: 64px;
+ text-align: center;
+}
+
+.list-view #empty-folder > .image {
+ /* The list view has a .table-header at the top, the margin-top should also
+ cover that, hence the desired margin plus the .table-header height. */
+ margin-top: calc(64px + 57px);
+}
+
+#empty-folder > .label {
+ color: var(--cros-text-color-secondary);
+ font: var(--cros-body-2-font);
+ margin-top: 16px;
+ text-align: center;
+}
+
+#detail-table {
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+ min-height: 0;
+ outline: none;
+}
+
+#detail-table > list,
+.thumbnail-grid {
+ flex: auto;
+}
+
+#file-list .drag-selection-border {
+ background-color: rgba(var(--cros-bg-color-rgb), 30%);
+ border: 2px solid rgba(var(--cros-bg-color-rgb), 60%);
+ box-sizing: border-box;
+ display: flex;
+ outline: 1px solid var(--cros-selection-outline);
+ position: absolute;
+ z-index: 2;
+}
+
+.spinner {
+ background: url(chrome://resources/images/throbber_small.svg) center/100%
+ no-repeat;
+ height: 16px;
+ left: 50%;
+ margin-inline-start: -8px;
+ margin-top: -8px;
+ opacity: 0.5;
+ position: absolute;
+ top: 50%;
+ width: 16px;
+}
+
+.loading-indicator {
+ left: calc(50% - 24px);
+ position: absolute;
+ right: calc(50% - 24px);
+ top: 64px;
+}
+
+.list-view .loading-indicator {
+ /* The list view has a .table-header at the top, the top should also
+ cover that, hence the desired top plus the .table-header height. */
+ top: calc(64px + 57px);
+}
+
+@keyframes heightAnimation {
+ 0% {
+ display: flex;
+ height: 0;
+ }
+}
+
+body.files-ng .button-group {
+ display: flex;
+ flex: 0 0 auto;
+ flex-direction: row-reverse;
+ margin-inline-start: auto;
+ padding-inline-start: 48px;
+}
+
+body.files-ng .button-group > a {
+ text-decoration-line: none;
+}
+
+body.files-ng .banner-close {
+ border: 0;
+ height: 32px;
+ margin-inline-end: 20px;
+ padding-inline-end: 16px;
+ padding-inline-start: 16px;
+ position: relative;
+}
+
+/* The cr.ui.Grid representing the detailed file list. */
+.thumbnail-grid {
+ /* On the right side, we have less margin to pack items as long as they are
+ fully visible. */
+ box-sizing: border-box;
+ overflow-y: auto;
+ width: 100%;
+}
+
+body.files-ng grid .grid-title {
+ box-sizing: border-box;
+ color: var(--cros-text-color-secondary);
+ font-family: 'Roboto Medium';
+ padding-inline-start: 16px;
+ padding-top: 20px;
+ /* Make sure clicking this area can unselect file grids. */
+ pointer-events: none;
+ width: 100%;
+}
+
+grid .grid-title.group-by-isDirectory {
+ /* Folders/Files heading doesn't have border bottom, so having a padding
+ * bottom together with grid item's margin-top will make the gap too big.
+ * To prevent that, we can treat grid item (.thumbnail-item)'s margin-top
+ * (16px) as heading's padding bottom, that's why we use the desired height
+ * to minus the margin-top value here.
+ */
+ height: calc(56px - 16px);
+}
+
+grid .grid-title.group-by-modificationTime {
+ border-bottom: 1px solid var(--cros-separator-color);
+ /* The desired height plus the border width. */
+ height: calc(56px + 1px);
+ padding-bottom: 16px;
+}
+
+body.files-ng .thumbnail-frame > .img-container {
+ position: relative;
+}
+
+html:not(.pointer-active) body[type='full-page'] .thumbnail-frame > .img-container,
+body[type='full-page'] .thumbnail-frame > .img-container:active,
+html:not(.pointer-active) body[type='full-page'] .detail-name .detail-icon,
+body[type='full-page'] .detail-name .detail-icon:active {
+ cursor: pointer;
+}
+
+.thumbnail-bottom {
+ align-items: center;
+ bottom: 0;
+ cursor: auto;
+ display: flex;
+ flex-direction: row;
+ left: 0;
+ padding: 0 6px;
+ position: absolute;
+ right: 0;
+}
+
+body.files-ng .thumbnail-bottom {
+ padding: 0;
+}
+
+.thumbnail-bottom .detail-icon {
+ flex: none;
+ height: 16px;
+ width: 16px;
+}
+
+.thumbnail-bottom .filename-label {
+ flex: auto;
+ font-weight: 500;
+ padding-inline-end: 6px;
+}
+
+body.files-ng .thumbnail-item .filename-label {
+ font-weight: normal;
+ padding-inline-end: 12px;
+}
+
+/* Styles specific for the grid view. */
+
+body.files-ng .thumbnail-grid .thumbnail-item {
+ background-color: inherit;
+ border-radius: 4px;
+ height: 160px;
+ margin-inline-start: 16px;
+ margin-top: 16px;
+ overflow: hidden;
+ position: relative;
+ vertical-align: top; /* Prevent vertical spacing for wrapped inline box. */
+ width: 180px;
+}
+
+body.files-ng .thumbnail-item.directory {
+ box-shadow: none;
+ height: 40px;
+}
+
+body.files-ng #list-container .thumbnail-grid li {
+ border: 1px solid var(--cros-separator-color);
+}
+
+body.files-ng grid .thumbnail-bottom .detail-icon {
+ color: var(--cros-icon-color-secondary);
+ height: 40px;
+ padding-inline-end: 6px;
+ padding-inline-start: 6px;
+ width: 32px;
+}
+
+html:not(.pointer-active) body.files-ng grid .thumbnail-bottom .detail-icon,
+body.files-ng grid .thumbnail-bottom .detail-icon:active {
+ cursor: pointer;
+}
+
+.thumbnail-grid .thumbnail-frame {
+ height: 100%;
+ width: 100%;
+}
+
+.thumbnail-grid .img-container {
+ background-color: var(--cros-highlight-color-hover);
+ height: 100%;
+ width: 100%;
+}
+
+body.files-ng .thumbnail-grid .img-container {
+ color: var(--cros-text-color-secondary);
+ height: 120px;
+}
+
+.thumbnail-grid .img-container > .thumbnail {
+ -webkit-user-drag: none;
+ background-color: var(--cros-highlight-color-hover);
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 100%;
+ opacity: 1;
+ position: absolute;
+ width: 100%;
+}
+
+body.files-ng .thumbnail-grid .thumbnail-bottom {
+ color: var(--cros-text-color-primary);
+ height: 40px;
+}
+
+body.files-ng .thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[selected].directory
+ .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[lead].directory
+ .thumbnail-bottom {
+ background-color: var(--cros-highlight-color-hover);
+}
+
+body.files-ng .thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom,
+body.files-ng .thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom,
+body.files-ng .thumbnail-grid:focus .thumbnail-item[selected].directory
+ .thumbnail-bottom,
+body.files-ng .thumbnail-grid:focus .thumbnail-item[lead].directory
+ .thumbnail-bottom {
+ background-color: var(--cros-highlight-color);
+}
+
+body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[selected]
+ .thumbnail-bottom,
+body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[lead]
+ .thumbnail-bottom,
+body.check-select.files-ng .thumbnail-grid:focus
+ .thumbnail-item[selected].directory .thumbnail-bottom,
+body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[lead].directory
+ .thumbnail-bottom {
+ color: var(--cros-text-color-selection);
+}
+
+body.check-select.files-ng #list-container .thumbnail-grid:focus
+ .thumbnail-item[lead],
+body.files-ng #list-container .thumbnail-grid:focus
+ .thumbnail-item[lead]:not([selected]) {
+ /* 2px border: 1px via box-shadow + 1px via border, to accommodate
+ the difference between regular border 1px and selected border 2px.*/
+ border-color: var(--cros-focus-ring-color);
+ box-shadow: 0 0 0 1px var(--cros-focus-ring-color);
+}
+
+body.check-select.files-ng #list-container .thumbnail-grid
+ .thumbnail-item[lead],
+body.files-ng #list-container .thumbnail-grid
+ .thumbnail-item[lead]:not([selected]) {
+ /* 2px border: 1px via box-shadow + 1px via border, to accommodate
+ the difference between regular border 1px and selected border 2px.*/
+ border-color: var(--cros-focus-ring-color-inactive);
+ box-shadow: 0 0 0 1px var(--cros-focus-ring-color-inactive);
+}
+
+.thumbnail-grid > .spacer.folder-spacer {
+ height: 5px;
+}
+
+body.files-ng .thumbnail-grid > .spacer {
+ height: 0;
+}
+
+body:not(.check-select) .thumbnail-grid.image-dominant
+ .can-hide-filename.thumbnail-loaded:not([selected]) .thumbnail-bottom {
+ display: none;
+}
+
+.badge {
+ background-color: var(--cros-bg-color);
+ background-position: center;
+ background-repeat: no-repeat;
+ border-radius: 2px;
+ display: none;
+ height: 20px;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ width: 20px;
+}
+
+html[dir='rtl'] .badge {
+ left: 10px;
+ right: auto;
+}
+
+.copied .badge {
+ background-image: url(../images/files/ui/cloud_import_syncing.svg);
+ display: block;
+}
+
+.imported .badge {
+ background-image: url(../images/volumes/service_drive.svg);
+ display: block;
+}
+
+.imported .filename-label,
+.copied .filename-label {
+ margin-inline-end: 14px;
+}
+
+/* Padding counterweights negative margins of items, thus eliminating scroll
+ bar when it's not needed. Max height is set to fit 8 items before showing
+ scroll bar. */
+body.files-ng #default-tasks-list {
+ border-top: solid 1px var(--cros-separator-color);
+ height: 240px;
+ margin: 16px -16px;
+ margin-bottom: 12px;
+ padding-top: 8px;
+}
+
+#default-task-dialog.bottom-shadow::after {
+ background: linear-gradient(180deg,
+ var(--cros-bg-color) 0,
+ var(--cros-bg-color) 100%);
+ bottom: 24px;
+ content: '';
+ height: 40px;
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ transform: rotate(-180deg);
+ width: 100%
+}
+
+@media (prefers-color-scheme: dark) {
+ #default-task-dialog.bottom-shadow::after {
+ background: linear-gradient(180deg,
+ var(--cros-bg-color-elevation-2) 0,
+ var(--cros-bg-color-elevation-2) 100%);
+ }
+}
+
+#default-tasks-list li {
+ height: 40px;
+ line-height: 40px;
+}
+
+#default-tasks-list > li > .icon {
+ -webkit-mask-position: 16px center;
+ -webkit-mask-repeat: no-repeat;
+ background-position: 16px center;
+ background-repeat: no-repeat;
+ background-size: 20px;
+ height: 100%;
+}
+
+#default-tasks-list > li > .label {
+ padding-inline-start: 52px;
+ position: absolute;
+}
+
+html[dir='rtl'] #default-tasks-list > li > .icon {
+ -webkit-mask-position-x: calc(100% - 16px);
+ background-position-x: calc(100% - 16px);
+}
+
+body.files-ng #list-container list > li[selected],
+body.files-ng #list-container list > li:active,
+body.files-ng #list-container list > li.accepts,
+body.files-ng #list-container list > li[lead] {
+ background-color: var(--cros-highlight-color-hover);
+ border-radius: 2px;
+}
+
+body.files-ng #list-container list:focus > li[selected],
+body.files-ng #list-container list:focus > li.accepts[selected],
+body.files-ng #list-container list:focus > li[lead] {
+ background-color: var(--cros-highlight-color);
+}
+
+body.files-ng #default-tasks-list:focus > li[selected],
+body.files-ng #default-tasks-list > li[selected] {
+ background-color: var(--cros-highlight-color);
+ outline: none;
+}
+
+body.files-ng #default-tasks-list li[selected]::after {
+ -webkit-mask-image: url(../images/common/ic_selected.svg);
+ -webkit-mask-position: right;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-icon-color-selection);
+ content: ' ';
+ height: 40px;
+ position: absolute;
+ right: 16px;
+ top: 0;
+ width: 40px;
+}
+
+html[dir='rtl'] body.files-ng #default-tasks-list li[selected]::after {
+ background-position: left;
+ left: 16px;
+ right: unset;
+}
+
+/* selector "li[lead]:not([selected])" is for the row just gets unselected */
+body.check-select #list-container list > li[lead]:not([selected]),
+#list-container list > li[lead]:not([selected]) {
+ background-color: var(--cros-highlight-color-hover);
+}
+
+body.check-select #list-container list:focus > li[lead]:not([selected]),
+#list-container list > li[lead]:not([selected]):focus {
+ background-color: var(--cros-highlight-color);
+}
+
+body.files-ng #list-container li {
+ border: 1px solid transparent;
+}
+
+/* Modify GROUP_HEADING_HEIGHT in file_table_list.js if this height changes. */
+#list-container .group-heading {
+ border-bottom: 1px solid var(--cros-separator-color);
+ box-sizing: border-box;
+ color: var(--cros-text-color-secondary);
+ font-family: 'Roboto Medium';
+ /* The desired height plus the border width. */
+ height: calc(56px + 1px);
+ padding-inline-start: 16px;
+ padding-top: 20px;
+ /* Make sure clicking this area can unselect file items. */
+ pointer-events: none;
+ width: 100%;
+}
+
+/*
+ * selector "li[lead]" is for the row just being operated on,
+ * e.g. with mouse: click/select/unselect
+ * with keyboard: Ctrl + ArrowUp/ArrowDown to move
+ */
+body.files-ng.check-select #list-container list:focus > li[lead] {
+ border: 1px solid var(--cros-focus-ring-color);
+}
+
+body.files-ng.check-select #list-container list > li[lead] {
+ border: 1px solid var(--cros-focus-ring-color-inactive);
+}
+
+#list-container grid > .accepts {
+ background-color: var(--cros-highlight-color-hover)
+}
+
+#directory-tree .tree-item.accepts > .tree-row,
+#list-container list > li.accepts,
+#list-container grid > li.accepts {
+ animation: acceptsBlink 200ms linear 1s 3;
+}
+
+@keyframes acceptsBlink {
+ 0% {
+ background-color: transparent;
+ color: var(--cros-ripple-color);
+ }
+}
+
+.table-row-cell .filename-label,
+.thumbnail-item .filename-label,
+/* Show ellipsis in cells. The name column has different structure and overrides
+ this rule. */
+.table-row-cell > div {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: pre;
+}
+
+/* Text box used for renaming in the detail list. */
+.table-row-cell input.rename {
+ border-width: 0;
+ min-width: 0;
+ padding: 2px 0;
+}
+
+input.rename:focus,
+#directory-tree .tree-row .rename-placeholder > input:focus,
+#directory-tree .tree-row > .file-row .rename-placeholder > input:focus,
+#directory-tree .tree-row > input:focus,
+#directory-tree .tree-row > .file-row > input:focus {
+ background-color: var(--cros-bg-color);
+ border: none;
+ border-radius: 2px;
+ caret-color: var(--cros-textfield-cursor-color-focus);
+ color: var(--cros-text-color-primary);
+ outline: 2px solid var(--cros-focus-ring-color);
+}
+
+input.rename::selection,
+#directory-tree .tree-row .rename-placeholder > input::selection,
+#directory-tree .tree-row > .file-row .rename-placeholder > input::selection,
+#directory-tree .tree-row > input::selection,
+#directory-tree .tree-row > .file-row > input::selection {
+ background-color: var(--cros-text-highlight-color);
+}
+
+input.rename {
+ font: inherit;
+ line-height: 1;
+ text-align: inherit;
+}
+
+.table-row-cell .filename-label {
+ flex: initial;
+}
+
+.table-row-cell input.rename {
+ flex: auto;
+}
+
+body.files-ng #list-container input.rename {
+ margin-inline-end: 4px;
+}
+
+li[renaming=''] .filename-label,
+li[renaming=''] .badge {
+ display: none;
+}
+
+/* Text box used for renaming in the thumbnail list. */
+.thumbnail-grid input.rename {
+ box-sizing: border-box;
+ width: 100%;
+}
+
+/* The cr.ui.Table representing the detailed file list. */
+.detail-table {
+ width: 100%;
+}
+
+.dialog-footer > .left {
+ align-items: center;
+ display: flex;
+ flex: auto;
+ flex-direction: row;
+}
+
+.dialog-footer > .right {
+ align-items: center;
+ flex: none;
+ justify-content: flex-end;
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+/* Table splitter element */
+.table-header-splitter:last-child {
+ display: none;
+}
+
+/* Container for a table header. */
+.table-header {
+ border-bottom: 1px solid var(--cros-separator-color);
+ box-sizing: border-box;
+ color: var(--cros-text-color-secondary);
+ flex: none;
+ font-family: 'Roboto Medium';
+ /* The desired height plus the border bottom. */
+ height: calc(56px + 1px);
+ line-height: 20px;
+}
+
+/* Text label in a table header. */
+.table-header-label {
+ color: inherit;
+ font-weight: normal;
+ line-height: 20px;
+ margin: 0 10px;
+ margin-inline-end: 0;
+ margin-inline-start: 32px;
+}
+
+.table-row-cell > * {
+ align-items: center;
+ flex: auto;
+ flex-direction: row;
+ padding: 0 10px;
+}
+
+.table-row-cell {
+ color: var(--cros-text-color-secondary);
+}
+
+.table-row-cell > .detail-name {
+ display: flex;
+}
+
+.table-row-cell > .detail-name {
+ color: var(--cros-text-color-primary);
+}
+
+.table-row-cell {
+ align-items: center;
+}
+
+#list-container li.table-row {
+ height: 40px;
+ line-height: 40px;
+}
+
+/* The icon in the name column. See file_types.css for specific icons. */
+.detail-icon {
+ height: 24px;
+ width: 24px;
+}
+
+.status-icon {
+ height: 24px;
+ margin-inline-end: 10px;
+ width: 24px;
+}
+
+/* The managed icon in the details list for DLP restricted files. */
+.dlp-managed-icon {
+ -webkit-mask-image: url(chrome://resources/images/business.svg);
+ -webkit-mask-position: right center;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: 16px 16px;
+ background-color: currentColor;
+ color: var(--cros-icon-color-primary);
+ height: 24px;
+ margin-inline-end: 10px;
+ margin-inline-start: auto;
+ width: 24px;
+}
+
+body.files-ng #list-container list li .detail-icon {
+ color: var(--cros-icon-color-primary);
+ height: 40px;
+ margin-inline-end: 8px;
+ margin-inline-start: 8px;
+ width: 40px;
+}
+
+#list-container li .detail-checkmark {
+ background-position: center;
+ background-repeat: no-repeat;
+ color: var(--cros-icon-color-selection);
+ height: 28px;
+ isolation: isolate;
+ opacity: 0;
+ position: absolute;
+ transition: opacity 220ms ease;
+ width: 28px;
+}
+
+body.check-select #list-container li[selected] .detail-checkmark {
+ opacity: 1;
+}
+
+#list-container list li .detail-thumbnail {
+ height: 28px;
+ overflow: hidden;
+ width: 28px;
+}
+
+#list-container list li .detail-thumbnail > .thumbnail {
+ -webkit-user-drag: none;
+ background-color: var(--cros-highlight-color-hover);
+ background-position: center;
+ background-size: cover;
+ border-radius: 14px;
+ height: 100%;
+ isolation: isolate;
+ opacity: 1;
+ width: 100%;
+}
+
+body.check-select #list-container list li[selected] .detail-thumbnail
+> .thumbnail {
+ /* Fade out after checkmark fades in. */
+ animation: fadeOut 0ms 220ms ease backwards;
+ opacity: 0;
+}
+
+#tasks-menu cr-menu-item.change-default .icon.start {
+ display: none;
+}
+
+#action-bar {
+ display: flex;
+ flex: none;
+}
+
+.dialog-header.files-ng #action-bar {
+ align-items: center;
+ height: 48px;
+}
+
+.detail-name > * {
+ align-items: center;
+ display: flex;
+ flex: none;
+}
+
+#filename-input-box {
+ align-items: center;
+ display: flex;
+ flex: auto;
+ margin-inline-end: 30px;
+ margin-inline-start: 30px;
+}
+
+body:not([type='saveas-file']) #filename-input-box {
+ display: none;
+}
+
+/* Dimmed items */
+
+body[type='folder'] .file,
+body[type='upload-folder'] .file,
+.dialog-container[connection='OFFLINE'] .dim-offline,
+body[block-hosted-docs] .file.dim-hosted {
+ opacity: var(--cros-disabled-opacity);
+}
+
+/* Invisible container for elements representing files while dragging. */
+body.files-ng #drag-container {
+ background-color: transparent;
+ height: calc(12px + 40px + 8px + 8px);
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: calc(8px + 192px + 8px + 8px);
+ z-index: -1; /* below .dialog-container */
+}
+
+body.files-ng #drag-container .drag-box {
+ background-color: var(--cros-bg-color-elevation-2);
+ border-radius: 2px;
+ box-shadow: var(--cros-elevation-2-shadow);
+ box-sizing: border-box;
+ height: 40px;
+ position: absolute;
+ width: 192px;
+}
+
+body.files-ng #drag-container .drag-contents {
+ align-items: center;
+ display: flex;
+ left: 8px;
+ padding-inline-end: 2px;
+ padding-inline-start: 8px;
+ right: 8px;
+ top: 12px;
+}
+
+body.files-ng #drag-container .drag-multiple {
+ left: calc(8px + 8px);
+ right: calc(8px + 8px);
+ top: calc(12px + 8px);
+}
+
+body.files-ng #drag-container .detail-icon {
+ border-radius: 50%;
+ flex: none;
+}
+
+body.files-ng #drag-container .detail-icon[file-type-icon] {
+ color: var(--cros-icon-color-primary);
+}
+
+body.files-ng #drag-container .label {
+ color: var(--cros-text-color-primary);
+ overflow: hidden;
+ padding: 0 10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+body.files-ng #drag-container .drag-bubble {
+ background-color: var(--cros-icon-color-prominent);
+ border-radius: 12px;
+ color: var(--cros-bg-color);
+ font-size: 14px;
+ font-weight: 700;
+ height: 24px;
+ line-height: 24px;
+ max-width: fit-content;
+ padding: 0 8px;
+ position: absolute;
+ right: calc(8px * 0.5);
+ white-space: nowrap;
+}
+
+html[dir=rtl] body.files-ng #drag-container .drag-bubble {
+ left: calc(8px * 0.5);
+ right: unset;
+}
+
+/* TODO(fukino): Gather menu-related definitions into one place. */
+cr-menu#file-context-menu {
+ min-width: 208px;
+ z-index: 600; /* Must be below the overlay pane (1000). */
+}
+
+cr-menu#file-context-menu > :not(hr) {
+ padding-inline-end: 8px;
+}
+
+cr-menu#file-context-menu.toolbar-menu > .hide-on-toolbar {
+ display: none;
+}
+
+cr-menu.chrome-menu hr {
+ color: transparent;
+ font-size: 0;
+}
+
+body[drive='unmounted'] .dialog-container #list-container,
+body[drive='mounting'] .dialog-container #list-container,
+body[drive='error'] .dialog-container #list-container,
+body[unformatted] .dialog-container #list-container {
+ opacity: 0;
+}
+
+.buttonbar > * {
+ position: relative;
+}
+
+#list-container .table-header-inner {
+ height: 100%;
+}
+
+#list-container .table-header-cell:hover {
+ background-color: inherit;
+}
+
+#list-container .table-header-cell:first-child {
+ box-sizing: border-box;
+ display: flex;
+ padding-inline-start: 8px;
+}
+
+body.files-ng #list-container .table-header-cell:first-child {
+ padding-inline-start: 0;
+}
+
+body.files-ng .table-header-cell {
+ padding-bottom: 12px;
+ padding-top: 12px;
+}
+
+html:not(.pointer-active) body.files-ng .table-header-cell,
+body.files-ng .table-header-cell:active {
+ cursor: pointer;
+}
+
+body.files-ng #list-container .table-header-cell:first-child
+.table-header-label {
+ margin-inline-start: 16px;
+}
+
+.table-header-label .sort-icon {
+ --cr-icon-button-fill-color: var(--cros-icon-color-secondary);
+ --cr-icon-button-icon-size: 16px;
+ --cr-icon-button-hover-background-color: var(--cros-ripple-color);
+ --cr-icon-button-size: 32px;
+ border-radius: 50%;
+ cursor: default;
+}
+
+.table-header-label .sort-icon:active {
+ background: var(--cros-icon-button-pressed-color);
+}
+
+html:not(.pointer-active) .table-header-label .sort-icon:hover,
+.table-header-label .sort-icon:active {
+ cursor: pointer;
+}
+
+.table-header-label .not-sorted .sort-icon {
+ display: none;
+}
+
+html.pointer-active .table-header-label .sort-icon:not(:active):hover,
+html.col-resize .table-header-label .sort-icon:not(:active):hover {
+ --cr-icon-button-hover-background-color: none;
+}
+
+body.files-ng .table-label-container {
+ align-items: center;
+ display: flex;
+ height: 32px;
+}
+
+/* Text in the column header */
+body.files-ng .table-label-container > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/** Size column is aligned to right. */
+body.files-ng .table-header-label.size .table-label-container {
+ justify-content: flex-end;
+}
+
+body.files-ng #list-container li.table-row {
+ box-sizing: border-box;
+ height: 40px;
+ line-height: 20px;
+}
+
+body.files-ng.check-select #list-container list li[selected] .detail-thumbnail
+> .thumbnail {
+ animation: none;
+}
+
+body.files-ng #list-container list li .detail-thumbnail > .thumbnail {
+ border-radius: 50%;
+ height: 24px;
+ margin-inline-start: 8px;
+ margin-top: 4px;
+ width: 24px;
+}
+
+body.files-ng .table-row-cell > * {
+ color: var(--cros-text-color-secondary);
+ padding: 0;
+ padding-inline-start: 32px;
+ padding-top: 0 !important;
+}
+
+body.files-ng .table-header-splitter {
+ background: none;
+ height: 32px;
+ margin-top: 12px;
+ width: auto;
+}
+
+.table-header-splitter .splitter-icon {
+ /*
+ * TODO(crbug.com/1268206): the icon is not in disabled state, a new css
+ * variable needs to be created and applied here.
+ */
+ --cr-icon-button-fill-color: var(--cros-icon-color-disabled);
+ --cr-icon-button-hover-background-color: var(--cros-ripple-color);
+ --cr-icon-button-icon-size: 32px;
+ --cr-icon-button-margin-start: 0px;
+ --cr-icon-button-size: 32px;
+ cursor: default;
+ height: 32px;
+}
+
+.table-header-splitter .splitter-icon:active {
+ background: var(--cros-icon-button-pressed-color);
+}
+
+html:not(.pointer-active) .table-header-splitter .splitter-icon:hover {
+ cursor: col-resize;
+}
+
+html.pointer-active .table-header-splitter .splitter-icon:not(:active):hover,
+html.col-resize .table-header-splitter .splitter-icon:not(:active):hover {
+ --cr-icon-button-hover-background-color: none;
+}
+
+body.files-ng #list-container .table-row-cell .size {
+ padding-inline-end: 5px;
+ padding-inline-start: 22px;
+}
+
+body.files-ng.check-select list:focus li[selected] .table-row-cell > * {
+ color: var(--cros-text-color-selection);
+}
+
+body.files-ng .table-row-cell:first-child > * {
+ padding-inline-start: 0;
+}
+
+body.files-ng .table-row-cell .filename-label {
+ color: var(--cros-text-color-primary);
+ padding-top: 0;
+}
+
+body.files-ng.check-select list:focus li[selected] .table-row-cell
+.filename-label {
+ color: var(--cros-text-color-selection);
+}
+
+body.files-ng #list-container li .detail-checkmark {
+ -webkit-mask-image: url(../images/files/ui/list_check.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: currentColor;
+ background-image: none;
+ height: 40px;
+ width: 40px;
+}
+
+body.files-ng grid li .detail-checkmark {
+ width: 32px !important;
+}
+
+body.files-ng #list-container :focus li .detail-checkmark {
+ color: var(--cros-icon-color-selection);
+}
+
+body.files-ng #list-container li .detail-checkmark {
+ color: var(--cros-icon-color-secondary);
+}
+
+body.files-ng #list-container li .detail-thumbnail {
+ height: 32px;
+ width: 32px;
+}
+
+.detail-pinned {
+ display: none;
+}
+
+body.files-ng #list-container
+ li.pinned:not([renaming]):not(.dim-offline) .detail-pinned {
+ -webkit-mask-image: url(../images/files/ui/offline.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: currentColor;
+ display: flex;
+ height: 40px;
+ width: 40px;
+}
+
+#new-folder-button {
+ flex: none;
+}
+
+.cr-dialog-container.files-ng #default-task-dialog {
+ width: 352px;
+}
+
+.install-linux-package-details-frame {
+ border: 1px solid var(--cros-separator-color);
+ display: block;
+ height: 150px;
+ overflow: scroll;
+ padding: 8px 10px;
+ user-select: text;
+}
+
+.files-ng .install-linux-package-details-frame {
+ margin-top: 16px;
+}
+
+.cr-dialog-container.files-ng .install-linux-package-details-label {
+ margin-bottom: 10px;
+}
+
+.cr-dialog-container.files-ng .install-linux-package-detail-label {
+ color: var(--cros-text-color-primary);
+ display: inline;
+ margin-inline-end: 5px;
+}
+
+.cr-dialog-container.files-ng .install-linux-package-detail-value {
+ color: var(--cros-text-color-secondary);
+ display: inline;
+ margin-bottom: 5px;
+ white-space: pre-wrap;
+}
+
+list.autocomplete-suggestions {
+ background-color: var(--cros-bg-color-elevation-2);
+ border-radius: 3px;
+ box-shadow: var(--cros-elevation-2-shadow);
+ box-sizing: border-box; /* To match the width with the search box's. */
+ color: var(--cros-menu-label-color);
+ flex: none;
+ margin-inline-start: -47px;
+ margin-top: 7px;
+ overflow: hidden;
+ padding: 8px 0;
+ position: fixed;
+ /* TODO(crbug.com/1289086): Remove the hard-code with, use JS to set it. */
+ width: 286px !important; /* This overrides the value specified by script. */
+ z-index: 550;
+}
+
+list.autocomplete-suggestions > li {
+ align-items: center;
+ display: flex;
+ height: 32px;
+}
+
+/* "search drive" row */
+list.autocomplete-suggestions > li:first-of-type {
+ color: var(--cros-text-color-secondary);
+}
+
+list.autocomplete-suggestions > li > div.detail-icon {
+ flex: none;
+ height: 32px;
+ width: 32px;
+}
+
+list.autocomplete-suggestions > li > div.detail-text {
+ flex: auto;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+
+list.autocomplete-suggestions > li > div.detail-text em {
+ font-style: normal;
+}
+
+list.autocomplete-suggestions > li > div[search-icon] {
+ -webkit-mask-image: url(../images/files/ui/search.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: currentColor;
+}
+
+list.autocomplete-suggestions > [selected],
+list.autocomplete-suggestions > [lead] {
+ background-color: var(--cros-menu-item-background-hover);
+}
+
+#gear-menu > cr-menu-item:not(.menuitem-button),
+#sort-menu > cr-menu-item {
+ margin-inline-end: 50px;
+}
+
+.cr-dialog-container.files-ng #suggest-app-dialog.cr-dialog-frame {
+ max-width: unset !important;
+ min-width: unset !important;
+ width: 735px;
+}
+
+.error-dialog-frame .error-dialog-img {
+ background-image: -webkit-image-set(
+ url(chrome://theme/IDR_ERROR_NETWORK_GENERIC) 1x,
+ url(chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x) 2x);
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 40px;
+}
+
+.error-dialog-frame .cr-dialog-cancel {
+ display: none;
+}
+
+.error-dialog-frame .cr-dialog-close,
+.error-dialog-frame .cr-dialog-title {
+ display: none;
+}
+
+.error-dialog-frame .cr-dialog-text {
+ text-align: center;
+}
+
+/* Feedback panels */
+
+.files-feedback-panels {
+ align-items: flex-end;
+ bottom: 24px;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: 24px;
+ z-index: 502; /* Above splitter, but below quickview. */
+}
+
+.signals-overscroll {
+ min-height: calc(68px + 24px);
+}
+
+files-toggle-ripple {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+#quick-view {
+ z-index: 505; /* Must be above the scroll bar (500). */
+}
+
+files-toast {
+ /* Must be above the splitter (500) but below menu-like UI (550). */
+ z-index: 520;
+}
+
+/* File type filter buttons in Recents view. */
+#file-type-filter-container {
+ display: flex;
+ font-size: 13px;
+ padding: 12px 0 12px 12px;
+}
+
+.file-type-filter-button {
+ --border-color: var(--cros-button-stroke-color-secondary);
+ --cr-button-height: 32px;
+ --hover-bg-color: var(--cros-ripple-color);
+ --hover-border-color: var(--cros-button-stroke-color-secondary);
+ --ink-color: var(--cros-ripple-color);
+ --ripple-opacity: 100%;
+ --text-color: var(--cros-text-color-secondary);
+ border-radius: 20px;
+ margin-inline: 4px;
+ min-width: auto;
+ outline: none;
+}
+
+.file-type-filter-button.active {
+ /* Intentionally no hover color for active state. */
+ --hover-bg-color: none;
+ --ink-color: var(--cros-ripple-color-prominent);
+ --text-color: var(--cros-text-color-selection);
+ background-color: var(--cros-highlight-color);
+ border-color: transparent;
+}
+
+html.pointer-active .file-type-filter-button:not(:active) {
+ --hover-bg-color: none;
+ cursor: default;
+}
+
+html.focus-outline-visible .file-type-filter-button:focus {
+ outline: 2px solid var(--cros-focus-ring-color);
+ outline-offset: 2px;
+}
+
+/*
+ * Preventing FOUC
+ */
+cr-input:not(:defined),
+files-tooltip:not(:defined) {
+ display: none;
+}
+
+/*
+ * Banner styles.
+ */
+#banners > * {
+ align-items: center;
+ display: flex !important;
+ max-height: 0;
+ opacity: 0;
+ transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+ opacity 150ms ease 50ms;
+ visibility: hidden;
+}
+
+#banners > *:not([hidden]) {
+ background-color: var(--cros-bg-color-elevation-1);
+ border-radius: 8px;
+ box-shadow: var(--cros-elevation-1-shadow);
+ height: auto;
+ margin-bottom: 4px;
+ margin-inline-end: 16px;
+ margin-inline-start: 0;
+ margin-top: 16px;
+ max-height: 300px;
+ min-height: 46px;
+ opacity: 1;
+ padding-bottom: 12px;
+ padding-inline-end: 8px;
+ padding-inline-start: 0;
+ padding-top: 12px;
+ visibility: visible;
+}