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#user-images-area {
6  display: -webkit-box;
7}
8
9#user-image-grid {
10  -webkit-user-drag: none;
11  -webkit-user-select: none;
12  height: 264px;
13  margin: 10px;
14  outline: none;
15  /* Necessary for correct metrics calculation by grid.js. */
16  overflow: hidden;
17  padding: 0;
18  width: 530px;
19}
20
21#user-image-grid * {
22  margin: 0;
23  padding: 0;
24}
25
26#user-image-grid img {
27  background-color: white;
28  height: 64px;
29  vertical-align: middle;
30  width: 64px;
31}
32
33#user-image-grid > li {
34  border: 1px solid rgba(0, 0, 0, 0.15);
35  border-radius: 4px;
36  display: inline-block;
37  margin: 8px;
38  padding: 3px;
39}
40
41#user-image-grid [selected] {
42  border: 2px solid rgb(0, 102, 204);
43  padding: 2px;
44}
45
46/**
47 * #user-image-preview can have the following classes:
48 * .default-image: one of the default images is selected (including the grey
49 *                 silhouette);
50 * .profile-image: profile image is selected;
51 * .online: camera is streaming video;
52 * .camera: camera (live or photo) is selected;
53 * .live: camera is in live mode (no photo taken yet/last photo removed).
54 */
55
56#user-image-preview {
57  margin: 20px 10px 0 0;
58  max-width: 220px;
59  position: relative;
60}
61
62#user-image-preview .perspective-box {
63  -webkit-perspective: 600px;
64}
65
66#user-image-preview-img {
67  background: white;
68  border: solid 1px #cacaca;
69  border-radius: 4px;
70  max-height: 220px;
71  max-width: 220px;
72  padding: 2px;
73}
74
75.camera.live #user-image-preview-img {
76  display: none;
77}
78
79.animation #user-image-preview-img {
80  -webkit-transition: -webkit-transform 200ms linear;
81}
82
83.camera.flip-x #user-image-preview-img {
84  -webkit-transform: rotateY(180deg);
85}
86
87.user-image-stream-area {
88  display: none;
89  position: relative;
90}
91
92.camera.live .user-image-stream-area {
93  display: block;
94}
95
96#user-image-stream-crop {
97  /* TODO(ivankr): temporary workaround for crbug.com/142347. */
98  -webkit-transform: rotateY(360deg);
99  -webkit-transition: -webkit-transform 200ms linear;
100  height: 220px;
101  overflow: hidden;
102  position: relative;
103  width: 220px;
104}
105
106.flip-x #user-image-stream-crop {
107  -webkit-transform: rotateY(180deg);
108}
109
110/* TODO(ivankr): specify dimensions from real capture size. */
111.user-image-stream {
112  border: solid 1px #cacaca;
113  height: 220px;
114  /* Center image for 4:3 aspect ratio. */
115  left: -16.6%;
116  position: absolute;
117  visibility: hidden;
118}
119
120.online .user-image-stream {
121  visibility: visible;
122}
123
124.user-image-stream-area .spinner {
125  display: none;
126  height: 44px;
127  left: 50%;
128  margin: -22px 0 0 -22px;
129  position: absolute;
130  top: 50%;
131  width: 44px;
132}
133
134.camera.live:not(.online) .user-image-stream-area .spinner {
135  display: block;
136}
137
138#flip-photo {
139  -webkit-transition: opacity 75ms linear;
140  background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat;
141  border: none;
142  bottom: 44px;  /* 8px + image bottom. */
143  display: block;
144  height: 32px;
145  opacity: 0;
146  position: absolute;
147  right: 8px;
148  width: 32px;
149}
150
151/* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
152.flip-trick {
153  -webkit-transform: translateZ(1px);
154}
155
156html[dir=rtl] #flip-photo {
157  left: 8px;
158  right: auto;
159}
160
161/* "Flip photo" button is hidden during flip animation. */
162.camera.online:not(.animation) #flip-photo,
163.camera:not(.live):not(.animation) #flip-photo {
164  opacity: 0.75;
165}
166
167#discard-photo,
168#take-photo {
169  display: none;
170  height: 25px;
171  margin: 4px 1px;
172  padding: 0;
173  width: 220px;
174}
175
176.camera:not(.live) #discard-photo {
177  background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
178      no-repeat center 0;
179  display: block;
180}
181
182.camera.live.online #take-photo {
183  background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
184      no-repeat center -1px;
185  display: block;
186}
187
188#user-image-attribution {
189  -webkit-padding-start: 34px;
190  line-height: 26px;
191}
192
193#user-image-author-website {
194  -webkit-padding-start: 5px;
195}
196