file_manager/css/file_manager.css

/*
 * Copyright (c) 2011 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.
 */

/* Outer frame of the dialog. */
body {
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
  -webkit-transition: opacity 0.07s linear;
  -webkit-user-select: none;
  display: -webkit-box;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

/* The top title of the dialog. */
.dialog-title {
  -webkit-box-sizing: border-box;
  -webkit-padding-start: 15px;
  background-image: -webkit-linear-gradient(top, #fff,#f6f6f6);
  border-bottom: 1px #d6d9e3 solid;
  color: #42506c;
  font-size: 15px;
  font-weight: bold;
  height: 32px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Breadcrumbs and things under the title but above the list view. */
.dialog-header {
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  display: -webkit-box;
  margin: 15px;
  margin-bottom: 4px;
}

/* Container for the detail and thumbnail (not implemented yet) list views. */
.dialog-body {
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  border: 1px #aaa solid;
  border-radius: 3px;
  display: -webkit-box;
  margin: 15px;
  margin-top: 0;
}

/* Container for the ok/cancel buttons. */
.dialog-footer {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
  margin: 15px;
  margin-top: 0;
}

/* The container for breadcrumb elements. */
.breadcrumbs {
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  display: -webkit-box;
  font-size: 15px;
  line-height: 15px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A single directory name in the list of path breadcrumbs. */
.breadcrumb-path {
  color: #265692;
  cursor: pointer;
  font-size: 14px;
}

/* The final breadcrumb, representing the current directory. */
.breadcrumb-last {
  color: #666;
  cursor: inherit;
  font-weight: bold;
}

/* The > arrow between breadcrumbs. */
.breadcrumb-spacer {
  -webkit-margin-start: 7px;
  -webkit-margin-end: 4px;
  color: #aaa;
  font-size: 12px;
}

button.detail-view > img,
button.thumbnail-view > img {
  position: relative;
  top: 1px;
}

.list-container {
  -webkit-box-orient: vertical;
  -webkit-box-flex: 1;
  display: -webkit-box;
  position: relative;
}

/* The cr.ui.Grid representing the detailed file list. */
.thumbnail-grid {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  overflow-y: scroll;
}

/* An item in the thumbnail view. */
.thumbnail-item {
  margin-top: 10px;
  margin-left: 10px;
  width: 120px;
  height: 120px;
  text-align: center;
}

.thumbnail-item > input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
}

.thumbnail-item > div.img-container {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  height: 91px;
  margin: 2px;
  width: 116px;
}

.thumbnail-item > div.img-container > img {
  max-width: 110px;
  max-height: 85px;
}

.thumbnail-item > div.filename-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text box used for renaming in the detail list. */
.detail-table input.rename {
  -webkit-margin-start: -5px;
  margin-top: 1px;
  position: absolute;
}

/* Text box used for renaming in the thumbnail list. */
.thumbnail-grid input.rename {
  -webkit-margin-start: -2px;
  position: absolute;
}

/* The cr.ui.Table representing the detailed file list. */
.detail-table {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/* The right-column 'Preview' column container. */
.preview-container {
  -webkit-border-start: 1px #aaa solid;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  width: 225px;
}

/* cr.ui.Table has a black focus border by default, which we don't want. */
.detail-table:focus {
  border: 0;
}

/* Table splitter element */
.table-header-splitter {
  -webkit-border-start: 1px #aaa solid;
  background-color: inherit;
  height: 20px;
  margin-top: 4px;
}

/* Container for a table header. */
.table-header {
  -webkit-box-sizing: border-box;
  border-bottom: 1px #aaa solid;
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e8e8e8);
  height: 28px;
}

/* Text label in a table header. */
.table-header-label {
  margin-top: 6px;
}

/* First column has no label, so we want the sort indicator to take up the
 * whole space.
 */
.table-header-cell:first-child .table-header-sort-image-desc:after,
.table-header-cell:first-child .table-header-sort-image-asc:after {
  -webkit-padding-start: 0;
}

/* The first child of a list cell. */
.table-row-cell > * {
  -webkit-margin-start: 5px;
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  display: -webkit-box;
}

.detail-table li.table-row .table-row-cell:first-child div {
  margin: 0px;
}

.file-checkbox {
  -webkit-margin-end: 0px;
  margin-top: 5px;
  opacity: 0.1;
}

li.thumbnail-item .file-checkbox {
  opacity: 0;
}

li.table-row:hover .file-checkbox,
li.thumbnail-item:hover .file-checkbox {
  opacity: 0.5;
}

.file-checkbox:hover,
li.table-row[selected] .file-checkbox,
li.thumbnail-item[selected] .file-checkbox {
  opacity: 1 !important;
}

/* Column text containers. */
.detail-name, .detail-size, .detail-date {
  padding-top: 2px;
}

.detail-icon-container {
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  -webkit-box-pack: end;
  display: -webkit-box;
}

/* The icon in the name column. */
.detail-icon {
  background-image: url(../images/filetype_generic.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 24px;
  width: 24px;
}

/* Icon for files in the detail list. */
.detail-icon[iconType="audio"] {
  background-image: url(../images/filetype_audio.png);
}

.detail-icon[iconType="doc"] {
  background-image: url(../images/filetype_doc.png);
}

.detail-icon[iconType="folder"] {
  background-image: url(../images/filetype_folder.png);
}

.detail-icon[iconType="html"] {
  background-image: url(../images/filetype_html.png);
}

.detail-icon[iconType="image"] {
  background-image: url(../images/filetype_image.png);
}

.detail-icon[iconType="pdf"] {
  background-image: url(../images/filetype_pdf.png);
}

.detail-icon[iconType="presentation"] {
  background-image: url(../images/filetype_presentation.png);
}

.detail-icon[iconType="spreadsheet"] {
  background-image: url(../images/filetype_spreadsheet.png);
}

.detail-icon[iconType="text"] {
  background-image: url(../images/filetype_text.png);
}

.detail-icon[iconType="video"] {
  background-image: url(../images/filetype_video.png);
}

/* The filename text in the preview pane. */
.preview-filename {
  -webkit-margin-start: 8px;
  color: #666;
  font-weight: bold;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The preview image. */
.preview-img {
  margin-top: 10px;
  max-height: 300px;
  max-width: 190px;
}

.preview-img[src=''] {
  visibility: hidden;
}

/* Decoration when multiple images are selected. */
.preview-img.multiple-selected {
  -webkit-box-shadow: 5px 5px 0 #aaa;
}

/* Checkboard background to distinguish images with alpha channels. */
.preview-img.transparent-background {
  /* ../images/preview-background.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOTQAADiYBwNzaZQAAAAd0SU1FB9sDExUSAaQ/5TMAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAQ0lEQVRYw+3VsQkAMQwDQOfJRt7r9/FQ3ilDuAiBUy84UKFVVX8M0t2TenxxOQAAAAAAAAB7+ueZaQIAAAAAAIC3AQceAAfi8EmRSgAAAABJRU5ErkJggg==);
}

/* The task buttons at the bottom of the preview pane. */
.task-buttons {
  padding: 4px;
  overflow-y: auto;
}

.task-button {
  display: block;
  width: 100%;
  text-align: left;
}

.task-button > img {
  position: relative;
  top: 2px;
  padding-after: 5px;
  padding-right: 5px;
}

/* The selection summary text at the bottom of the preview pane. */
.preview-summary {
  border-top: 1px #aaa solid;
  color: #666;
  font-weight: bold;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-footer .filename-label {
  -webkit-box-orient: horizontal;
  color: #666;
  display: -webkit-box;
  font-weight: bold;
  padding-top: 4px;
  padding-right: 4px;
}

.filename-input {
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  display: -webkit-box;
}

/* A horizontal spring. */
.horizontal-spacer {
  -webkit-box-orient: horizontal;
  -webkit-box-flex: 1;
  display: -webkit-box;
}

/* A vertical spring. */
.vertical-spacer {
  -webkit-box-orient: vertical;
  -webkit-box-flex: 1;
  display: -webkit-box;
}