| /* Copyright (c) 2012 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. */ |
| |
| .photo-import { |
| -webkit-user-select: none; |
| bottom: 0; |
| font-family: Noto Sans UI, Droid Sans Fallback, sans-serif; |
| font-size: 84%; |
| left: 0; |
| margin: 0; |
| overflow: hidden; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .photo-import[loading] grid, |
| .photo-import:not([loading]) .spinner { |
| display: none; |
| } |
| |
| .grid-container { |
| -webkit-box-orient: vertical; |
| bottom: 0; |
| display: -webkit-box; |
| left: 0; |
| padding: 0 20px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .spinner { |
| background-image: url(../images/common/spinner.svg); |
| background-size: 100%; |
| height: 16px; |
| left: 50%; |
| margin-left: -8px; |
| margin-top: -8px; |
| position: absolute; |
| top: 50%; |
| width: 16px; |
| } |
| |
| /* The top and bottom bars with buttons */ |
| |
| .topbar, |
| .bottombar { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| height: 65px; |
| width: 100%; |
| } |
| |
| .caption { |
| font-size: 150%; |
| margin-left: 8px; |
| } |
| |
| .select { |
| -webkit-margin-start: 15px; |
| color: blue; |
| cursor: pointer; |
| padding-top: 5px; |
| } |
| |
| .bottombar label { |
| -webkit-box-flex: 1; |
| display: block; |
| } |
| |
| .bottombar input { |
| margin-top: 10px; |
| } |
| |
| button.import { |
| min-width: 100px; |
| } |
| |
| /* The cr.ui.Grid representing the files. */ |
| .photo-import grid { |
| -webkit-box-flex: 1; |
| overflow-y: auto; |
| width: 100%; |
| } |
| |
| |
| .photo-import grid::-webkit-scrollbar { |
| background: white; |
| width: 8px; |
| } |
| |
| .photo-import grid::-webkit-scrollbar-thumb { |
| background: rgb(200, 200, 200); |
| } |
| |
| /* Keep width in sync with PhotoImport.ITEM_WIDTH */ |
| .grid-container grid { |
| line-height: 0; |
| } |
| |
| .grid-item { |
| border: 2px solid transparent; /* Selection will make the border visible. */ |
| border-radius: 0; |
| height: 120px; |
| margin-bottom: 5px; |
| margin-right: 6px; |
| margin-top: 1px; |
| overflow: visible; |
| padding: 0; |
| position: relative; |
| width: 160px; |
| } |
| |
| .grid-frame { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/hashed_bg.gif') 1x, |
| url('../images/files/ui/2x/hashed_bg.gif') 2x); |
| border: 1px solid #d9d9d9; |
| bottom: 0; |
| left: 0; |
| overflow: hidden; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .grid-item .check { |
| background: -webkit-image-set( |
| url('../images/common/check_blue.png') 1x, |
| url('../images/common/2x/check_blue.png') 2x) no-repeat; |
| bottom: -3px; |
| display: none; |
| height: 26px; |
| left: -4px; |
| position: absolute; |
| width: 26px; |
| } |
| |
| .img-container { |
| height: 100%; |
| position: relative; |
| width: 100%; |
| } |
| |
| .img-container > img { |
| -webkit-user-drag: none; |
| box-sizing: border-box; |
| position: absolute; |
| } |
| |
| .img-container > img:not(.cached) { |
| -webkit-animation: fadeIn ease-in 1; |
| -webkit-animation-duration: 100ms; |
| -webkit-animation-fill-mode: forwards; |
| } |
| |
| @-webkit-keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| .grid-item[lead] { |
| border: 2px solid transparent !important; |
| } |
| |
| .grid-item[selected], |
| .grid-item[lead][selected], |
| .grid-item:hover { |
| border: 2px solid rgb(51, 153, 255) !important; |
| } |
| |
| .grid-item[selected] .check { |
| display: block; |
| } |
| |
| /* Importing dialog styles */ |
| .importing-dialog .cr-dialog-frame { |
| -webkit-box-orient: horizontal; |
| padding: 14px; |
| } |
| |
| .importing-dialog .cr-dialog-frame .progress-container { |
| -webkit-box-flex: 1; |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| } |
| |
| .importing-dialog .img-container { |
| display: -webkit-box; |
| height: 120px; |
| overflow: hidden; |
| width: 120px; |
| } |
| |
| .importing-dialog .content { |
| -webkit-box-flex: 1; |
| -webkit-box-orient: vertical; |
| -webkit-margin-before: 14px; |
| -webkit-margin-start: 15px; |
| display: -webkit-box; |
| } |
| |
| .importing-dialog .cr-dialog-title { |
| display: none; |
| } |
| |
| .importing-dialog .img-container[state=success]::after { |
| background: -webkit-image-set( |
| url('../images/common/check_circled.png') 1x, |
| url('../images/common/2x/check_circled.png') 2x) |
| no-repeat center rgba(20, 20, 22, 0.5); |
| content: ''; |
| height: 120px; |
| left: 0; |
| opacity: 0.9; |
| position: absolute; |
| top: 0; |
| width: 120px; |
| } |
| |
| .importing-dialog .img-container[state=error]::after { |
| background: rgba(20, 20, 22, 0.5); |
| content: ''; |
| height: 120px; |
| left: 0; |
| opacity: 0.9; |
| position: absolute; |
| top: 0; |
| width: 120px; |
| } |