/*
* 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;
}