Index: chrome/browser/resources/chromeos/login/oobe.css |
diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css |
index 7af7c90102ef6e515a872e051b43a172193a1c1f..677ead660fd2b020926e943341403569f95fb8f0 100644 |
--- a/chrome/browser/resources/chromeos/login/oobe.css |
+++ b/chrome/browser/resources/chromeos/login/oobe.css |
@@ -488,26 +488,104 @@ html[oobe=old] #user-image { |
max-width: 220px; |
} |
+/** |
+ * #user-image-preview can have the following classes: |
+ * .default-image: one of the default images is selected (including the grey |
+ * silhouette); |
+ * .profile-image: profile image is selected; |
+ * .profile-image-loading: profile image is being loaded; |
+ * .online: camera is streaming video; |
+ * .camera: camera (live or photo) is selected; |
+ * .live: camera is in live mode (no photo taken yet/last photo removed). |
+ */ |
+ |
html[dir=rtl] #user-image-preview { |
float: left; |
} |
#user-image-preview-img { |
+ display: block; |
max-height: 220px; |
max-width: 220px; |
} |
+html[camera=webrtc] .camera.live #user-image-preview-img { |
+ display: none; |
+} |
+ |
.default-image #user-image-preview-img { |
background: white; |
border: solid 1px #cacaca; |
} |
+#user-image-stream-area { |
+ display: none; |
+ height: 220px; |
+ overflow: hidden; |
+ position: relative; |
+ width: 220px; |
+} |
+ |
+html[camera=webrtc] .camera.live #user-image-stream-area { |
+ display: block; |
+} |
+ |
+/* TODO(ivankr): specify dimensions from real capture size. */ |
+#user-image-stream { |
+ border: solid 1px #cacaca; |
+ height: 220px; |
+ /* Center image for 4:3 aspect ratio. */ |
+ left: -16.6%; |
+ position: absolute; |
+ visibility: hidden; |
+} |
+ |
+.online #user-image-stream { |
+ visibility: visible; |
+} |
+ |
+#user-image-stream-area .spinner { |
+ -webkit-margin-before: 14px; |
+ -webkit-margin-start: 14px; |
+ display: none; |
+ position: absolute; |
+} |
+ |
+.camera.live:not(.online) #user-image-stream-area .spinner { |
+ display: block; |
+} |
+ |
#user-image-preview-caption { |
color: dimGray; |
font-size: smaller; |
margin: 8px 4px; |
} |
+.camera #user-image-preview-caption { |
+ display: none; |
+} |
+ |
+#discard-photo, |
+#take-photo { |
+ display: none; |
+ height: 25px; |
+ margin: 4px 1px; |
+ padding: 0; |
+ width: 220px; |
+} |
+ |
+html[camera=webrtc] .camera:not(.live) #discard-photo { |
+ background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') |
+ no-repeat center 0; |
+ display: block; |
+} |
+ |
+html[camera=webrtc] .camera.live.online #take-photo { |
+ background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') |
+ no-repeat center -1px; |
+ display: block; |
+} |
+ |
/* TODO(nkostylev): Remove footer, button-strip styles. */ |
#footer { |
height: 28px; /* Same as button height */ |