| /* 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. */ |
| |
| input:focus, |
| button:focus { |
| outline-color: rgb(77, 144, 254); |
| } |
| |
| .action-choice { |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| -webkit-user-select: none; |
| background: white; |
| bottom: 0; |
| color: black; |
| display: -webkit-box; |
| font-family: Open Sans, Droid Sans Fallback, sans-serif; |
| font-size: 84%; |
| left: 0; |
| margin: 0; |
| overflow: hidden; |
| padding: 10px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .action-choice[loading] .content, |
| .action-choice:not([loading]) .loading { |
| display: none; |
| } |
| |
| .action-choice h1 { |
| font-size: 14px; |
| font-weight: normal; |
| line-height: 1.5; |
| margin: 5px 3px; |
| } |
| |
| /* The loading preview */ |
| |
| .loading { |
| -webkit-box-align: center; |
| -webkit-box-orient: vertical; |
| color: #333; |
| display: -webkit-box; |
| font-size: 12px; |
| } |
| |
| .spinner { |
| background-image: url('../images/common/spinner.svg'); |
| background-size: 100%; |
| height: 21px; |
| left: 44px; |
| margin-left: -10px; |
| margin-top: -10px; |
| opacity: 0.5; |
| position: absolute; |
| top: 29px; |
| width: 21px; |
| } |
| |
| .device-type { |
| height: 64px; |
| position: relative; |
| width: 116px; |
| } |
| |
| .device-type[device-type=usb] { |
| background-image: -webkit-image-set( |
| url('../images/volumes/device_usb_large.png') 1x, |
| url('../images/volumes/2x/device_usb_large.png') 2x); |
| } |
| |
| .device-type[device-type=sd] { |
| -webkit-transform: rotate(-90deg); |
| background-image: -webkit-image-set( |
| url('../images/volumes/device_sd_large.png') 1x, |
| url('../images/volumes/2x/device_sd_large.png') 2x); |
| bottom: 10px; /* Adjust the rotated image to not overlap with element below */ |
| } |
| |
| /* The action choice content */ |
| |
| .content { |
| -webkit-box-align: start; |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| height: 100%; |
| overflow: hidden; |
| position: relative; |
| width: 100%; |
| } |
| |
| .previews { |
| -webkit-box-orient: horizontal; |
| -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, |
| rgba(0, 0, 0, 1) 80px); |
| display: -webkit-box; |
| position: relative; |
| width: 100%; |
| } |
| |
| .img-container { |
| height: 120px; |
| margin: 0 2px; |
| overflow: hidden; |
| position: relative; |
| width: 120px; |
| } |
| |
| .img-container > img { |
| -webkit-user-drag: none; |
| position: absolute; |
| } |
| |
| .counter { |
| color: #808080; |
| margin: 5px 3px; |
| width: 100%; |
| } |
| |
| .choices { |
| width: 100%; |
| } |
| |
| /* 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. */ |
| #actions-list { |
| display: block; |
| max-height: 328px; |
| outline: none; |
| overflow: auto; |
| padding: 1px 0; |
| position: relative; |
| } |
| |
| #actions-list > li { |
| cursor: default; |
| list-style-type: none; |
| } |
| |
| #actions-list > li > div { |
| background-position: 5px center; |
| background-repeat: no-repeat; |
| line-height: 39px; |
| padding-left: 43px; |
| } |
| |
| #actions-list > [selected] { |
| background-color: #dedede; |
| } |
| |
| #actions-list:focus > [selected] { |
| background-color: rgb(203, 219, 241); |
| } |
| |
| #actions-list > [selected]:hover { |
| background-color: rgb(193, 211, 236); |
| border-color: hsl(214, 91%, 85%); |
| } |
| |
| #actions-list > :hover { |
| background-color: #f1f1f1; |
| border-color: hsl(214, 91%, 85%); |
| } |
| |
| #actions-list > li > div.disabled { |
| opacity: 0.5; |
| } |