chrome/browser/resources/chromeos/login/oobe_screen_user_image.css

   1 /* Copyright 2013 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
   6 #user-image {
   7   min-height: 443px;
   8   padding: 70px 17px 21px;
   9   width: 702px;
  10 }
  11
  12 #user-image.loading {
  13   min-height: 609px; /* Should be the same as #gaia-signin height. */
  14   width: 722px; /* Should be the same as #gaia-signin width. */
  15 }
  16
  17 #user-image-screen-curtain {
  18   -webkit-margin-start: 8px;
  19 }
  20
  21 #user-image-screen-description {
  22   margin-top: 0;
  23 }
  24
  25 #user-image-grid {
  26   -webkit-user-drag: none;
  27   -webkit-user-select: none;
  28   display: inline-block;
  29   height: 264px;
  30   margin: 0;
  31   outline: none;
  32   overflow: hidden;
  33   padding: 0;
  34   width: 400px;
  35 }
  36
  37 #user-image-grid img {
  38   background-color: white;
  39   height: 50px;
  40   vertical-align: middle;
  41   width: 50px;
  42 }
  43
  44 #user-image-grid > li {
  45   border: 1px solid rgba(0, 0, 0, 0.15);
  46   border-radius: 4px;
  47   display: inline-block;
  48   margin: 4px;
  49   padding: 3px;
  50 }
  51
  52 #user-image-grid [selected] {
  53   border: 2px solid rgb(0, 102, 204);
  54   padding: 2px;
  55 }
  56
  57 /**
  58  * #user-image-preview can have the following classes:
  59  * .default-image: one of the default images is selected (including the grey
  60  *                 silhouette);
  61  * .profile-image: profile image is selected;
  62  * .profile-image-loading: profile image is being loaded;
  63  * .online: camera is streaming video;
  64  * .camera: camera (live or photo) is selected;
  65  * .live: camera is in live mode (no photo taken yet/last photo removed).
  66  */
  67 #user-image-preview {
  68   float: right;
  69   margin: 4px;
  70   max-width: 220px;
  71   position: relative;
  72 }
  73
  74 #profile-image {
  75   position: relative;
  76 }
  77
  78 /* White background for spinner styled like user image */
  79 #profile-image .spinner-bg {
  80   background-color: white;
  81   display: none;
  82   height: 50px;
  83   left: 3px;
  84   position: absolute;
  85   top: 3px;
  86   width: 50px;
  87 }
  88
  89 .profile-image-loading #profile-image .spinner-bg {
  90   display: block;
  91 }
  92
  93 #profile-image .spinner {
  94   left: 14px;
  95   position: absolute;
  96   top: 14px;
  97 }
  98
  99 .image-loading.user-image .new-gaia-flow #user-image {
 100   height: 528px; /* Should be the same as #gaia-signin height. */
 101   padding: 0 0 0;
 102   width: 448px; /* Should be the same as #gaia-signin width. */
 103 }
 104
 105 .new-gaia-flow #user-image.loading {
 106   min-height: 528px; /* Should be the same as #gaia-signin height. */
 107   width: 448px; /* Should be the same as #gaia-signin width. */
 108 }
 109
 110 .new-gaia-flow #old-flow-throbber {
 111   display: none;
 112 }
 113
 114 .image-loading.user-image .new-gaia-flow #step-logo {
 115   display: none;
 116 }
 117
 118 html[dir=rtl] #user-image-preview {
 119   float: left;
 120 }
 121
 122 #user-image-preview-img {
 123   display: block;
 124   max-height: 220px;
 125   max-width: 220px;
 126 }
 127
 128 #user-image-preview-img.animated-transform {
 129   -webkit-transition: -webkit-transform 200ms linear;
 130 }
 131
 132 .camera.live #user-image-preview-img {
 133   display: none;
 134 }
 135
 136 .camera.flip-x #user-image-preview-img {
 137   -webkit-transform: rotateY(180deg);
 138 }
 139
 140 .default-image #user-image-preview-img {
 141   background: white;
 142   border: solid 1px #cacaca;
 143   border-radius: 4px;
 144   padding: 2px;
 145 }
 146
 147 .user-image-stream-area {
 148   display: none;
 149   padding: 0;
 150   position: relative;
 151 }
 152
 153 .camera.live .user-image-stream-area {
 154   display: block;
 155 }
 156
 157 #user-image-stream-crop {
 158   -webkit-transition: -webkit-transform 200ms linear;
 159   height: 220px;
 160   overflow: hidden;
 161   position: relative;
 162   width: 220px;
 163 }
 164
 165 .flip-x #user-image-stream-crop {
 166   -webkit-transform: rotateY(180deg);
 167 }
 168
 169 /* TODO(ivankr): specify dimensions from real capture size. */
 170 .user-image-stream {
 171   border: solid 1px #cacaca;
 172   height: 220px;
 173   /* Center image for 4:3 aspect ratio. */
 174   left: -16.6%;
 175   position: absolute;
 176   visibility: hidden;
 177 }
 178
 179 .online .user-image-stream {
 180   visibility: visible;
 181 }
 182
 183 #user-image-preview-caption {
 184   color: dimGray;
 185   font-size: smaller;
 186   margin: 8px 4px;
 187 }
 188
 189 .camera #user-image-preview-caption {
 190   display: none;
 191 }
 192
 193 #flip-photo {
 194   -webkit-transition: opacity 75ms linear;
 195   background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat;
 196   border: none;
 197   bottom: 44px;  /* 8px + image bottom. */
 198   display: block;
 199   height: 32px;
 200   opacity: 0;
 201   position: absolute;
 202   right: 8px;
 203   width: 32px;
 204   z-index: 1;
 205 }
 206
 207 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
 208 .flip-trick {
 209   -webkit-transform: translateZ(1px);
 210 }
 211
 212 html[dir=rtl] #flip-photo {
 213   left: 8px;
 214   right: auto;
 215 }
 216
 217 /* "Flip photo" button is hidden during flip animation. */
 218 .camera.online:not(.animation) #flip-photo,
 219 .camera.phototaken:not(.animation) #flip-photo {
 220   opacity: 0.75;
 221 }
 222
 223 #discard-photo,
 224 #take-photo {
 225   display: none;
 226   height: 25px;
 227   margin: 4px 1px;
 228   padding: 0;
 229   width: 220px;
 230 }
 231
 232 .camera:not(.live) #discard-photo {
 233   background: url(chrome://theme/IDR_USER_IMAGE_RECYCLE)
 234       no-repeat center center;
 235   display: block;
 236 }
 237
 238 .camera.live.online #take-photo {
 239   background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE)
 240       no-repeat center -1px;
 241   display: block;
 242 }
 243
 244 #user-image-preview .perspective-box {
 245   -webkit-perspective: 600px;
 246   border: solid 1px #cacaca;
 247   border-radius: 4px;
 248   padding: 2px;
 249   width: 220px;
 250 }
 251
 252 #user-image-attribution {
 253   /* Turned off for now. */
 254   display: none;
 255 }
 256
 257 #user-image .step-contents {
 258   -webkit-margin-start: 31px;
 259   margin-bottom: 30px;
 260 }
 261
 262 .user-image-stream-area .spinner {
 263   display: none;
 264   height: 44px;
 265   left: 50%;
 266   margin-left: -22px;
 267   margin-top: -22px;
 268   position: absolute;
 269   top: 50%;
 270   width: 44px;
 271 }
 272
 273 .camera.live:not(.online) .user-image-stream-area .spinner {
 274   display: block;
 275 }
 276
 277 #user-images-loading {
 278   color: #9c9c9c;
 279 }
 280