chromium/ui/file_manager/file_manager/foreground/css/file_types.css

/* Copyright 2023 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* TODO(crbug.com/40639927): unify root-type-icon and volume-type-icon into one
 type if possible, called file-type-icon or entry-type-icon say, since there
 is no real need for the root/volume icon distinction for the directory tree
 noting that file-type-icon is also used in lists and menus ;) */

/* Small icons for file types, used in lists and menus. */
[file-type-icon] {
  -webkit-mask-image: url(../images/filetype/filetype_generic.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
}

[file-type-icon='archive'] {
  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
}

[file-type-icon='audio'] {
  -webkit-mask-image: url(../images/filetype/filetype_audio.svg);
}

[file-type-icon='excel'] {
  -webkit-mask-image: url(../images/filetype/filetype_excel.svg);
}

[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder.svg);
}


/* File type icon's background/mask-image needs to be reset to none:
 *  * For [selected], checkmark icon will be displayed.
 *  * For .has-thumbnail, thumbnail background image will be set.
 */
body.check-select #list-container li[selected] [file-type-icon],
#list-container li [file-type-icon].has-thumbnail {
  -webkit-mask-image: none;
  background: none;
}

.computers-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/computer.svg);
}

.external-media-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/usb.svg);
}

.shared[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder_shared.svg);
}

.team-drive-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

/* .tree-row > .file-row icon for files-ng.  */
.tree-row > .file-row > [file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder.svg);
}

.tree-row > .file-row > .shared[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder_shared.svg);
}

.tree-row > .file-row > .team-drive-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_team_drive.svg);
}

[file-type-icon='gdoc'] {
  -webkit-mask-image: url(../images/filetype/filetype_gdoc.svg);
}

[file-type-icon='gdraw'] {
  -webkit-mask-image: url(../images/filetype/filetype_gdraw.svg);
}

[file-type-icon='glink'] {
  -webkit-mask-image: url(../images/filetype/filetype_generic.svg);
}

[file-type-icon='gsheet'] {
  -webkit-mask-image: url(../images/filetype/filetype_gsheet.svg);
}

[file-type-icon='gslides'] {
  -webkit-mask-image: url(../images/filetype/filetype_gslides.svg);
}

[file-type-icon='gtable'] {
  -webkit-mask-image: url(../images/filetype/filetype_gtable.svg);
}

[file-type-icon='gform'] {
  -webkit-mask-image: url(../images/filetype/filetype_gform.svg);
}

[file-type-icon='gmap'] {
  -webkit-mask-image: url(../images/filetype/filetype_gmap.svg);
}

[file-type-icon='gsite'] {
  -webkit-mask-image: url(../images/filetype/filetype_gsite.svg);
}

[file-type-icon='gmaillayout'] {
  -webkit-mask-image: url(../images/filetype/filetype_gmaillayout.svg);
}

[file-type-icon='image'] {
  -webkit-mask-image: url(../images/filetype/filetype_image.svg);
}

[file-type-icon='pdf'] {
  -webkit-mask-image: url(../images/filetype/filetype_pdf.svg);
}

[file-type-icon='ppt'] {
  -webkit-mask-image: url(../images/filetype/filetype_ppt.svg);
}

[file-type-icon='script'] {
  -webkit-mask-image: url(../images/filetype/filetype_script.svg);
}

[file-type-icon='sites'] {
  -webkit-mask-image: url(../images/filetype/filetype_sites.svg);
}

[file-type-icon='smb'] {
  -webkit-mask-image: url(../images/volumes/smb.svg);
}

[file-type-icon='tini'] {
  -webkit-mask-image: url(../images/filetype/filetype_tini.svg);
}

[file-type-icon='video'] {
  -webkit-mask-image: url(../images/filetype/filetype_video.svg);
}

[file-type-icon='word'] {
  -webkit-mask-image: url(../images/filetype/filetype_word.svg);
}

/* Large generic thumbnails, used when a file does not have a thumbnail. */
.no-thumbnail[generic-thumbnail] {
  -webkit-mask-image: url(../images/files/ui/filetype_placeholder_generic.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 48px;
  background-color: currentColor;
}

.no-thumbnail[generic-thumbnail='encrypted'] {
  -webkit-mask-image: url(../images/files/ui/encrypted.svg);
}

.no-thumbnail[generic-thumbnail='audio'] {
  -webkit-mask-image: url(../images/filetype/filetype_audio.svg);
}

.no-thumbnail[generic-thumbnail='image'],
.no-thumbnail[generic-thumbnail='raw'] {
  -webkit-mask-image: url(../images/filetype/filetype_image.svg);
}

.no-thumbnail[generic-thumbnail='video'] {
  -webkit-mask-image: url(../images/filetype/filetype_video.svg);
}

/* grid view large icons for known types. */
.no-thumbnail[generic-thumbnail='archive'] {
  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
}

.no-thumbnail[generic-thumbnail='tini'] {
  -webkit-mask-image: url(../images/filetype/filetype_tini.svg);
}

.no-thumbnail[generic-thumbnail='excel'] {
  -webkit-mask-image: url(../images/filetype/filetype_excel.svg);
}

.no-thumbnail[generic-thumbnail='gdoc'] {
  -webkit-mask-image: url(../images/filetype/filetype_gdoc.svg);
}

.no-thumbnail[generic-thumbnail='gdraw'] {
  -webkit-mask-image: url(../images/filetype/filetype_gdraw.svg);
}

.no-thumbnail[generic-thumbnail='gsheet'] {
  -webkit-mask-image: url(../images/filetype/filetype_gsheet.svg);
}

.no-thumbnail[generic-thumbnail='gslides'] {
  -webkit-mask-image: url(../images/filetype/filetype_gslides.svg);
}

.no-thumbnail[generic-thumbnail='gtable'] {
  -webkit-mask-image: url(../images/filetype/filetype_gtable.svg);
}

.no-thumbnail[generic-thumbnail='gform'] {
  -webkit-mask-image: url(../images/filetype/filetype_gform.svg);
}

.no-thumbnail[generic-thumbnail='gmap'] {
  -webkit-mask-image: url(../images/filetype/filetype_gmap.svg);
}

.no-thumbnail[generic-thumbnail='gsite'] {
  -webkit-mask-image: url(../images/filetype/filetype_gsite.svg);
}

.no-thumbnail[generic-thumbnail='gmaillayout'] {
  -webkit-mask-image: url(../images/filetype/filetype_gmaillayout.svg);
}

.no-thumbnail[generic-thumbnail='pdf'] {
  -webkit-mask-image: url(../images/filetype/filetype_pdf.svg);
}

.no-thumbnail[generic-thumbnail='ppt'] {
  -webkit-mask-image: url(../images/filetype/filetype_ppt.svg);
}

.no-thumbnail[generic-thumbnail='script'] {
  -webkit-mask-image: url(../images/filetype/filetype_script.svg);
}

.no-thumbnail[generic-thumbnail='sites'] {
  -webkit-mask-image: url(../images/filetype/filetype_sites.svg);
}

.no-thumbnail[generic-thumbnail='word'] {
  -webkit-mask-image: url(../images/filetype/filetype_word.svg);
}

/* File type icon and thumbnail colors. */
[file-type-icon='gdoc'],
[file-type-icon='script'],
[file-type-icon='tini'],
.no-thumbnail[generic-thumbnail='gdoc'],
.no-thumbnail[generic-thumbnail='script'],
.no-thumbnail[generic-thumbnail='tini'] {
  background-color: var(--cros-sys-progress);
}

[file-type-icon='audio'],
[file-type-icon='gdraw'],
[file-type-icon='image'],
[file-type-icon='gmap'],
[file-type-icon='pdf'],
[file-type-icon='video'],
[file-type-icon='gmaillayout'],
.no-thumbnail[generic-thumbnail='audio'],
.no-thumbnail[generic-thumbnail='gdraw'],
.no-thumbnail[generic-thumbnail='image'],
.no-thumbnail[generic-thumbnail='gmap'],
.no-thumbnail[generic-thumbnail='pdf'],
.no-thumbnail[generic-thumbnail='raw'],
.no-thumbnail[generic-thumbnail='video'],
.no-thumbnail[generic-thumbnail='gmaillayout'] {
  background-color: var(--cros-sys-error);
}

[file-type-icon='gsheet'],
[file-type-icon='gtable'],
.no-thumbnail[generic-thumbnail='gsheet'],
.no-thumbnail[generic-thumbnail='gtable'] {
  background-color: var(--cros-sys-positive);
}

[file-type-icon='gslides'],
.no-thumbnail[generic-thumbnail='gslides'] {
  background-color: var(--cros-sys-warning);
}

[file-type-icon='gform'],
.no-thumbnail[generic-thumbnail='gform'] {
  background-color: var(--cros-sys-file_form);
}

[file-type-icon='gsite'],
[file-type-icon='sites'],
.no-thumbnail[generic-thumbnail='gsite'],
.no-thumbnail[generic-thumbnail='sites'] {
  background-color: var(--cros-sys-file_site);
}

[file-type-icon='excel'],
.no-thumbnail[generic-thumbnail='excel'] {
  background-color: var(--cros-sys-file_ms_excel);
}

[file-type-icon='ppt'],
.no-thumbnail[generic-thumbnail='ppt'] {
  background-color: var(--cros-sys-file_ms_ppt);
}

[file-type-icon='word'],
.no-thumbnail[generic-thumbnail='word'] {
  background-color: var(--cros-sys-file_ms_word);
}

/* Icons for volume types. A ".tree-row > .file-row" component in any rules
   means the rule only matches in files-ng. */
.tree-row > .file-row > [volume-type-icon='archive'] {
  -webkit-mask-image: url(../images/volumes/archive.svg);
}

.tree-row > .file-row > [root-type-icon='my_files'] {
  -webkit-mask-image: url(../images/volumes/my_files.svg);
}

.tree-row > .file-row > [volume-type-icon='downloads'],
.tree-row > .file-row > [file-type-icon='downloads'] {
  -webkit-mask-image: url(../images/volumes/downloads.svg);
}

[file-type-icon='downloads'] {
  -webkit-mask-image: url(../images/volumes/downloads.svg);
}

[file-type-icon='camera-folder'] {
  -webkit-mask-image: url(../images/volumes/camera.svg);
}

.tree-row > .file-row > [volume-type-icon='drive'] {
  -webkit-mask-image: url(../images/volumes/drive.svg);
}

.tree-row > .file-row > [volume-type-icon='shortcut'] {
  -webkit-mask-image: url(../images/volumes/shortcut.svg);
}

.drive-volume > .tree-row > .file-row > [volume-type-icon='drive'],
.tree-row > .file-row > [root-type-icon='drive'] {
  -webkit-mask-image: url(../images/volumes/service_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='shared_drives_grand_root'] {
  -webkit-mask-image: url(../images/volumes/team_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='team_drive'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='computers_grand_root'] {
  -webkit-mask-image: url(../images/volumes/devices.svg);
}

.tree-row > .file-row > [volume-type-icon='computer'] {
  -webkit-mask-image: url(../images/volumes/computer.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_offline'] {
  -webkit-mask-image: url(../images/volumes/offline.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_shared_with_me'] {
  -webkit-mask-image: url(../images/volumes/shared.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_recent'] {
  -webkit-mask-image: url(../images/volumes/recent.svg);
}

.tree-row > .file-row > [volume-type-icon='external_media'],
.tree-row > .file-row > [volume-type-icon='removable'],
.tree-row > .file-row > [root-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/usb.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='sd'] {
  -webkit-mask-image: url(../images/volumes/sd.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='optical'] {
  -webkit-mask-image: url(../images/volumes/cd.svg);
}

.tree-row > .file-row > [volume-type-icon='mtp'] {
  -webkit-mask-image: url(../images/volumes/phone.svg);
}

[file-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='unknown'],
.tree-item .tree-item > .tree-row > .file-row > [volume-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [root-type-icon='recent'] {
  -webkit-mask-image: url(../images/volumes/recent.svg);
}

[file-type-icon='crostini'] {
  -webkit-mask-image: url(../images/volumes/linux_files.svg);
}

.tree-row > .file-row > [root-type-icon='crostini'],
.tree-row > .file-row > [volume-type-icon='crostini'] {
  -webkit-mask-image: url(../images/volumes/linux_files.svg);
}

[file-type-icon='bruschetta'] {
  -webkit-mask-image: url(../images/volumes/bruschetta.svg);
}

.tree-row > .file-row > [root-type-icon='bruschetta'],
.tree-row > .file-row > [volume-type-icon='bruschetta'] {
  -webkit-mask-image: url(../images/volumes/bruschetta.svg);
}

[file-type-icon='android_files'] {
  -webkit-mask-image: url(../images/volumes/android.svg);
}

.tree-row > .file-row > [root-type-icon='android_files'],
.tree-row > .file-row > [volume-type-icon='android_files'] {
  -webkit-mask-image: url(../images/volumes/android.svg);
}

[file-type-icon='plugin_vm'] {
  -webkit-mask-image: url(../images/volumes/plugin_vm_ng.svg);
}

.tree-row > .file-row > [file-type-icon='plugin_vm'] {
  -webkit-mask-image: url(../images/volumes/plugin_vm_ng.svg);
}

.tree-row > .file-row > [volume-type-icon='smb'] {
  -webkit-mask-image: url(../images/volumes/smb.svg);
}

[file-type-icon='trash'] {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

.tree-row > .file-row > [root-type-icon='trash'],
.tree-row > .file-row > [volume-type-icon='trash'] {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

.icon-badge::before {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
}

.icon-badge {
  background-color: var(--cros-sys-app_base);
  border-radius: 10px;
  display: none;
  height: 10px;
  margin-inline-end: -10px;
  position: relative;
  top: 6px;
  width: 10px;
}

html[dir='ltr'] #list-container.thumbnail-view .icon-badge {
  left: -32px;
}

html[dir='rtl'] #list-container.thumbnail-view .icon-badge {
  left: 32px;
}

html[dir='ltr'] #list-container.list-view .icon-badge {
  left: -44px;
}

html[dir='rtl'] #list-container.list-view .icon-badge {
  left: 44px;
}

li.shortcut .icon-badge::before {
  -webkit-mask-image: url(../images/files/ui/shortcut.svg);
  background-color: var(--cros-sys-secondary);
}

li.shortcut .icon-badge {
  display: block;
}

body.check-select li[selected] .icon-badge {
  display: none;
}