• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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: 18px 10px 0 0;
58  max-width: 220px;
59  position: relative;
60}
61
62#user-image-preview .perspective-box {
63  -webkit-perspective: 600px;
64  border: solid 1px #cacaca;
65  border-radius: 4px;
66  padding: 3px;
67  width: 220px;
68}
69
70#user-image-preview-img {
71  background: white;
72  border: solid 1px #cacaca;
73  border-radius: 4px;
74  max-height: 220px;
75  max-width: 220px;
76  padding: 3px;
77}
78
79.camera.live #user-image-preview-img {
80  display: none;
81}
82
83.animation #user-image-preview-img {
84  -webkit-transition: -webkit-transform 200ms linear;
85}
86
87.camera.flip-x #user-image-preview-img {
88  -webkit-transform: rotateY(180deg);
89}
90
91.user-image-stream-area {
92  display: none;
93  position: relative;
94}
95
96.camera.live .user-image-stream-area {
97  display: block;
98}
99
100#user-image-stream-crop {
101  /* TODO(ivankr): temporary workaround for crbug.com/142347. */
102  -webkit-transform: rotateY(360deg);
103  -webkit-transition: -webkit-transform 200ms linear;
104  height: 220px;
105  overflow: hidden;
106  position: relative;
107  width: 220px;
108}
109
110.flip-x #user-image-stream-crop {
111  -webkit-transform: rotateY(180deg);
112}
113
114/* TODO(ivankr): specify dimensions from real capture size. */
115.user-image-stream {
116  border: solid 1px #cacaca;
117  height: 220px;
118  /* Center image for 4:3 aspect ratio. */
119  left: -16.6%;
120  position: absolute;
121  visibility: hidden;
122}
123
124.online .user-image-stream {
125  visibility: visible;
126}
127
128.user-image-stream-area .spinner {
129  display: none;
130  height: 44px;
131  left: 50%;
132  margin: -22px 0 0 -22px;
133  position: absolute;
134  top: 50%;
135  width: 44px;
136}
137
138.camera.live:not(.online) .user-image-stream-area .spinner {
139  display: block;
140}
141
142#flip-photo {
143  -webkit-transition: opacity 75ms linear;
144  background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat;
145  border: none;
146  bottom: 44px;  /* 8px + image bottom. */
147  display: block;
148  height: 32px;
149  opacity: 0;
150  position: absolute;
151  right: 8px;
152  width: 32px;
153}
154
155/* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
156.flip-trick {
157  -webkit-transform: translateZ(1px);
158}
159
160html[dir=rtl] #flip-photo {
161  left: 8px;
162  right: auto;
163}
164
165/* "Flip photo" button is hidden during flip animation. */
166.camera.online:not(.animation) #flip-photo,
167.camera:not(.live):not(.animation) #flip-photo {
168  opacity: 0.75;
169}
170
171#discard-photo,
172#take-photo {
173  display: none;
174  height: 25px;
175  margin: 4px;
176  padding: 0;
177  width: 220px;
178}
179
180.camera:not(.live) #discard-photo {
181  background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
182      no-repeat center center;
183  display: block;
184}
185
186.camera.live.online #take-photo {
187  background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
188      no-repeat center -1px;
189  display: block;
190}
191
192#user-image-attribution {
193  -webkit-padding-start: 34px;
194  line-height: 26px;
195}
196
197#user-image-author-website {
198  -webkit-padding-start: 5px;
199}
200