src/chrome/browser/resources/options/chromeos/change_picture_options.css

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