OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 input:focus, | |
6 button:focus { | |
7 outline-color: rgb(77, 144, 254); | |
8 } | |
9 | |
10 .action-choice { | |
11 -webkit-box-align: center; | |
12 -webkit-box-pack: center; | |
13 -webkit-user-select: none; | |
14 background: white; | |
15 bottom: 0; | |
16 color: black; | |
17 display: -webkit-box; | |
18 font-family: Open Sans, Droid Sans Fallback, sans-serif; | |
19 font-size: 84%; | |
20 left: 0; | |
21 margin: 0; | |
22 overflow: hidden; | |
23 padding: 10px; | |
24 position: absolute; | |
25 right: 0; | |
26 top: 0; | |
27 } | |
28 | |
29 .action-choice[loading] .content, | |
30 .action-choice:not([loading]) .loading { | |
31 display: none; | |
32 } | |
33 | |
34 .action-choice h1 { | |
35 font-size: 14px; | |
36 font-weight: normal; | |
37 line-height: 1.5; | |
38 margin: 5px 3px; | |
39 } | |
40 | |
41 /* The loading preview */ | |
42 | |
43 .loading { | |
44 -webkit-box-align: center; | |
45 -webkit-box-orient: vertical; | |
46 color: #333; | |
47 display: -webkit-box; | |
48 font-size: 12px; | |
49 } | |
50 | |
51 .spinner { | |
52 background-image: url('../images/common/spinner.svg'); | |
53 background-size: 100%; | |
54 height: 21px; | |
55 left: 44px; | |
56 margin-left: -10px; | |
57 margin-top: -10px; | |
58 opacity: 0.5; | |
59 position: absolute; | |
60 top: 29px; | |
61 width: 21px; | |
62 } | |
63 | |
64 .device-type { | |
65 height: 64px; | |
66 position: relative; | |
67 width: 116px; | |
68 } | |
69 | |
70 .device-type[device-type=usb] { | |
71 background-image: -webkit-image-set( | |
72 url('../images/volumes/device_usb_large.png') 1x, | |
73 url('../images/volumes/2x/device_usb_large.png') 2x); | |
74 } | |
75 | |
76 .device-type[device-type=sd] { | |
77 -webkit-transform: rotate(-90deg); | |
78 background-image: -webkit-image-set( | |
79 url('../images/volumes/device_sd_large.png') 1x, | |
80 url('../images/volumes/2x/device_sd_large.png') 2x); | |
81 bottom: 10px; /* Adjust the rotated image to not overlap with element below */ | |
82 } | |
83 | |
84 /* The action choice content */ | |
85 | |
86 .content { | |
87 -webkit-box-align: start; | |
88 -webkit-box-orient: vertical; | |
89 display: -webkit-box; | |
90 height: 100%; | |
91 overflow: hidden; | |
92 position: relative; | |
93 width: 100%; | |
94 } | |
95 | |
96 .previews { | |
97 -webkit-box-orient: horizontal; | |
98 -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, | |
99 rgba(0, 0, 0, 1) 80px); | |
100 display: -webkit-box; | |
101 position: relative; | |
102 width: 100%; | |
103 } | |
104 | |
105 .img-container { | |
106 height: 120px; | |
107 margin: 0 2px; | |
108 overflow: hidden; | |
109 position: relative; | |
110 width: 120px; | |
111 } | |
112 | |
113 .img-container > img { | |
114 -webkit-user-drag: none; | |
115 position: absolute; | |
116 } | |
117 | |
118 .counter { | |
119 color: #808080; | |
120 margin: 5px 3px; | |
121 width: 100%; | |
122 } | |
123 | |
124 .choices { | |
125 width: 100%; | |
126 } | |
127 | |
128 /* Padding counterweights negative margins of items, thus eliminating scroll | |
129 bar when it's not needed. Max height is set to fit 8 items before showing | |
130 scroll bar. */ | |
131 #actions-list { | |
132 display: block; | |
133 max-height: 328px; | |
134 outline: none; | |
135 overflow: auto; | |
136 padding: 1px 0; | |
137 position: relative; | |
138 } | |
139 | |
140 #actions-list > li { | |
141 cursor: default; | |
142 list-style-type: none; | |
143 } | |
144 | |
145 #actions-list > li > div { | |
146 background-position: 5px center; | |
147 background-repeat: no-repeat; | |
148 line-height: 39px; | |
149 padding-left: 43px; | |
150 } | |
151 | |
152 #actions-list > [selected] { | |
153 background-color: #dedede; | |
154 } | |
155 | |
156 #actions-list:focus > [selected] { | |
157 background-color: rgb(203, 219, 241); | |
158 } | |
159 | |
160 #actions-list > [selected]:hover { | |
161 background-color: rgb(193, 211, 236); | |
162 border-color: hsl(214, 91%, 85%); | |
163 } | |
164 | |
165 #actions-list > :hover { | |
166 background-color: #f1f1f1; | |
167 border-color: hsl(214, 91%, 85%); | |
168 } | |
169 | |
170 #actions-list > li > div.disabled { | |
171 opacity: 0.5; | |
172 } | |
OLD | NEW |