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