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 #user-image.loading {
 106   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 #new-flow-throbber {
 115   display: none;
 116 }
 117
 118 .new-gaia-flow #new-flow-throbber {
 119   display: block;
 120 }
 121
 122 .image-loading.user-image .new-gaia-flow #step-logo {
 123   display: none;
 124 }
 125
 126 html[dir=rtl] #user-image-preview {
 127   float: left;
 128 }
 129
 130 #user-image-preview-img {
 131   display: block;
 132   max-height: 220px;
 133   max-width: 220px;
 134 }
 135
 136 #user-image-preview-img.animated-transform {
 137   -webkit-transition: -webkit-transform 200ms linear;
 138 }
 139
 140 .camera.live #user-image-preview-img {
 141   display: none;
 142 }
 143
 144 .camera.flip-x #user-image-preview-img {
 145   -webkit-transform: rotateY(180deg);
 146 }
 147
 148 .default-image #user-image-preview-img {
 149   background: white;
 150   border: solid 1px #cacaca;
 151   border-radius: 4px;
 152   padding: 2px;
 153 }
 154
 155 .user-image-stream-area {
 156   display: none;
 157   padding: 0;
 158   position: relative;
 159 }
 160
 161 .camera.live .user-image-stream-area {
 162   display: block;
 163 }
 164
 165 #user-image-stream-crop {
 166   -webkit-transition: -webkit-transform 200ms linear;
 167   height: 220px;
 168   overflow: hidden;
 169   position: relative;
 170   width: 220px;
 171 }
 172
 173 .flip-x #user-image-stream-crop {
 174   -webkit-transform: rotateY(180deg);
 175 }
 176
 177 /* TODO(ivankr): specify dimensions from real capture size. */
 178 .user-image-stream {
 179   border: solid 1px #cacaca;
 180   height: 220px;
 181   /* Center image for 4:3 aspect ratio. */
 182   left: -16.6%;
 183   position: absolute;
 184   visibility: hidden;
 185 }
 186
 187 .online .user-image-stream {
 188   visibility: visible;
 189 }
 190
 191 #user-image-preview-caption {
 192   color: dimGray;
 193   font-size: smaller;
 194   margin: 8px 4px;
 195 }
 196
 197 .camera #user-image-preview-caption {
 198   display: none;
 199 }
 200
 201 #flip-photo {
 202   -webkit-transition: opacity 75ms linear;
 203   background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat;
 204   border: none;
 205   bottom: 44px;  /* 8px + image bottom. */
 206   display: block;
 207   height: 32px;
 208   opacity: 0;
 209   position: absolute;
 210   right: 8px;
 211   width: 32px;
 212   z-index: 1;
 213 }
 214
 215 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
 216 .flip-trick {
 217   -webkit-transform: translateZ(1px);
 218 }
 219
 220 html[dir=rtl] #flip-photo {
 221   left: 8px;
 222   right: auto;
 223 }
 224
 225 /* "Flip photo" button is hidden during flip animation. */
 226 .camera.online:not(.animation) #flip-photo,
 227 .camera.phototaken:not(.animation) #flip-photo {
 228   opacity: 0.75;
 229 }
 230
 231 #discard-photo,
 232 #take-photo {
 233   display: none;
 234   height: 25px;
 235   margin: 4px 1px;
 236   padding: 0;
 237   width: 220px;
 238 }
 239
 240 .camera:not(.live) #discard-photo {
 241   background: url(chrome://theme/IDR_USER_IMAGE_RECYCLE)
 242       no-repeat center center;
 243   display: block;
 244 }
 245
 246 .camera.live.online #take-photo {
 247   background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE)
 248       no-repeat center -1px;
 249   display: block;
 250 }
 251
 252 #user-image-preview .perspective-box {
 253   -webkit-perspective: 600px;
 254   border: solid 1px #cacaca;
 255   border-radius: 4px;
 256   padding: 2px;
 257   width: 220px;
 258 }
 259
 260 #user-image-attribution {
 261   /* Turned off for now. */
 262   display: none;
 263 }
 264
 265 #user-image .step-contents {
 266   -webkit-margin-start: 31px;
 267   margin-bottom: 30px;
 268 }
 269
 270 .user-image-stream-area .spinner {
 271   display: none;
 272   height: 44px;
 273   left: 50%;
 274   margin-left: -22px;
 275   margin-top: -22px;
 276   position: absolute;
 277   top: 50%;
 278   width: 44px;
 279 }
 280
 281 .camera.live:not(.online) .user-image-stream-area .spinner {
 282   display: block;
 283 }
 284
 285 #user-images-loading {
 286   color: #9c9c9c;
 287 }
 288