/* Copyright 2014 The Chromium Authors
* 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;
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-sys-app_base_shaded);
display: flex;
flex: auto;
flex-direction: row;
overflow: hidden;
padding-inline-end: 16px;
padding-top: 16px;
position: relative;
}
/* List and grid are inside this container. */
.dialog-main {
align-items: stretch;
background-color: var(--cros-sys-app_base);
border-radius: 16px 16px 0 0;
display: flex;
flex: auto;
flex-direction: column;
overflow: hidden;
}
/* 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-inline-start: 16px;
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 xf-tree-item > input::selection {
background-color: var(--cros-sys-highlight_text);
}
#directory-tree xf-tree-item > .external-link-icon iron-icon {
padding: 10px;
}
/* ::slotted() can't work with ::part(), so we can't define these rules inside
xf-tree-item. https://github.com/w3c/csswg-drafts/issues/3896 */
#directory-tree xf-tree-item > .root-eject:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_subtle);
display: block;
}
#directory-tree xf-tree-item[selected] >
.root-eject:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_prominent);
}
html.pointer-active #directory-tree xf-tree-item >
.root-eject:not(:active):hover::part(hoverBackground) {
display: none;
}
/* Splitter. */
/* Prevent the slot children (tree and table list) to show in the wrong position
before host web component resolves. */
.splitter:not(:defined) {
column-gap: 24px;
display: flex;
width: 100%;
}
.splitter {
--xf-splitter-tracker-offset: 16px;
--xf-splitter-z-index: 500; /* Must be below the contextmenu (600). */
}
html.pointer-active .splitter:not(.splitter-active):hover {
--xf-splitter-cursor: default;
--xf-splitter-hover-color: none;
}
html.col-resize .splitter:not(.splitter-active):hover {
--xf-splitter-cursor: col-resize;
--xf-splitter-hover-color: none;
}
/* Breadcrumbs and things under the title but above the list view. */
.dialog-header {
align-items: center;
background: none;
border-bottom: 1px solid transparent;
box-sizing: border-box;
color: var(--cros-sys-on_surface_variant);
display: flex;
flex: none;
flex-direction: row;
height: 57px;
overflow: hidden;
transition: background 220ms ease;
}
body.check-select .dialog-header {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: var(--cros-sys-on_primary_container);
}
/* 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-sys-app_base);
}
.dialog-header > .spacer {
flex: 1 0 8px;
}
.dialog-header cr-button {
--hover-bg-color: var(--cros-sys-hover_on_subtle);
--ink-color: var(--cros-sys-ripple_neutral_on_subtle);
--ripple-opacity: 100%;
--text-color: currentColor;
border: none;
border-radius: 18px;
box-sizing: border-box;
color: var(--cros-sys-on_surface);
cursor: pointer;
height: 36px;
min-width: 48px;
position: relative;
z-index: 1;
}
html.pointer-active .dialog-header cr-button:not(:active):hover {
--hover-bg-color: none;
cursor: default;
}
.dialog-header cr-button::after {
content: '';
height: 48px;
position: absolute;
width: 48px;
}
.dialog-header cr-button[menu-shown] {
background-color: var(--cros-sys-primary_container);
color: var(--cros-sys-on_primary_container);
}
.dialog-header cr-button:not([aria-haspopup]):active {
background-color: var(--cros-sys-pressed_on_subtle);
}
html.focus-outline-visible .dialog-header cr-button:not(:active):focus {
outline: 2px solid var(--cros-sys-focus_ring);
}
/** 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-sys-ripple_neutral_on_subtle);
}
.dialog-header iron-icon,
.dialog-header .icon {
height: 16px;
width: 16px;
}
.dialog-header cr-button.icon-button {
border-radius: 12px;
height: 40px;
margin: 4px;
min-width: 40px;
padding: 10px;
width: 40px;
}
.dialog-header cr-button.icon-button[aria-haspopup] {
--ink-color: var(--cros-sys-ripple_primary);
}
.dialog-header cr-button.icon-button > .icon {
background-position: center;
background-repeat: no-repeat;
height: 20px;
position: absolute;
width: 20px;
}
.dialog-header cr-button.icon-button > xf-icon {
position: absolute;
}
.dialog-header #tasks {
color: var(--cros-sys-primary);
font: var(--cros-button-2-font);
margin: 0 8px;
padding-bottom: 0;
padding-inline: 16px;
padding-top: 0;
}
.dialog-header #tasks[multiple] {
padding-inline-end: 12px;
}
.dialog-header cr-button > .icon,
.dialog-header #search-box .clear,
.dialog-header #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: 8px;
height: 48px;
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-sys-input_field_on_base);
}
.dialog-header #search-box cr-input {
--cr-input-background-color: transparent;
--cr-input-border-bottom: transparent;
--cr-input-border-radius: 0;
--cr-input-color: var(--cros-sys-on_surface);
--cr-input-error-display: none;
--cr-input-focus-color: transparent;
--cr-input-min-height: 20px;
--cr-input-placeholder-color: var(--cros-sys-secondary);
--cr-input-padding-end: 0;
--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;
}
#files-selected-label {
display: none;
font: var(--cros-button-1-font);
}
body.files-ng #files-selected-label {
margin-inline: 8px 12px;
}
body.check-select #files-selected-label {
display: block;
}
#cancel-selection-button {
--ink-color: var(--cros-sys-ripple_neutral_on_subtle);
border: none;
box-shadow: none;
color: currentColor;
display: flex;
text-transform: none;
}
body.files-ng #cancel-selection-button {
height: 32px;
margin-inline-start: 12px;
min-width: 32px;
padding: 6px;
width: 32px;
}
html.focus-outline-visible body.files-ng #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
outline: 2px solid var(--cros-sys-focus_ring);
}
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: currentColor;
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-v1 #search-button {
border: 0;
margin: 0;
min-width: 0;
padding: 0;
visibility: hidden;
width: 0;
}
/* Search box */
#search-box {
display: flex;
flex: none;
font: var(--cros-body-2-font);
}
.dialog-header.files-ng #search-box cr-input::part(input) {
caret-color: var(--cros-sys-primary);
margin-inline-end: 16px;
}
body.check-select-v1 #search-box {
visibility: hidden;
}
.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: 32px;
margin-inline-end: 4px;
padding: 0;
width: 32px;
}
html:not(.pointer-active) .dialog-header.files-ng #search-box .clear:hover {
background-color: var(--cros-sys-hover_on_subtle);
}
.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-sys-on_surface);
font: var(--cros-button-2-font);
margin-inline-end: 16px;
margin-inline-start: 12px;
}
.dialog-header.files-ng cr-toggle {
--cr-toggle-checked-bar-color: var(--cros-sys-primary_container);
/* bar color above already defines the opacity, so use 100% here */
--cr-toggle-checked-bar-opacity: 100%;
--cr-toggle-checked-button-color: var(--cros-sys-primary);
--cr-toggle-checked-ripple-color: transparent;
--cr-toggle-unchecked-bar-color: var(--cros-sys-secondary);
--cr-toggle-unchecked-button-color: var(--cros-sys-surface_variant);
--cr-toggle-unchecked-ripple-color: transparent;
--cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
--cr-toggle-ripple-diameter: 32px;
margin-inline: 6px;
margin-top: 2px;
}
/* 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-sys-focus_ring);
}
/* 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-sys-app_base);
border-top: 1px solid var(--cros-sys-separator);
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-sys-input_field_on_base);
--cr-input-border-radius: 8px;
--cr-input-color: var(--cros-sys-on_surface);
--cr-input-error-color: var(--cros-sys-error);
--cr-input-error-display: none;
--cr-input-focus-color: var(--cros-sys-primary);
--cr-input-min-height: 36px;
--cr-input-padding-end: 16px;
--cr-input-padding-start: 16px;
--cr-input-placeholder-color: var(--cros-sys-secondary);
font: var(--cros-body-2-font);
width: 100%;
}
.dialog-footer .buttonbar {
display: flex;
height: 36px;
}
.dialog-footer .select {
background-color: var(--cros-sys-input_field_on_base);
border: 0;
border-radius: 8px;
cursor: pointer;
margin-inline-start: 16px;
max-width: 152px;
min-height: 36px;
min-width: 104px;
outline: none;
padding: 0 48px 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-sys-secondary);
content: '';
height: 36px;
position: absolute;
right: 0;
width: 36px;
}
.dialog-footer div.select:not(:active):focus {
outline: 2px solid var(--cros-sys-focus_ring);
}
.dialog-footer div.select > span {
display: inline-block;
line-height: 36px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.dialog-footer div.select > div.options {
background-color: var(--cros-sys-base_elevated);
border-radius: 8px;
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-sys-on_surface);
font: var(--cros-button-2-font);
line-height: 36px;
min-height: 36px;
padding: 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-sys-hover_on_subtle);
}
.dialog-footer select:hover {
border-image: none;
}
html.focus-outline-visible .dialog-footer select:focus {
outline: 2px solid var(--cros-sys-focus_ring);
outline-offset: 2px;
}
/** Reset the hover color when using keyboard to navigate the dropdown items. */
html.focus-outline-visible .dialog-footer div.select > div.options option:hover,
html.focus-outline-visible
.dialog-footer div.select > div.options:not(:hover) option.selected {
background-color: unset;
}
html.focus-outline-visible
.dialog-footer div.select > div.options option:hover::after,
html.focus-outline-visible
.dialog-footer div.select > div.options:not(:hover) option.selected::after {
border: 2px solid var(--cros-sys-focus_ring);
border-radius: 8px;
content: '';
height: 32px; /* option height - 2 x border width */
left: 0;
position: absolute;
width: calc(100% - 4px); /* 2 x border width */
}
.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;
padding-bottom: 4px;
padding-top: 4px;
}
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-sys-disabled_container);
border: 1px solid var(--cros-sys-separator);
border-radius: 8px;
display: flex;
flex: none;
height: 32px;
padding-inline: 8px 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);
height: 20px;
margin-inline-end: 8px;
width: 20px;
}
#read-only-label {
flex: none;
font: var(--cros-button-1-font);
}
.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 {
align-items: center;
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-sys-illo-color1-1);
--empty-folder-svg-file-color: var(--cros-sys-illo-secondary);
--empty-folder-svg-ellipse-color: var(--cros-sys-illo-color1);
--empty-folder-svg-folder-color: var(--cros-sys-illo-color1-2);
margin-top: 64px;
}
.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 + 49px);
}
#empty-folder > .label {
color: var(--cros-sys-on_surface);
font: var(--cros-body-2-font);
margin-top: 16px;
text-align: center;
width: 320px;
/* Ensure links in label are on top when not hidden so a click is not
absorbed by an empty file-list. */
z-index: 500; /* Must be below the contextmenu (600). */
}
#empty-folder > .label.no-image {
/* With no image, the margin-top should include the image margin and
height. */
margin-top: calc(16px + 64px + 153px)
}
.list-view #empty-folder > .label.no-image {
/* With no image, the margin-top should include the image margin and
height, and also the .table-header of the list view. */
margin-top: calc(16px + 64px + 49px + 153px)
}
#empty-folder #empty-folder-title {
font: var(--cros-button-2-font);
}
#empty-folder > .label > span#empty-folder-desc > a {
color: var(--cros-sys-primary);
font: var(--cros-body-2-font);
}
#empty-folder > .label > span#empty-folder-desc > a:visited {
color: var(--cros-sys-primary);
}
#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: var(--cros-sys-highlight_shape);
border: 2px solid var(--cros-sys-primary);
border-radius: 4px;
box-sizing: border-box;
display: flex;
outline: 1px solid var(--cros-sys-separator);
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 + 49px);
}
@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;
padding-inline: calc(20px - 16px); /* 16px is the padding of the thumbnail. */
width: 100%;
}
body.files-ng grid .grid-title {
box-sizing: border-box;
color: var(--cros-sys-on_surface);
font: var(--cros-button-2-font);
padding-bottom: 6px;
padding-inline-start: 16px;
padding-top: 14px;
/* Make sure clicking this area can unselect file grids. */
pointer-events: none;
width: 100%;
}
/* Only add margin-top for non-first grid-title, this is mainly because
we don't have separator between the action bar and list container, which
makes the first group heading in the list container looks higher than
others (because of action bar's bottom padding), so in order to make all
group headings looks in the same height, we manually add a margin-top for
non-first group headings. */
grid .grid-title ~ .grid-title {
margin-top: 16px;
}
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;
}
#list-container.thumbnail-view li xf-inline-status {
align-items: center;
color: var(--cros-sys-secondary);
display: flex;
position: absolute;
right: 5px;
top: 5px;
}
#list-container.thumbnail-view li.directory xf-inline-status {
height: 100%;
right: 10px;
top: 0;
}
#list-container.thumbnail-view .thumbnail-grid:focus .thumbnail-item[selected] xf-inline-status,
#list-container.thumbnail-view .thumbnail-grid:focus .thumbnail-item[lead] xf-inline-status {
color: var(--cros-sys-on_secondary_container);
}
#list-container.thumbnail-view .thumbnail-grid .thumbnail-item[selected] xf-inline-status,
#list-container.thumbnail-view .thumbnail-grid .thumbnail-item[lead] xf-inline-status {
color: var(--cros-sys-on_surface);
}
body.check-select #list-container.thumbnail-view .thumbnail-grid:focus .thumbnail-item[selected] xf-inline-status,
body.check-select #list-container.thumbnail-view .thumbnail-grid:focus .thumbnail-item[selected] xf-inline-status {
color: var(--cros-sys-on_primary_container);
}
/* Hide inline status when renaming directories in grid view. */
#list-container.thumbnail-view li.directory[renaming] xf-inline-status {
display: none;
}
/* Only display outlines for entries with thumbnails. */
#list-container.thumbnail-view li:has(.thumbnail) xf-inline-status {
--xf-icon-color-outline: var(--cros-sys-app_base);
}
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;
position: absolute;
right: 0;
}
.thumbnail-bottom .detail-icon {
flex: none;
height: 16px;
width: 16px;
}
.thumbnail-bottom .filename-label {
flex: auto;
font: var(--cros-body-2-font);
padding-inline-end: 8px;
}
/* Styles specific for the grid view. */
.thumbnail-grid .thumbnail-item {
background-color: var(--cros-sys-app_base);
border-radius: 12px;
height: 160px;
margin-inline-start: 16px;
margin-top: 16px;
overflow: hidden;
position: relative;
vertical-align: top; /* Prevent vertical spacing for wrapped inline box. */
width: 160px;
}
.thumbnail-grid .thumbnail-item.directory.pinned .filename-label {
padding-inline-end: 24px;
}
.thumbnail-item.directory {
box-shadow: none;
height: 48px;
}
#list-container .thumbnail-grid li {
border: 1px solid var(--cros-sys-separator);
}
grid .thumbnail-bottom .detail-icon {
height: 48px;
padding-inline-end: 6px;
padding-inline-start: 6px;
width: 32px;
}
html:not(.pointer-active) grid .thumbnail-bottom .detail-icon,
grid .thumbnail-bottom .detail-icon:active {
cursor: pointer;
}
.thumbnail-grid .thumbnail-frame {
background-color: var(--cros-sys-app_base_shaded);
height: 100%;
width: 100%;
}
.thumbnail-grid .img-container {
color: var(--cros-sys-on_surface_bodytext);
height: 112px;
width: 100%;
}
.thumbnail-grid .img-container > .thumbnail {
-webkit-user-drag: none;
background-position: center;
background-repeat: no-repeat;
height: 100%;
opacity: 1;
position: absolute;
width: 100%;
}
.thumbnail-grid .thumbnail-bottom {
background-color: var(--cros-sys-app_base);
color: var(--cros-sys-on_surface);
height: 48px;
}
.thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[selected].directory
.thumbnail-bottom,
.thumbnail-grid .thumbnail-item[lead].directory
.thumbnail-bottom,
.thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom .icon-badge,
.thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom .icon-badge {
background-color: var(--cros-sys-surface_variant);
}
.thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[selected].directory
.thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead].directory
.thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom .icon-badge,
.thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom .icon-badge {
background-color: var(--cros-sys-secondary_container);
}
.thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[selected].directory
.thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead].directory
.thumbnail-bottom {
color: var(--cros-sys-on_secondary_container);
}
body.check-select .thumbnail-grid:focus .thumbnail-item[selected]
.thumbnail-bottom,
body.check-select .thumbnail-grid:focus .thumbnail-item[lead]
.thumbnail-bottom,
body.check-select .thumbnail-grid:focus
.thumbnail-item[selected].directory .thumbnail-bottom,
body.check-select .thumbnail-grid:focus .thumbnail-item[lead].directory
.thumbnail-bottom {
background-color: var(--cros-sys-primary_container);
color: var(--cros-sys-on_primary_container);
}
body.check-select #list-container .thumbnail-grid:focus
.thumbnail-item[lead],
#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-sys-focus_ring);
box-shadow: 0 0 0 1px var(--cros-sys-focus_ring);
}
body.check-select #list-container .thumbnail-grid
.thumbnail-item[lead],
#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-sys-on_surface_variant);
box-shadow: 0 0 0 1px var(--cros-sys-on_surface_variant);
}
.thumbnail-grid > .spacer.folder-spacer {
height: 5px;
}
.thumbnail-grid > .spacer {
height: 0;
}
body:not(.check-select) .thumbnail-grid.image-dominant
.can-hide-filename.thumbnail-loaded:not([selected]) .thumbnail-bottom {
display: none;
}
/* 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 {
height: 240px;
margin-bottom: 32px;
margin-top: 20px;
padding-inline: 32px;
}
#default-task-dialog.bottom-shadow::after {
background:
linear-gradient(transparent 0, var(--cros-sys-base_elevated) 100%);
bottom: 24px;
content: '';
height: 40px;
left: 0;
pointer-events: none;
position: absolute;
width: 100%
}
#default-tasks-list li {
border-radius: 8px;
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 {
left: 52px;
overflow: hidden;
position: absolute;
right: 52px;
text-overflow: ellipsis;
}
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],
body.files-ng #list-container list > li[selected] .icon-badge,
body.files-ng #list-container list > li:active .icon-badge,
body.files-ng #list-container list > li.accepts .icon-badge,
body.files-ng #list-container list > li[lead] .icon-badge {
background-color: var(--cros-sys-surface_variant);
}
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],
body.files-ng #list-container list:focus > li[selected] .icon-badge,
body.files-ng #list-container list:focus > li.accepts[selected] .icon-badge,
body.files-ng #list-container list:focus > li[lead] .icon-badge {
background-color: var(--cros-sys-secondary_container);
}
body.files-ng #default-tasks-list:focus > li[selected],
body.files-ng #default-tasks-list > li[selected] {
background-color: var(--cros-sys-primary_container);
color: var(--cros-sys-on_primary_container);
outline: none;
}
body.files-ng #default-tasks-list li[selected]::after {
-webkit-mask-image: url(../images/common/ic_selected.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
background-color: var(--cros-sys-on_primary_container);
content: ' ';
height: 40px;
position: absolute;
right: 6px;
top: 0;
width: 40px;
}
html[dir='rtl'] body.files-ng #default-tasks-list li[selected]::after {
left: 6px;
right: unset;
}
#list-container li {
border: 2px 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-sys-on_surface);
font: var(--cros-button-2-font);
/* The desired height plus the border width. */
height: calc(56px + 1px);
padding-inline-start: 20px;
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.check-select #list-container list:focus > li[lead],
body.check-select #list-container list:focus > li[selected] {
background-color: var(--cros-sys-primary_container);
}
body.check-select #list-container list:focus > li[lead] {
border: 2px solid var(--cros-sys-focus_ring);
}
body.check-select #list-container list > li[lead],
body.check-select #list-container list > li[selected] {
background-color: var(--cros-sys-surface_variant);
}
body.check-select #list-container list > li[lead] {
border: 2px solid var(--cros-sys-on_surface_variant);
}
#list-container grid > .accepts .thumbnail-bottom {
background-color: var(--cros-sys-surface_variant);
}
#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-sys-hover_on_prominent);
}
}
.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 > .file-row .rename-placeholder > input:focus,
#directory-tree .tree-row > .file-row > input:focus {
background-color: var(--cros-sys-app_base);
border: none;
border-radius: 2px;
color: var(--cros-sys-on_surface);
outline: 2px solid var(--cros-sys-focus_ring);
}
input.rename::selection,
#directory-tree .tree-row > .file-row .rename-placeholder > input::selection,
#directory-tree .tree-row > .file-row > input::selection {
background-color: var(--cros-sys-highlight_text);
}
input.rename {
font: var(--cros-body-2-font);
line-height: 1;
text-align: inherit;
}
.table-row-cell .filename-label {
flex: initial;
}
.table-row-cell input.rename {
flex: auto;
}
#list-container input.rename {
margin-inline-end: 12px;
}
/* The file name's direction is always LTR even in RTL mode
(.entry-name in common.css), so the inline-end above won't work in RTL
mode, we need to have the inline-start here. */
html[dir='rtl'] #list-container input.rename {
margin-inline-end: 0;
margin-inline-start: 12px;
}
li[renaming=''] .filename-label {
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-sys-on_surface);
flex: none;
/* The desired height plus the border bottom. */
height: calc(48px + 1px);
line-height: 20px;
}
/* Text label in a table header. */
.table-header-label {
color: inherit;
font: var(--cros-button-2-font);
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 > .detail-name {
display: flex;
}
.table-row-cell {
align-items: center;
}
/* 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);
}
/* The encrypted icon in the details list for Google Drive CSE files. */
.encrypted-icon {
-webkit-mask-image: url(../images/files/ui/encrypted.svg);
}
.dlp-managed-icon,
.encrypted-icon {
-webkit-mask-position: right center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 16px 16px;
background-color: currentColor;
height: 24px;
margin-inline-start: auto;
padding-inline-start: 8px;
width: 24px;
}
.dlp-managed-icon {
visibility: hidden;
}
.dlp-managed-icon.is-dlp-restricted {
visibility: visible;
}
#list-container list li .detail-icon {
height: 48px;
margin-inline-end: 20px;
margin-inline-start: calc(18px - 2px); /* 2px is the border width of li. */
width: 24px;
}
#list-container li .detail-checkmark {
background-position: center;
background-repeat: no-repeat;
isolation: isolate;
opacity: 0;
position: absolute;
/* TODO(b/298339491) Temporary fix for the colored square issue after deselecting file row. */
/* transition: opacity 220ms ease; */
}
body.check-select #list-container li[selected] .detail-checkmark {
opacity: 1;
}
#list-container list li .detail-thumbnail {
overflow: hidden;
}
#list-container list li .detail-thumbnail > .thumbnail {
-webkit-user-drag: none;
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 > *,
body[block-encrypted] .file.dim-encrypted > *,
.thumbnail-grid [disabled] > *,
#detail-table [disabled] > *,
#directory-tree .tree-item[disabled] > .tree-row > .file-row {
opacity: 0.38; /* TODO: no token for this right now. */
}
/* 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-sys-base_elevated);
border-radius: 8px;
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-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-sys-on_surface);
}
body.files-ng #drag-container .label {
color: var(--cros-sys-on_surface);
font: var(--cros-body-2-font);
overflow: hidden;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.files-ng #drag-container .drag-bubble {
background-color: var(--cros-sys-tertiary_container);
border-radius: 12px;
color: var(--cros-sys-on_tertiary_container);
font: var(--cros-button-1-font);
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;
}
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;
}
#list-container .table-header-cell:first-child {
padding-inline-start: 0;
}
.table-header-cell {
padding-bottom: 8px;
padding-top: 8px;
}
html:not(.pointer-active) .table-header-cell,
.table-header-cell:active {
cursor: pointer;
}
#list-container .table-header-cell:first-child
.table-header-label {
margin-inline-start: 20px;
}
.table-header-label .sort-icon {
--cr-icon-button-fill-color: var(--cros-sys-on_surface);
--cr-icon-button-icon-size: 16px;
--cr-icon-button-focus-outline-color: var(--cros-sys-focus_ring);
--cr-icon-button-hover-background-color: var(--cros-sys-hover_on_subtle);
--cr-icon-button-size: 32px;
border-radius: 50%;
cursor: default;
}
.table-header-label .sort-icon:active {
background: var(--cros-sys-pressed_on_subtle);
}
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;
}
.table-label-container {
align-items: center;
display: flex;
height: 32px;
}
/* Text in the column header */
.table-label-container > span {
overflow: hidden;
text-overflow: ellipsis;
}
#list-container li.table-row {
background-color: var(--cros-sys-app_base);
box-sizing: border-box;
font: var(--cros-body-2-font);
height: 48px;
}
.check-select #list-container list li[selected] .detail-thumbnail
> .thumbnail {
animation: none;
}
#list-container list li .detail-thumbnail > .thumbnail {
border-radius: 50%;
height: 24px;
width: 24px;
}
.table-row-cell > * {
color: var(--cros-sys-on_surface);
padding: 0;
padding-inline-start: 32px;
padding-top: 0 !important;
}
.table-row-cell .dlp-managed-icon,
.table-row-cell .encrypted-icon,
.table-row-cell xf-inline-status {
color: var(--cros-sys-secondary);
}
list:focus li[selected] .table-row-cell > * {
color: var(--cros-sys-on_secondary_container);
}
list:focus li[selected] .table-row-cell .dlp-managed-icon,
list:focus li[selected] .table-row-cell .encrypted-icon,
list:focus li[selected] .table-row-cell xf-inline-status {
color: var(--cros-sys-on_secondary_container);
}
.check-select list:focus li[selected] .table-row-cell > * {
color: var(--cros-sys-on_primary_container);
}
.check-select list:focus li[selected] .table-row-cell .dlp-managed-icon,
.check-select list:focus li[selected] .table-row-cell .encrypted-icon,
.check-select list:focus li[selected] .table-row-cell xf-inline-status {
color: var(--cros-sys-on_primary_container);
}
.table-row-cell > .dateholder {
display: flex;
margin-inline-end: 14px;
}
.table-row-cell > .dateholder > .date {
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
.table-row-cell > .dateholder > .dlp-managed-icon,
.table-row-cell > .dateholder > .encrypted-icon {
flex: 0 0 24px;
margin-inline-start: 8px;
}
.table-header-splitter {
background: none;
height: 32px;
margin-top: 8px;
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-sys-outline);
--cr-icon-button-hover-background-color: var(--cros-sys-hover_on_subtle);
--cr-icon-button-icon-size: 32px;
--cr-icon-button-margin-start: 0px;
--cr-icon-button-size: 32px;
--cr-icon-button-stroke-color: var(--cros-sys-outline);
cursor: default;
height: 32px;
}
.table-header-splitter .splitter-icon:active {
background: var(--cros-sys-pressed_on_subtle);
}
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;
}
#list-container .table-row-cell .size {
padding-inline-end: 5px;
padding-inline-start: 32px;
}
.table-row-cell:first-child > * {
padding-inline-start: 0;
}
.table-row-cell .filename-label {
flex-grow: 1;
margin-inline-end: 8px;
padding-top: 0;
}
.check-select li[selected] .filename-label {
font: var(--cros-button-2-font);
}
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: 20px;
width: 20px;
}
list li .detail-checkmark {
margin-inline-start: 2px;
}
grid li .detail-checkmark {
margin-inline-start: 6px;
margin-top: 14px;
}
body.files-ng #list-container :focus li .detail-checkmark {
color: var(--cros-sys-on_primary_container);
}
body.files-ng #list-container li .detail-checkmark {
color: var(--cros-sys-on_surface);
}
/* Hide inline status when renaming in the list view. */
#list-container .list li[renaming] xf-inline-status {
display: none;
}
#new-folder-button {
flex: none;
}
/* Default task dialog has its own background color for title and text
section. */
.cr-dialog-container #default-task-dialog {
/* Override the default padding so we can have background color for different
sections in the dialog. */
padding: 0;
width: 352px;
}
.cr-dialog-container #default-task-dialog .cr-dialog-title {
background-color: var(--cros-sys-surface1);
border-radius: 20px 20px 0 0;
margin-bottom: 0;
padding: 32px 32px 16px;
}
.cr-dialog-container #default-task-dialog .cr-dialog-text {
background-color: var(--cros-sys-surface1);
padding: 0 32px 20px;
}
.install-linux-package-details-frame {
border: 1px solid var(--cros-sys-separator);
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-sys-on_surface);
display: inline;
margin-inline-end: 5px;
}
.cr-dialog-container.files-ng .install-linux-package-detail-value {
color: var(--cros-sys-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);
}
.error-dialog-frame .error-dialog-img {
background-image: 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);
}
#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;
padding-bottom: 12px;
padding-inline: 20px;
padding-top: 12px;
}
.file-type-filter-button {
--border-color: var(--cros-sys-separator);
--cr-button-height: 32px;
--hover-bg-color: var(--cros-sys-hover_on_subtle);
--hover-border-color: var(--cros-sys-separator);
--ink-color: var(--cros-sys-ripple_neutral_on_subtle);
--ripple-opacity: 100%;
--text-color: var(--cros-sys-on_surface);
border-radius: 8px;
font: var(--cros-button-1-font);
margin-inline: 4px;
min-width: auto;
padding-inline: 12px;
}
.file-type-filter-button:first-child {
margin-inline-start: 0;
}
.file-type-filter-button.active {
--text-color: var(--cros-sys-on_secondary_container);
background-color: var(--cros-sys-secondary_container);
}
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-sys-focus_ring);
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-sys-app_base_shaded);
border-radius: 8px;
height: auto;
margin-inline-end: 16px;
margin-inline-start: 16px;
max-height: 300px;
min-height: 46px;
opacity: 1;
padding-bottom: 13px;
padding-inline-end: 8px;
padding-inline-start: 0;
padding-top: 13px;
visibility: visible;
}
#path-display-container {
background-color: var(--cros-sys-app_base);
}
Codebase Browser
chromium